Rules for Modern Navigation
Websites provide access to many types of information. We may wish to purchase an item, learn more about a company, access a particular resource or donate to charity. We depend on website navigation to aid us in finding what we are looking for. However, many websites have navigation systems that only work ‘well enough”, which only works to a certain extent as they may struggle to access what they need to. Here are some best practices that allow designers to create clearer, more effective experiences for navigation.
Prioritize Consistency
Inconsistencies in navigation can come from content that doesn’t fit correctly inside website sections. Additionally, users may need to something that is implemented more deeply within a website, which may result in the website owner adding quick links into the navigation bar. However, there are alternative solutions that can improve inconsistencies to the overall navigation.
Landing Pages and Subpages
Consistency relies on choosing what is be best for the user. An example of this is whether elements should show their subpage links, or none at all. Showing supages for only a few sections may confuse users into thinking that other sections may not have subpages, when they actually do. If subpages aren’t in the primary navigation, it would be best to make sure that they are added into a secondary navigation which is regularly shown across all sections on the website.
Breadcrumbs
Breadcrumbs are an aid for navigation, which helps divert people within a website. This type of orientation is very important if users are navigated to deeper levels of pages from external areas.
Design Clear Interactions
When a website user isn’t sure on which items may be interactive, or which interactions to expect, they can get confused. Fight this confusion by designing interactions that are understandable and clear.
Clear Indicators of Functionality
Visual changes can help clarify which interactions are common on a website. An example of this is transitioning an expand icon into a collapse icon, this indicates that a change has been made and can be reverted back. If the icon doesn’t update, users may end up missing that they can reverse their previous interaction.
Use of Labels with Icons
Icons can sometimes replace text links. Including a label alongside an icon will reduce uncertainty. An example of this is, instead of using just the standard hamburger icon, replace it with a “Men” label beside the icon. This is helpful for other standard icons such as “Log in” and “Contact”.
Differentiate Icon Links
It is most-ideal to differentiate between icons that are just links between icons that are informational or categorical. An example of this is using one specific colour for navigation links and using another specific colour for external links.
Design for Responsive Compatibility
Great navigation conforms easily between mobile and tablet devices. By designing a navigation menu that works across all devices, it is best to consider a common design amongst desktop and mobile so that the user has a clear understanding of how to interact with it.
Remove Hover Interactions
Primary navigation regularly shows the secondary navigation links on hover, but this won’t always work on mobile or tablet devices. Hover interactions that are unable to be used on tablets or mobiles leads to inconsistency across devices. This will have an impact on users who won’t be able to access that particular part of the menu on mobile views. It would be best to provide two different for desktop and mobile devices. This can be done in the form of a hover interaction on desktop and an arrow or plus icon on tablet / mobile view, that opens up that section of the navigation menu when clicking on it.
Different Navigation for Mobile vs. Desktop
An example of this can be a row of text menu links on desktop view. Whilst in the mobile / responsive view, the user would see a vertical hamburger button design for the menu navigation instead. The hover interaction for a submenu on the desktop view would be replace with a button click that expands the submenu on the mobile view instead. Design-wise the same font style would be applicable for both desktop and mobile, which will be optimized for all devices and have a cohesive design to both styles of menu navigation.
Design better navigation
We have covered several points to think about when designing an interactive navigation menu for users. Taking all these considerations into account can help throughout the website design process. Which will result in a better user experience overall for all that visit your website. Allowing for unique designs, whilst also taking into account usability across all devices.
