Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

What percentage range to use for each color?

When the user want to see red color? or orange or green?

share|improve this question
    
This is just going to be personal preference really, there is no correct answer here, but as you have 3 colours then what is wrong with 0-33, 33-66, 66-100? –  JonW Apr 30 '13 at 13:05
3  
@JonW Do you want to see orange color when your battery on 66%? –  user80042 Apr 30 '13 at 13:08
    
Please dont just change colour, also change something else about it. Some people will struggle to differentiate between some colours. –  RhysW May 1 '13 at 16:13
1  
@RhysW I also change the fill height inside the battery. –  user80042 May 2 '13 at 5:38

3 Answers 3

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.

share|improve this answer
    
I edit my question, this is device's battery like iPad. –  user80042 Apr 30 '13 at 13:19

I would suggest (for laptop atleast) keeping it as follows:

  • Green 40-100%
  • Yellow/Orange 20-39%
  • Red 1-19%

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:

  • Green 20-100%
  • Orange 8-19%
  • Red 1-7%

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

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.