LinkedIn Split-flap Display

Screenshots powered by

GetScreenshot Screenshot API

✋ What is it?

This is a mobile specific solution that LinkedIn (and other apps like Facebook) uses to optimize the available screen real estate in specific layouts like content screens and feeds.

🤲 How does this interaction or solution work?

When users are scrolling through their news feed they will likely find content that has not interactions yet. LinkedIn uses the same are where it displays the number of comments and likes, to display a message that informs the users about the current state of that specific piece of content and Call to Action that invites the users to comment.

Since there's a limitation in the amount of available horizontal real estate and container that limits the available vertical real estate, LinkedIn uses a type of transition that resembles the "split-flap displays" that can be found in airports, train stations and flip clocks.

This type of transition allows the app to show a long string of text in a limited container by splitting into two looping states.

🙌 How does this interaction or solution work?

Optimized Real Estate and Visibility.

This solution enhances the optimizes the space and visibility of the user interface in areas where there are limitations on the amount of characters or pixels that can be rendered.

This solution help the users by providing them necessary statuses without sacrificing content real estate, which means that users can consume the content and get other relative data to that piece of content (in this case the lack of comments).

Although, in this case the solution is mainly a Call to Action that invites the users to comment, this type of rolling text can be used to provide further information to the user in situations where the amount of real estate is limited.


That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.