Posts from "November, 2015"

How to …. create navigation structures (part 3): The double tab navigation

This is the third part of our series on common UI design patterns, and today will be all about the double tab navigation (also known as nested tabs or sub tabs). You can find parts one and two of the series here:

The double tab navigation is a navigation element consisting of two horizontal rows of tabs at the top of a website. Usually spanning the entire width of the page, it displays multi-level content that is sorted in tabs and sub-tabs. The top row of tabs represents the top-level categories and the second allows for a selection of the sub-categories. To easily spot the current location on the site, the active category is visually highlighted.

This navigation structure is best used when the user needs to navigate a large amount of hierarchically structured pages while keeping track of his current location on the site and it is important to display the available content in vertically compact space.

Typical characteristics of the double tab navigation are:

  • located at the top of the page below or next to the site branding and header,
  • two horizontal rows of tabs first-level and second-level entries,
  • used to display hierarchically structured pages and sub-pages of a site,
  • up to ca. 10 tabs or sub-tab in each tab bar, usually of same width,
  • first tab is reserved for “Home” (unless it is offered as separate option),
  • active page is highlighted to indicate user’s current location.

Now that we have a good understanding of the double tab navigation, let’s create one. Here is how it goes …

 

1. Setting up the project

To build our double tab navigation we will use several pages and layers. To save time, let’s create the main pages in advance. We will need one page for each main caterogy, i.e. one for each first-level tab. (We will add the respective content later.) As an example I have picked a news website with the sections “Home” (it will be linked with the image stencil), “World”, “National” and “Local”. Hint: For easy structuring of your pages, just create a screenflow.

Creating the main pages to be linked in the double tab navigation. Here you can see a screenflow of my finished project.

Creating the main pages to be linked in the double tab navigation. Here you can see a screenflow of my finished project.

 

2. Building the double tab navigation

Our double tab navigation consists of two major parts: the upper bar represents the tabs with the top-level categories and will be built on one layer. The lower bar contains the sub-level entries, whereas each section and its respective content will be created on a separate layer.

2.1. Creating the first-level tabs

Since the first-level tabs remain the same across the site, we start by creating a layer to hold the first-level tabs. To do so, click the “New layer” button in the layers panel. Now we add the first-level tabs to the layer (I also added a logo that links back to the “Home” destination) and link each tab to the respective main page using the “Target” option of the context menu, e.g. the “World” tab should link to the page “World”. Now we can simply display this layer on every page that should contain the double tab navigation by visiting each page and using the checkbox of the layer.

Building a tab navigation bar to display the top-level categories and link each tab with the page.

Building the first-level of the double tab navigation and linking each tab with the destination page.

 

2.2. Creating the second-level tabs

The second part of the double tab navigation requires layers, too. Add one layer for each second-level category. In my example there are nine content layers in total, including four sub-categories in the “World” section, three in “National”, and two in “Local”. The layers will contain the actual content of the website, and the respective layer will be shown when the corresponding entry is selected – while all others will be hidden. In addition, each layer will contain a visual cue to highlight the active entry.

Creating layers for the second horizontal bar to show the second-level entries

Creating layers for the second-level tabs

To create the second-level tabs we use a rectangle as background, text stencils for the second-level entries and action areas to link the tabs with the content layers. For each content layer (i.e. each page of the website), add text stencils for the second-level entries, keeping in mind the corresponding top-level category the content will appear under (e.g. all layers belonging to the “World” section would contain the entries “Economy”, “Science”, “Culture” and “Sports”), and place an action area on top of each label.

Adding a highlight to visually indicate the current position on the website

Adding the second-level tabs to each content layer

Then, going through all content layers, use the context menu of the action areas to link each second-level entry to its corresponding content layer. To do so, click on “New interaction” in the “Interactions” tab, and in the interaction dialog select “When the user clicks” and “then change layer visibility” and select the layer to be displayed while setting the visibility to “Show”. To ensure that no other layer is shown, add reactions (one for each layer in the main category) and the change the visibility for each to “Hide”.

Linking the sections of the second-level with the corresponding layers and make them visisbile upon click

Linking the second-level tabs with the corresponding layers and adjusting content display options

Hint: Instead if going through all these steps for each second-level tab individually, define the interactions only for one action area, then mark all of your action areas and click on “Apply these interactions to the selection” in the context menu and simply change the layer to be shown. Since all content layers in one top-level category will show the same set of second-level tabs, you can simply copy/paste them to the other content layers.

 

2.3. Linking first- and second-level tabs

By default, a click on a first-level tab should show the first of the second-level entries in that category. To achieve this, simply go to each main page and activate the appropriate layer using the checkbox. In this example, the “World” tab is connected with the “World” page, which by default displays the layer “World – Economy”.

Linking a layer with the page to be displayed at the same time

Linking a layer with the page to be displayed at the same time

 

3. Adding page- and layer-specific content

The last thing to do now is adding content to each of our content layers. Also, place a visual indicator on each content layer to highlight the active second-level tab. I used a little line underneath the corresponding entry, but you could also change the background behind the label or alter the formatting of the text label, e.g. bold font.

Remaining on the layer to the page, you can add specific content

Remaining on the layer to the page, you can add specific content

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 double tab navigation!

Do you need help building a double tab navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to …. create navigation structures (part 2): The tab navigation

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)

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 a tab stencil to build the tab navigation

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 related pages

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.

Showing the tab navigation on each page by activating the 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.

Simulating the project shows the highlighted tab

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.

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!