I’m starting to wonder if we still need a traditional menu-structure on our websites. The average visitor of a website makes split-second decisions and is always in a hurry, so why make that visitor scan an entire menu-structure and learn it to find a specific item on a website? Ask yourself; how many times have you used the search-bar on a website because you didn’t want to spend time finding the right page in a menu?
Recently I have been spending a lot of time trying to find a decent menu-structure for a website. How do I best structure content? How do I intuitively explain navigational choices? What type of navigation suits the website? There were a lot of questions that needed answering. Trying to cram all of the required data in a simple menu that makes use of design-patterns and is actually useable is pretty hard, especially if you also have to keep responsiveness in mind. I started to observe my own interactions on websites to see how I myself navigate through complex menu-structures and found out I hardly ever touch navigation-elements and rely mostly on search-capabilities. Some examples:
- I use Alfred to launch apps and find local files instead of browsing the filesystem for a certain file
- I use Google to find relevant information online
- I use Gmail search extensively to find a specific e-mail thread
- I never use the ‘friends’-page on Facebook to find someone, I simply type their name into the Facebook search-bar
- When presented with a large article/page while looking for specific information I don’t scan the entire article, I use cmd+f to find a specific keyword.
Is it just me?
Am I the only one doing this? The answer is no. After testing my theory on a few people with different ages and backgrounds I found that there were not many that still used the traditional file tree on their system and a lot of them used the cmd+f feature in browsers to find a specific part of an article. When tasked to buy a product on Amazon that meets certain specifications, the search-bar was their first point of interest. When posed with a task of finding an article online their first reaction was to use Google, which is essentially the worlds biggest search-based navigation. My test was pretty small, but even with a few people there were some obvious results. This was interesting; would it translate to a website?
Like you’ve never seen this search-bar before
Obviously there are some issues that would need to be addressed before simply removing a menu in favor of a search-bar. First of all, there is no method of promoting content on the website, users are invited to find results relevant to their needs. If however the user has absolutely no idea what your website and/or company is about, they’re going to have a hard time and probably leave. Another issue is that most users aren’t that good at searching; they just kind of get by and eventually stumble upon what they wanted to find. Both of these issues can be overcome by using a smarter approach to the search-bar.
The navigational searchbar
Using a search-bar as a primary means of navigation means presenting a lot of data in a meaningful way, the same as a normal menu. The added bonus here is that every keystroke a user types gives you more insight into what that user want from the website, essentially allowing you to present only the pages that a users wants to see. Using progressive disclosure more information can be available that is relevant to that specific user. Remember though, that when the user lands on the page, the bar is empty. So I set a few ground rules for the navigational search-bar.
1: Present users that haven’t typed anything yet with some suggestions
Essentially, this is cheating, you can just ‘suggest’ your complete old menu if you want to, but you can make it smart cheating. How about checking your website’s analytics and finding out what people have beed searching for and suggesting the first few results? Chances are most of your ‘casual’ traffic will be fine if you suggest a couple of these results.
Zappos uses the search-box placeholder for suggestions, and has popular search terms below the search-box.
2: Respect the different types of users
Be forgiving when a user makes a typo and show results for the keyword that is closest to that they typed. This also means using a small thesaurus to better understand input. If a user searches ‘phone’ while the site has a ‘call us’ link on the contact page, that user should be accommodated. Remember that users often do not make optimal choices when it comes to keywords.
On the other side of the spectrum, be able to handle more advanced searches; some users will want to search for phrases, multiple keywords and use logical operators like AND and NOT. No matter what type of user starts typing in your search-box, whether they are new to the internet or helped invent it, each level of expertise should be accommodated.
3: Never stop suggesting
Once a user has found their content, there is no shame in suggesting a second page for them to read if they are still interested. Once again you could check your analytics and see what pages seem to have a connection and suggest those pages. You’re effectively ushering users through your website using a logical path that has been taken by previous users. You can maybe use a tag-system for content that is relevant to each other so users can read more using a specific tag.
every time you press a key, Google refines their suggestions
Amazon uses special search keywords to help you find items within certain categories
If all of these ground rules are applied a search-based navigation could work on a website. I’m curious to see if this kind of navigation is going to take off in the near future; especially in a world where the web is ubiquitous on almost every device the simple search-box could make a website infinitely more useful than the standard menu that adapts to the viewport. Right now I am not too impressed with responsive menus that become a huge dropdown on mobile devices, I’d rather see a simple search-bar to find my content. File this one under ‘food for thought’.
Header image: INPIVIC on Flickr