0

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:

enter image description here

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:

enter image description here

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?

  • I think your solution is fine as long as there are only a few additional pieces of data. Anything more than that and you should display results as "entities" rather than "list items" – William Anderson Apr 25 '17 at 15:02
  • @WilliamAnderson Can you elaborate on what you mean by displaying results as entities as opposed to list items? It is possible there may be large amounts of additional data, as it will be down to the developer using it at the time to populate it... and the other developers aren't the best at thinking about how the app looks as opposed to whether the required functionality is fulfilled at any cost. – Trotski94 Apr 25 '17 at 15:04
  • Sorry, I should have been a little more clear. By "entities" I mean something like an Amazon search result page, where each each piece of information for an entity is presented separately (e.g. price, image, rating, seller). Making each field visually distinctive allows users to quickly find what they're looking for rather than just presenting a lot of similarly-styled text. – William Anderson Apr 25 '17 at 15:08
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.

enter image description here

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

enter image description here

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.

0

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."

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.