Are you looking to create a new landing page, redesign your website, or just only change your menu navigation? It’s always helpful to know some basic principles for creating well designed menus and see inspiring examples.
Note that according to Forrester Research (http://www.usability.gov/)
- 50% of potential sales are lost because users can’t find information,
- 40% of users never return to a site when their first visit is a negative experience.
Therefore, creating an effective website navigation system is a crucial part of ensuring usability, and the success of a web design. Good navigation should be intuitive, easy to use, and most importantly help your visitors find the content they’re looking for quickly, without fuss. For this reason, we strongly recommend to create A/B tests of menus with Nelio to be sure what are the preferences of your visitors.
As more and more users are accessing sites via mobile devices, one of the challenges of designing and developing responsive websites is to create a user-friendly navigation menu that works equally well for visitors on all types of devices. This is the reason why, nowadays, many responsive websites are now opting for a navigation menu that is much less dominant visually.
Principles of good website navigation
Dmitry Molchanov described the following 22 Principles Of Good Website Navigation and Usability:
1. Distinct: visually separated and easy to find.
2. Simple: don’t puzzle, don’t make it too extraordinary.
3. Consistent: use the same navigation model in all your pages.
4. Familiar: avoid unusual types of navigation. If you have something that people already know, they deal with it more easily.
5. Clear: make your menu links do exactly what they say.
6. Descriptive: avoid using generic captions to all businesses like “Products” or “Services”.
7. Concise: you can add a lot of links in a vertical navigation, that’s why some people prefer it.
8. Interactive: feedback is essential to any interaction. The moment people click or hover a menu items, make sure to offer an indication of the action.
9. Ordered: put most important items first in the navigation and the least important items in the middle. The standard location for “Contact” is the end (far right in top-level horizontal navigation).
10. Styled: minimalism is still in trend in web design, and many web designers simplifies navigation down to almost nothing.
11. Structured: plan your navigation along with website information architecture.
12. Accessible: most CSS menus are technically accessible, however you need to make sure your navigation works:
- in all browsers, including older browsers,
- on mobile devices,
- with disabled Javascript,
- without mouse,
- for users with difficulty reading text
13. Clickable: make all navigation elements clickable links.
14. Silent: don’t play a sound each time an item in your navigation is rolled over with the mouse.
15. Shallow: don’t bury information. Limit the number of clicks to get any page to three.
16. Visual: help your visitors out with some easy to interpret visuals.
17. Responsive: a responsive solution for your navigation menu is a must have.
18. Seamless: a drop down menu should appear seamlessly and without interruption.
19. Animated: transition effect is one more detail that can make your menu look cool.
20. Sticky: stick your menu to one place, so that it does not disappear when the user scrolls down the page.
21. Scalable: make sure your menu is extensible. It should be easily scalable when you add more content to your site in future.
22. Tested: test your navigation with people who has used Internet before, but not related to the design process. You may get some unexpected ideas and input that would otherwise go undetected without this test run.
The truth is that following the previous principles may improve your website. However, there are websites that do not follow these principles and also get great results.
I’ve collected different WordPress examples of menus that I hope can be used as a source of inspiration for yours.
Examples of WordPress menus
The selected examples, after ensuring that are in WordPress websites, are from the following posts:
- 22 Great Examples of Website Navigation by Sam Hampton-Smith
- 40 Beautiful and Effective Responsive Navigation Menus by Steven Snell
- 23 Great Examples of Innovative Navigation for Your Inspiration by Stephanie Irvine
- Drop Down Navigation – 22 Inspiring Examples of Stylish Drop Down Menus by Michael Almond
- Great Examples Of Website Menu Design by Bogdan Sandu
- 6 Examples of Great Website Menu Design (and Why They Work) by Ryan Scott
Note that the following examples are ordered alphabetically by the name of the website. And also, take into account that the most interesting aspect of some of the examples is the navigation effect of the menu, rather than the style, which is not really seen in a screenshot. So, go visit their websites and you’ll enjoy the nice effects they created.
Nelio A/B Testing
Native Tests for WordPress
Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.
1. And Culture
2. Awesem
3. Bengtsson & Bengtsson
4. Big Eye Agency
5. Coulee Creative
6. Curt’s Special Recipe
7. Galpin Industries
8. Grain & Mortar
9. Infografixlab.com
10. The Japan Times
11. John Sardine
12. Long Story Short Design
13. LBVD
14. Made by Vadin
15. Marketplace
16. Marketing Week
17. Matter of Form
18. nGen Works
19. Paid to Exists
20. piano
21. Proweb Design
22. Racket
23. Rokivo
24. Rudalov
25. Sparked
26. Standford Arts
27. StudioPress
28. Theme Trust
29. Uber
30. Web Design Ledger
31. wedge&lever
32. WPEngine
33. Zinio
If you still need some more inspiration, you may be interested in reading this detailed description of types of menus: 35 Premium Web Navigation Menus by Web Design Tunes.
So now, what’s your excuse not to having a great menu? Remember that you can test menu variants by using Nelio A/B Testing. Our menu experiments are unique and worth a try!
Leave a Reply