How to distinguish Time-bound vs One time events in a timeline

Question

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?

Answer 1

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:

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

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

Answer 2

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.

Answer 3

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)

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

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