I'm working on finding a solution for the table that allows inline editing. One of the fields allows the user to select from a list of items (up to ~150 items to choose from).

I've thought of a few ways to solve this, but I'm unsure as to which is best for this situation.

Here is the original layout:

Original wireframe

Now the questions is in this situation, should I show the list of options in

  • a sidebar
  • a popover
  • a dropdown

Below, I have sketched out each option.


The sidebar seems to be the most versatile, and did well with some initial user testing, so I'm leaning towards this option.

Sidebar option


Popover option

Dropdown (afraid of scrolling in small screen to 150 items)

Dropdown option

  • Thanks @maxathousand. I found a solution as well as tested with couple of users I am going with sidebar component as its versatile. – Govind Apr 4 '18 at 6:10
  • Guys . Please take a look on the attached wireframe and share your suggestions. – Govind Apr 6 '18 at 14:05
  • I've rewritten your question, largely to include the wireframes in the question body (we're lazy, hahha). Please feel free to correct anything I might have gotten wrong. – maxathousand Apr 18 '18 at 14:42
  • Thanks for correcting me @maxathousand, Perfect this is what I am looking for. yup we're lazy :) hahaha ... Really appreciate for your help on rewriting the question.. – Govind Apr 19 '18 at 3:09

As you mentioned that the list of data is about 150 words long, the best option would be to have a vertical sidebar.

Usability studies have shown that it is easier for humans to scan vertically arranged data faster than horizontal layout. It gives the eye an edge to follow like the left edge in case of left aligned data.

For example, check this out on this website itself: List of related questions shown in a right sidebar, arranged vertically

|improve this answer|||||

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