Some Good Examples of User-Friendly Navigation Menus

25 Nov

A good navigation menu is user-friendly which can help users to locate and find where they are. If users can’t find their way around the interface, they will be frustrated and the navigation menu is not user-friendly. Good navigation menu is simple and reduces cognitive overload.  Users don’t need to stop and think about relationship between objects.  What’s more, providing feedback on users’ location is essential of any navigation menu.if users can’t get feedback from a navigation menu, it is not user-friendly.

Below I present some beautiful and user-friendly navigation menus.

1. Visually appealing icons

A great menu is clear and transparent but in a visually appealing way. Once arriving at the navigation page, users can be very picky about icons. Beautiful menus are always simple and intuitive enabling users to feel completely. Some UI designers use large and image-based icons on the web page and grasp users’ attention quickly.  Users are amazed by these icons but still immediately know where they are led and how they interact with the website.

One  example of clean menus with icons is Fishing Cactus. The icons are very cute and aid users in recognizing each item’s function.

Another example is Viviledish which using handwriting and a piece of paper to guide users in the website.

One more example is Neochic and the navigation options are very simple but very attractive. On the right bottom of the web page, there is a man who behaves as the meaning of the keywords listed in the options. Such a creative idea!

2. Be active, not silent

A new trend of designing an effective navigation menu is to be active and speaking, not serious and silent.  Instead of a list of options, the navigation menu of the website has a beautiful layout with great effects. With good UI design thrown in, the menu is outstanding and impressive differentiating with other plain websites. The designer can use different approaches to present options from the traditional header menu to side bar menus and much more.

Thibaud’s Portfolio -A beautiful layout navigation menu with great effects and active communication with users

Cassys Design-the navigation menu uses smart sidebar with consistency and unique features

3. Provide effective feedback

Remember to provide effective feedback and let users know where they are in the web site. It is a terrible thing if users are lost in the navigation page. There are some useful methods here. For example, we can use ’glosses’ to help users select correct links.  Also, we can differentiate and group navigation elements which requiring the shifting of attention so that users can be led into a new context. Moreover, animation and visual feedback are great ways to assist a user finding where they are in the webpage.

I found a good example of effective feedback navigation menu-BubbleNavigation. This is an example from a tutorial. Once users hover the mouse over the navigation option, a drop down menu surrounded by a blue circle pops up and let users make a choice. We can learn a lot of useful tips from the example.



Posted by on November 25, 2012 in Good/Bad Interface Design



2 responses to “Some Good Examples of User-Friendly Navigation Menus

  1. Mihaela

    December 5, 2012 at 3:24 pm

    Interesting. Personally I don’t like that portfolio site – it wastes a lot of screen real-estate on the homepage, when it could use that space to communicate about the person’s work.

    • cgt512chenguo

      December 6, 2012 at 10:20 pm

      Yeah, White space is good and helps to group different elements. I think white space can give a place for eyes to break. But we should use it appropriately and do not waste too much space. A trade-off problem.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: