I need to show multiple(8-10) type of repetitive events on a horizontal timeline in a multi-color coded fashion. But this approach seems to be harder for user to grasp and lead to high cognitive load. Is there any better way to fix this issue?

Sample Image Timeline with many multi-colored dots in the same row

Above image depicts a horizontal time line with multiple events that are in sync with a video, which comprises of events that we want to show in a timeline.

Please suggest any fix/ways to improve UX.

  • 1
    where do you think the high cognitive load is occuring? what are your users needing to grasp in your application? Is it distinguishing between event types? understanding dense periods of events? What is the timeline? how long?
    – Mike M
    Oct 28 '20 at 16:53
  • The above attached image is depicting the current scenario where user is exposed to around 10 color codes and these color coded dots have event names which occurs on hover in form of a tooltip. This time line is basically for a timelapse video with multiple events and are in general 1-5 mins long.
    – nitin9nair
    Oct 28 '20 at 17:05

Here are some techniques that I've created based on your sample image, to show a multi-repeated-event timeline:


- Show split timelines when the timeline is expanded.  
- Works for people with color-blindness.



- Show an explicit legend that also doubles as filter buttons.
- Works for people with color-blindness.
- This approach works for both single-select and multi-select.



- Mark the selected event-type using a special marker to draw attention 
  to all its occurrences.  
- Works best for single-select.



- Gray out all other event-types and highlight the color of the selected event-type.
- Works only as a means for single-select.


Also, since you have a very wide array of colors, you should prefer a color palette generator tool to help pick colors that are sufficiently far apart.



Using colour as the only "symbol" of meaning in an interface is not ideal, since this would be impossible to use by someone with any type of color blindness (specially with that many colours). As a general rule of thumb, colour can be used as an increment to meaning, while the meaning itself is conveyed by a word and/or an image. Think of an error message that says "Error" next to a forbidden icon: it makes sense that both are in red; but the color is not the most important element to convey the message that something went wrong.

8-10 types is a lot of information to live on top of a video progress bar, but, at least on a default view, showing 8-10 lines is not the best. You also might need to filter that much info to show only a specific type among those 8-10. Here's a suggestion:

Add a secondary bar to show the events. Use colors, but also use icons.

enter image description here

Show info on what every icon means on hover, maybe add action to that (like filtering) if needed

enter image description here

Allow the user to pick and filter by only one (or more) types, while also offering a filtered view of each type

enter image description here

Hope this helps some.


I think that the problem is that 8-10 is too high of a number of colors to remember. Unless there's some training that happens or there's some natural significance to the colors, that's a lot of mental work.

It's much easier with regular text labels to identify the events and color as a visual aid.

enter image description here

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.