An easy-to-use navigation is a must for every website. Choosing the “right” navigation design, however, depends on your site’s purpose and architecture as well as on the visual and textual content. To give you an overview, we are launching a small series of posts today that will explain common UI design patterns for site navigation and show you how to prototype them in Pidoco with only a few clicks. The series will include the following topics:
- navigation bar (part 1)
- tab navigation (part 2)
- double tab navigation (part 3)
- doormat navigation (part 4)
- accordion (part 5)
In the first episode, let’s have a look at the so-called navigation bar. The navigation bar is a simple linear navigation structure that usually appears at the top or left edge (right edge in the case of semitic language sites) of a page and consists of multiple entries that provide quick access to content of a website that is organized in categories. This pattern can be used when users need to be able to find content or features needed to accomplish a task and when it is important to keep navigation display space compact. The navigation bar can be used as top-level navigation of a website or as sub-level navigation in combination with tabs with up to 10-12 categories.
Typical characteristics of the navigation bar are:
- located at the top or left of a page and has a horizontal or vertical orientation,
- collection of vertically or horizontally arranged links within one navigation element,
- each category in the navigation bar is distinctive and clearly separated
- a form of “Home” item usually represents the first category of the navigation bar,
- remains unchanged during browsing and is visible on every page to which it links,
- the current location of the user is not reflected as a state in the navigation bar.
Using a top navigation bar, there is no general recommended number of categories, but it of course depends on the average length of the words you use, the font size, as well as on the size of the page you design for. A considerable benefit of a top navigation bar is that it allows for full use of the width of the page for other content.
Using a left navigation bar, your site is split (at least) into two columns, whereas the left one is used for navigating through the top categories of the site. This kind of navigation bar is best used if page width does not matter as it will require considerable horizontal space.
Now that we have a good understanding of what the navigation bar is and when we should use it, let’s build one. Here is how it goes …
1. Setting up the project
To build the navigation bar we will use layers and interactions. To save time, it’s best to have a vague idea of how many category entries the navigation bar should have. As every category of a navigation bar will be on one page, we can create the exact amount of pages in advance and name them accordingly. We can add the respective content later. Here I have created six pages for my web project, whereas my first page is called “Home” and the rest of the pages are entitled “Page 1” – “Page 5”. Hint: You can use a screenflow to visually structure your pages.
Creating the main pages to be linked in the navigation bar (Here you can see a screenflow of my finished project)
2. Designing the navigation bar
To avoid duplicate work and maintain maximum consistency, we will put our navigation bar into a global layer that we can show on every page that should contain the navigation bar. This way, the navigation bar will remain unchanged, no matter where we display it. To create a layer, click on the “New layer” button in the My Layers section. (Hint: If the panel is hidden, open it using the arrow icon.) Now let’s build the navigation bar. The design is completely up to you and, for example, depends on your corporate design and the website architecture. You can find some inspiration on Welie.com or Yahoo! for instance.
Here I have named my layer “navigation bar” and used an image stencil representing the “Home” page as well as five black rectangles for each category with labels “Page 1” etc.
Setting up the main categories and labels of the navigation bar
Since we have already created all our pages, we can now quickly link each category to the respective page. To do so, place an action area on top of each category and use the context menu to set a target page. (Hint: This is a shortcut for the “click/show page” interaction.)
Adding target pages to the navigation bar categories
3. Adding page-specific content
Finally, all that’s left is adding the individual content to each of our pages and to display the layer containing the navigation bar on each of the pages. To do so, we open on the respective page and toggle the checkbox to display the navigation bar layer.
Displaying the navigation bar on every page
Finally, we can preview the result by clicking on the “Simulate” button in the toolbar. Here is what my finished project looks like.
That’s it! You have successfully created a navigation bar!
Do you need help building a navigation bar? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!