Wednesday, 14 November 2012

List boxes are all right

Every QlikView demo that I have seen has the list boxes - the primary "Qlik" object in QlikView - on the left-hand side of the screen.  I have seen sample documents from several QlikView partners in the past - and they have the list boxes on the left-hand side of the screen.

They are all wrong!

The correct place to put the QlikView list box is on the right-hand side of the screen.

In CapricornVentis, we have been doing this now for several years.  When delivering designer training courses, we tell all the delegates that this is the correct side of the screen to place list boxes.  We have several customers who have adopted this as their corporate standards because they believe that we are correct.  We are.

Why are we correct?  There are two simple reasons - one of which is "design 101", the other is more subtle.

First, we should note that while list boxes are the primary "Qlik" object, they are not the primary information delivery object.  That role goes to charts.  List boxes are secondary.

The "101" reason is a basic tenet of screen design.  The top left-hand side of the screen is the primary piece of real-estate.  This is where the eye immediately heads when you open a page.  Therefore you need to put your primary information display element - charts - starting in the upper-left corner.  Not list boxes, and especially not logos!

The subtle reason goes with the use of a right-handed mouse (the majority of 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.

This point is so subtle that it wouldn't, in itself, be strong enough to back up my argument.  However, the advent of mobile technology - especially tablets - adds some more backbone to this argument.  The reason being that the user is not just pushing the mouse across the data, they are using their whole hand - which blocks the data!

Look at this image:


Here, the iPad user is about to make a selection on a list box.  But note!  His hand is covering the data.  To see the change that has happened after he has made the selection, he needs to move his hand out of the way.  To make another selection, he needs to move his hand back in.  Back-and-forth, back-and-forth.

Consider now this image:


The user, while comfortably resting his hand on the edge of his tablet, it able to make multiple selections with ease.  The data changes before his eyes.

List boxes should go on the right-hand side.


Stephen Redmond is CTO of CapricornVentis a QlikView Elite Partner. We are always looking for the right people to join our team.
Follow me on Twitter: @stephencredmond

12 comments:

  1. Unless of course you are left handed :) so really you should per user configure it based on their handedness? Should you argue for selections on the bottom then, no matter the handedness?

    ReplyDelete
  2. You could certainly give bottom list boxes a go and see how it looks but my own opinion is that they work better along the side - especially in an iPad form factor. I think that the charts would be too vertically squished.

    ReplyDelete
    Replies
    1. Why not using the iPad in portrait mode then? I think holding it like an eBook reader is quite ergonomical. The chart area could be quadratically and the listboxes below are usable for left and right handed..

      Delete
  3. He he just playing the Contrarian :) I think on the right side will server 90 % of the population :)

    ReplyDelete
  4. Hi Stephen - nice article and well illustrated. The right hand side certainly looks better than the left.

    However, I would argue the case against List Boxes altogether. Often I see list boxes with a couple hundred entries in on a screen, with just the top four showing. Why are the top four any more relevant?

    What I tend to aim for these days is caption-less list boxes for a couple of obvious fields (eg. Open / Closed) and then multi-boxes for a handful of other fields. All of these placed at the top of the screen. Global search can deal with other selections. If absolutely necessary a separate selections tab can be added.

    Personally I find horizontal space at more of a premium than vertical (especially since reading a blog post extolling the virtues of the vertical scroll in QlikView).

    ReplyDelete
  5. Steve, have you by any chance seen my tips on alternatives to multi-boxes: http://qliktips.blogspot.ie/2011/07/grid-style-multi-boxes-in-ajax.html or on Ad Hoc Analysis: http://qliktips.blogspot.ie/2011/12/easy-ad-hoc-analysis-in-qlikview.html.

    Both articles demo the use of containers to help with issues of space and list boxes. The first was my initial thoughts (using the drop-down) and the later is what I tend to do now.

    ReplyDelete
  6. Hi Stephen,
    Good article. I like your point about right hand list boxes being more natural and easier in a touch interface. You given me something to think about.

    I have always taught that listboxes should be on top and left for two reasons.

    1. It is the navigation layout that users are accustomed to from the ubiquitous web page. Leveraging something already known lessens training and speeds adoption.

    2. We don't have good auto fit to page in the QV clients like an html page does. This can make objects on the right hard to use if they overflow the screen width. It's easier to resize or move a single chart than several listboxes.

    Myself I am trying to move to more of an inline selection experience like dropdowns or listboxes in charts. I hope we get an asymmetrical grid container soon, that would be useful.

    -Rob

    ReplyDelete
  7. I wrote this article for couple of days ago!

    Do you pay attention about where to put your objects on the screen ? Probably not because only few people think about this when they make their applications. Most of all, the client have some toughts, you have ideas, or simply no idea. Here follows a few rules you should have in mind next time you walk into you Graphpical User Interphase. Next time you watch evening news on television, try to see where the photographer put different people according to different situations. If there is an main person associated with plasure, beeing in an interview - its most probably placed into the left in the screen(Golden Ratio), and if there is an person oposite to this person (associated with fear) he is placed into the right of the screen. Why ? Well this coming from the big artists from couple og houndreds year back and it has a meaning that when people look at pictures, their eyes catch the left side to the middle as calm and nice view and on the other side fear. If a persons running into the picture from the right sid(right to middle) - its a token on fear.If a person are turned the other way, it is on his way out of the picture. Ok! Take into considerations that all your objects are of interest but in various meaning. Take this into consideration next time you start composing you service offrings or apps i any system. In our comapany - this is called Useability or a part of this is useability, but I am quit sure that only a few of these people have noticed this. A few days ago I saw a video made for us about a very an satisfied client with our new system, the only problem, the person where put into fear section and the viewers automatically struggeling to catch what this person telling you.

    You can read a lot about this theme in any book from arts and photography in your public library.

    About this article - I don't disagree about the listboxes in it self because it is very often added value to the application, but remember - you can also make selections in the graph and then you also cover the screen.

    TH

    ReplyDelete
  8. Stephen

    Many thanks for sharing your views on right hand positioning of list boxes. I agree with your sentiments and they fit in with Stephen Few's views which I hold in high regard.

    I do though suffer from a subconscious urge to place them at the top, even though I can see the end result of right hand placement is better.

    But there again it is some years ago since I last smoked a cigarette. Maybe in 2013 I'll be able to say I have not placed a list box on the left all year.

    As an aside I must admit that I did use an unwise pie chart a few weeks ago despite knowing deep down a bar chart would be better.

    But if I can give up smoking than I am sure I can give up list boxes at the top and unwise pie charts.


    Best Regards, Bill

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete