Contact
December 10, 2014 | Rob Spurlock

How to Create a Drop Down Menu that Improves User Experience

How to Create a Drop Down Menu that Improves User Experience

Many folks working in website design, especially those who specialize in user experience (UX) or user interface (UI), have proclaimed that drop-down menus are bad, and designers shouldn't use them. And it's true that studies have shown that a drop down menu can negatively impact a visitor's experience—but many of those studies tested not just any drop-down menu, but a bad use case like a 50 state drop-down list in a form.

Scrolling through 50 options isn't the same as a using well thought out and carefully designed website menu, so if you need to create a drop down menu to help users navigate your website, go ahead - just make sure that you think first about the user's experience and how easy your menu will be to use!

The design of your website's navigation can determine whether a visitor spends 10 seconds or 10 minutes on your site. You want to make it as easy as possible for visitors to find the information they're actually looking for - in part, this means laying out your homepage to direct the visitor to the most important areas of your website. But since you can't put everything on your homepage, it's just as important (or more so?) to have an effective and useful menu.

If your website is in WordPress or another content management system (CMS), the menu functionality is built in. With the coding and styling out of the way, that frees you up to work on improving the UX of your navigation.

To create an effective drop-down menu:

  • Make sure your menu is easy to see and appears where your visitors expect it to. This usually means a horizontal menu above or just below the header, or a vertical menu in a sidebar. Personally, I prefer horizontal menus over vertical.
  • Use labels that actually describe the content of the page that the menu links to. The name of the menu item doesn't have to be the same as the name of the page, and you can change them whenever you want without affecting the pages themselves. Instead of generic labels like "Services" or "Products," try a label describing what your services or products are. Or, instead of "About," try "Meet our Team." It's okay to use longer phrases instead of short single words - just make sure your menu items fit and look great on your website.
  • Less is more: Putting fewer, more strategic items in your menu can help your visitor find the item they're looking for more quickly. If you present them with a mile-long drop down list, visitors get overwhelmed. Rather than reading each item to find what they're looking for, they'll give up and turn to Google to answer their question. Use your main navigation pages to provide keyword-rich and relevant overviews, and then use internal linking to help the visitor find more detailed pages.
  • If you aren't using a CMS, make sure your menu is properly created/coded so that search engines can read and follow it. The most common mistake is using graphical buttons - search engines can't read images, so make sure your menu label are actual text. If you want a graphical look, a good web design company can build you an awesome menu utilizing today's CSS that will have the visual impact you want without sacrificing your search engine ranking.


So how do you make these changes to your menu in WordPress, for example?

After you log in to WordPress, your menu can be found under Appearance in the vertical navigation bar on the left-hand side of your screen. You can add pages you've created to the menu under "Pages" on the left-hand side of the screen. Then, drag them up or down in the menu, or horizontally to add them to a drop-down menu under one of the pages in your top-level navigation.

Do you have any other suggestions to make drop down menus better? I'd love to hear them - just share them in the comments.

Website Redesign Free Ebook

 

Rob Spurlock

Rob Spurlock

Principal and Founder of VIEO Design™, LLC. Rob has a love for the East TN community. Server environment, web functionality and WordPress expert. He has extensive expertise in the Internet industry and related Internet software with over 15 years experience.

Related Post: