Join Chris Nodder for an in-depth discussion in this video Understanding menus, part of User Experience for Web Designers.
- Once you've worked out your navigation structure, the information architecture, you'll want to think about the best way to display it on the site. This is one situation where following standard designs is very sensible. There are a few tried and tested ways of displaying navigation menus, and people are used to seeing them on many other sites. So it's in your best interest to use the other formats that are in place. The two main places that you'll see navigation menus are either as tabs across the top of the site, or as a left column list. The main decision as to which of these you will use is the number of top level menu items you have.
If you have a long list of items, say many music categories, it just won't fit into a single-line, horizontal format. And so you'll use a vertical list instead. If you have just a few items, for instance, five key tasks that your site supports, then you can choose either horizontal or vertical. And like we said, if you realize there are different ways of categorizing the information on your site, there's no harm in using both a horizontal and a vertical menu. There are two big user experience issues with menus that really frustrate your visitors, but which are quite easy to avoid. One of the biggest issues, is menus that visitors can't actually use.
Drop-down and fly-out menus that are badly coded can be really hard to click on. People tend to move their mice in straight lines. Often when selecting a sub-menu, that means the mouse will temporarily leave the sub-menu area. Well-coded menu controls will have a sufficient lag built in that they don't disappear during this time. Poorly coded menu controls will disappear, meaning that visitors will have to go back and try again. This frustration is often enough to make people leave the site. It's especially prominent in older users and in young children because they just don't have the motor control to move the mouse exactly where it needs to go, or to move it fast enough.
The other big problem is using confusing terms in your menus. Two big ways of confusing people are to use industry or company specific jargon and to use made-up names for menu items. Jargon can really turn people off. You might expect that if someone is coming to your site that they already know the jargon related to your industry. However, that's not always true. Oftentimes big companies will use central purchasing departments to buy things. Those people know all there is to know about writing contracts, but they don't know your products. They'll be much happier to work with a site that explains things on their terms, than they will to struggle through one that assumes they already know what they're talking about.
Company-specific terms can be things like model names, or words that the marketing department made up. If you're part of the company, you use those terms every day so you have a clear picture in your mind of what an X500 widget does and how that differs from an X550 widget. However, your potential customers probably don't yet have that level of knowledge, and they need instead to be able to select based on some distinguishing factor, like power, size, type of fuel used, or where each device can be used. If you've got menu items that use made up words, you're probably confusing more of your audience than you expect. You might think you've made a great play on words, like Floralicious in the example here, but what makes sense to you as an expert or the site designer, may well not translate well to your visitors.
The same is true of navigation items that rely on colloquial knowledge. A colloquialism is something like "trouble and strife" which is Cockney rhyming slang for wife. It's well-known in some areas, but completely unintelligible to outsiders. So, to sum up, choose a menu location that works for the number of menu items you think you'll have, and then populate it with terms that your visitors will understand, and can differentiate from the other menu terms. Make sure that if you have sub-menus, these are easily accessible using the controls on your site, even for people who are slower mouse users than you are.
User experience expert Chris Nodder teaches
- What people want from websites, how they search for information, how they read online, and how to structure your content to take advantage of this research
- How to use graphics to help rather than hinder visitors, how to integrate video, audio, and other media, and when to consider interactive rather than static content
- How to look at your site's homepage, forms, product pages, and content through the eyes of users to build a site that better meets their needs
- How to balance site content with advertising
There are never enough great interfaces in the world. Take this easy introduction to start making wonderful online experiences for your own users.
- Building a site visitors will like
- Using single, consistent, and standard design principles
- Creating good menus
- Working with site maps
- Adding search to a site
- Arranging content in a layout
- Writing for the web
- Creating category pages and landing pages
- Designing product pages and forms
- Using media and interactive content
- Balancing ads and content