How to display additional data in an options list?

Question

I have been tasked with adding a new component to our front end, and I'm struggling to think of a way to design this without totally confusing the user.

Basically, we want to be able to have an options list where we can display additional information to the user cleanly. I cant think of any interface I have ever used which has adopted something similar to what I have been told to do, and the fact it has not been done before is slight worrying to me. (why do we need it if nobody else does?)

I've been told to style it like an existing component, which is a select box that filters down content as the user types. It looks like this:

I have been told to make the new component look the same, but the dropdown box should be a multi-columned table, complete with paging, The first column of this will be the data you see in the previous image, with additional details in the latter columns.

I do not like the idea of having a gridded table in a options box, and have been toying with ideas in Gimp to come up with a method of doing this in a way that I do like.. so far this is my latest mock-up:

Thing is I still don't like the look of this approach either.. Theres too much repeated data in the prefixes for a start.. but I have a habit of staring at things until I hate them. Is there a standard way of showing additional details in an options list that I can re-use as to not surprise me users. I'm really trying not to re-invent the wheel here.

TL;DR: is there a de facto standard for displaying additional data in an options list?

Answer 1

The Material Design Guidelines call this a two-line list. See here (and image below).

In a two-line list, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.

A few things to consider in your list

• Do not add too much information. Only show the most prominent information (be mindful of what is most important to the user).
• Make sure there's a clear hierarchy between elements.
• Also be sure to show the user the options he has. Can he click on items? Can he edit?

This could look something like this

The only thing I've changed is giving the elements a little bit more space and removing vertical separators. You already have a clear hierarchy (difference in color and size).

Also, if you need to put more info in than the two lines, you can consider using cards.

A card is a sheet of material that serves as an entry point to more detailed information.

Answer 2

I have been tasked with adding a new component to our front end

...

I've been told to style it like an existing component

Sometimes you have to read into what it is that you're asked to do. Why must it be styled like an existing component?

• Is it because they don't want to spend time approving a new design?
• Is it because they're afraid that users will be confused or that
• they simply want things to remain the same?

Sometimes adding a new item means that there will need to be changes.

In this particular example: How long is the list?

Can you use radio buttons and then display information below (or to the side) as the items are selected.

Of, if the list is long perhaps you can have a mouseover effect. (This may be tricky combining a select box with a hover state. You may want to include a delay so as to not have a flashing effect.)

Regardless there are several solutions. Stop hating the project and create prototypes. This is scenario where a mock-up will not work well. Users need to use a working product to be able to say. "Hey!!! I like this."