Navigation can be very versatile and that’s the reason why many developers experience problems working with it. You can make simple or complex navigation based on your requirements. Most designers prefer a generalized navigation, which is usable for all users, however some web owners require multi-level architecture, with different navigation structure for unregistered and registered users. Web navigation varies widely, because there is no set guideline for creating or organizing navigation.
Navigation design is an art in itself and to come up with at least a decent result, designers need to learn existing navigation styles and choose one that fits their requirements. A navigation menu should be able to represent the model of information in a website. Design and organization are two things that can make navigation design tricky. After all, coding is often quite straightforward. Designers need to employ best practices and correct methods when organizing navigation structure, to gain higher conversion rates and more intuitive user experience. Usability and findability should be two factors to consider when designing a navigation menu. Navigation should work well for everyone, no matter how complicated it is.
Primary and secondary navigation menu
Navigation menus are required on websites with plenty of functionality and contents. As a website develops and grows in complexity, the task of guiding users to functionality and content should be performed well. No matter how organized a website might be, it is sometimes difficult to fit all contents in a one large menu. Consequently, many websites use a couple of main menu, primary and secondary.
You should ask whether navigation beyond the primary menu is really needed. If you do need a secondary menu then try to look for the right way to implement it. No matter how organized your contents are, it can still be daunting to distinguish between primary and secondary contents. Luckily, you can use a method called: “card sorting”.
When organizing contents, you should consider how the navigation will be positioned, grouped and labeled. Also try to determine how users will use the navigation. You should answer these questions before the design phase begins by using assistive methods, including card sorting. With this method you can properly label and organize contents, because labeling and organization are essential elements when designing website navigation. Some developers use card sorting to determine menu structure, design and label.
There are two types of card sorting:
- Open card sorting: A groups of participants (preferably users) are asked to organize topics into groups. They are not given relevant context or information beforehand. They also need to name the groups and organize the contents and groups into the appropriate hierarchy.
- Closed card sorting: Participants are asked to organize both content topics and categories. They don’t have to name the cards and this option should be used on existing website with established menus, categories and others.
To speed things up, you can use desktop software or online tools for card sorting.
After you put contents in the correct categories, another problem arises, how should you order them? Card sorting can help us to differentiate levels of navigation; and create hierarchy and groups; however the method is poorly suited to order contents located in a group. These are common methods for content classification:
- Recent to oldest: It is suitable for time-sensitive contents, such as news articles.
- Alphabetical: It is suitable to quickly help users find indexes, definitions and other references.
- Most read or most popular: It is suitable for interest-based contents.
- Geographical: It is suitable for websites that feature regional or sub-regional based contents
- Order of process: It is suitable for instructional websites, which allows users to access contents based on the phases of process.
Navigation and user levels
Additional organizational challenges arise if your website offers different contents for registered and unregistered users. Some websites use a minimalist client area, while others feature environment for a full-fledged community. User roles, design, content highlight and the type of interaction may vary between websites. These are a few things to consider when organizing navigation menu across membership levels:
- The number of user levels: Website owners should plan it out ahead of time; however it depends more on the business models used. Website owners and Web professionals should determine how many users are needed to achieve a manageable navigation level.
- Separate design and planning for each user level: You should plan the navigation structure far after the membership area is constructed. Determine how contents should be organized and presented for unregistered, logged-out and logged-in users. Paid accounts vs. free accounts? Basic members vs. admins?
- Determine appropriate contents for each user level: You often need to convince unregistered about your products or services. On the other hand, logged-in members are already convinced with your offers and promises, so you should provide them with a straightforward way to manage their membership and obtain your services.
Card sorting can be used to plan navigation for different user levels, think about how a navigation menu should be, such as how menu items should be labeled and how contents should be ordered.
There are a few important questions to ask when organizing contents for unregistered and registered users. What do they need to accomplish? What do members want to do? Take Facebook, it is consisted of user-generated contents. Facebook is contextually structured; it is organized and defined by user functions. Friends, messages, events and wall post feeds can be considered as the primary navigation, while applications, friends’ friends, requests and others are essentially secondary navigation. Navigation for each Facebook user is unique and depends on user’s previous activities and decisions.
Horizontal vs. vertical navigation
When choosing between horizontal or vertical navigation menus, you should consider the focus and nature of your website. We often find a mix of both in many websites. However, smaller and simpler websites lean more toward horizontal top navigation, while larger websites with a lot of contents usually use both vertical and horizontal websites, often with drop down-menus. Blogs vary greatly, but standard CMS-based sites favor vertical navigation on the sidebar. Things can get even more complicated on news websites as they have no obvious tendency either way.
Amount of contents available, usability and design are essential factors to weigh in. In some cases, you need to add visual elements in and around the navigation (such as icons) to make it stand out better. You should also consider a richer typography, as the navigation is usually the most popular area of your site, it is necessary to give it a special typographic treatment and make the user experience a little more unique and distinctive.
Amazon has a long list of products and it is impossible to rely only on a horizontal menu. Instead, users can use an extensive form of vertical navigation on the left sidebar, which allow them to refine products selection quickly. Most Amazon customers have an idea what they’re looking for and they simply need to use the search bar, then they can tweak the result using the vertical navigation. Developers should learn how Amazon’s vertical navigation can serve users well, despite the complexity of the products offered.
If you have a multilingual website, you should consider how different languages can affect your navigation menu structure. Compared to French and German words, English words are usually shorter; so horizontal menus can be affected significantly by variations in words length. Poor design decisions on multilingual website can cause the horizontal menu to overflow and ruin the whole presentation. A website may look nice in English, but looks like a pile of mess in French or other languages. To avoid very long words, you may need to use alternative words instead of using direct, obvious translation of the words. A website should offer consistent user experience across languages.
While it’s highly advisable to use simple primary horizontal menus, this is not a fixed rule. Some designs can pull it off by using vertical menu for primary navigation. Websites with fairly minimal design and simple horizontal menus almost always work when representing a relatively small number of contents, while website with plenty of contents should use vertical navigation more intensively. With proper use of navigation, you can represent a large amount of information in a minimalist and very compact way. You should provide users with a clear sense of the site hierarchy. Navigation menus that follow best practice can still look attractive and work well.
Standard and large drop-downs
While designers typically use horizontal menus for top-level navigation, you should focus more in-depth navigation when working larger websites. Drop-down menus can save plenty of space and keep your design organized. You can further refine the hierarchy with sub-levels to help user filter the information quickly. If you have plenty of categories and topics, large drop-downs can be very useful. They provide more click areas for users and accommodate a wide range of layouts and contents. Large drop-downs can serve more contents and help designers to better organize navigation. You can use them for both essential and non-essential contents, however you should indicate clearly that a drop-down menu is available in your site, either by using icons, labels or arrows.
There are many ways you can use a drop-down and there are many interesting solutions available. Often, navigation is so extensive that you need to use sub-menus. With smart semantic and CSS mark-up, creating and implementing large drop-downs won’t be more difficult than simpler, more traditional drop-downs. However, you could run into a number of issues, for example on Safari, large drop-downs do not display over a Flash content. You can do a number of workarounds, such wrapping Flash content in a layer or a div.
Navigation can be complex due to membership considerations and the number of contents used; it can add plenty of work in the web development process. However, it can fairly be easier if you have good organization and solid pre-planning. Designing, coding and organizing navigation may take many shapes, but there are always resources to turn to and trends to follow.