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.

Improve this question
3
  • 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
    Commented Feb 6, 2015 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
    Commented Feb 6, 2015 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
    Commented Feb 7, 2015 at 17:32

2 Answers 2

Reset to default
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

Improve this answer
3
  • 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
    Commented Feb 6, 2015 at 17:20
  • Of course, So the progress bar needs to slow down for years ( does that even make sense :)
    – Okavango
    Commented Feb 6, 2015 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.
    – Pop Flamingo
    Commented Feb 7, 2015 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

Improve this answer
2

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.