Colored tags for quick identification without text

Question

I am designing a mobile app that involves a large list of exercise names. Each exercise can be categorized by either primary muscle type or many muscle types–biceps, triceps, shoulders, lower back, etc. Today this exercise list includes the 'muscle type' as tags for each exercise. However if an exercise has many muscle types it will either wrap multiple lines or truncate, neither of which are great solutions.

My current proposed solution and hypothesis is to eliminate the textual tagging and replace them with uniquely colored circles with abbreviated tags that could be expanded to the full view when clicked on the list item. However, I am hesitant as the arbitrary nature of color coding ~16 muscle types may be too many to remember and process even if there are abbreviations.

Would love any insight on this topic of tagging and categorization views, thanks.

Answer 1

The maximum colors that can be used for color coding is something between 7 - 9. For maximum efficiency and learnability only 3-5 colors must be used. You should also consider that approximately 4% of the population is color blind.

Another alternative is to use icons as tags. Each icon will represent a specific muscle. Use simple shapes that resemble as much as possible the represented muscle. Use only two colors, grey to represent the part of the body, and red to represent the muscle.

Answer 2

Maximize information density

Tags are great for categorizing, but tough for quick scanning. If your goal is to enable users to quickly find an exercise to sculpt a specific muscle or region, try a visual approach.

Create a standardized map of the body that is small enough to fit your UI, but large enough that users can distinguish the muscle groups. For each exercise, highlight the targeted ares. This pattern could also serve as a filtering control.

Not exactly like this, but you get the idea.

Answer 3

Classifying in terms of Goals

Users with limited knowledge and who want to quick start and see benefits might start off with a Goal in mind. Their goal might be "loose fat around tummy" or "how to get 6 packs fast"

Hence, If this classification can be abstracted to models that beginner can grasp and relate to, it will be most useful.

So I would suggest getting to know your user base. Apart from this also do some research around how Motivation drives the continual usage of fitness apps. This will drive the User interface design appropriately.

Answer 4

What is the goal of showing the list of muscle types? Will your users potentially choose an exercise based on the type that it targets? In other words, are the tags to be used in concert with a filter? Perhaps a user comes in saying "I want to work on my biceps, which exercises should I choose?".

How about a 'map' of all the muscle groups, with a filled in area for the group(s) targeted by the particular exercise. I'm thinking of a small standing human silhouette, with the areas in a contrasting color indicating the type(s) that an exercise targets.

Answer 5

Please make sure of such deep muscles categorization will work good for your users. Are they really so educated and such details has sense for them? Most fitness apps use more general muscles categorization, like ABS, Core, Upper body, etc.

Having not so deep knowledges in a field, I suggest each of the exercises has primary target (a muscle or a couple of these), and also can affect some other muscles. That is the reason you have so many exercises.

My suggestion is to display all the primary targets, as well as the limited numbers of the affected muscles. Then disclose all the tags on mouse over interaction.

Such approach works good for the ingredients list on goods package. Indeed, they should point the main ingredients in the beginning, so in most case you need no read all the list (you see palm oil in the beginning of the list and put the product back on the shelve):