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:
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.
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)