5 User Experience Design Lessons from Facebook, Twitter, & LinkedIn’s User Interface
How did some social media sites become popular enough to be used the world over by millions for hours every day? The most prominent reason is – their user experience. We’re looking at Facebook, Twitter, and LinkedIn to analyze their user experience and user interface design and providing tips to marketers to provide experiences that are as immersive.
User Interface (UI) and User Experience (UX) are varying aspects of content marketing but are interrelated as they contribute to the design and visual appeal of your platform. User Interface (UI) is how a user interacts with a website, app, software, etc. User interface design includes all visible aspects (to the user) of the system. A good UI provides a user-friendly and intuitive experience to the user.
User Experience (UX) on the other hand is the emotional response a user has after interacting with your platform. A good UI has a significant impact on the UX, which in turn has power over both – customer experience and retention. Popular social networks are famous for their ‘stickiness’ and even ‘addictive’ qualities.
Here are five lessons to help you improve your brand’s UX inspired by the UI of popular social networking sites – Facebook, LinkedIn, and Twitter.
Learn More: A Quick Guide to UI and UX for Your Marketing Platforms
1. Visual Hierarchy for Intuitive Interactions
The human brain categorizes information by grouping similar visual elements and organizing them into meaningful patterns. Information that is hierarchically organized will be more effective in communication as compared to unorganized information. For web (or app) design, it is important to create distinct sections on the interface to ease the mental organization of related elements. This helps the user focus on important elements, instead of on the information clutter and makes the browsing experience simple and intuitive.
Example: Facebook focuses on the News Feed (the main content a user wants to see), which contains all the important updates about what your friends are saying and sharing. On one side, you have a dashboard with your profile details, photos, friends, events, groups, pages, and more, and trending topics, status updates and advertisements and suggestions on the other side.
LinkedIn, in its ‘Facebook like makeover’ didn’t reinvent the wheel. The brand stuck to the profile at the top left, News Feed comfortably in the middle, just below an entry field for sharing articles, photos, and status updates. To the right, LinkedIn has a section called “Today’s news and views.” above an advertisement card.
Twitter too gave its desktop app a refresh to make the experience simpler for users. The left sidebar now has an organized dashboard with the all-new Explore feature and navigation buttons to access your Bookmarks, Profile, Lists, Moments, Settings, Analytics, and Display. Your timeline sits at the center and your avatar has moved above the timeline.
Pro Tip: Segment similar sections under a meaningful tab for easy navigation.
2. Appealing Layout for Easier Navigation
Clear fonts and icon designs help the user navigate better. Examples include an intuitive menu, legible fonts, and well-contrasted backgrounds. Make your site accessible with easily accessible tabs so information is easy to find and users can move from one page to another with ease, which will lead to reduce drop-offs and encourage more page visits per session.
Example: Facebook has redesigned its text to be high contrast, which is easier to see. Profile pictures are circular, so they take up less space and are easy on the eye. Link previews are a little bigger, which could motivate more clicks. Twitter too has rounded most of the buttons and avatars. Headers now appear in bold, to help you navigate more easily.
Pro Tip: Clarity should never be sacrificed for creativity.
3. Better Readability and Engagement
Clean and bright designs make it easier to find the information users are looking for without getting overwhelmed and distracted. If your primary focus is to get users to read and absorb content on your site, ensure your site is appealing enough to scroll through for longer durations without readers getting tired of the user interface design and the user experience. A good UI can also encourage users to spend more time on your site and interact with more of your content, leading to higher engagement.
Example: Facebook, Twitter, and LinkedIn have all opted for a white background with a pastel blue to highlight anything the cursor runs over. Facebook went the extra mile and made the browsing experience richer and more convenient – it is now much easier to discern where conversations begin and end in the comments since they adopted the Messenger style bubble for comments, making threading more obvious. There is also more white space to reduce eye fatigue during long browsing sessions so the content appears more vividly.
Pro Tip: Declutter your pages to add more white space and readable fonts.
Learn More: Designing an App? Golden UI/UX Rules to Remember
4. Fun, User-Friendly Icons
The icons or buttons used to perform actions should be able to communicate their purpose clearly. While clarity is essential, be careful to not clutter your UI with too many details/instructions. Use icons that are easy to interpret and remember so users don’t feel taxed with having to learn something new and at the same time, have a visually appealing experience with clear and vivid icons.
Example: Facebook’s News Feed, Like, Comment, Share Notification, Feedback, Video and Marketplace buttons are bigger and easier to recognize. With a whole lot of reactions to choose from instead of the traditional ‘Like’ the user has a choice and there’s some fresh color and design added to the page. Facebook has also swapped its Notification icon from a globe to an ‘alerts bell’ for it to be less distracting, letting the user focus on content.
Pro Tip: Add icons for bookmarks, social share buttons, notifications, profile/account page, etc. for accessibility and a pop of color and creativity.
5. Personalized Experiences
When we meet someone in real life, the way we interact with them depends on whether they are friends of friends, acquaintances, or colleagues. Why should it be different in the world of social networks? If you meet someone new, you would want to know what you have in common, try to understand their interests and find out if you have mutual friends. These social networks give you a contextualized view of profiles depending upon whether they are friends or strangers.
Example: If a stranger connects to you, or you browse a stranger’s profile, it displays your mutual friends (if any), basic profile information (subject to user’s privacy settings). Also, depending on privacy settings, you can browse through their photos and shared posts to get to know them better.
Pro Tip: Give users a glimpse into your world by creating a community and encouraging users to interact, compete and influence each another.
Learn More: Is Your User Experience Keeping up with These 8 UX Trends for 2019?
Over to You
While a good User Interface goes a long way in enhancing the UX, it is also important to remember that UX goes beyond UI to include usability, learnability, efficiency, relevance, and the responsiveness of the platform the user is interacting with.
While taking inspiration from top-performing sites is one way to go about improving your user experience and user interface design, ensure your new designs align with your brand properties, values and theme. Most importantly, ensure you and your teams are happy with the look and feel of the UI design before you roll it out to users.
Do you have any user interface design examples to share? Tell us on Twitter or LinkedIn or Facebook.
[UPDATED: 09-10-2019]
