Left or Right side navigation?

[sna]

I have received a few emails from QlikView developers asking what the best practice is for placing list boxes.  There are two arguments that you may think of right away.

In information design, left-side, top-left to be precise, is always used for the most important information.  It is because as a human-nature that’s the space people pay attention to first.  So why should I waste the space for placing the navigation pane there?  I should place it on the right.

Another argument is that people are used to use left navigation because most of the web sites have menus on the left.  Think about a shopping web site.  All departments, categories, genders, sizes… whatever you think of usually on the left hand side.  So why should I go against human’s habit and place it on the right-side?  People will get confused. 

I can buy both arguments.  But then how about placing it at the top?  I have seen QlikView applications that have navigation pane at the top.  Is this the best of all?  Let’s think about this in QlikView usability, with an elimination method. 

Right-pane We create a demo application for 1024px width so that it will fit nicely with any devices you may have including a projector.  But some users may have a wider screen or higher resolution screen.  If for some reason if I want to expand the line chart at the bottom to see more in detail or utilizing the space of my screen, I will need to overlap the navigation section with my chart by extending the width.  Then, when I want to make a selection in Expense Category, I need to either move the chart or resize it to do so.   If the navigation pane was on the left hand side, you could resize the width with no problem, and you still could make selections in Expense Category list box.  So the right-pane is out.

Top-pane I have seen applications with list boxes at the top.  This may be a good idea because then the ‘body’ part can be used only for information display.  Is this the best of the all world?    Let’s think about it for a second.  We all know that you will get a request of adding more list boxes on the screen.   Eventually you will run out of the room towards the right, and you will consider adding a second row of list boxes.  Then will you shift everything down?  You are losing the important real-estate to display information by the navigation pane.   So that doesn’t work well.

That being said, I personally think that having the left-side pane works the best in QlikView applications, and here are the benefits.

Left-pane People are already used to look at the left side to navigate a web site.  So why not also for QlikView? Also remember that QlikView is also a web page. QlikView tabs as well as clear button navigation bar are at the top starting from the left.  So it is the best to keep the navigation elements on the left hand side so that when a user looks at the top left corner, all navigation related items can be seen easily.  It’s all about where your eyes start on the screen. If a user wants to expand the width of an object on a wide screen, there is no disturbance with other objects. The area to display the information is consistent.  Even if I add more list boxes, I do so within the left pane.  So there is no need to shift the information display area.

Lastly, you may wonder why I have the timeline list box at the top.  This is my 11-year QlikView habit.  I believe it is the best to keep the timeline list boxes separated from other selection categories. 

If you cannot give up the top-pane option or wish to have many list boxes on user’s figure tip, then you can use a trick.  Here is an example.  When you click on the ‘filter’ button, then there is a drop panel with list boxes.  I recommend you using this in dashboard where you need lots of real-estate for important information.  Or also you can use this together with the left-pane navigation.  In this case, create list boxes for the most frequently used fields on the left for easy navigation (accessibility), and you can create the hidden panel for additional list boxes. 

Now it is up to you what method you will use in your QlikView application.  Will you go with a top, left, right or hidden pane?
You can also download the technical paper on this topic here.

[paulyeo11]

Nice article , for me i only prefer to put all select at top. i never try to put list box on left or right , as i find the space are so impt.

[#3]

I have to disagree with taking up the left hand side of the page with navigation options, I personally believe the right hand side is the best.

In the spirit of good debate here are my issues/reasons:

1. It shouldn't be hard for people to get “used to” a well-designed application, regardless of location QlikView navigation is simple. Casting aside the audience type and how the amount of time they are expected to use an application can affect its complexity, I would be wary of copying anything that doesn’t have gaining insight as its ultimate goal such as a shopping web page. Increasing similarity is good but not enough reason for me to lose the most valuable screen retail we have available.
2. I want my eyes to start on the single most important piece of information on that page. We can use screen position to add emphasis on importance but it only really works with the top left and middle. Depending on individual tab design the middle isn’t always available the top left usually is.
3. If a user has to re-size or scroll horizontally on tab it is poor design, no if’s no but’s, the impact of any page is reduced dramatically if not in eye span. If you need to have scrolling have users scroll down, it’s much more user friendly.
4. Same.

Some of my reason’s right is the best

1. Conforms to proven information design principles.
2. Most people are right handed, imagine you’re holding and I-pad or similar device, using left boxes means you can’t see the screen when filtering.
3. Sticking with right handed users In a very subtle way right-hand list boxes suit their eye and their use of the mouse.  They do not have to "cross over" the data with the mouse pointer.

For more detail Stephen Redmond has written a great blog post on the topichttp://www.qliktips.com/search?updated-max=2012-12-20T16:38:00Z&max-results=7

Regards

Philip Hand.

@QlikViewer

[sna]

Thank you for your comments. 

There is no right or wrong answer, but this was my observation.  Everyone has their preference, and the best solution is to test your design with users.  The preference may also depend on your local language/cultural habit.

I checked some websites for banks, email (gmail, outlook etc), facebook, picasa (photos), iPad apps, and menus on TV where human-instructions are heavy, just like QlikView, and I found that they tend to have the navigation on the left.

Whereas web sites where consumers "browse" the information such as newspaper websites may have their navigation only at the top and extra information on the right.  There is a study where the right-hand items are usually ignored.  This is because most of the cases, they are ads or suggested web sites/items, and consumers don’t pay attention.  I also realized that the right-side links usually don't have any hierarchies as left-hand navigation does, but just links to go to another page.  This is an interesting finding because then users assume that the right-side navigation will take you to another page (sheet in QlikView terminology). 

I also believe that because users are used to have the navigation on the left, their consumption of information real-estate actually starts from the left side of the 'body' part (right side of navigation), and not necessarily all the way on the left of the screen size.   

I am a big fan of "don’t try to solve a problem when it is not a problem (by Michael Anthony)".  But any comments and feedback are welcome!  I think it is really good to hear other's opinions.

[stevedark]

I have to admit I'm a fan of using the top - but not excessively.  I find that if you use predominantly MultiBoxes and allow for three rows of drop downs you can typically fit nine larger fields and a couple of list boxes (year and month, for example) in a top navigation bar.  This approach then allows for the full screen width for other objects - which can be incredibly useful for tables with many columns.

Talking tables, I always get extra pseudo ListBoxes by adding drop downs to any columns in tables.  This is a great bonus for a very small amount of screen being taken up with the drop down icon.

If there are many many fields that need to be selected from then I may add a 'Selections' tab - but since the introduction of the Global Search object I tend to lean on that instead.

Thanks very much for the blog posts Shima - always a good read!

Steve

http://www.quickintelligence.co.uk/qlikview-blog/

[#6]

I'm not sure what "design 101" would be, but actually being a designer I can say that running filters & navigation down the left side is so standard it is now correct. Usability studies point to "banner blindness" where we focus most of our attention to the left and center of a page and very little to the right side. I'm not saying people would not find filters down the right rail, but I am saying they won't look there as often. So it becomes a question of priority: how important is it that users should see and use your filters?

Further the monitor resolution concern is that you design for the lowest common resolution (the pareto principle) but you still may have a design that is too large for some users. In a flush left alignment, which is how QlikView displays content, browsers will cut off content starting from the right. If your filters are down the right, they are now cut-off. Maybe that would be ok, but frequently it would not be.

Also, if the concern is for tablet devices and that most people are right handed then every website that uses left side filtering is also wrong with poor usability and we are all struggling everyday to browse sites like Amazon, Google, Facebook, etc. This is clearly not the case. The fact of the matter is that any  temporal situations where your right hand occults the screen is brief and insignificant.

There can always be exceptions of course, but everyone in the UX community who I have worked with has always placed filters down the left side. It is so common it has basically become law.

Another interesting read on navigation placement is this study conducted by Dr. Bob Bailey, also concluding that left is preferable.

[#7]

Great comments and some very interesting points from Michael, I guess
this leans into a crossover between two fields of study data visualisation / information perception against actual user experience design.

You were spot on about it being a case of priority, unlike websites
where easy navigation is crucial to the goals of the site, again application
specific, the filters could be the least important thing on a QlikView sheet in terms of realising specific goals (not including the company logo ) 

The purpose of a data visualisation is to enable insight, in these cases
the lessons from the study of visual perception would take priority over those
of user experience design if it better enabled us to achieve that goal, this is
where the comparison to websites starts to falls down.

Good to hear other people’s opinions, as Shima says "Now it is up to you"

[rbecher]

I would prefer the "Filters" pane because I think a good dashboard (not an analytical app) needs no filter listboxes in the first place. Also, it's possible with QlikView to do selections right in the charts..

However, any hint on how this "Filters" pane was made? I guess it is an extension..

[stevedark]

My guess would be objects with Show / Hide conditions...

[Anonymous]

I definitely prefer left-side navigation.  My theory is that because those of us in the "Western World" read from left to right, we expect an action on the left side of a page to have an effect to the right of that action (middle or right of the page).  I think that the expectation of an action on the right side of a page is to move on to something new, much like turning the page of book.

I like to design my applications with the navigation on the left with data visualization aspects in the center and supplimentary information on the right-hand side, much like margin notes.

[swm]

An interesting scenario would be on a tablet where a user can change the orientation from portrait to landscape and back.  Should the user have the preference to define if navigation is at the top or on one side based upon the way they use the device?