4

I have an iOS app that connects to a bluetooth device. Part of the functionality of the app is that it can turn off the device. I want to be able to indicate the on/off state within the app with clear iconography (and no text).

Currently, the best options I have been able to come up with are:

  • Display a power symbol that is grey when the device is on and a solid colour when the device is off (this seems really confusing).
  • Display a crescent moon shape (similar to iOS' Do Not Disturb icon in Control Centre), however, we specifically refer to it as turning the device off (not putting it to sleep or something similar).
  • Display the word "OFF" this is grey when the device is on and a solid colour when the device is off (seems to suffer from a similar problem to option #1).

Is there a better way to communicate this information with only an icon? I think much of my confusion comes from the fact that we're inverting the state (e.g. the icon is 'ON' when the device is 'OFF'). How can I make this more clear to our users?

EDIT: Users will not be able to interact with this icon in any way, it is purely to communicate the state.

Improve this question
3
  • 2
    "OFF" in gray when being ON sounds like a huge mindfuck to me. How about saying "ON" when being ON and "OFF" when being OFF?
    – Uwe Keim
    Jan 11, 2017 at 5:42
  • Remember not to rely on colors only. If the person cannot/has problems seeing colors, how will that person know the current state of that toggle? Reade more about this issue: w3.org/WAI/wcag-curric/chk3-0.htm
    – Ilias Bennani
    Jan 11, 2017 at 15:23
  • Can the app connect to more than one device or can it connect to multiple ones? What does the app do other than turn on and off the device? If the intent of the app is just a remote control of this device, don't show anything else unless the device is on, making it very clear that the device is off.
    – invot
    Jan 17, 2017 at 20:36

6 Answers 6

Reset to default
1

There is a similar question in the site that has a lot of good information.

The toggle on/off problem usually comes from the fact that the user can interact with the button. So doubts are "if it says on, does it mean the device is on or I can interact to turn it on?". In your case, as this is just an indicator you shouldn't have that problem, as long as the user understands this is just an indicator and not a button.

The same indicator but with the "light" turned off

I made a circle but you could use other metaphors, such as bulb.

Improve this answer
2
  • Thanks for the response. This is where it gets a little complex with our particular device. If the device is disconnected there is no guarantee that it is in the last state we saw it in. For example, the device is on and the user is connected to it. The user then leaves the device at home and goes to work and it disconnects. While the user is at work, the device runs out of battery. Now, when they return home they wonder why the device is not connecting and the app still displays "ON" even though the device is out of battery and "OFF".
    – sam
    Jan 11, 2017 at 21:55
  • @sam when the app doesn't know if the device is ON or OFF it shouldn't indicate any of them. Either it displays "not connected" or "?" or nothing at all.
    – Alvaro
    Jan 11, 2017 at 23:25
1

Disabling the other functionality but still showing them (disabled / greyed out) helps to convey that the device is off. In that case the icon works as a confirmation rather than the main signifier.

Also, is there any physical aspect of the device that let's you know it's on/off? If so, mimicking that will be the best status indicator you can get.

Improve this answer
1
  • Currently there is no physical aspect of the device that indicates the on/off state, unfortunately. Your solution is probably the closest to what I currently have now.
    – sam
    Jan 11, 2017 at 22:00
0

You can tryout this way: enter image description here

There are 2 indicators, one for "OFF" and on for "ON". When the device is on user will see green indicator and when it is off user see red. This will be a most obvious indication if you compare with devices.

Improve this answer
0

When I searched over the internet I fount this image. It have a green light under the power button which clearly indicates the device in ON state and a light that doesn't glow indicating the device is in OFF state

enter image description here

Improve this answer
0

Consider creating two coordinated light switch icons. If the light switch appears in the up position, then the device is on. If the light switch appears in the down position, then the device is off. You could use a vertical line at the top to emphasize the "On" position and a circle at the bottom to emphasize the "Off" position.

Improve this answer
0

Show it crossed out with a "\" line across the icon (which is the standard android app approach).

Then of course you need some generic 'device' icon to cross out.

You could use a tablet / smartphone icon as a stand in for any kind of 'device'.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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