Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UserTesting's Navigation Treasure Trove: Menu Usability Resources


Published on

Catch this full article on our blog:

Ugly or confusing navigation can certainly make you miss out on conversions — but it also impacts the overall customer perception of your company. If visitors have a frustrating time trying to navigate your site, then you’re missing out on an opportunity to delight your customers. And delighted customers are the ones who will make multiple purchases, leave positive reviews, and become advocates for your brand.

If you’re interested in improving your navigation usability, here are 37 resources to help you create a great experience for your users.

Published in: Design, Technology
  • Be the first to comment

UserTesting's Navigation Treasure Trove: Menu Usability Resources

  1. 1. The Navigation Treasure Trove:
  2. 2. Navigation can make or break the user experience on a website. If users can’t find what they’re looking for—or if they can’t use the menu—they’re likely to get frustrated and give up on the site. Introduction
  3. 3. Check out the following video example of a user struggling with an unwieldy navigation experience... Introduction
  4. 4. Introduction Frustrating site navigation means you’re missing out on an opportunity to delight your customers. Delighted customers means: Multiple Purchases PositiveReviews BrandAdvocacy
  5. 5. Introduction Ifyou’reinterestedinimproving yournavigationusability,here are37resources to help you create a great experiencefor yourusers. Sections: •GeneralMenuUsability •MobileMenuUsability •Testing&Analytics •Books •Courses&Presentations •DesignInspiration •CodeandTutorials
  6. 6. General Menu Usability
  7. 7. Five Expert Tips for Improving Your Navigation Menu General Menu Usability This article gives a great overview of some common-sense (but often under used) guidelines for menu design. Learn what experts say about menu placement, use of visual information, and more. Read More »
  8. 8. Why Hover Menus Do Users More Harm than Good General Menu Usability Many well-intentioned websites use drop-down menus that expand when the user hovers over them. This article explains why this tends to cause frustration and confusion. Read More »
  9. 9. Designing Drop-Down Menus: Examples and Best Practices General Menu Usability Drop-down menus get a lot of criticism for hindering usability, but sometimes they’re the best option. These tips will show you how to use drop-down menus for good, not evil. Read More »
  10. 10. General Menu Usability Sticky Menus Are Quicker to Navigate General Menu Usability “Sticky” or fixed navigation menus can make a huge difference in a website’s usability. This post shows the pros and cons of switching to a sticky menu, along with some surprising statistics. Read More »
  11. 11. Hold the Hamburger General Menu Usability More and more websites are using the “hamburger” (the ubiquitous three-line symbol for a menu) to save space on the screen, but hiding the navigation options isn’t always the best idea — especially for a desktop site.Read More »
  12. 12. Mega-Menus Gone Wrong General Menu Usability Large drop-down menus can easily fall into the trap of giving the user too many options or presenting the options in a confusing way. This article shows you what not to do if you’re using a drop-down menu. Read More »
  13. 13. UX Flows: Navigation General Menu Usability This post discusses navigation from a UX designer’s perspective and shows some creative alternatives to the traditional drop-down menu. Read More »
  14. 14. Top Navigation vs. Left Navigation: Which Works Better? General Menu Usability Not sure of the best location for your nav bar? Learn about scanning, visibility, and priority to decide which option is best for your site. Read More »
  15. 15. Designing a Winning Navigation Menu: Ideas and Inspirations General Menu Usability Browse through this collection of best practices, resources, and examples to get inspired to create a highly usable menu. Read More »
  16. 16. What Really Matters in Navigation Bar Usability General Menu Usability Take a look at the results from these real-life nav menu A/B tests. You might be surprised at what a difference a small change in copy or functionality can make. Read More »
  17. 17. Mobile Menu Usability
  18. 18. Best Practices for Navigation on the Mobile Web Mobile Menu Usability With mobile web traffic continuing to rise, creating a usable mobile experience is more important than ever. This article gives some basic guidelines on building menus for the small screen. Read More »
  19. 19. Responsive Design Menus: Problems and Proposals Mobile Menu Usability Responsive design is a popular way to make a website work on multiple devices, but creating an effective menu within your responsive site can be a big challenge. Here are some ideas for building a responsive menu that works. Read More »
  20. 20. 11 Ways to Improve the Navigation on Your Mobile Site Mobile Menu Usability For e-commerce sites, a bad mobile experience equals a loss of sales. From one-click checkout to the 44×44 rule for links and buttons, this is a list of things retailers can do right now to make their mobile navigation more usable.Read More »
  21. 21. Mobile Navigation Menus and Great User Experience Mobile Menu Usability This article shows how to make good use of the limited space on a mobile screen without confusing users. It also includes some user-friendly alternatives to the “hamburger” navigation symbol. Read More »
  22. 22. Mobile Menu A/B Tested: Hamburger Not the Best Choice? Mobile Menu Usability What does mobile menu usability have to do with quantum physics? And is it better to use an icon or a word to label the menu? Find out in this post. Read More »
  23. 23. Responsive Menus: Enhancing Navigation on Mobile Websites Mobile Menu Usability There’s more to mobile design than layout and speed. This article takes a deep dive into improving navigation — code included! Read More »
  24. 24. Designing Your Menus for Optimal Usability Mobile Menu Usability If you’re looking to improve the menu on your app, you’ve come to the right place. This post gives pointers on designing menus for mobile game apps. Read More »
  25. 25. UX Designers: Side Drawer Navigation Could Be Costing You Half Your User Engagement Mobile Menu Usability The co-founder of TV app Zeebox shares the surprising result of what happened when his app switched from a top navigation to a hidden side drawer alternative. Read More »
  26. 26. Testing and Analytics
  27. 27. Tree Testing for Effective Navigation Testing and Analytics Tree testing is a great way to test your site structure. This article explains tree testing, using a company intranet as an example. Read More »
  28. 28. Using Card Sorting to Test Information Architecture Card sorting allows you to find out how users would naturally expect a site to be organized. Learn when, why, and how to use this method of testing. Testing and Analytics Read More »
  29. 29. Optimal Workshop Optimal Workshop offers tools for tree testing and card sorting. There are even free plans for folks who want to do smaller studies. Testing and Analytics Read More »
  30. 30. Books
  31. 31. Designing Web Navigation by James Kalbach Books This widely-respected bestseller discusses design principles, development techniques, and real examples for creating a usable navigation experience. Read More »
  32. 32. Card Sorting by Donna Spencer Books This book takes an in- depth look at how to run a card sorting test, from planning the study to analyzing the results. Read More »
  33. 33. Courses and Presentations
  34. 34. Organizing Mobile Web Experiences Courses and Presentations Popular presenter Luke W. shows you realistic solutions for organizing your site’s navigation on a mobile screen. Read More »
  35. 35. Website Navigation – How to Get It Right for Customers Courses and Presentations Check out the 9 tips in this quick presentation that you should keep in mind when designing your navigation experience. Read More »
  36. 36. Create Navigation Menus with jQuery Courses and Presentations This intermediate-level online video course will get you up to speed with building menus using jQuery. Read More »
  37. 37. Design Inspiration
  38. 38. 50 Beautiful and User- Friendly Navigation Menus Design Inspiration From super-simple to highly artistic, these menus have one thing in common: they’re very easy to understand and use. Read More »
  39. 39. 20+ Responsive Mobile Navigation Inspirations Design Inspiration These responsive mobile sites are shining examples of what you can do with a navigation menu on the small screen. Read More »
  40. 40. 45 User Friendly Navigation Menu Examples Design Inspiration These websites prove that you don’t have to sacrifice creativity to make a menu user-friendly. Read More »
  41. 41. 31 Super Unique and Functional Website Navigation Menus Design Inspiration The navigation menu can play an important role in establishing a website’s character, as these examples do. Read More »
  42. 42. 10 Examples of Beautiful Vertical Navigation to Inspire You Design Inspiration Design fans will appreciate the aesthetic appeal of these vertical nav menus. Read More »
  43. 43. Code & Tutorials
  44. 44. Navbar Template for Bootstrap Code & Tutorials The Navbar component in the Bootstrap framework gives you options for static and fixed (sticky) navigation bars. Read More »
  45. 45. CSS Navigation Bar Code & Tutorials Learn how to build simple navigation bars using CSS in this beginner demo. Read More »
  46. 46. Creating a Floating Navigation Menu Code & Tutorials Like the idea of using a sticky menu on your site? This tutorial will walk you through the HTML, CSS, and JavaScript you need to get started. Read More »
  47. 47. Menu-Aim jQuery Plugin Code & Tutorials This plugin makes hover dropdown menus more usable by allowing the user to move the cursor to a submenu without accidentally collapsing it. Read More »
  48. 48. 38 Free Open Source CSS Dropdown Navigation Menus Code & Tutorials Want to copy and paste some CSS code rather than building your menu from scratch? Here are 38 basic menus that you can customize to suit your site. Read More »
  49. 49. 100 Great CSS Menu Tutorials Code & Tutorials Follow along with any of these 100 tutorials that will teach you how to create beautiful CSS menus. Read More »
  50. 50.