Split-flap Display

LinkedIn (iPhone)

Video didn't auto-play? Click on the thumbnail ☝️

 

What is it?

This is a mobile specific pattern 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 pattern 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 it help or delight the user?

Optimized Real Estate and Visibility.

This pattern 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 pattern 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 pattern 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.

Contribution by:


Click the bookmark to save to your favorites