12

As seen in this mockup, I kind of need multiple rows of tabs.

enter image description here

One to click into categories, and another one to select your category.

Is this ok?

Also, side note—If Categories is selected, should I have a page where all the different categories are shown, then the user clicks on the one they want (as per https://rrrepo.co/explore) ? Or should we just automatically go into the first category?

  • the image doesn't show – Ameen Akbar Aug 17 '15 at 10:28
  • @Razor9012 Changed it :) – mildrenben Aug 17 '15 at 10:32
  • 2
    There is guidance on structure here from Google google.com/design/spec/patterns/… – Midas Aug 17 '15 at 13:16
  • I think usability remains subjective in Material Design. Although the implementation by Google is done quite well, it can be tricky as you need to factor in IA. Some of these Material choices may also lead to redundancy like in Google Drive. – Eshwaren Manoharen Sep 6 '16 at 9:47
11

Don't compromise your UX for the sake of following material design. Material design is meant to compliment your UX, not dictate it. So don't follow it to the word. 1st decide on what's the best user experience and then decide on which and how much of googles material design guidelines you are going to use.

  • Yeah I agree, what do you think is the best solution here UX wise? – mildrenben Aug 17 '15 at 11:00
  • 1
    @mildrenben What about a drop-down instead of all those sub-tabs? – Alan Aug 18 '15 at 19:22
  • 1
    Ameen's comment 100 times, everyone who loves UX should read her/his comment. – DarrylGodden Jan 11 '17 at 20:59
6

According to the recent updates of Google Material design, here's where material talks about tabs usage and it forbids using nested tabs:

enter image description here

Although Google puts a lot of effort to make the best UX, the bottom line is that if tests give you better results with nested tabs, then use them.

But you can also think about using alternatives like drop down menus or other means for navigation. Maybe a combination of side navigation and tabs would be a good option.

3

Keep in mind that the guidelines that Google proposed for Material Design are just that: guidelines. They won't be able to help you in all situations, but they are good enough to give you a jump start.

Is this ok?

The Material Design guidelines has a few different recommendations for handling this situation. Right now you have two levels of navigation:

  1. The top three tabs
  2. The second level of tabs, which allow you to filter things down further.

You can find recommendations about handling the primary navigation, one of which is to use tabs like you are currently doing. Another option, which you can find in Google Inbox is to have the primary navigation in the left slide-out menu.

In general when you are working with a limited amount of screen space, you want to present the most important information to the user at the beginning. The list of categories probably isn't the most important thing on your page.

They also provide patterns for handling multi-level navigation that you may want to look into. They suggest using the navigation drawer when you have multiple levels of navigation, but it is recommended to only have one level of navigation in your side menu, typically the primary navigation. On desktop devices the navigation drawer can have multiple levels of nesting, but on mobile (in order to preserve screen space) it's recommended to have each option bring you to a landing page if there are many options in the second level navigation.

Another option is to collapse your tabs up top into the navigation drawer when the space is limited, which is especially useful when there are many tabs. This is something Google does in the Google Store when the screen size is small.

They start with all of the categories up top when there is enough space

The Google Store navbar on a wide screen

And then as screen size is reduced, the tabs are pushed into the sliding left menu.

The Google Store on a smaller screen

This is something you may want to consider, given that you do not have that much content in your left sidebar.

If Categories is selected, should I have a page where all the different categories are shown, then the user clicks on the one they want (as per https://rrrepo.co/explore)?

Usually when you click on the main tab it's expected that you either move to a page related to the tab in general (like an explore page) or an action is triggered that presents that information in-line (like display a dropdown).

A good example of this is Amazon with their menu. If you right click on the menu and open it in a new tab, you reach this "directory" page with all of the categories.

Or should we just automatically go into the first category?

I'm going to strongly recommend against this, especially if it's not made clear to the user that there are other possible categories. By clicking "Categories" they are most likely expecting to find general information on the categories available, not a page that is limited to just one of them.

  • very nice answer Kevin. One thing to add though: Material explains the exact scenario of the OP at google.com/design/spec/patterns/… , which as a matter of fact is the Google store approach you mention. It's also shown at google.com/design/spec/components/tabs.html#tabs-types-of-tabs (see scrollable tabs), so there's plenty of instructions on how to do what the OP wants in Material guidelines – Devin Aug 18 '15 at 22:38
  • 1
    Thanks @Devin, for some reason I never noticed those resources when I was looking earlier. I've adjusted my answer based on the Material Design patterns that you linked to. – Kevin Brown Aug 18 '15 at 23:14
1

Yes, having multiple rows of tabs is not recommended on Material Design and this is not a good practice on any website / app.

On Material Design Blog, the information is really clear and I think it can help if is posted here too.

Formatting specifications:

  • Present tabs as a single row. Wrap tab labels to a second line if needed, and then truncate.
  • Do not include a set of tabbed content within a tab.
  • Highlight the tab corresponding to the visible content.
  • Group tabs together hierarchically. Connect a group of tabs with its content.
  • Keep tabs adjacent to their content to maintain the relationship between the two.
0

A problem with displaying categories in a tabbed structure is that it's very easy to run out of room. Consider your current design on a tablet. Does the content still all show even at 1024px wide?

Another thing to consider is the prominence of your categories right now. This article talks about how most users focus their attention about 200px after the left edge of the viewport. That 200px is where a lot of secondary navigation lives, and that's a good thing. It's not supposed to be the primary focus for a user and is only called upon when needed. In contrast, your categories sit right at the top of the page, even though most users will likely click a single one and then perform the majority of their actions.

Your mockup has plenty of room on the left-side to house your categories. In fact, this would be the approach that is most in line with Material design, as this link from @Jake would indicate.

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.