I have a profile page where I'm showing the list of categories that user is part of. When a user visit other user's profile, he should be able to see mutual categories.

Each category has its own colour, and I am representing each category with icons.

One potential method to show mutual categories is use of respective category colour (as shown in the below image). Its differentiating mutual categories, but not in innovative way.

What is the recommended best user experience to display mutual categories?


Mutual categories using colour

  • How many categories can there be? Do you have a wider mock up of the rest of the screen? What is the domain of this app? Business, personal development? Providing more context can help us a bit more. – Mike M Jul 25 '17 at 15:45
  • Hi Mike M, there are total 7 categories like photography, sports, hobbies, extreme sports, fitness, travel etc and this is for both web and app, the platform is on personal development, thanks for response – Ram Jul 26 '17 at 5:11

Ask what the user is gaining by having to interpret a category by an icon (without text), and also having to interpret each category by a series of colors.

I know your question is about mutual categories, but I'm proposing you simplify your category display, so you can more easily distinguish mutual categories. (I know I don't have the design constraints you may have)

Icons alone are hard to interpret.

If it's information that needs to be read, you could try using text (or at least icon w/ text).

If you do need to use, icons, there are some good guidelines.

From Neilsen Norman - Icon Usability:

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 could supplement with a label:

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.)

You have two levels of interpretation here (icon and color of category); wondering if it could be simplified.

Do you have a reason to hide meaning behind an icon? And have a color change for each category as well? Is there anywhere else that color in your UI has a meaning, i.e. an indication of system status?

Here's a version w/ text only, similar to how linkedin looks at skills as lozenges.

Since I don't have clarity about how many categories you have, here's a simple version, and another with the icon and text. I admit I don't know the role that categories play in other parts of your app.


download bmml source – Wireframes created with Balsamiq Mockups


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.