Robinhood List to Horizontal Tabs

Screenshots powered by

GetScreenshot Screenshot API

✋ 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 this interaction or solution work?

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.

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.