List to Horizontal Tabs


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


What is it?

This is an Android specific solution found in the Robinhood app. It allows users to navigate a list of stocks through a table or by swiping through a horizontal list of floating views that are bound to an overflown row of tabs at the top of the page.

How does this interaction or solution work?

A user can navigate a table of stocks and see different data displayed in traditional column by column table fashion.

If the user drills into one of the stocks (a row of the table), the app will now show a new view that displays more information about that particular stock. On this view the user can also perform other actions like buying or selling.

At the top of this view there's a row of overflown tabs that mirrors the order of the original table. The users can swipe through these views or tap the tabs to keep navigating without changing context.

It's important to mention that the "swiping through views" interaction also exists on iOS, however only on the Android app you can see the binded tab row. This makes the interaction more discoverable and predictable.

How does it help or delight the user?

Keeping Context and Improved Navigation.

Users can keep navigating through a list of items without the need of going one level up on the navigation.

They are also kept in context thanks to the horizontal arrangement of the tabs that respects the order of the original table.

Contribution by:

Click the heart to save to your favorites

Other CX and UX Solutions