Design Probe - Creative Cooking by cea

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).

Psychologists call it the "serial position effect", it's based on the principles of primacy and recency.
Psychologists call it the “serial position effect”, it’s based on the principles of primacy and recency.

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:

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

And Culture menu screen shot
And Culture menu screen shot

2. Awesem

Awesem menu screenshot
Awesem menu screenshot

3. Bengtsson & Bengtsson

Bengtsson&Bengtsson menu screenshot
Bengtsson&Bengtsson menu screenshot

4. Big Eye Agency

Big Eye Agency menu screenshot
Big Eye Agency menu screenshot

5. Coulee Creative

Coulee Creative menu screenshot
Coulee Creative menu screenshot

6. Curt’s Special Recipe

Curt's Special Recipe menu screenshot
Curt’s Special Recipe menu screenshot

7. Galpin Industries

Galpin Induestries menu screenshot
Galpin Induestries menu screenshot

8. Grain & Mortar

Grain&Mortar menu screenshot
Grain&Mortar menu screenshot

9. Infografixlab.com

Info grafix lab menu screenshot
Infografixlab menu screenshot

10. The Japan Times

The Japan Times menu screenshot
The Japan Times menu screenshot

11. John Sardine

John Sardine menu screenshot
John Sardine menu screenshot

12. Long Story Short Design

Long Story Short menu screenshot
Long Story Short menu screenshot

13. LBVD

LBVD menu screenshot
LBVD menu screenshot

14. Made by Vadin

Made by Vadim menu screenshot
Made by Vadim menu screenshot

15. Marketplace

Marketplace menu screenshot
Marketplace menu screenshot

16. Marketing Week

Marketing Week menu screenshot
Marketing Week menu screenshot

17. Matter of Form

Matter of Form menu screenshot
Matter of Form menu screenshot

18. nGen Works

nGen Works menu screenshot
nGen Works menu screenshot

19. Paid to Exists

Paid to Exists menu screenshot
Paid to Exists menu screenshot

20. piano

piano menu screenshot
piano menu screenshot

21. Proweb Design

Proweb design menu screenshot
Proweb design menu screenshot

22. Racket

Racket menu screenshot
Racket menu screenshot

23. Rokivo

Rokivo menu screenshot
Rokivo menu screenshot

24. Rudalov

Rudalov menu screenshot
Rudalov menu screenshot

25. Sparked

Sparked menu screenshot
Sparked menu screenshot

26. Standford Arts

Standford Arts menu screenshot
Standford Arts menu screenshot

27. StudioPress

StudioPress menu screenshot
StudioPress menu screenshot

28. Theme Trust

ThemeTrust menu screenshot
ThemeTrust menu screenshot

29. Uber

Uber menu screenshot
Uber menu screenshot

30. Web Design Ledger

Web Design Ledger menu screenshot
Web Design Ledger menu screenshot

31. wedge&lever

wedge&lever menu screenshot
wedge&lever menu screenshot

32. WPEngine

WPEngine menu screenshot
WPEngine menu screenshot

33. Zinio

Zinio menu screenshot
Zinio menu screenshot

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

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.