0

I have a list of items. These are selectable, but only one at a time, and when one is selected a panel to the right of the list populates with further info on that selected item. The row is styled to show it is selected and compliments the further info panel to make the relationship between the two clear. However, this list is scrollable and so the selected item could scroll out of view. How do I handle losing this visual relationship between the list item and the further info panel? See mock-up of the problem.

enter image description here

Improve this question

2 Answers 2

Reset to default
4

I think the clearest possible way to maintain visual relationship is to have the selected element stick to the top of scrollable content when you scroll past it. It could also scale up a little bit and appear to move closer on z-axis.

Either way, if you want to maintain visual relationship, it should stay still visible at all times.

Improve this answer
6
  • nice suggestion. this is one idea I have been considering.
    – Dave Haigh
    Apr 29, 2014 at 9:21
  • I was also thinking of ways to avoid this (if possible). maybe an element that appears to the top right/bottom right of the list showing that the selected item is out of view either above or below. and when tapped the list scrolls it into view. have you seen anything like this?
    – Dave Haigh
    Apr 29, 2014 at 9:24
  • No don't recall seeing such approach. I think it is a bit harder to develop (?), bit more ambiguous, i.e. you also have to clearly show that clicking/tapping would scroll to the selected item, and also why would it be relevant to scroll to that item? In which case a user would use that? I think what you are trying to solve is just visually demonstrating the user which item has been selected and where does it come from.
    – Harijs Deksnis
    Apr 29, 2014 at 11:55
  • With regards to why a user would want to scroll to it, I was thinking if its a long list the user might want an easy way to jump to the item in context, maybe the order that it appears in the list is important.
    – Dave Haigh
    Apr 29, 2014 at 12:04
  • 1
    If you want your user to easily navigate - jump a long list, then why don't you add buttons "scroll to top" and "scroll to bottom" accordingly. More clarity for the user. And if the user wants to jump to the "neighborhood" of currently selected item, tapping on it could jump to that area.
    – Harijs Deksnis
    Apr 29, 2014 at 12:14
1

Actually this isn't such a big deal. You have a standard master-detail layout, which is an extremely common design pattern, and usually this isn't perceived as a problem. The most common example is Outlook or even gmail (if you turn on the split screen). You can select an email and it will be displayed in the reading pane, and you can then scroll it out of view.

I've seen some systems go to extra lengths to makes sure that the visual connection is always clear - usually employing mechanisms such as the one suggested above. But they usually had some kind of special circumstances where it was extremely important to keep the visual connection - e.g. it was part of a very long and complicated workflow, or the cost of error was very high. In most cases I wouldn't invest too much into this.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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