3

I have an overview page, where a user can see how much time is left vor various tasks. I want to graphically display this, but the difference between the times left for one and another task, makes it hard to display this properly.

E.g. one task might have 6 hours left of overall 10 hours
and another might have left 6 minutes of overall 10 minutes
(if you're wondering: yes, this is somewhat of a standard use case for my app)

See this simple mockup, where i display it in a progress bar with the same width for all tasks: enter image description here

Now when you look at it quickly, you might think, that you have a lot of time left for task 2, but that's not really the case...

And now a mockup, where the progressbars are sized proportionally to each other and their overall time.

enter image description here

It's not really that visible now... (and I think Task 2 is still even a little too wide...)

Which option is more userfriendly? Or do you have any other idea? (Would be good if it didn't take up much more space then my options. I don't depend on the progressbars, could be other elements as well)

Improve this question
1
  • What is the maximum time this UI will need to handle? Will tasks take as long as days or weeks or is 24 hours or 12 hours a reasonable max for a task (as you've indicated in your mockup)
    – J. Dimeo
    Jan 22, 2015 at 15:43

6 Answers 6

Reset to default
2

It may not be possible to have a linear relationship between time and length of the progress bar, hence it is good to break down time into weeks, days, mins and seconds and show each in a box.

Like if time left for Task 1 is say 120010 seconds, then actual time left is 1 day, 9 hours, 20 minutes and 50 seconds,

Then show one box for day and label the box to indicate that 1 day is left, and another box next to indicate 9 hours, another to indicate 20 mins and another to indicate 50 seconds.

What this does is like exponential scale makes bulk of the time go in weeks and days and short time periods goes to boxes like mins and seconds.

Hence this model tries to give good representation for all sizes of time period.

Additional you can highlight tasks with the shortest time remaining with some background color like soft red or orange to draws users attention.

This models makes very clear which are the tasks with less time remaining and tasks with lot of time remaining, which is the problem we are trying to solve here.

Additional filters and sorters can be provided if the tasks are shown in a grid/table, to show tasks sorter in the ascending order of time remaining.

Please refer to the snapshot shown below to get some idea:-

enter image description here

Improve this answer
1
  • I think the same for wide ranges, so +1. I've mentioned your approach in my answer.
    – Alejandro Veltri
    Jan 23, 2015 at 16:48
1

You're trying to solve a two-dimensional problem with a one-dimensional visualization (well, technically two, but only one dimension reflects your data, so that's what counts for this purpose), it's not an easy thing to do.

Your two dimensions are the length of the task and the percentage completed. There's plenty of common 2D data visualization techniques. For example, the shapes below. Just label the shapes/axis in a clear way and you should be fine.

enter image description here

Improve this answer
2
  • +1. I agree with your comments, I've try something in my answer.
    – Alejandro Veltri
    Jan 23, 2015 at 16:53
  • Thanks, but you actually mentioned someone else :-)
    – Vitaly Mijiritsky
    Jan 23, 2015 at 18:49
1

Same as the gauges above, only somewhat more spread out

This is pretty much the same as the guage recommendations above but a little more spread out to facilitate at-a-glance consumption.

Improve this answer
0

To late to the party, but Scott Williams already provided you with my answer. I just took the time to build a small mockup:

Increment ticks

It would also give a visual indication how long each task is running/needs to run in comparison to each other (based on how many ticks are displayed)

Improve this answer
0

Some general comments about your design:

  • You are using a progress bar to show something that is decreasing (time left) not for something that is progressing/increasing (e.g. installing something). If you use a standard progress bar that could be quite confusing.

    Unless you try to make a little design change to the progress bar with a kind of inverted color design:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • In your first design, you're mixing the representation of %done with time left (text) . That's "task progress" not, time left representation.

  • The same happens with the second but "scaling by time"

This representation is quite difficult, here is what I've imagined for not so wide ranges (Visual representations won't be viable if the range of time is wide, for example, 2 minutes and 30 hs, in that case I would recommend the approach of Chetan answer):

mockup

download bmml source

Improve this answer
-1

The 1st illustration is perfectly fine. I would recommend putting increments, small ticks every 15min or 1hr, on the time bars. What do you think?

Improve this answer
1
  • Would that not risk cluttering up the visuals of it though? Is that extra noise balanced out by the additional clarity it may give?
    – JonW ♦
    Jan 22, 2015 at 14:57

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.