When creating a website that is user-friendly and intuitive, one of the areas of focus must be that site’s navigation. Let’s take a look at some important considerations and best practices to be mindful of when designing effective website navigation.
Think about placement
The placement of a site’s navigation is important. Most websites today use a horizontal row of navigation links placed near the top of the page on the larger screen layouts of those sites.
The popularity of this placement has created a standard that website visitors are familiar and comfortable with. As such, when someone visits a new site that they have never been to before and they look for that site’s navigation, they most often look to where they would expect those links to be – presented in a horizontal row near the top of the page.
If you have tried to break the mold with the design and placement of your site’s navigation, then you do not get the advantage of this immediate familiarity.
Established conventions can be used to your advantage, especially when it comes to the navigation’s placement in your site design. Remember that new visitors to your site must be able to quickly identify how to use that site. In as little as 4-8 seconds, they need to understand who the site is for, what you do, and what they should do next. By placing page links exactly where visitors expect them to be, you avoid losing those visitors because they grew frustrated with a site that confused them in some way or did not work the way they expected it to work.
Limit the number of options
The more options you give someone, the harder it will be for them to make a choice. This is why it is critical that you aggressively edit the items that will appear in a site’s top-level navigation.
Less important pages of content should have their links placed under a sub-section of the site when appropriate.
For instance, a common page/link on many websites is “Customer Testimonials”, but from having reviewed the traffic analytics of hundreds of websites, many of which include these testimonials pages, I can tell you that this content is one of the least visited on any site. As such, a link to testimonial content is often more appropriately placed under a section like “Our Company” than in that main navigation, especially if you are looking to reduce the number of links in that navigation.
Try to limit your site’s navigation to a maximum of 7 or 8 items, but if you can edit it down to 5 or 6, that is even better since the fewer options will make it easier for visitors to scan those options and make a choice relevant to their current needs.
Use clear labels and icons
When it comes to helping visitors make a choice, limiting the number of options before they are not the only important step to take. You must also ensure that any labels or icons that you use for those links clearly let people know what lies beyond those clicks.
A label like “Our Blog” may not be attractive, but it gives a clear indication as to what is on that page – your company’s blog. Coming up with a unique name for that blog/link may be attractive from a marketing and branding perspective, but a link label like “The Toolbox” does not immediately convey that there is a blog on that page (which you have dubbed "The Toolbox"). This can confuse visitors who are looking to make quick decisions and who do not want to click a link if they are not sure what content they will get in return.
For many smaller screen designs, text labels are replaced with icons to save space. These icon graphics can be useful, but just like text labels must be clear, too must icons make immediate sense to visitors.
Typography is important
The text links you use in your site’s navigation must be read by that site’s visitors. As such, the best practices of web typography play a role here. The typographic styles used on these labels should:
- Have sufficient contrast to ensure ease of reading
- Be an appropriate size, for all screens
- Use fonts with letterforms that are easily readable at the sizes in which they are presented – not too thin or overly ornate so they cannot easily be read
Limit dropdowns and fly out menus
Using drop-down and fly-out menus can help organize the navigational needs of a large site. Links that are of secondary importance can be placed under more high-level items. The aforementioned example of “Customer Testimonials” being placed beneath an “Our Company” segment is an example of this.
Oftentimes, these sub-menus are made available by menus that are revealed when a top-level link hovers over. This interaction does not always work, however, and in other cases, it becomes a very difficult interaction.
Remember, “hover” states do not exist on touch screens, so if the only way to access those submenus is via a hover action, you will be alienating any visitors on touch screens with this experience. Even if those menus are available, if you go too deep with flyouts, they can become horribly challenging to use. A good rule of thumb when using these menus is to ensure that the options are available in more than one way and to never use a flyout that is more than one level deep.
Test on different devices
What works on a large desktop monitor will not work on the small screen of a mobile phone. As such, your site will likely use responsive web design to deliver different layouts and navigation schemes based on a visitor’s screen size. Be sure to test your design on these various screens and do not forget about the importance of touch.
Using touch as input is much different than clicking with a mouse, so be sure to test on both touch and non-touch devices to ensure the navigation you design is intuitive and able to be used effectively, regardless of the device someone is using to visit your website.
Bianca J. Ward, writer, EssayWriterFree