Perhaps the most difficult part about navigation on the Web is organizing and designing it. After all, coding it can be relatively easy. In this first section, weâ€™ll go over some methods and best practices for organizing navigation, which can lead to a more intuitive user experience and higher conversion rates.
Primary vs. Secondary
Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldnâ€™t be the job of any one menu. All of that content just doesnâ€™t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.
You might assume that the primary and secondary navigations are marked in a wrong way on the image above, but I believe that this is not the case.
Primary navigation stands for the content that most users are interested in. But importance is relative; the type of content linked from the primary navigation on one website may be the same kind linked from the secondary navigation on another (for example, general information about the company or person).
Secondary navigation is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. For many blogs, this would include links for â€œAbout us,â€ â€œContribute,â€ â€œAdvertiseâ€ and so on. For other websites, the links might be for the client area, FAQ or help page.
If youâ€™d like to learn more about primary and secondary navigation, â€œUnderstanding Site Navigation: Key Termsâ€ is a great article with detailed explanations of different navigation terms, including for primary and secondary menus.
The first job in organizing navigation is to organize the content. Only after the content has been organized can you determine what is primary and what is secondary, and then you can determine the location and navigational structure of any remaining content. Content that fits neither the primary nor secondary navigation can go in other menus, whether a sub-menu, footer menu, sidebar widget or somewhere else. Not to suggest that primary navigation cannot go in these areas of the page; there are many instances where primary navigation is best suited to the sidebar or in drop-downs.
Also ask whether navigation is even needed beyond the primary menu? If a secondary menu is needed, then why and whatâ€™s the best way to implement it? No matter how organized the content is, if thereâ€™s a lot of it and thus a need for a more complex navigational structure, then distinguishing between primary and secondary content can be daunting. Fortunately, thereâ€™s a great method that designers can try: card sorting.
Information Architecture: Card Sorting
Whatâ€™s the best way to organize content? How should the navigation be labelled and grouped and positioned? How will people use the navigation?
Card sorting is commonly used in information architecture and can help Web designers answer all of these questions even before the design phase begins. Card sorting basically helps designers organize navigation, especially complex navigation, in the most efficient way possible.
One complaint I hear regularly about websitesâ€¦ is that theyâ€™re designed around how the organization is structured. Given that the information architecture is usually completed by internal teams, this makes sense. One way to get input on structuring a site to reflect a a visitorâ€™s way of thinking is by collecting input from card sorts.
Card sorts are a way to have website visitors organize and label content. Itâ€™s useful to have a visitor show you how sheâ€™d approach your website, and grouping and labeling are key elements for determining the best navigation for a website. Of course, youâ€™re likely to get a variety of different groupings from users, so youâ€™ll be looking for overlaps and commonalities while also considering how to help those who used varyingÂ groups and labels.
â€“ Amy Hissrich
Card sorting can be used to determine menus and sub-menus, the wording on them and even their design and structure. Weâ€™ll go over the basics here, but be sure to check out the resources below for more information, guides and examples.
(Image: Dunk the Funk)
There are two types:
- Open card sorting is when participants are given cards with content topics and are asked to organize them into groups. They are given no information or context beforehand. Then they name the groups. Depending on the project, participants could be asked to create two groups, unlimited groups, sub-groups and so on. They could also be asked to organize the groups and content into the hierarchy they think best.
- Closed card sorting is when participants are given cards with content topics as well as the categories to put them into (and even sometimes sub-categories). Participants are not responsible for naming the cards. This option is great for exiting websites with established categories, menus, etc.
Below are some resources and further information on card sorting:
- â€œCard Sorting for Navigation Designâ€
- â€œCard Sorting: Introductionâ€
- â€œCard Sorting: Mistakes Made and Lessons Learnedâ€
- â€œCard Sorting: Stacking the Deck for Better Navigationâ€
- Card Sorting: Designing Usable Categories
There are also many applications for card sorting, some desktop and others online. Online card sorting can be easier to run, but itâ€™s not always the right choice. A great article on UX for the Masses that covers the pros and cons of each approach: â€œOnline Card Sorting: Even Better Than the Real Thing?â€ For easy card-sorting tools, check out OptimalSort, WebSort and UserZoom.
Grouped Content: Classification Schemes
When a lot of content is grouped in one category, another issue arises: what order to put it all in? Card sorting and similar methods may help to create groups and a hierarchy and to differentiate between top-level and sub-levels of navigation, but how should content within those groups be ordered? Alphabetically? By most used or most popular? Most recent to oldest?
Below is a list of the most common content classification methods, along with suggestions for what each is best for:
- Most recent to oldest
Suitable for time-sensitive content.
Great for when the user needs to find something fast. This includes definitions, indexes and other content that users know about before they find it.
- Most popular or most used
Great for interest-based browsing, rather than content that users need.
Is certain content irrelevant to certain regions or sub-regions?
- In the order of the process
If the content in some way represents a process (for example, â€œHow to file your taxesâ€), then it could be organized according to the order of actions the user has to take. FeverBee has a great example of this: â€œHow to Build an Online Community: The Ultimate List of Resources.â€ While the website is a blog, the content isnâ€™t necessarily time-sensitive, so the author has created a great navigational structure that puts much of the content into a step-by-step process.
For more on classification schemes, check out UX Boothâ€™s â€œClassification Schemes (and When to Use Them).â€