toggle on / off design pattern

29 Jul 2009 - 9:09am
4 years ago
9 replies
3783 reads
Sam Menter
2008

Greetings

Can anyone point me in the direction of a useable design pattern for
an on / off toggle switch to be used online ie using JS / html / css
rather than flash? I'm working on an application that currently uses
colour coding to indicate whether an option is active or not. This
works in the real world i.e. the red light comes on when recording,
but obviously bad for accessibility online due to the different ways
people see colours.

For example, one option in this case is record. There is currently a
button that goes red when the user clicks it to activate recording.
I've suggested simple droplists of on / off by each option, but this
feels a bit clunky, and the client felt it was a bit 1999...

Any suggestions most welcome!

Thank you,
Sam

sam at onebigfield.com
www.onebigfield.com
www.pixelthread.co.uk

Comments

29 Jul 2009 - 9:32am
Jake Kronika
2009

The jQuery JavaScript framework is excellent for all JavaScript
coding, and provides not only toggle functionality (which is
particularly simple to implement), but also a number of additional
animation and easing functions (some as plugins you can drop in) that
can make the toggle just as "flashy" as Flash, without Flash...

http://www.jquery.com/
http://docs.jquery.com/Effects/toggle

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44203

29 Jul 2009 - 10:03am
Yohan Creemers
2008

The design pattern used in desktop applications is a raised versus
pressed button look, as a metaphor for real world buttons.

In case of the recording button, the on-state could have a small
animation, indicating the 'tape' is running.

Differentiation by color is not bad per definition, although it will
be hard to guess whether a certain color means on or off.

More design patterns for web interfaces:
http://designingwebinterfaces.com/explore

- Yohan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44203

29 Jul 2009 - 10:15am
ambroselittle
2008

On Wed, Jul 29, 2009 at 10:09 AM, Sam Menter <sam at pixelthread.co.uk> wrote:

> Can anyone point me in the direction of a useable design pattern for
> an on / off toggle switch to be used online ie using JS / html / css
> rather than flash?

----

Well, you could look at the Toggle Switch on the iPhone. You could emulate
it by just switching out an on/off image or CSS sprite. Won't be as smooth
as the iPhone, but it's still a really obvious/familiar way to display a
toggle (looking like a switch), and if you made it look like the iPhone one,
that'd at least get you to 2006, instead of 1999. :-)

-a

29 Jul 2009 - 10:15am
Troy Gardner
2008

Though you need to understand CSS/etc. You could use dhtml image
swapping to get the same graphical effect as flash.

29 Jul 2009 - 9:10pm
Anonymous

Lots of good suggestions above. The toggle can be red and black to
avoid confusion those who are color blind. Are you concerned about
accessibility for screen reader users as well?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44203

29 Jul 2009 - 11:42am
Uidude
2009

You could use CSS sprites where there is a difference in position of
an icon within the button image. For example if the icon or knob is
left edged, it could mean ON and if right edged then OFF.
Additionally you could add labels ON and OFF, also color such that
they are supportive alternative clues of the two states.

Those with color blindness can still determine the states using the
position of the knob and it would work intuitive as a real electric
switch does.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44203

31 Jul 2009 - 3:15am
Sam Menter
2008

Thanks for all the responses, I'm digging this one:
http://widowmaker.kiev.ua/checkbox/ - ideally I want this to be
workable for screenreaders, but I think the application is too complex
for the company to build an accessible version - it would cost $$$.

ixda saves the day again : )

2009/7/29 Adam <adam at flippantpixel.com>:
> Lots of good suggestions above. The toggle can be red and black to
> avoid confusion those who are color blind. Are you concerned about
> accessibility for screen reader users as well?
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=44203
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

31 Jul 2009 - 5:36am
Alan James Salmoni
2008

Perhaps I'm missing something. Isn't the classic pattern for a
toggle the checkbox? I've found from my own testing that users often
get confused if the wording is not clear enough to a checkbox.

If you want a push-button type thing with a light, it could work for
vision-impaired users by having a dark centre for off and a bright
centre for on. This gives a strong visual contrast. Think of colours
in terms of brightness rather than hue and you can get a good visual
distinction. Or you could overlay some fairly obvious symbols over a
button like a dark red cross for off and a bright white tick for on.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44203

31 Jul 2009 - 6:36am
Sam Menter
2008

Hi Alan

Thanks for responding. My issue with a checkbox is that conventionally
the response to the user's action isn't instantaneous (though it is
possible with js) - normally a checkbox is followed by a submit button
to action the user's input. I'm after more of a live on/off switch,
which is executed quite nicely on the prev link:
http://widowmaker.kiev.ua/checkbox/

Cheers
s

2009/7/31 Alan James Salmoni <alan at usernumber1.com>:
> Perhaps I'm missing something. Isn't the classic pattern for a
> toggle the checkbox? I've found from my own testing that users often
> get confused if the wording is not clear enough to a checkbox.
>
> If you want a push-button type thing with a light, it could work for
> vision-impaired users by having a dark centre for off and a bright
> centre for on. This gives a strong visual contrast. Think of colours
> in terms of brightness rather than hue and you can get a good visual
> distinction. Or you could overlay some fairly obvious symbols over a
> button like a dark red cross for off and a bright white tick for on.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=44203
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

Syndicate content Get the feed