New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding menus

From: User Experience Fundamentals for Web Design

Video: Understanding menus

Once you have worked out your navigational structure-the information architecture-you will 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 few tried and tested way of displaying navigation menus and people are used to seeing them on many other sites. So it is in your best interest to use the formats that are in place. The two main places that you will see navigation menus are either as tabs across the top of the site or as a left column list. The main decision is to which of these you will use is the number of top level menu items you have.

Understanding menus

Once you have worked out your navigational structure-the information architecture-you will 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 few tried and tested way of displaying navigation menus and people are used to seeing them on many other sites. So it is in your best interest to use the formats that are in place. The two main places that you will see navigation menus are either as tabs across the top of the site or as a left column list. The main decision is 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, they just won't fit into a single line horizontal format. So you'll use as 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. Like we said if you realize there are different ways of categorizing the information on your site there is 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.

Dropdown and flyout 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 submenu, that means the mouse will temporarily leave the submenu 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 the visitors have to go back and try again. This frustration is often enough to make people to leave the site. It's especially prominent in older users and then 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 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 will be much happier to work with the site that explains things on their terms than they will to struggle through one that assumes they already know what they are talking about.

Company specific terms can be things like model names or words that the marketing department made up. If you're part of a company you use those terms everyday so you have a clear picture in your mind of what a X500 widget does and how that differs from 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 this 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 that 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 attributes that rely on colloquial knowledge. A colloquialism is something like trouble and strife which is company 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 menu items you think you will have and then populate it with terms that your visitors will understand and can differentiate from the other menu terms. Make sure if you have submenus, these are easily accessible using the controls on your site even for people who are slower mouse users than you are.

Show transcript

This video is part of

Image for User Experience Fundamentals for Web Design
User Experience Fundamentals for Web Design

52 video lessons · 24980 viewers

Chris Nodder
Author

 
Expand all | Collapse all
  1. 1m 7s
    1. Welcome
      1m 7s
  2. 4m 37s
    1. Building a site for your visitors
      1m 29s
    2. Understanding how people browse the web
      45s
    3. It's all about information
      48s
    4. What causes people to leave sites?
      1m 35s
  3. 3m 50s
    1. Simple design
      1m 9s
    2. Consistent design
      1m 11s
    3. Standard design
      1m 30s
  4. 20m 55s
    1. Elements of navigation
      1m 21s
    2. Content has a structure
      2m 18s
    3. Understanding menus
      3m 19s
    4. Reviewing some menu myths
      2m 4s
    5. Working with site maps
      1m 5s
    6. Adding search to your site
      2m 53s
    7. Understanding links
      3m 43s
    8. Exploring clickable elements
      1m 18s
    9. Understanding Fitts's Law
      2m 54s
  5. 11m 19s
    1. People can begin from any page on your site
      1m 24s
    2. Elements every web page should have
      3m 25s
    3. Creating progressive navigation
      3m 22s
    4. Arranging your content
      3m 8s
  6. 8m 7s
    1. How people read on the web
      2m 31s
    2. Writing for information exchange
      1m 43s
    3. Formatting pages for information exchange
      3m 53s
  7. 7m 21s
    1. Using your homepage as a site summary
      1m 50s
    2. Creating fresh content
      1m 20s
    3. Displaying navigation and search
      1m 25s
    4. The five-second test
      2m 46s
  8. 8m 8s
    1. Showing people what you've got
      3m 50s
    2. Making comparisons easy
      1m 24s
    3. Creating landing pages from ad campaigns
      2m 54s
  9. 11m 22s
    1. The real purpose of detail and product pages
      1m 16s
    2. Writing descriptive text
      2m 4s
    3. Using images to set context
      2m 17s
    4. Showing the price for products
      2m 27s
    5. Have a call to action
      1m 36s
    6. About Us: a special detail page
      1m 42s
  10. 10m 58s
    1. Ask for information in context
      2m 25s
    2. Making forms as painless as possible
      2m 34s
    3. Creating form fields
      3m 37s
    4. Handling errors gracefully
      2m 22s
  11. 9m 9s
    1. Using different types of media
      1m 55s
    2. Simple question: Does it enhance the experience?
      2m 15s
    3. Using graphics for explanation, not decoration
      1m 17s
    4. What is interactive content?
      1m 58s
    5. Laying out your page for media
      1m 44s
  12. 5m 3s
    1. Making money without selling out
      1m 37s
    2. Adding graphical ads
      2m 10s
    3. Creating text ads
      1m 16s
  13. 3m 42s
    1. Simple, consistent, and standard design
      2m 4s
    2. Consider your users and you'll be fine
      1m 38s
  14. 1m 31s
    1. More resources
      1m 31s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.