I am developing a GUI where I have a list with products to the left. When a product is selected, an info box is shown to the right. My problem is that the scrollbar for the products is placed to the right of the products (to follow convention), but that is suboptimal since the scrollbar becomes a visual "wall" that separates the selected item to the left from the info box about the selected product.


I have thought about putting the product list to the right, but that feels wrong since attention works from the left to the right. I also tried to put the scrollbar to the left of the products but that breaks the cultural learned standard that a scrollbar is placed to the right.

An Apple iTunes inspired scroll list where the products scroll when the cursor is placed on the top or bottom of the list is an option, but it's more complicated to implement and the lacks the advantages of the scroll bar...

Any suggestions on how to solve this?

  • Please provide a screenshot. This is a common layout, I've never experienced the VScroll as a "wall" between the items.
    – peterchen
    Feb 1 '11 at 12:20
  • An image of your UI will help us to get the problem better.
    – user3464
    Feb 1 '11 at 15:07
  • I know, but I can't upload an image before I have earned 10 credits according to the site... Feb 1 '11 at 15:07
  • 3
    Is this a hypothetical problem, or have you actually observed users being confused? It's common to separate a master list from a detail pane with a scrollbar. For example, you see this in Windows Explorer, Outlook, and Firefox (the Bookmarks sidebar). I haven't noticed any users failing to connect the master to the detail. Could something else be the problem? Feb 2 '11 at 13:41

Thanks for the image: in my understanding, the problem is due to the arrow used as selection indicator (which by itself is a nice touch).


1. What about adding the selection marker to the selected item:

enter image description here

The wall effect is still there IMO, but not as prominent. It also solves the problem where to put the arrow when theselected item is scrolled out of view.

2. Alternatively, can the scrollbar be displayed "faded out" (e.g. at ca. 70% transparency), and go to full opacity when moused over? That should drastically reduce the "wall" effect without any change to the UI

  • You have a point about the arrow and that it is somewhat the cause of the feeling that the scrollbar becomes a wall. I will try to alter my design so that the selected item becomes more highlighted, maybe bigger, more space to the item above and beneath.I would prefer to have the arrow on the information box, but that would only be possible if I have the scrollbar on the left side of the items - and that felt really weird (I tried it). I will also try out the opacity altering which should decrease the wall feeling... BTW - how do I create new lines in comments? :) Feb 1 '11 at 15:33
  • BTW - how do I create new lines in comments? - Well, if you find out, please let me know ;)
    – peterchen
    Feb 2 '11 at 10:34
  • @Henrik @peterchen You can't put new lines in comments (source). Comments are meant to be short and compact (source). Feb 2 '11 at 14:01
  • @Patrick: yeah, we always try ;)
    – peterchen
    Feb 2 '11 at 14:32

Just because the "standard" location for a scrollbar is on the right doesn't mean you HAVE to have it that way. This situation makes perfect sense to have the scrollbar on the left.

The only other option I see is to have the scrollbar on the far right, but then it loses context when something isn't selected.

  • Yes, I know and I tested it but I have to say that it felt really weird - almost like the feeling of having the scrollbar to the left on a touchscreen so your arm will cover the UI... But I agree, it would be perfect to the left - if it just felt right... Feb 1 '11 at 16:09

At first I would try to revise my product list.

  • would try to group them into smaller groups
  • which would fit into a small list -> there would be no need for scroll bar
  • and you could use tab navigation

Something like this:

(source: patternry.com)

If you have that many products, than I would use a webshop like design:

  • products listed in the middle with some info
  • if clicked more information becomes available of the single products (just like in case of ebay or lot others)
  • this way you could even add a small thumbnail pic to all of your products -> through which people can be sure if that's what they are looking for or not

for example:
(source: patterntap.com)

  • The grouping part can't really be implemented in my case since the product list can be quite long, and there are not enough categories to use for them so that no subcategory requires a scrollbar... Feb 1 '11 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.