I'm working on a 'Timeline' component, where there are two kind of events that need to be represented:

  1. Time-bound events: An event that has a fixed start and end time (for example a meeting)
  2. One Time Event: This kind of events happen only once (example: A file has been uploaded, or a request has been approved)

As of now for the 'Time-bound' events I have shown start and end time as dots and connected them with a line, and for the One-time events are represented by single dots.

When we did some usability testing,

Users thought that the single dots are events that are 'yet to Start'

(Even though there were clear info about the event on mouse hover tooltip)

Is there a way to visualize them more clearly?

enter image description here

3 Answers 3


Try to use color as well as shape to encode differences.

In your case, you have to distinguish between two categories of events. The more you can take advantage of visual distinctions, the better:

enter image description here

Tamara Munzer has some research on encoding for categorical attributes in her book Visualization analysis and design:

enter image description here

Spatial region and motion are not possible, but you still have 2 methods of encoding available.

  • Thanks for the answer, Mike!
    – Sooraj MV
    Commented May 21, 2020 at 6:03

I would suggest colour coding different actions that can take place within a timeline and further more instead of a single dot you could also include an icon ( eg paperclip ) and make the tooltip permanent and not on hover.

It is not clear what purpose the app serves but considering that i'm looking at the timeline of a previous day, the user might want to view all the information at a glance. A small green dot with a tooltip on hover won't serve the purpose of the timeline which is a visual time representations that highlights important events.

Further more the meeting representation could also be enlarged to fit the title of the meetings.


An event that is instantanous is an event which start = end. Therefore, you may be able to show what you want by having your users to understand where is the end and the start of an event (sometimes equal)

Starts and ends of events

I think this first Idea is quite elegant, but as said in comment might be mistaken with radio buttons. Therefore I propose other options with the idea that start/end must be different shapes.

Other propositions More designs

I added the proposition for "Started event" with no end date.

  • 1
    I like the concept. But this can be mistaken for a radio button?
    – Sooraj MV
    Commented Jun 23, 2020 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.