How to fix this issue of showing multi-color coded events on a timeline?

  • 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.

  • QA Engineer

    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.


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2