0

My application allows you to see the list of banking transactions in a table format.

Each transaction contains a date, a category (blurred), a label (blurred), a list of beneficiaries and the amount (blurred)

My problem is to display the list of beneficiaries in a clear and explicit way for each line even if a transaction has several beneficiaries (can rarely have more than 3)

I tried the color codes + small texts, but we can't have more than 3 users for readability reasons.

What suggestions do you have for improving this visual?

enter image description here

Another proposal is to put labels in columns, it allows to identify more quickly the lines with the same users.

The current system is limited to 4 users (1 to 3, others) and it will not be scalable.

The usernames are first names but can be completed with ellipsis.

enter image description here

2
  • What's the maximum number of characters the user label has? Can be replaced for just a number? Are the repeated users the same (user 3 in 13 and 16 row)?
    – Danielillo
    Dec 12 '21 at 14:47
  • User labels are first names but we can use ellipsis if they are too long. Yes, the user 3 is the same on both line 13 and 16.
    – PEC
    Dec 14 '21 at 7:47
1

I think the Labels Column is the bigger culprit. If you can shorten it and then show beneficiaries as different colored round avatars with the first letter of their names in them. Hovering over them will show the full name in a tooltip.

enter image description here

0

I see a possible solution using datatable expand/collapse like in this example from freakyjolly.com

  • Only one simple label users with hidden content
  • Expanding the content below each row on click
  • An extra button to expand all users content

enter image description here

0

I would go for either a hover list, popup list after a click or expandable row. I'm actually working on the same issue right now and our plan is to show the first label and then have (see X more) with a link next to it and the click opening a card with the labels.

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.