Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Design efficient yet simple web-navigation

Monday, September 22nd, 2014 by Servage

Web Navigtion Menu DesignsWe know various kinds of content and their structural architecture in websites, so there are plenty of choices to select the appropriate navigation menus accordingly. However, presently categorizing navigation menus is increasingly difficult due to considerations required for the increasing diversity of handheld devices and their various touch gestures. Older sites often used multiple levels of nested categories, open on hover, and other styles assuming large screens and mouse input devices.

  • Our general conception of navigation systems is that the main menu bar is located at the top of the website as a horizontal element opening menu items vertically, or as a sidebar, opening meant items horizontally.
  • It is preferred to have regular dropdown menus for pointing devices with some alternate gestures for mobile devices.
  • Sometimes it is necessary go to use an advanced and bulky multi-level navigation design due to the underlying content’s complexity.
  • Sometimes we need to design separate navigation menus for individual pages or a bunch of pages with similar content contexts.

Generally we use three methods to express our navigational choices such as text, image or a combination The most suitable choice depends on the use-case. We will go though some examples below.

Main menu design

Most websites have either horizontal or vertical menu bars depicting top-level categories, mainly in textual format. In responsive designing a horizontal menu bar is converted into a vertical one so fluidity in design matters here. Since the main menu bar is broadcasting main categories at top-level they should be visible globally and accessible easily. Here UX designers have challenges when the menu bar has to accommodate excessive numbers of categories that are going out of scope of the screen size. Some pruning and changes in orientation of the menu bar design might prove essential.

Dropdown menu designs

In responsive design, use of off-canvas approaches like dropdown menu and fly-out menus are better options to give good experiences by avoiding distractions. Since dropdown menus are hiding second level categories of navigational units, they have ample space to use images in combination with text and sometimes have space to add block of descriptive words.

This kind of menu design is effective only with sizable numbers of items of top and second level categories. It has good advantages against mega menus in form of quick loading and have good performances in understanding the navigation due to its simplicity. They are easily scannable so from a UX perspective they are highly recommended.

Mega menu designs

When dropdown and fly-out menus are bloating and bolstering in size and numbers we need some custom approaches according to the context of the content of the website and they result in the mega menu formation. Since mega menus are consisting of text and images along with enough descriptions it is considered as the most comprehensive and advance types of navigational menu designing of the traditional formats. Unfortunately responsive design and mobile friendly website navigation designing are not allowing deep level or big size mega menu designs. The only way to use mega menus properly on smaller screens is by resembling native navigation elements and using full-page sliders to navigate through nested levels of items. You can find such in both jQuery Mobile and Sencha Touch.

References & more reading


Design efficient yet simple web-navigation, 4.0 out of 5 based on 2 ratings
Categories: Tips & Tricks

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.