Navigation Menu Design

Sumit Kharb is User Experience Director at Splash Interactive, Singapore, part of the missiontm. Sumit has expertise in designing for Web, Mobile, Tablet and Emerging Devices based applications, E-commerce/ Online Business portals and Websites. He loves to ideate, architect and design digital entities which makes end users happy and businesses successful.

His role encompasses gathering of user and project requirements, derivation, detailing and validation of use cases with the stake holders, preparation of UX artefacts, conducting of usability testing sessions and co-ordination with the inter-disciplinary teams for end to end project delivery.

Sumit writes.... "When we search for information online, it is often with an end destination in mind. It all starts from the navigation menu, the figurative road sign to your website's full-scale of features. Navigation provides users with a sense of orientation, tells them where they are on a site and guides them where they need to be. The payoffs of good navigation are colossal. By implementing intuitive navigation design in your site, chances are people will stick around longer and be able to find what they're looking for, which ultimately leads to more business for you.

We've rounded up our top 10 tips for navigation design to help you enhance the usability and experience of your website.

MAKE THE MOST OF THE SPACE

Where digital real estate is concerned, every inch of space should be maximised. Stay away from small icons and menu labels, especially on larger screens. The best practice is to have menu labels big enough that it can be easily clicked or tapped on, but not have it spaced too closely to avoid accidental invocation.

BE CONVENTIONAL

The goal of a navigation menu is to make it as easy as possible for people to find their way around your site. Naturally, it should be the easiest to spot. The best way to do this is to place menus in familiar, well-known locations (i.e. the left-side or top of the screen) so visitors can automatically discover them.

APPEAR CLICKABLE

People may not understand that it's a menu if the labels don't look interactive. Fusing an excessive number of illustrations or graphics around the periphery of menu labels may make it seem like it's simply enlivening pictures or headings, as opposed to serving a function.

BE DISTINCT

Visually, menu labels need to stand out. If the menu labels are surrounded by powerful visual graphics, promotions and other information that compete for one's attention, then menu labels go unnoticed.

PROVIDE CONTRAST

If you're looking to boost the visual accessibility of your site, contrasting colours and graphics can provide emphasis and improve the readability and legibility of menu labels against the background of your website.

TELL THEM WHERE THEY ARE

You can't get to your destination if you don't know where you are. Just like directories, navigation should clearly indicate to visitors that "You are here". Visual prompts and page level cues such as breadcrumbs can give people a sense of where they are within a navigation path, especially after landing on the inside pages of a website via search engine.

MAKE IT MEANINGFUL

Menu labels are the entry-way to your website's information so, unlike art, it shouldn't be abstract or contain technical jargon. Ideally, it should be written in a language and context that is easily understandable, and mimics the mental model of the users so they can retrieve the information they require with ease.

MEGA-MENUS FOR SUB NAVIGATION

For those who are building larger websites that host multiple levels of information, mega-menus come into play. Mega-menus and section specific sub navigation helps people to scan through sub navigation information quickly and lands them directly on the deeper pages of your site.

USE 'STICKY' MENUS

Sticking your navigation on the screen allows people to quickly access the navigation menu at the end of long pages so they can quickly steer through the different pages of your site/app. It's also a good substitute to the ‘back to top' button.

TRIED & TESTED

Websites should be built with the audience in mind. If your visitors feel engaged and are able to navigate easily, half the battle is won. One way to ensure your navigation design works for your audience is to involve them. Conduct usability tests and card sorting exercises, then start refining from there. There's no one-size-fits-all strategy and usability testing can guide you through your journey.

September 2016
2013