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:

    Separation

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

    separation

    Filtration

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

    filtration

    Demarcation

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

    demarcation

    Isolation

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

    isolation

    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.

    color-wheel-5-color-analogous



Suggested Topics

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