Left Hand Tab Navigation
Any website’s navigation menu is an intro to the website and how the UI works. To this end, it is more of a roadmap than anything, and the navigation bars are the routes to get where you need or want to be.
A good navigation bar should be deigned to the user and how the user thinks. Some things, like cognitive behaviors, are not design choices but design leads. A recent trend has been to design navigation using the left hand side (slack, gmail, etc). At Stella&Dot, a designer on the KEEP team was curious about this and asked the researchers to look into it. This is what we found.
To begin with, we know that Above the Fold is a hard and fast rule for keeping the attention of a first time user. We know that the “goldfish rule” is in place here, e.g a users attention span is very short and you must tell them who you are, what you do and why they are there in 30 seconds or less. This may be more time in actuality, but it best to design to this ideal. (BTW: it is a myth that goldfish’s attention or memory span is 3 seconds long. it is more like 5 months.)
But what about left to right?
The Nielsen Norman Group show a chart in which they investigated eye tracking results from left to right and discovered that the left hand side of the screen gets 69% of a user’s viewing time, while the right half gets 30%. (The remaining one percent has to do with confirmation of correct scrolling. That is: they are checking to see if they are scrolling effectively).
One theory is that this may have to do with Westernized reading patterns, but countries who read right to left also show this cognitive pattern of attenuation. It is not as prominent in right to left countries, but the pattern still shows people look at information on the Web from left to right. They are used to it and if we break away from that we are asking too much of them in a very short amount of time. This is called increasing the cognitive load. Bad idea.
What are the conclusions?
- We will get more vertical space for main content if we use a left hand navigation. This gives us more Above The Fold real estate that people will read.
- Keep navigation all the way to the left. This is where people look to find a list of options already, and naturally.
- The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.
- Keep secondary content to the right. It won’t get as much love, but that’s okay — not everything is a Star, and we need a place to put less-important stuff.
So, Ivan, have at it!
