Facebook Compose Focus

✋ What is it?

This is a solution 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 solution 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 this interaction or solution work?

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.