Best way to indicate more items in the list

Question

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.

Let me know if any more information is required.

Thanks

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 06 '20 at 14:15
Also, these are looking like they are arranged in rows. Is each row a category in itself? — Mike M, May 06 '20 at 14:17
are the purple circles icons? or do they have some text accompanying them? — Mike M, May 06 '20 at 15:26

Mike M · Accepted Answer · 2020-05-07T03:17:12.893

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.

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.

Got it, Thanks for the input. Definitely helpful. Cheers :) – Syed Shamikh Shabbir May 07 '20 at 07:14 — Syed Shamikh Shabbir, May 07 '20 at 07:14

score 3 · Answer 2 · answered May 07 '20 at 14:44

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

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.
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.
Expanding the labels inline as a dropdown could be an option

Best way to indicate more items in the list

2 Answers2