Web Site Accessibility/Usability: Left or Right Navigation
It's now 2010 and the question still remains... Which is the best navigation - top, left, bottom or right?
Past studies, advice from experts in the field, and discussions on forums are conflicting but it now appears that some who may have used the traditional left-side navigation module, have now converted their websites to right-side navigation. Has right-hand side navigation become the norm? It is beginning to appear that way when a web site is conveying information as well as some eCommerce web sites. The White House (http://www.whitehouse.com/) uses right-hand navigation for their Briefing Room and Latest News as well as other items where content is the main objective of the web page.
Some things to keep in mind:
1. Comformity -- whether you decide left or right, keep it consistent throughout your website. Your viewers should be able to get to a desired web page in a maximum of three clicks. Your main web pages should be available in one click.
2. Sighted Users - Most (at least in N. America) read left to right. If its important that you want users to read your content (informational sites/blogs), put the content on the left and the navigation bars on the right. Some would agree that if your site is an eCommerce or Corporate website, put the navigation on the left-hand side. It will feel more traditional to look for navigation on the left, giving the user a quick overview and will also force users to browse over the links.
3. Screen Readers -- Unless a web developer utilizes a 'skip to main content' link, a screen reader user may have to tab through all the left side navigation links before getting to the content; reading the navigation first and then the body text. Use good coding techniques and left-side navigation will not pose a problem. Right-hand navigation allows the screen reader user to go directly to the content, especially if arriving there by using a search engine.
4. Right-handed users -- having sidebars on the right may feel more “natural”. It makes less travelling over a webpage, especially for high resolution monitors and it is near the scrollbar.
5. SEO -- unless you are using structured coding (e.g., at least one H1 element is being used, etc.), you want the search engine to get to your data first; having the right-hand side navigation helps.
* Alexa Traffic Ranking (ranking as of 2/15/2010): http://www.alexa.com/
Key Web sites that are using right-hand navigation for content:
- Amazon.com: http://www.amazon.com
- CDC -- Centers for Disease Control and and Prevention Features: http://www.cdc.gov/Features/
- CNN.com - Lates News: http://www.cnn.com/
- Facebook.com Press Room: http://www.facebook.com/press.php (#2 - Alexa Traffic Ranking)
- FDC -- Federal Trade Commission: http://www.ftc.gov/
- Usability.gov: http://www.usability.gov/
- Yahoo News: http://news.yahoo.com/ (#3 - Alexa Traffic Rank*)
- Weather.com - Weather News: http://www.weather.com/newscenter/
- White House Briefing Room - Latest News -- http://www.whitehouse.gov/briefing-room
Key Web sites that are using left-hand navigation for content:
- NFB -- National Foundation for the Blind: http://www.nfb.org
- YouTube.com: http://www.youtube.com/press_room (#4 - Alexa Traffic Ranking)
- WebAIM: http://www.webaim.org/
- Wikipedia.org: wikipedia.org (#6 - Alexa Traffic Ranking)
Key Web sites that are using top / combination (top, left, right, bottom) navigation for content:
- NSF -- National Science Foundation: http://www.nsf.gov/
- W3C Standards: http://www.w3.org/standards/
This type of navigation can be disconcerting to the user at times. However, if used right, this type of naviation can be very beneficial as well. For example, the National Science Foundation's home page is using top/bottom and left/right navigation. Selecting the 'Awards' ( http://www.nsf.gov/awardsearch/) tab gives an entirely different interface; although you can still get to their main sections using the top menu selection. Selecting the the 'Funding' (http://www.nsf.gov/funding/) tab utilizes top/left. But this is great use of navigational assistance as the NSF uses the left-side navigation to further expand the main topic of the top navigation. The NSF web site uses a consistent logo across it's web site, so this helps to keep the user informed of where they are.
What are the advantages and disadvantages from an accessibility/usability standpoint? You be the judge, please leave a comment. Or, list your website here...
.................................................................................................
2003 Study - Reference:
http://journals.tdl.org/jodi/article/view/94/93
Kalbach, J. and Bosenick. T. (2003). Web page layout: A comparison between left and right-justified navigation menus. Journal of Digital Information, 4(1).
"The usability of two Web page layouts was directly compared: one with the main site navigation menu on the left of the page, and one with the main site navigation menu on the right...This research questions the current leading Web design thought that the main navigation menu should be left justified...
Usability researchers for the National Cancer Institute (NCI), on the other hand, offer evidence for a right-hand navigation (Research-Based Web Design & Usability Guidelines: Navigation http://usability.gov/guidelines/navigation.html#four). Their research shows that users click on menu items in the right margin with much more efficiency than menu items placed on the left because they are located much closer to the scrollbar. This allows users to move the pointer quickly between the scrollbar and the navigation menus. The researchers also point out that these benefits are particularly strong for laptops. It is assumed they are referring to the use of a laptop with a mouse pad instead of a regular computer mouse."
Expert advice - Reference:
http://www.useit.com/alertbox/991114.html
Jakob Nielsen (11/14/1999) - When Bad Design Elements Become the Standard
"There are a few usability reasons why it would have been better to have the navigation rail on the right side of the page:
Fitts' Law dictates that shorter mouse movements are better: it is always faster to click a target if it is closer to your starting position. Thus, placing the navigation rail next to the scroll bar will usually save users time over placing these two frequently-accessed areas on opposite sides of the window.
Users always look at the content first when they encounter a new web page, so it would be better if the content started at the left border of the window (for users in cultures that read left-to-right). After the users are done with the content, their gaze could naturally shift to the right to decide where to go next. In contrast, placing the navigation rail to the left requires users to skip over it before they can start scanning the content area."
| Comments |
|
|
||||||||
|
||||||||
|
||||||||
