User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I need to display battery with 3 colors: green, orange (or yellow?) and red.
This device's battery (like iPad, iPhone etc..) with a battery life of up to two days.
What percentage range to use for each color?
When the user want to see red color? or orange or green?
The colour indicator is used as a priority status:
Red = urgent.
Orange = weak warning.
Green = good.
The priority depends on the application and the consequences of a low charge. For something like my kindle where the battery lasts for a month or more at a time, 10% isn't yet an urgent battery level. But for a backup UPS in a hospital, a charge level below 80% may be urgent.
For a mobile phone, I would tend to use:
50-100% = green
20-49% = orange
5-19% = red
0-4% = flashing red
However, this should not apply to every device regardless of its application area or consequences of failure.
I would suggest (for laptop atleast) keeping it as follows:
The reason being, I have read many articles which suggest keeping your laptop charged between 40-80% to increase the battery's life. One such article.
I know some manufacturers which go for a wider green band:
Edit: Just read the question's edit. In case of mobile devices I personally, would go for the wide green band.
The reason being, for a mobile device you do not want the user to feel like he needs to recharge his battery very often, so the wider green band reinforces this by virtue of visually signaling that it is ok to go on with your usage. Also, the recharging time of mobiles (not tablets necessarily) is quite short which allows the user to wiggle some more juice before pluggin in (and using).
Given that the life of the battery is so long, I don't think that there is a value of displaying a middle display.
Orange tells the user that there's something that they probably want to address, but they don't need to do it immediately. Red tells the user that there is an imminent problem that they need to address soon. With a 2-day battery life, if you use a linear scale, your device is going to show orange a lot of the time, even though there could be up to a day of battery life life.
Apple addresses this in their battery-powered devices (both laptops and mobile devices) by only using red. On iOS devices, it changes to red and throws a warning dialog at 20%, and throws another warning dialog at 10%. In the first case, the red tells me that I've probably got an hour of battery life left, which gives me sufficient time to finish what I'm doing and get a power cable. In the second case, the warning dialog tells me that my phone would like to be plugged in right now. I believe the warning dialog for batteries comes at different points on laptops depending on their battery life; the battery icon for my retina MBP (which generally has an 8+ hour battery life) turns red at 10%, which is still an hour of usage.
I'll also note that iOS and Mac show more information in their very simple battery icon than you're showing here in this icon. The battery icon is pretty flat, but that means that it's very easy to glance at it and have a reasonable estimate of how much battery I have left. It's easy to see if it's mostly full, about 75% full, about half full, and about 25% left. You're relying on text (which takes up a lot of space) to do something that the icon could do for you, if you simplified its design by removing its 3D nature and its drop-shadow. With a simpler icon, you could convey much of the information that you're currently conveying by text, and thus use less space without a loss of information.
