6529RE: [agile-usability] Designing toggle icon
- Oct 30, 2009
> Indeed, this is a generic problem for which there is no single bestsolution. It depends. But my own research shows
> that people who interpret the label on a toggle button to mean thecommand to be executed (rather than the current
> state) are in the majority. However, labels on function buttons thatchange are problematic in any case. (Although, I
> have used them on rare and carefully reasoned occasion.)Thx for answering Larry. Nice to get advice from a guru ;-).
The wiki engine in question (TikiWiki) currently uses that approach
(icon on the button suggests the action that will happen when you click
on it). But we are seeing that a good 50% of users are confused by it
and interpret it in terms of state.
When I tested the 8 icons in my previous email with 12 subjects or so, I
asked half of them what the icon suggested in terms of state, and asked
the other half what it suggested in terms of the action that would
I found that when people described their understanding of the state,
they were unanimous. But those who were asked to describe what action
would happen tended to split 50-50 between turn off and turn on.
This may be tied to the specific icons I tested, but it might be a hint
that it's easier to clearly convey a state than an action.
This seems to argue for using the icon to convey state, not action...
> Here are the options that my work suggests work best, on average (yourmileage may vary):
>depressed (or on) when selected
> (a) have a button with an unchanging label (the on-state) that appears
So, an eye button that appears depressed or not. Sounds like a good
Can you provide an example of what such a button looks like?
> (b) have two buttons (watches on, watches off) linked visually and inbehavior
Hum... don't like that. The reason we are going with icons is that we
have a real estate crunch.
> (c) use a check box (e.g., [ ] Watches on)Web-based interface; and it's simpler.
> On a Wiki, I would favor the latter as more in keeping with the
Unfortunately, that button is part of a toolbar that's all made up of
icons, so I want to keep it that way for consistency.
One idea I had was the following...
Use the icon to convey state, since people seem to agree more on what
state an icon refers to than on what action will result from pushing it.
For example, eye with green check for "on" and an eye with a red X for
To convey action, use a popup menu. When the user clicks on the icon, he
would see a popup menu with the following two items:
And there would be a checkmark in front of the one that corresponds to
the current state.
A bit complex, but might work. I like the depressed button idea too.
- << Previous post in topic Next post in topic >>