Touch Screen Conventions

felixrosbergen

Senior Member
So i'm starting to look at doing some serious work on my TouchScreen (TS) interfaces.

I'm trying to figure out some conventions.

The nice thing about a TS is that buttons and such can change functions...but it also can be confusing.

I'm looking to see if there is any type of convention.

I would like to have a button that both indicated the current state and causes a change of state when pressed.

Let take a light as an example:

States: On / Off
Actions: Turn Off / Turn On

So if the light is currently on would the button e.g. be green and with text that says 'On'? Or would it have a text that says 'Off' since that is what you would press to turn it off.

Does this make sense to anyway?

I took peak at my Ipod touch and for 'On/Off' type functions it appears to show the current state making the assumption that you know this is a TS and that in 99% of the cases you can touch something to cause action...then you actually press 'Off' to turn something On.

Maybe i'm totally over thinking this...but some input would be appreciated.

I had similar confusion when working with windows offline files. There was a button that let you change states (work online/offline) and at the same time indicated the current state...had me confused every time.
 
I think this comes down to what makes sense to you and your family. You can really do it anyway you want. If these is a 'standard' its certainly not something that needs to be followed. Just do what is easy for you and the family. Some ideas for lighting:

A separate icon, like a light bulb that displays on/off status. Then you can have dedicated buttons for on, off, percentages, etc. Or you can have a slider for level.

You can have a single button as mentioned. And then you can implement that several ways. You can toggle the color and text. In that scenario I would have it say red with the word On and when pressed changed to green with the word Off. I like to show what WOULD happen if you press it. Or, you can just have a button with the text On/Off and either put an LED on the button or a highlight/border around the button or something similar to show state. The text doesn't change, it just indicates its a toggle and the indicator will show state.

There are also other creative things I'm sure you can do depending on how complex you want to make it. As an example, you can display a rocker switch with invisible buttons on top and bottom rocker. Light an LED on the switch or the actual upper or lower paddle to indicate status.

But my design principle is KISS, do what makes sense to the intended audience.
 
I went with the convention that it will show the current state, and one way to make it less confusing I went without text where possible. I used buttons shaped like the object... a light bulb for lights, with a yellow glow when on.
 
I think this comes down to what makes sens to you and your family. You can really do it anyway you want. If these is a 'standard' its certainly not something that needs to be followed. Just do what is easy for you and the family. Some ideas for lighting:

A separate icon, like a light bulb that displays on/off status. Then you can have dedicated buttons for on, off, percentages, etc. Or you can have a slider for level.

You can have a single button as mentioned. And then you can implement that several ways. You can toggle the color and text. In that scenario I would have it say red with the word On and when pressed changed to green with the word Off. I like to show what WOULD happen if you press it. Or, you can just have a button with the text On/Off and either put an LED on the button or a highlight/border around the button or something similar to show state. The text doesn't change, it just indicates its a toggle and the indicator will show state.

There are also other creative things I'm sure you can do depending on how complex you want to make it. As an example, you can display a rocker switch with invisible buttons on top and bottom rocker. Light an LED on the switch or the actual upper or lower paddle to indicate status.

But my design principle is KISS, do what makes sense to the intended audience.
I assume my users (family) know it is a touch screen. I show buttons with the name of the device on it. The button background is bright yellow if it is ON, grey if it is OFF, and white if it DIM. If ON, touching it turns it OFF. If OFF, touching it turns it ON. Press and hold to open slider to dim.

tenholde
 
I thought about it...

For me, I assume whatever is showing, is the current state.

So, if something shows OFF, I would assume touching it would toggle the state (ON).

--Dan
 
ten, what interface are you using? I like the touch toggle, hold, slider.

I was thinking about trying to add something like that, when I finally get to doing Touchscreens.

--Dan
 
Back
Top