Hello everyone & Welcome to week 6 of Rachael’s blog! Last week was focused on how exactly to create more white space on a web page. This week will be focused on how to design navigation. Navigating your way through a website can be compared to navigating your way through a store like Walmart. When you enter a store, you have to make a decision about whether you are going to start looking for what you need on your own or if you are going to ask someone to assist you in finding what you’re looking for. If you choose to start looking on your own – the store provides certain systems of navigation such as aisle signs or department signs. However, even if you choose to start looking on your own and aren’t successful in finding what you’re looking for, there is a good chance you’ll end up asking someone for directions anyway.
The same goes for when you are attempting to navigate a website. You can either use the website’s navigation systems, or simply head straight for the search bar. Using the search bar is the web equivalent of asking for directions in person when trying to find something in a store.
Website navigation is very important. Two purposes of navigation that are fairly obvious are: to help us find whatever it is we’re looking for and to tell us where we are. However, there are some other equally important purposes of website navigation.
- It tells us what’s here
- Navigation reveals content
2. It tells us how to use the site
- Used right, navigation tells you implicitly where to begin and what your options are
- It should be all the instructions a user needs
3. It gives us confidence in the people who built it
- Clear, well thought out navigation is one of the best opportunities a site has to create a good impression
Like a physical store such as Walmart, websites have navigation conventions. When we enter Walmart, the name of the store is at the top of a building, or we find signs at the end of every aisle. Although appearance varies significantly, there are basic navigation conventions for the web. Each of the following have a specific spot on a web page:
- Site ID
- Page name
- Local navigation
- Footer navigation
Persistent navigation is a term web designers use to describe the set of navigation elements that appear on every page of a site. It should include four elements you most need to have on hand at all times:
- Site ID
- Search bar
As far as site ID – it is like the building name for a website. It needs to be seen on every page. In the same way we expect to see the name of a building over the front of the entrance, we expect to see the site ID at the top of the page, usually in the upper left corner.
As far as the sections – or primary navigation – the sections are links to the main sections of the site. In some designs, the persistent navigation will also include space to display the secondary navigation: the list of subsections in the current section.In some, pointing at a section name or clicking on it reveals a drop down menu, in others, clicking takes you to the front page of a section, where you’ll find the secondary navigation.
As far as the utilities – they are links to the important elements of the site that aren’t really a part of the content. This is things such as sign in, register, help, a site map or shopping cart. They provide information about its publisher. Utilities should be less prominent than the sections, and they also vary for different types of sites. Utilities can include a wide range of things, but as a rule, each site should only accommodate four to five utilities – the ones users are likely to need most often.
One of the most crucial items in persistent navigation is a button or link that takes a user to the homepage. Having a home button in sight at all times offers reassurance that no matter how lost a user may get, they can always start over. Almost all web users expect the site ID to be a button that can take you to the home page.
As far as the search bar – every page should have either a search bar or link to a search page, for those users who prefer searching rather than navigating a website themselves. Its a simple formula: a box, a button and either the word “search” or the universally recognized magnifying glass icon.
In short, these are the basics of designing navigation on a web page. Remember: these steps are crucial to take into consideration to make a user feel confident when visiting a web page.