enter image description here

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?

  • It might be more clear not to mix units in this kind of view. Does providing the minutes in this type of condensed linear view add real value, or would it be just as clear to omit the minute values and rely on the hours and lines? In another direction: you might find that it feels appropriate to simply use total minutes in this view (it's difficult to advise here because you haven't shared anything about the types of events being input.) – jsejcksn May 30 at 8:41
  • It's tough, because both are true in different cases. These are irrigation sequences. Some irrigation sequences are accomplished in 30 minutes. Others last multiple days! – Travis Griggs Jun 2 at 21:40
  • In the case that 30 min is the minimum duration, I think it makes even more sense to simply drop the minutes and use hours (e.g. "2 h", "48 h", etc.). Even more so if there are lines indicating fractional units. – jsejcksn Jun 3 at 11:21

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.

enter image description here


It's those leading 0s.



Looks like time on the clock.

Drop the zeros.








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


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] [...]
  • The "Start" anchor I really like, thanks! – Travis Griggs Jun 4 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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