I have a page where I need to display users in a list, like this: enter image description here

In every item I will need to display many tags, there can be one or two, or much more, like ten and even more. The current look and placement can be adjusted, it can go on two lines also.

What would be a good solution from UX perspective and also how to show them visually?

I made two versions. The 1st one is a solution to display first three + tag that indicates how much in total they are, so that user clicks un them, for example, it will show modal with all tags.

The 2nd version is visually not so appealing, but can show them all.

This also should work on smaller screens. Maybe someone worked on something similar and can give some valuable advice. Thanks!

  • 1
    Please create 2 or 3 alternatives complete different between themselves and edit your question to show us the alternatives and ask: What is the best solution for users list? or something like that. Then we can help you discuss the solutions. Oct 2, 2019 at 13:11
  • @BraDev Thanks for the tip, I updated question details.
    – istoby
    Oct 3, 2019 at 7:32

1 Answer 1


I prefer your last option but considering the user experience I created 2 other alternatives and I definitely chose the second one on my suggestions.

On my Option 1, I'm suggesting to limit the number of tags to prevent crazy and big boxes of user-items.

Why my option 2?

On your wireframe, the user-item is polluted and hard to read everything. Considering that the users will use the extra information on each user-item as a filter I suggested to add this info like real felters and keep the user-item view clean.

Sorry, but I didn't understand why you have a square with number 5 and an empty square on your wireframe. Then I considered unnecessary and removed.

And I thought the arrow is like a read more or open user details but this is obvious for users when they are browsing on lists, everybody expects that open when you click on the item. Then I also removed.

enter image description here

AND, on this type of wireframe that I suggested is easier to make it responsive.

  • Your option 2 is good if tags are only used to filter. If you merely want to look at a person to see which tags they have, then you can't do it with option 2. We need to know more about the use cases for the tags. Oct 3, 2019 at 8:49
  • @celinelenoble I agree but with the information that I had, I did what I can. Another alternative may add a button like see tags and on click grow the box and show all tags, but I don't know how many tags, how important are the tags, The usage reason for tags. I need a good brief to do it. Then I'm just suggesting thing for istoby can think more and create by himself. Oct 3, 2019 at 8:55
  • 1
    @BraDev Thank you for your input! The number 5 indicates average points for the user and the empty square is checkmark box, they must be there. The arrow means "fast move" and also should be there. These solutions definitely made me rethink the whole list and I will try to make some.
    – istoby
    Oct 3, 2019 at 11:29
  • @istoby If this answer helped you you can set as right answer clicking on check icon aside of the answer and upvoted if is useful to you. Thanks! Oct 3, 2019 at 12:24

Your Answer

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

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