Compose Focus

Facebook

 

What is it?

This is a pattern found in the Facebook Web App. When a user starts writing a post, the container switches to a focus mode where everything in the viewport but the input box, gets obscured under a dark translucent layer.




How does this interaction or pattern work?

In the Facebook Web App, the main news feed page has several interaction points. One key interaction point is the creation/sharing of content. To start composing a new post, Facebook users have to click on the text input box that lives above the rest of the news feeds.


When a user clicks on the box with the intention of creating a new post, the whole user interface switches to a different visual mode in which the compose container becomes more visually prominent by being the only component in the page that remains unchanged.

The rest of the user interface gets obscured by a translucent dark layer. This state change creates a visual effect in which the compose box is the only component grabbing the user's attention.




How does it help or delight the user?

Keeping Context and Visibility.

Facebook uses this interaction to create a transition between states.

This behavior allows users to have differentiated mental models for consuming and composing content which helps the user to remain in context and avoid situations like accidentally posting content.

This interaction is also a smart alternative to similar techniques like modals that are known to have some visibility issues and therefore perform worse when trying to keep the user in context.

Contribution by:


Click the heart to save to your favorites