As seen in this mockup, I kind of need multiple rows of tabs.
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?
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.
According to the recent updates of Google Material design, here's where material talks about tabs usage and it forbids using nested tabs:
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.
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:
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
And then as screen size is reduced, the tabs are pushed into the sliding left menu.
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.
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.
- 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.
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.
