8

My app displays time units, such as [minute, hour, day, month, year]. There will be no magnitude associated.

They convey the information "About how long will this action take?" (Think TODO list)

Is there an appropriate visual metaphor that quickly conveys the magnitude of time? Icons or otherwise.

Is there a corresponding form input?

Constraints:

Many (10) of these may be displayed on a page at a time. So they can't be huge.

They are not the central point of the app, so the goal is that they be quickly understood without training/reading.


I will be including my initial thought as an answer to this, but I'm hoping there's a better one.

  • usually I use lower case single character suffixes. 40s, 3d, 30m, 1h, 5y, etc. not sure if that's exactly what you're referring to though, since it's not an image or anything, but it quickly and concisely conveys time information. – Dave Cousineau Feb 6 '15 at 22:51
  • actually, the more I read your question, the less sure I am what you're asking. you say "no magnitude associated"? are you not trying to show the user a time value (5 years 6 days), or are you just identifying one of the units (this box is in years, this other box is in minutes, etc.)? – Dave Cousineau Feb 6 '15 at 22:57
  • @Sahuagin - the latter is correct - there will be no quantity associated, as the estimate is "about a month". Re: character suffixes, this has the potential confusion where minute and month are concerned. They are usually "m" and "M" in format strings, but that may confuse more than it conveys. – cmonkey Feb 7 '15 at 17:32
6

I think you could take a more subtle approach by displaying a countdown progress-bar as in the mockup below:

enter image description here

The benefit of using this pattern is that it conveys information about how long the action will take to complete while also conveying information about how each task compares to others (if needed) and it is also easily viewed at a glance.

The progress bar could accommodate "years" using a slight variation as in the example below:

enter image description here

Hope that helps

  • Sometimes appropriate. A trouble in my app: if a linear scale, 'year' throws things off, making 'minute' and 'hour' nearly the same. Log scale would be better, but may be confusing to a user as to why hour is twice as big as a minute. – cmonkey Feb 6 '15 at 17:20
  • Of course, So the progress bar needs to slow down for years ( does that even make sense :) – Okavango Feb 6 '15 at 17:31
  • Something disturbs me in your approach about the colours you are giving to the bar when accommodating with years, I think a uniform colour would make more sense to the user while here it seems like the user must guess how to read this colour code. – Trevör Feb 7 '15 at 9:49
3

Display

Using icons with tooltips:

Clock icon:

enter image description here

  • small swept/highlighted face section for "minute".
  • fully swept/highlighted face for "hour".

Calendar icon (like http://fortawesome.github.io/Font-Awesome/icon/calendar/)

  • highlighted day for "day"
  • highlighted row for "week"
  • fully highlighted for "month"

Stacked and highlighted calendars for a year.

My concern is that this is a lot of information to pack into a small icon.

Input

Regular form <select>. Each option has the icon described above on the left, text on the right

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.