5

I have a list of "labels" of certain categories. Currently, only top 3 labels are displayed in the category (see picture attached). Each of the purple circles is a category that it displayed in its own row, so you can think of each row as being a different category. The blue/orange colors on the labels are the 2 types of the labels in that category. Each of the labels when clicked open a new card with details of that label.

There can be any number of labels for a category. The problem here is that there can be max 3 labels that can be shown in any case. What would be the best way to visually indicate that there are more labels present in that category for each type.

example

Let me know if any more information is required.

Thanks

  • 1
    What is the difference between the orange and blue? And what are the purple circles? Sorry, i'm a bit confused on what users are trying to do here – Mike M May 6 at 14:15
  • Also, these are looking like they are arranged in rows. Is each row a category in itself? – Mike M May 6 at 14:17
  • updated the question with more info @MikeM – Syed Shamikh Shabbir May 6 at 14:32
  • are the purple circles icons? or do they have some text accompanying them? – Mike M May 6 at 15:26
  • they are icons. – Syed Shamikh Shabbir May 6 at 15:29
5

Try being explicit with how many can't be shown across a label type.

I'm not familiar with your constraints and requirements, but if you need to keep these in a list with a max height, I would first make the list easier to scan.

enter image description here

Try frontloading the category along the left, so we can scan vertically right away.

It seems there are alot of categories, consider a label if space permits, as icons alone can be a memory tax on the user.

From the Nielsen Norman Group:

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

You also have very high visual contrast which you can take down a bit, and use links to show how many are not being shown for a particular label type.

| improve this answer | |
  • Got it, Thanks for the input. Definitely helpful. Cheers :) – Syed Shamikh Shabbir May 7 at 7:14
3

Ideating off of the answer provided Mike, here are some of my thoughts on the same.

  1. Since you are working on a mobile device, real estate space is of utmost importance and thus the category name could be moved to the top instead of being on the left hand side.
  2. The number of extra labels can be shown in a neutral colored button format or in the form of a link as mentioned in the answer by Mike.
  3. Expanding the labels inline as a dropdown could be an option Phone category list
| improve this answer | |

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.