Thursday, 30 May 2013

Toggle button design

In general, buttons that try to tell you what they're going to do, as well as the current status of the feature in question, tend to be confusing. For example, on our office phones, the little LCD screen shows the word "mute" above one button when the microphone is on and "MUTE" when it is off. The bigger letters, I presume, are meant to suggest that the "MUTE" feature is active, though this is far from obvious. I'm not completely sure I've got it correct now.

There are any number of examples from mobile phone apps, too, given their limited space. Does a "Shuffle" button on a music player mean that the playlist is currently in shuffle mode, or does it mean it will change to shuffle mode when you touch it?

This is why someone invented checkboxes, but even those are often misleading if they are labelled badly, or if, in trying to make the function clearer, the UI designer has included a ghostly tick mark inside the checkbox when it is unchecked. Otherwise it would just be a labelled square, right? And who knows what the hell to do with that?

The point, if I have one, is that UI design is more than "we need a button that does X". You need to put a lot more thought into it than that.

Mokalus of Borg

PS - It can sort of work if the button looks pressed in while it's on.
PPS - But, as in the phone LCD case, that's not always possible.

No comments: