1

I am trying to improve the UI of a design of a table that has three columns. The first two columns have one or two words and the third column has a fairly long list of items.

enter image description here

My first solution was to change the layout and put the information for each row into a card. The problem with this is that there could be many classes (up to 20) in certain cases. To fit the content without making the user scroll for a very long time, I could use a carousel, which my developers do not want to do.

Any help would be very appreciated!

Improve this question
3
  • 1
    All the columns must have the same width?
    – Danielillo
    Oct 20, 2021 at 17:59
  • @Danielillo No, they can be any width!
    – rageypaigey
    Oct 20, 2021 at 19:37
  • Will users be comparing information in each row in order to make a decision?
    – Izquierdo
    Oct 20, 2021 at 19:48

2 Answers 2

Reset to default
5

It looks like you're designing to help the user compare classes of life insurance and make a decision on which one to select. In that case, the user is likely going to want to compare specific criteria side-by-side. You might try a comparison grid, like this:

comparison grid with life insurance criteria

Bear in mind that it's tough for anyone to compare 20 items - we humans usually can only handle about 7 or so before we start to struggle. In the cases where there are more options than that, you might want to look at grouping items together based on criteria that is most important (such as Plans for People Over 55, or Payout Amount Over $1 Million). Those can have their own tables.

Filters are really good, too. You can display everything in one view, and then let the user decide ranges and other criteria that will narrow down their options.

Improve this answer
1
  • Thank you! I like this solution.
    – rageypaigey
    Oct 20, 2021 at 22:03
1

If the developer team doesn't want to play ;-), the only possible option I see is to play with design.

The biggest problem I see in the table is not the number of rows in the last column, but the monotony of the egalitarian repetition of different items at the same level. Personally, if I had to read all those lines it would be very tedious and confusing.

The graphic design provides many weapons to establish visual priorities, make a reading of tedious content more pleasant and consequently, help optimizing space using the same content. With this, not only does each column gain space, but as an added extra, it helps the user to immediately perceive each variable item in the different classes.

enter image description here

Improve this answer
1
  • This is a good solution, I appreciate your help.
    – rageypaigey
    Oct 20, 2021 at 22:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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