SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Basics Design Principles Do You Make These 7 Website Navigation Design Mistakes

Do You Make These 7 Website Navigation Design Mistakes

Think people can figure their way around your website? Think again. Web surfers have notoriously short attention spans, and when the next step is unclear they simply leave a site instead of trying to figure it out. How many disoriented online visitors are leaving your website due to due to poor navigation? If users are frustrated or irritated, there won’t be any traffic, there won’t be any sales and you won’t make any money. Therefore it is crucial your website’s navigation avoids these seven mistakes. Still got your attention? Good. Your next step? Read and bookmark this post!

Hide-And-Seek Main Menu

Don’t make a user search for a main menu. Online users want to find information quickly and easily. If they can’t, they will become frustrated and leave your site for one that is easier to navigate.

The main navigation menu should be readily available on the home page. Users have come to expect a main menu right below the header on a site’s homepage. Give them what they want.

Hide-And-Seek Main Menu

Sunglass Hut has a main menu that is easy to find, easy to navigate and easy on the eyes.

Menu style and category errors are easily entitled to their own blog post, but in the meantime, here are the worst offenders:

  • Menus with moving images

  • Menus with Mystery Meat Navigation

  • Never-ending scrolling horizontal or vertical menus

  • Category or page titles that are irrelevant to the target user

  • Category titles are too long

  • Category titles that are puzzling or not reflective of the content


Is This a Navigation Tool or What?

 Navigation Tool

You have three seconds to find the search bar on bridge55.com. Ready? Go!

Hard-to-identify navigation tools are frustrating. Don’t blend navigation tools into the main page content. Separate them from the rest of the page with a similar-style but different colour or font so your site navigation tools are easily distinguished from the content of the page. Users should be able to quickly and easily identify a search bar, help icon or main menu.

Unclear Directions

Visitors to your site should always be able to see where they have been, their current location, and how to get to their destination. Using breadcrumbs or changing the font size and or colour of the current page are good techniques to remind users of their location. Important pages like Contact Us, About Us or Location should be no more than ONE CLICK from the homepage. Always provide an escape route such as an easy-to-find search bar or home page link on every page of your website.

Unclear Directions

www.delicious.com makes good use of breadcrumbs.

Too Much Information


Main menus become lost on websites with too much information on the home page, so check that yours doesn’t appear busy or disorganized. Clean and simple is best. While web designers today have improved the cluttered pages of the nineties, scrolling vertical menus (and some horizontal menus) are still out there and they are awful. Archive it, categorize and sub-menu it, or get rid of it.

Too Much Information

Linklaters does a great job of streamlining a lot of navigation info with categories and drop-down menus.

A robust website can grow very large, and while it is good to have lots of valuable information available, it isn’t necessary to jam it all onto the front page. You do, however, want users to find what they’re looking for. Make sure an internal site search bar is easily identifiable and available on every page. Many sites place the bar on the top right corner, but some big sites (like article directories) feature a larger than average search bar front and centre on their home page. This is a good example of web design anticipating the users’ navigation need - they are planning to search an article directory.

Inconsistent Web Navigation

Variety is great at the grocery store, but not in your website navigation design. Inconsistent style, location and function of navigation tools within a website are common website design mistakes. This is a design error that can lose customers. Users have goals to reach or tasks to complete, and don’t want to spend time finding directions to the needed information.

Web Navigation

While www.mellasat .com is stylish and makes good use of fonts and colour, it loses points for lack of a search bar.

A consistent navigation layout includes an internal site search bar in the same place on every page, and menus with the same font style, size, and colour scheme. This helps users learn your navigation pattern quickly and encourages them to return to the site regularly.

Using Confusing Navigation Tools or Images

Using images as navigational tools on websites has supporters and detractors. While text-based navigational tools are more intuitive for most users, sites for pre-schoolers, some retail sites, as well as those with strong visual content do sometimes incorporate images into their menus.

Most websites should stay away from using complicated graphics to represent navigational tools as it takes the brain longer to process detailed images than simple text. Remember, online users have short attention spans and want to find information fast. Simple icons like a “?” representing a help or search function can work.

Confusing Navigation

www.pixelresort.com uses simple icons effectively in this navigation bar.

Keep your typical user in mind at all times when considering unusual methods of site navigation. Visitors to portfolio sites are likely more open to alternative navigation tools, and are expecting proof of creativity. Be careful of using techniques like minesweeping, where a user positions a mouse pointer over an image to reveal a link. It’s fun for kids, but can be frustrating for everyone else.

Using “Surprise” Drop-Down Menus

Web surfers don’t want to be surprised. While drop-down menus are useful in allowing easy and well-organized access to large amounts of information, people want to know where and when these drop-down menus are available. Indicate your drop-downs by including either a down-arrow or a downward pointing triangle to indicate there is more information. Menu tabs that don’t have this drop-down indicator surprise and often irritate users because they could have missed vital information.

Drop-Down Menus

Webstudios

Avoiding these common navigation design mistakes will improve the usability of a site, but simplifying navigation doesn’t mean the site has to be boring. The best website navigation is a delicate blend of creativity, functionality and usability designed with the target user in mind. Visit 40 Websites with Unusual Navigation to see how others inject personality and creativity into the navigation element of a website.

ABOUT THE AUTHOR

Sarita Harbour

Sarita Harbour is a professional writer and blogger living in Southern Ontario. She has written extensively on running an online business and content marketing techniques for website owners. Her first e-book Building Your Brand With Pinterest is set for release in June 2012. Sarita graduated from the University of Guelph where she studied Psychology and Computer Science. Follow Sarita Harbour on twitter @avamummy or visit harbouronlinewritingservices.com

subscribe to newsletter