1

I'm working on an app, its primary feature is rating/commenting on some kind of product (I used a banana as an example). I've got a problem with the tab navigation, please take a look:

  1. example 1
  2. example 2

In the first mockup we've got tabs (About, Comments, Related products) nested in a view, under the the basic information about the product. When the user scrolls down, the tabs will be fixed at the top.

On the second one, tabs are on the very top, which is absolutely more consistent with the material design and also will be more consistent with another app views (for example views with lists).

However, the first mockup has - in my opinion - better information architecture. Firstly we have the object name, then navigation (tabs) through this object elements: about, comments, related products.

I think that when tabs are above the product name, the navigation is too much separated from the product, but maybe I'm wrong, what do you think?

2

Normally I'd agree that the tabs should be at the top, but I think that in this scenario you'd most likely be repeating the core product information (manufacturer, product name, ranking, etc.).

To me it then becomes something similar to a page title, which in Google's material design guidelines would appear above the tabs.

Also, with the static core product information below the tabs, it seems like it disconnects the tab selection with the changing content below the core info.

0

If the "About", "Comments" and "Related" tabs appear with every product, then it makes sense to me to have them at the top rather than the bottom. Because they are different perspectives on the same content, they should be formatted as tabs, and not menu items (as you have doubtless already concluded).

Google's Material Design guidelines show tabs at the top in all their examples.

How about having the tabs coloured a paler yellow than the bar with the arrow on it, so as to distinguish the tabs from the navigation?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.