0

I am designing an application which displays tickets. The tickets are displayed in a list. There can be hundreds of tickets in the list. When the user selects an item (i.e. ticket) from the list, the details of the selected item should be displayed on the same screen, to keep the interaction and consumption of content efficient.

When designing the list and the detailed view, we initially considered the use of the same background color to indicate which item in the list on the left hand side relates to the detailed view on the right hand side.

As you can see in the attached image, this works very well for touchscreen devices where no scroll bar separates the item list from the item detailed view. If the screen is displayed on a desktop monitor, a scrollbar will interrupt the item list from the detailed view which weakens understanding the relationship.

We use HTML5 and CSS for the implementation.

Two variants of items in a list and with a detailed view of the selected item

The question is: How to indicate the relationship between a selected item in a list and the detailed item view when they are separated by a scroll bar?

Options I have considered but rejected and I do not prefer:

  • I considered to move the scroll bar to the left hand side. However, some discussions here indicate that this is not intuitive (rejected)
  • I considered not showing a scroll bar at all. Discussions and habits indicate that this is not intuitive (rejected)
  • Use of the same background color and item name, like indicated in the image (not preferred)

Any other ideas?

2

I agree scrollbar breaks the two sides when they are connected. So, I would make them not connected visually and simply put the details in a separate "space", beside the list. It can be within a border or just simply the text beside the list, like this:

enter image description here

I'm pretty sure people will understand the two sides are connected when they first click on any item in the list, but it's also easy to create a prototype and test it on a few colleagues/friends.

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.