Geek Answers Handbook

How do you show elements that can switch (UI)

Let's say I have some kind of state that the user can switch, for example [ON] | [OFF] .

As a rule, I use the ONE switch (BUTTON), and when the thing is ON , the user sees:

LIGHT [ON]

When it is OFF , they see

LIGHT [OFF]

My question is: clearly (reasonable) that you need to press [ON] to turn on the light [OFF] ?

How do you do this? Any thoughts or ideas are appreciated.

+4
source share
4 answers

I would use a shortcut and a button to show the action.

Light On - Off?

Pressing this button will change the label and the button to:

Light off - on ?

This decision clearly indicates the status and available actions.

+4
source

I would definitely include the concept of a checkbox-like control if clarity bothers you. This is a common interface component that most people understand.

In any case, you can make the entire line clickable, so that it switches when I click on the text (like the HTML Label element).

Displaying a button with the text 'ON' can confuse users whether it switches the light, or if the current state is 'on'.

+2
source

The image says a thousand words ...

Depending on the type of application, displaying an image of a light switch that you can click to set the field state may be more intuitive?

Then you can get an image with a light bulb and a light bulb to display the status.

Not everyone knows what a flag is;)

+1
source

You can use radio windows, which are fairly standard controls and should not be confused for most people.

<input type="radio">Light on<br> <input type="radio">Light off

Another option is to try to implement some kind of toggle button, something like the one used on the iPhone:

IPhone toggle button - off http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch.png

IPhone toggle button - at http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch+on%20copy.png

0
source

More articles:


All Articles