Last week, we kicked off our series on common UI design patterns explaining the navigation bar. Today we want to have a closer look at the tab navigation. A common navigation structure found in both traditional and mobile websites, and a great way to provide easy access to the core parts of a site and to browse the content.
You all know the big and massive sets of drawers filled with important files and folders. You open one of the drawers, quickly skim the files and pick that one particular piece you were looking for. That’s where the tab navigation comes from! A tab navigation consists of a horizontal row of tabs, usually from 3-10 piece with each carrying a category or section title, that usually spans the entire width of the page. This allows for a visually compact representation of the navigation options.
The tab navigation is best used to create the highest level navigation of a site when the page content will require the full width of the page and the user should be able to keep track of the current location on the site. Usually, there should be no more than ca. 3-10 categories that do not often change and have relatively short category titles.
Just like in a file cabinet, tabs on a website provide a quick overview of the content and help navigate the site. Tabs also provide orientation to the user by visually indicating the current location in the navigation options of a site.
Most likely, you will fix the tabs, which will result in a limited number of tabs. To guarantee a consistent design, all tabs have the same width usually corresponding to the largest tab.
Typical characteristics of the tab navigation are:
- located at the top of the page below or next to the site branding and header,
- single-line row of tabs in a horizontal bar,
- active tab highlighted to indicate user’s current location,
- content of the tab usually either shows only icons or only text,
- hover effect to give feedback when the mouse cursor is over a tab.
Now that we have a good understanding of what the tab navigation looks like in theory, we should build one. Here is how it goes …
1. Setting up the project
To build the tab navigation we will use a layer and several pages – one for each section of the website. To save some time, I recommend creating all the main pages in advance. That means adding as many pages to your project as your tab navigation will have. We will add the respective content later. Here I have created six pages for my Android tablet project, whereas my first page is called “Home” and the rest of the pages are entitled “Page Tab 1” – “Page Tab 5”. Hint: For an optimal structuring of your pages, just make use of a screenflow.
Creating the main pages to be linked in the tab navigation. Here you can see a screenflow of my finished project.
2. Creating the tab bar
To avoid duplicate work and ensure consistency throughout the entire project, we create our tab navigation in a layer. We will then display this layer on every page that should contain the tab navigation. To create a layer, click on the “New layer” button in the My Layers panel. (Hint: If the panel is hidden, open it using the arrow icon.)
Now add the “Tab Button” stencils to the layer. In this example, we will need five of them. Hint: If you select all tabs, you can use the options in the context menu for easy alignment.
Adding tab stencils to build the tab navigation
Since we have already created all our pages, we can now quickly link each tab to the respective page. To do so, open the context menu of each tab and select the target page from the dropdown menu.
Linking the tabs with the target pages
Now we need to display the layer containing the tab navigation on all relevant pages. To do so, go to each page and check the checkbox of the tab navigation layer.
Displaying the tab navigation on each page by activating the layer.
Here’s a preview of the tab navigation in the Simulation View. You can see that the active tab is automatically highlighted.
The active tab is automatically highlighted when simulating the prototype
3. Adding page-specific content
Finally, all we have to do is adding content to our pages. Hint: Don’t forget to switch to the page in the layer panel to avoid adding content to the layer.
Switching from the layer to the page, you can add content to your page.
By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.
That’s it! You have successfully created a tab navigation!
Do you need help building a tab navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!