How to disambiguate printed clock times from printed duration times?

Question

I'm working on an app that allows users to construct timelines (kind of like events in calendars). But the timeline/sequence is independent of any specific datetime to execute, so all of the times in it are durations/offsets.

However, some users come with predisposed ideas that they'll be building these timelines in "real clock time". I've struggled with a mechanism to steer them clear of that model. Like the times printed down the left side here, part of the problem that allows them to confirm their incorrect conclusion, is that we tend to print/show clock times (e.g. 8:30) the same way that we do as an 8 hour 30 minute offset/delay (i.e. 8.30).

Is there a design language I've missed over that better differentiates printed durations vs printed wall clock times?

Answer 1

Instead of, or in addition to, changing the number format, you could add some special labels and other cues.

• Replace "00:00" with "Start" or something like that.

• Once at least one event has been created, place a special label at the end of the last event, like “Ends after 3 h" — which conveys that this is "3 hours long", not "ends at 3 AM / 03:00".

• Special labels could also be, or contain, icons symbolizing starting and ending the process, like for example the play/stop symbols (▶️ ⏹) do.

  If there's a good phrase or symbol which refers to the actual event that starts the sequence in your particular application then you could include that.

Another idea is that instead of trying to squeeze all information into the left side bar, you could also add a “Start” label and other graphical elements — some kind of visible top edge of the chart — above the chart. To avoid wasting screen space, allow it to scroll up when the chart is scrolled. This would convey that unlike times of day (which extend indefinitely to the past and future), this has a definite beginning.

You could put the duration info and any other interesting summary information below the end of the last event.

An ascii-art sketch of your UI layout with some of these ideas added:

 ← Example          EDIT
_________________________
                                  \
      Start of sequence           |
Start +------------------   <--------- Probably only one of these "Start" labels, not both
      |       A1                  |
  :30 | . . . . . . . . .         |
      |                           |--- Scrollable area
 1:00 |..................         |
      |       A2                  |
 1:30 | . . . . . . . . .         |
      |                           |
 2:00 |..................         |
      |       A3                  |
 2:30 | . . . . . . . . .         |
      |                           |
 3:00 |__________________   <------- Last used time marker might be bolded or something
      |[Duration 3 hours]         |
 3:30 | [blah blah blah ]   <------- this footer moves up/down as the last event does
      |                           |
 4:30 |                           |
      |                           |
 5:00 |                           |
_________________________         /

 [button] [button] [...]

Answer 2

I think the problem is that you are putting the numerical information in the way the hours are set.

• Day Time: 03:45
• Duration: 3h 45' 20"

Changing only this helps the perception. Adding an icon to the right of the hour number plays the role of inverse perception: eliminates the area the eye would fill with any reference to hour time, such as the colon : or the abbreviation h. For this example I choose a double arrow, but if it were a personal project I would put something visually heavier like a square block.

Answer 3

It's those leading 0s.

00:00

00:15

Looks like time on the clock.

Drop the zeros.

0"

15"

30"

45"

1'00"

1'15"

Etc

The single and double quote marks for minutes and seconds might not work outside the UK.