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?