Toggle buttons - what icon function to display?

25 Mar 2010 - 6:01am
4 years ago
9 replies
1702 reads
Katy Webster
2009

I was looking for your opinions on toggle buttons: should the icon on the toggle button describe the consequence of pressing the button, or should it describe the current state  (in this specific case, open/closed for adding data to)?

(The context is a grid consisting of row headers, each of which has its own expandable panel, which contains an editable form to edit the item. The toggling icon buttons are on the row header of each panel. The user can select to 'open an item' which means all data for that session will be associated with that item. They can close it at any time, or it can be configured to close at the end of the session automatically.)

Thanks in advance,

Comments

25 Mar 2010 - 7:48am
Sascha Brossmann
2008

Taking a hint from all buttons with state (i. e. switches) from the physical world, the answer get's IMHO rather simple: current state.

25 Mar 2010 - 8:32am
vcagwin
2007

Hi Katy,

I agree with Sascha, but for your scenario, I think the label should say 'close' after the row is expanded. I'm working on a similar project where we didn't provide any feedback on how to close the row and users asked for a close button. 

If you have time to test, I would try both and let the results tell you the answer.

25 Mar 2010 - 9:43am
Bandar
2010

You reminded me of the classic Play/Pause toggle button problem .. should it show the play icon or the pause icon .. 

I personally think it should "describe the consequence of pressing the button" so while it is playing .. it should show the pause icon .. as while playing it is no longer a play button, it is a pause button, right ? 

25 Mar 2010 - 12:38pm
Vance Vagell
2009

Hi Katy,

The key here is that a toggle button says "This thing I represent is active (when depressed) or inactive (when popped up)." They're a bit like checkboxes where the check is represented by being depressed.

As a result, their labels should never change.

For example, a depressed button that says "Play" means that playing is active. It should always say "Play", because that's always the thing it's reflecting. Click it again to make playing inactive.

In my opinion, the label of a toggle button should never change, otherwise it's not clear what thing it's representing the state of. Similarly, the label of a checkbox shouldn't change when it is checked/unchecked.

Regards,

Vance

25 Mar 2010 - 1:30pm
thepofo
2010

Hi Katy

In case of toggle buttons, I believe that it's the action that you're going to do that should be shown.

So in case of an expanded panel, the action to show is "Close", when closed "Open" is the correct action.

Regards,

Eric

26 Mar 2010 - 5:50pm
jrrogan
2005

Hi Katy,   I'm working on the same sort of widget now. My rational for labelling my toggle is that this "toggle" is a control, thus the label should reflect the action the toggle will do, and this action changes due to the state of the item.

  Thus:  State = ON, Toggle label = OFF, Toggle Action = turn state to OFF
 State = OFF, Toggle label = ON, Toggle Action = turn state to ON   That's my rational at least,   Best   Rich  

  On Thu, Mar 25, 2010 at 3:02 PM, thepofo <contact@ixda.org> wrote:

Hi Katy

In case of toggle buttons, I believe that it's the action that you're going to do that should be shown.

So in case of an expanded panel, the action to show is "Close", when closed "Open" is the correct action.

Regards,

Eric

(((Please
25 Mar 2010 - 4:12pm
Elizabeth Bacon
2003

So it seems to me that people are debating two different functionalities:

1) A toggle control where two controls are conjoined logically or visually (such as a pair of radio buttons, one of which must be in a selected state at any time)

2) A single control that toggles between two states.

The latter function is one of the most pernicious little things in IxD, IMO, and AFAIK the answer is "it depends on what the single control is doing".

However, in general I have observed that it's more common to show the setting's current state than the action that would result from another interaction. So I contend that for the specified need, to show whether something is expanded/open or not expanded/closed, the display should indicate what state it is in now. A typical instantion of this behavior is an arrow pointing to the right for a closed state and arrow pointing down for an open state.

Cheers,
Liz

25 Mar 2010 - 4:15pm
Elizabeth Bacon
2003

Adding a bit more context...when you have a single control that toggles between two states, it can be highly confusing to the user to know whether it's showing the current state or the action that will result. (Wherefore the perniciousness of this functionality!) Therefore this type of control should generally be reserved for non-essential, obvious/common interactions such as show/hide. If you're trying to associate two states that aren't intuitively linked in the familiar way that on/off or play/pause are, you could engender problems. 

Cheers,
Liz

26 Mar 2010 - 5:50pm
William Hudson
2009

Kay -

Beware that what you describe is often very confusing for users, who are not sure themselves whether the button is showing the current state or the desired state. In this case it sounds like you could just make it a push button whose icon would indicate that pressing it would open the expandable panel. Clicking it again while the expandable panel was open would do nothing. Closing the expandable panel (with the close button that you will provide in the top right corner or similar) dismisses the panel. No need for a toggle with this approach. (You WERE going to give them a means of dismissing the panel without going back to the toggle weren't you? I think it would be mean if you didn't.)

Regards,

William Hudson Syntagm Ltd Design for Usability UK 01235-522859 World +44-1235-522859 US Toll Free 1-866-SYNTAGM mailto:william.hudson@syntagm.co.uk http://www.syntagm.co.uk skype:williamhudsonskype

Syntagm is a limited company registered in England and Wales (1985). Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon OX14 2DS.

-----Original Message----- From: ixdaor@host.ixda.org [mailto:ixdaor@host.ixda.org] On Behalf Of Katy Webster Sent: 25 March 2010 11:23 To: William Hudson Subject: [IxDA] Toggle buttons - what icon function to display?

I was looking for your opinions on toggle buttons...

Syndicate content Get the feed