Need advice on a scroll situation where the clicked item is hard to place

Question

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?

Answer 1

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).

Ideas:

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

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

Answer 2

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.

Answer 3

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)}