So, given recent events, I’ve decided to start a new little category on the blog (something I’ve been trying to resist). I’m calling it UnFundaMental. Yes, I know it is not really a word. This category is my attempt to encourage people to *think* about how they create their user experiences online (and elsewhere, I guess), and to discourage them from taking ‘rules’ and applying them unreflectively. So, it’s against ‘fundamentalism’ in UxD, and there should also be an unsubtle hint towards people who embrace said fundamentalism that I think they are mental (which seemed like a nicer expression than ‘utterly incompetent’).
So, today, let’s talk about navigation. Where should you put it on your page?
Here is the absolutely incontrovertible answer…
(Pardon me whilst I channel Christina Wodtke (amongst many other smart people who would say exactly the same)
If you thought that there was a rule book somewhere that would tell you how to do your job, then you’re absolutely out of luck. You need to use your mind, and your experience, and your smarts. You’re going to have to do some research (see what other smart people have done in similar situations), and do some user research.(don’t under-estimate your users, they’re smart)
I *know* that people have probably told you that the left hand side of the page is place that people most expect to find the navigation. Others have probably told you that navigation top of page is the most efficient placement. But, what do you think? Are either of these reasons compelling in your case? Is the site/application/system you’re designing *like* the sites that people are referring to when they’re making these statement?
Loads of blogs now have right navigation (I think that’s why I’ve found myself feeling it to be more and more natural over time). There’s also been an emerging trend for blogs to put their navigation at the bottom of the page [example]. Do you just ignore these trends because they’re not *real* websites? At your peril, you do. (or, unless you really *want* to create utterly uninspired experiences for users by pumping out the same old thing every time and hoping you get a good creative to spice up the visual design so your work looks better than it really is).
It’s not just the evolution of blogging templates that make a RHS nav seem like good sense. Check out the great literature review that the Razorfish (Germany) guys have done in their paper outlining the results they received when testing RHS navigation on the Audi website.
And what did the guys find?
Well, they went in to see whether the accepted view that LHS nav was more efficient than RHS nav was true. They were pretty surprised to find that this didn’t seem to be the case… that RHS nav was also efficient, maybe even more efficient. Sure, people weren’t expecting it at first, but they learned it quickly. And users reported that they enjoyed using the RHS navigation.
So they went ahead an implemented a RHS navigation, and by all reports, it’s been well accepted by users.
It’s important to note that Razorfish didn’t just throw in a RHS navigation for the hell of it. Or for the sake of being different. They had a rationale.
‘A key motivation for this design decision was that a right-hand navigation better reflects core values of the Audi brand: innovation, progressiveness, and individuality. The design goals (creating a usable but unconventional layout) were therefore tied closely with the business goals (reinforcing brand values and distinguishing the site from competitors’ sites).’
Very important. I don’t want anyone to think that I’m advocating a free-for-all, or that we’re allowed to ignore all the findings of the past. Everyone should be able to justify why they choose to design an experience a particular way. My point is that the response ‘because that’s just the way you do it’ shouldn’t cut it as a rationale.
So, you have a project that might benefit from a navigation on the RHS and you need some ammunition to back up your decision to a Usability FundaMentalist? Here’s some stuff I gleaned from the Razorfish paper:
Interestingly, Nielsen (1999) also theorizes that right-justified navigation areas should result in better user tasking and usability. He believes that placing the navigation menu next to the scrollbar will save users time. Additionally, he claims that a right-hand navigation and the main content area on the left should increase the priority of content. Nielsen abandons this logic, however, and goes on to dictate the use of a left-hand navigation: “If we were starting from scratch, we might improve the usability of a site by 1% or so by having a navigation rail on the right rather than on the left. But deviating from the standard would almost certainly impose a much bigger cost in terms of confusion and reduced ability to navigate smoothly” (Nielsen 1999). In other words, the vestigial behavior outweighs the actual efficiency of a right-hand navigation. Nielsen offers no proof of reduced usability with a right-hand navigation, however.
Fitts’ Law: Fitts’ law has been frequently applied to computer interface design (Mackenzie 1992). For all intents and purposes, it simply means that the bigger and closer an item is, the easier it is to click. Position on the screen, then, is a key factor in “ease of click”. In general, shorter mouse movements are better according to Fitts’ law. Therefore, locating the main navigation menu next to the scrollbar on the right side of a Web page should indeed reduce the time required to alternate between the two.
Constantine & Lockwood (2002): You can confidently make novel use of many standard, well-established controls, visual elements and interaction idioms provided that new functions and behaviors are consistent and logical extensions of the old…Significant improvements in the user experience often require creative departures from standards and accepted practice. However, useful innovation in visual and interaction design should not burden the new user with a long and frustrating learning process”
Need a couple of sample RHS Navigation sites to further prove your point. Try these on for size: