Catch this full article on our blog: http://bit.ly/NavigationTreasureTrove
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.
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. Check out the following
video example of a user
struggling with an unwieldy
navigation experience...
Introduction
4. Introduction
Frustrating site navigation means you’re missing out
on an opportunity to delight your customers.
Delighted customers means:
Multiple Purchases PositiveReviews BrandAdvocacy
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. 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. 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. 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. 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. 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. 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. 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. 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. 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 »
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. 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. 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. 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. 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. 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. 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. 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 »
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. 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. 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 »
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. 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 »
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. 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. 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 »
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. 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. 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. 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. 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 »
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. CSS Navigation Bar
Code & Tutorials
Learn how to build simple
navigation bars using CSS
in this beginner demo.
Read More »
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. 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. 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. 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 »