Charging or not?

Design Heuristic: Visibility of System Status 

This design heuristic talks of how the hardware or software indicates what status the device is in at the moment and whether or not that status is effectively communicated to the user.

Good Design

Below is a good example of a design that exhibits this design heuristic. This is the Galaxy S6’s battery charging screen when the device is first plugged in after it has died i.e. is at 0% battery life. The screen on the left shows the screen when the charger is first plugged in — there is a lightening bolt charging logo that indicates that the device is currently charging. The screen on the right says “1% | ϟ Fast Charging | This phone can also be charged wirelessly.” It also has a green blinking light at the bottom center of the screen to indicate that the battery is currently charging as well.

Screen Shot 2016-03-08 at 8.45.30 PM Screen Shot 2016-03-08 at 8.45.52 PM

This is an example of great visibility of system status as it clearly indicates that the battery is charging by displaying the charging logo, the current battery percentage, and the green blinking light to illustrate that the phone is indeed successfully charging.


Bad Design

Below are two images of bad design as it does not communicate the current system status to the user. This is the iPhone iOS 7 battery charging screen. The screen on the left is what the user sees when the battery is dead — the ϟ icon at the bottom along with the charger icon indicates that the phone needs to be plugged in in order to charge the battery. However, the bad design comes on the right hand image in when the phone is plugged in — there is no indication on the screen that the battery is plugged in and charging, nevertheless how long/much it needs to be charged in order for it to regain functionality and power back on. This is super frustrating as the iPhone does not restart and become functional again until it’s been charging for about 5 or 10 minutes, after which it restarts the phone. What ends up happening in this case is that the user waits until the iPhone restarts, but has no sense of whether A) the phone is charging or not or B) how much longer the phone needs to continue charging before it restarts and is usable once again.
Screen Shot 2016-03-08 at 8.59.09 PM Screen Shot 2016-03-08 at 8.39.58 PM


Revised Design

To make the iPhone charging screen comply with the design heuristic of a better visibility of the system status, a simple fix such as adding a charging ϟ icon in the middle of the battery in addition to a battery percentage to indicate that the phone is indeed successfully charging and that its current battery life is at x%, when it needs to be x% before it reboots the phone. A potential illustration of how this could look like is below.


About the author: lindahsong

You must be logged in to post a comment.