Wednesday, November 24, 2010

UX Quickie: Toggle Consistency

This is something I see all the time, most commonly in Android application menus and video games (anecdotally speaking). When there are several buttons/switches that toggle things on/off, they are often done inconsistently. Here's an example from the otherwise fantastic Dragon Age: Origins to demonstrate what I mean:

These two toggle buttons are in the upper left of the HUD, right under the icons for each character in the party. As one would expect from their placement, they allow you quick access to party-wide commands. The one on the left lets you toggle back and forth between "Select All" and "Select One" and the on on the right lets you toggle back and forth between "Move Freely" and "Hold Position." If you play RPGs or strategy games you'll likely immediately see the utility of these however, every time I come back to the game after a long time off, they always confuse me. Here's why:

  1. The "Select All/One" button's icon indicates the result of the action; it attempts to communicate what will happen when the button is clicked.
  2. The "Move Freely/Hold Position" button's icon indicates the current state; it attempts to communicate what is happening now.
Can you see why that can get confusing? Two toggle switches right next to each other, both of which toggle back and forth between only two options, but are difficult to figure out because their feedback methods are perfectly out of phase, resulting in cognitive dissonance.

If you're building toggle commands into your website/software, double check that the feedback/communication is consistent. Which method is best? That's hard to say. When in doubt, do some user testing. Honestly the method you use - whether it's one of the above or something else you've come up with - matters a lot less than making your method consistent because, even if it's confusing at first, the across-the-board consistency means people only have to figure it out once. 

No comments:

Post a Comment