When designing interfaces, we often focus on the same suspects.

All of these navigation features are very important and useful, but there are many more that users forget to use or ignore. These are shortcuts to navigation that help users get to the destination they desire faster than traditional navigation.

Sometimes they can be more efficient than others, especially if they are used on large sites with thousands of pages. Many pages on these sites have been gathering dust over the years. 

Designing for Exploration 

You might not expect the web experience you have. Websites can be accessed with different intentions. To address these intents, we have to often translate them into meaningful combinations of clicks, taps, and keywords. We instead go through pages and sub-navigation to find the answer.

Marcin Ignac suggests that you need to use explorative interfaces that make the most of context and association.

Gerry McGovern correctly stated once that more people were on Mount Everest than were listed on the 10th Google search result page.

We let the users explore the site on their own with very few signs. They will need search queries, to scan the footer, and to find links and tags.

It works, but it is slow. Navigation queries are where you come in. 

Navigation Questions 

Navigation queries aren’t a new concept. There are many options, such as the Madlib pattern and natural language forms, for querying navigation. These provide an easy way to indicate intent, without having to use input fields or navigation menus.

This is the idea behind creating a query constructor that the user can use to help them. A navigation question is something we call

AO.de’s homepage allows customers to search for the most relevant device.

Common bond.co lets you define your intent using a navigation pattern. This is in addition to the main navigation at the top. Users can select what they want to do or look for. A second drop-down allows them to further express their intent.

This is a drill-down navigation experience with multiple levels. Users make smaller decisions and aren’t confronted at every stage of the navigation.

Users don’t need to load a new page, similar to mega menus. Users can easily navigate between the options without having to touch or adjust the menu.

Cork Chamber also uses navigation queries. “I want to” is focused on what visitors intend to do.

Comparison

You have two headphones you wish to compare. You want to pick the most comfortable one for you.

The feature comparison chart will likely have multiple columns for each product, and hundreds of attributes. This will allow us row by row to navigate the rows, from left to right.

No one wakes up expecting to compare products based on their features in a matrix. Users can be asked their opinions to help improve their experience.

Productchart.com lets customers compare features without using a feature comparison chart.

This is not a typical Productchart.com feature comparison. Instead, Productchart maps all products in a two-dimensional space instead of using feature tables. Customers can choose the attribute they wish to see on each axis. To narrow down the selection, they can use filters. This allows them to highlight and compare products that are of interest to them.

Mediamarkt asks users to identify the most important attributes and then only displays those attributes.

Mediamarkt product comparisons do not use tables. This could be an autocomplete multicombobox that contains all available features and is grouped in accordions.

Customers can choose from several selections in the evaluation process. Customers can vote for or against products based on the features they have. Customers can view the entire feature comparison matrix and download it as a PDF.

A–Z Index Pattern 

Websites can experience navigation decay as they grow. Mislabeled categories lead to duplicate content and in some cases, even a complete rewrite of the entire site.

This problem can be solved by redesigning the information architecture. It establishes guidelines for publishing, categorizing, archiving, and deleting. This is called governance. It could take many years before significant changes are made. Visitors couldn’t find any information on the site so they relied on Google and Bing. They also landed on other websites.

One way to address this is with an A-Z Index pattern.

This is the most common way large websites use to navigate, particularly if they provide public services. Each keyword links users to the page they choose.

Sometimes, each letter can be presented on its page. Sometimes, each letter is presented on its page. Users can use the in-browser Search feature to quickly find what they want without having to visit multiple pages.

A sophisticated A-Z index with lots of detail on the University of Antwerp 

It is possible to include pertinent information in the A–Z index. Users could choose to view the information from multiple pages, such as opening hours and location.

The University of Antwerp is an example of such an idea. It shows useful information on the A–Z index pages. However, we would need a button that allows all accordions to be collapsed or opened simultaneously.

Visitors can quickly jump from one page to the next at Aarhus university. (Large preview).

Aarhus University is focused on the A-Z Index. Visitors can first choose their roles. Then, they can choose a letter. Next, they can browse the list of choices, jumping to specific departments and faculty.

Visitors can quickly jump from one page to the next. 

Keywords that appear in the A–Z index should be tested thoroughly to ensure users find the right information. This is similar in function to autocomplete.

Tap-Ahead Autocomplete Pattern 

Autocomplete can be used to highlight keywords. We can also direct users toward specific categories, products, brands, collections, or records that we have prepared in advance.

Autocomplete offers more than just keyword suggestions. 

HEMA.nl, Prisma. fi, and Ikea.com all offer to autocomplete. This prompts users to enter category suggestions, products, and frequently searched terms, as good information about each item from its length to its price.

It’s not surprising that statistical offices include data in their autocomplete suggestions. 

Statistics Estonia100 gives a summary of articles as well as actual query results. Every data type is highlighted in the autocomplete.

It could be even more. Users could get feedback and help choose the best keyword query to bring them the best results.

Tap-ahead auto-complete lets users create queries based on suggestions from the autocomplete. You can “build” your query using the suggestions.

Did you click on the arrow to your right? Tap-Ahead is in action on Media Markt.

Tap-ahead is a popular method used by large websites.

Tap-ahead speeds up typing and directs customers to the relevant results. This gives them confidence that they are on the right track.

Users can create advanced search queries.

You might be able to design an interface that is easier for experts. This eliminates the need for tags and filters. Focus users will only receive tips on how search works better – if they wish to.

Stripe lets you create queries and view the results.

Stripe customers can add filters directly to the search box. This allows customers to concentrate on their queries and instantly see the results.

Wrapping up 

When designing navigation, we often rely on predictable patterns. This is a great thing because the result is often predictable for our customers.

Sometimes navigation can be tedious and time-consuming. Navigation queries can be used to help users navigate more quickly.

All of the techniques mentioned above can be used to help us reach our destination. They enhance and complement the user experience, especially on large websites that may be slightly out-of-date.

Think about creating more explorative interfaces when you next work on navigation. Explore navigation queries, evaluation paths, and A-Z index.