# How to distinguish between progress and consumption visually?

I am working on a product that shows how much time the user has consumed .

To represent this visually I have used a reversed progress bar but it still feels like a progress bar , increasing.

Are there any ideas you have for me to show that its decreasing ?

• Get inspired by iPhone battery or your laptop's battery? – DPS Apr 19 '16 at 11:59
• yes i checked that of course , but on large scale it loses its meaning as a battery , it turns into progress bar . – Basem Apr 19 '16 at 12:04
• Could you clarify the dynamic you're trying to communicate? Is there an "end" to the meter, or does it just count up indefinitely? Is reaching the end desirable or undesirable? – Nate Green Apr 19 '16 at 12:41
• it has an end , its like you have specific time to finish a task , so reaching the end is undesirable – Basem Apr 19 '16 at 13:10
• I don't have time right now to write up a full answer, but it sounds like what you actually need to show users is how much time they have left, not how much time has elapsed. A countdown, like @franchesca suggested below, would do that. You could search for countdown visualizations for inspiration—my favorite is a "pie" shape that starts full and gets more and more slices taken out of it as the end approaches. – Nate Green Apr 19 '16 at 14:50

Why not try an hour glass? Almost everyone understands how an hour glass works, even small children, and it seems to fit your situation unique. The user has an particular amount of time which is represented by the amount of sand in the top half of the hour glass, and as the user consumes that time, the sand moves from the top half to the bottom half, with the top half representing how much time they have left and the bottom half representing how much time they've used. If you don't want to animate complicated sand dynamics, you could represent the sand moving to the bottom with repeating circular drops.

• Nice way to show time used vs time left! This can even work as a very minimalist graphic that leaves out the sand animation altogether. – Franchesca Apr 20 '16 at 7:34

# Animation

Have stripes on the progress bar that are animating to right (presuming your reversed-bar is right aligned). This will give the perception that the bar is moving in that direction, or decreasing.

Here is an example:

• NOTE: If you use the code in the link I forked it from somewhere else and altered it so a lot of the code is likely unused/unneeded – DasBeasto Apr 19 '16 at 13:25

What about a clock? Most people should associate this with the concept of "time consumed".

• He is asking for - product that shows how much time the user consumed – DPS Apr 19 '16 at 12:36
• @Dipak Perhaps "Countdown" is the wrong word to use (I was thinking of the TV show). I will remove that word from my answer. – Franchesca Apr 19 '16 at 13:11
• @Franchesca its nice to show the actual time left . but the circles dont show which direction its moving , so it will confuse the user when he see it , is it completing the circle or decreasing .. – Basem Apr 19 '16 at 13:16
• @Basem Time consumption can only move in [one direction] (en.wikipedia.org/wiki/Arrow_of_time), unless your users have access to a blue police box. I think you need to clarify what exactly you are trying to achieve. Your question does not mention a reference point for time either, and direction must always be in reference to something else. – Franchesca Apr 19 '16 at 14:53

Progress indicator helps to answer the following questions - what part of the whole task done? how far am I from my goal? how fast am I going to my goal?

'Consumption' indicator should help to answer the following: how things are going relatively to highest possible mark? should I do better or can I go slower?

If above is what you mean about showing 'consumption', so the most appropriate indicator seemed to be gauge. You can google for example 'high low icon' and select one with coloured scale as well as labels like 'very low- low - moderate - hight - very high' or 'so so - good - excellent'.