With 1.71 billion monthly active users (as of July 2016)* on Facebook one can only imagine that they know a thing or two about keeping users engaged and designing great user interactions. Unlike what many think, Interaction Design IxD is not about gestures and animations but it entails much more of experience design than that. Our favorite definition for IxD comes from Paul Maritz the CEO of pivotal:
“It’s about catching customers in the act, and providing highly relevant and highly contextual information.”
We have made a quick tour through some of Facebook’s features and randomly chose 7 of them that we believe reflect great IxD patterns and practices.
1. Turn the lights down I am writing a post !
This is a recent feature, when you click in the “What’s on your Mind” Box, the status box, it becomes a modal and a dark overlay appears, channeling all your attention to what you are trying to post.
This makes perfect sense, as the user is trying to write a post, they need not be distracted by content on their feed or page. What we like about this feature as well is how seamless the transition is, you don’t even notice that the box has become a modal.
The pattern:
Reduce friction by omitting any distractions or irrelevant content for the action at hand. You can see this pattern for example in checkout pages, you will often notice that once you are in the checkout process, the website pages’ design tend to exclude all menus, banners and design elements normally found on the website’s pages, and only keeping what is needed to complete the checkout process.
2. The Save feature
It’s been there for a while but it can’t go unmentioned. Remember how many times you used to come across something on our newsfeed that you found useful but you were too busy to read at the moment or wanted to keep somewhere for later reference. I remember emailing myself some posts, using bookmarking apps like pocket or sometimes trying to remember when and where I saw the post and end up wasting hours of meaningless search! The save feature made that truly easy, keeping all these links safe and sound even categorized by type!
The pattern:
Understanding user context and possible actions users might want to do. When viewing posts, other than liking, sharing or commenting, a user might want to save this post for later. Actually, by providing this feature Facebook ensured that they keep you from using any other external app to save the post, playing on user engagement and retention!
3. The Magic status box
We got so used to the fact that the Facebook’s status box caters for every type of status and content that we started to think this is how any text box should behave! The truth is this is more than just an ordinary text box, with it’s inline search supporting mentions to people and pages, hashtags, and embedding links to any content type. All of that search and linking happens instantaneously as you type! (No, it wasn’t always that way just in case you forgot!). You can even choose what image to be displayed with the link you are sharing and the snippet text that appears as well. On top of all that there is all the meta data you can add to your post (location, emotions… ). Who knew a little box could do all that so effortlessly, you actually forget that it involves a lot of real time search and feedback!
The pattern:
Supporting and integrating different use cases within the same component efficiently and intuitively. Also simultaneously combining edit and preview mode removing any context switching and making editing easier and more efficient than ever.
4. Empty loading
The internet speed especially on mobile doesn’t help with instant loading of content on your timeline. Facebook shows empty widgets while content is still loading. Instead of having an empty feed, you get to feel like the content will be here anytime.
The pattern:
Making waiting time not feel like waiting time and showing something is better than showing nothing.
5. Let his photo of me be history!
Inspired from this TEDTalk about how to design at scale. Margaret Gould Stewart in the minutes between 4:00 and 8:00 shares with us how the feature “requesting taking a picture of yours off Facebook” was created . The feature does not only help you send a request to your friend to take down your picture, but it helps you ask politely and effectively.
Image Credit: Gigaom here
The pattern:
Emotional design, understanding the underlying emotions within a certain interaction, can help you design interactions in a way that allows the users to express their emotions effectively. Something data alone can’t tell us.
6. Take me where my friends are:
Facebook has enforced social proofing as a key trigger in helping users take and make decisions. They understand that we want to be where our friends are, we want to comment where they comment, we want to go to events that they are going to and we even want to like the pages they like!
The Pattern:
Use Persuasion techniques to make it easier for users to make decisions. Social proofing being a very powerful persuasion tool.
7. Is this a sponsored Post? I thought it was part of my feed!
If you owned a Facebook page, you will see how Facebook enforces so many rules on how you can create sponsored posts. Sponsored posts are more effective in promoting your content than ads as they appear in the user’s feed — where they are always looking. If these posts felt like ads rather than relevant content, the experience of the feed for users would be compromised. Facebook’s algorithm, makes sure that sponsored content that makes it to your feed is highly relevant to you while giving you the chance to give feedback about the relevance of the content that you are seeing, so you feel that you are still in control of what advertisers get to lay down on your way.
The Pattern:
Never let business goals stand in the way of the user’s experience, so you don’t lose the users that are driving your business goals.
Way to go Facebook, no wonder your users choose to stay!
Additional Resources:
You can read more about interaction design here
* https://www.brandwatch.com/2016/05/47-facebook-statistics-2016/
