2

I teach a course with a piece of software that makes liberal use of this checkbox:

enter image description here

I'd say around a quarter to a third of participants completely fail to use it without help. They all try to drag the white circle to the left, whereas the correct usage is simply to click on it - the white circle moves left and it looks like this:

enter image description here

Their behaviour seems completely reasonable to me: it looks like a peg sticking out of a slot, and you slide it to the left.

Are the designers mistaken by making it clickable, or is there another explanation I'm missing?

EDIT

As noted, the question in the body here doesn't quite match the title question. I guess I'm asking "Is there a valid visual metaphor that corresponds to this design and behaviour, and if not, what has gone wrong?"

Steve Bennett
  • 1,309
  • 7
  • 11

4 Answers4

3

The visual metaphor here is an ON/OFF toggle switch

It starts out in the OFF position to the left and can be turned ON (illuminated) by moving the lever over to the right. (the fact that this can only be done with a click is simply poor implementation)

Read more about this pattern and how to improve upon it in this thread...

Should a toggle button show its current state or the state to which it will change?

Community
  • 1
DaveAlger
  • 15,893
  • 6
  • 46
  • 76
3

This is just plainly bad design. There is no tricky explanation as to why some of your users fail at performing the task.

This is a fantastic example of how skeuomorphism doesn't work everywhere. The core purpose of skeuomorphic design is to present users with controls that they can recognize from the physical world and can interact using similar gestures (e.g., slide or turn). Hence, people seeing a switch have the urge to "flip" it by dragging the mouse. If the visual designer insisted on using switches in a primarily keyboard+mouse interface, the only remedy would be to add clicking as a secondary activation action. Microsoft's modern UI does this the right way: the controls work with both dragging/sliding and clicking/tapping.

dnbrv
  • 13,227
  • 5
  • 44
  • 75
  • Ah, do you have an example of Microsoft's version? (I don't have access to a Windows machine). Maybe they've just copied it and gone wrong. – Steve Bennett Feb 11 '15 at 02:17
  • @SteveBennett: http://imgur.com/BwObla7 This is Win10 Preview but the design has remained the same since Win8 Preview. – dnbrv Feb 11 '15 at 02:26
  • Thanks very much. (Eww, inconsistent spelling of "backup"/"back up") – Steve Bennett Feb 11 '15 at 02:52
  • Ha. I didn't notice the microcopy. Gonna submit a ticket. – dnbrv Feb 11 '15 at 03:00
  • I can't help to wonder what's wrong with a check box - everyone knows what they do and there's really no space for doubt on how to control them. If it ain't broken - don't fix it. – Henrik Ekblom Feb 11 '15 at 08:28
  • @HenrikEkblom: Switches replaced check boxes in iOS's original style guide when Apple was pushing skeuomorphism. They work pretty well in touch interfaces from any angle. The problems arise when designers adopt them in other situations without thinking. – dnbrv Feb 11 '15 at 08:46
1

You are calling it a checkbox, but checkboxes come with labels. Why do you consider clicking as the correct usage for this? To me it seems like the developers haven't yet added the ability to drag the control, which usually happens as you move an application from a web to a mobile interface.

Adnan Khan
  • 4,633
  • 1
  • 26
  • 31
0

Edit: To answer your question in the body: "Are the designers mistaken by making it clickable, or is there another explanation I'm missing?"

It is a usability problem if users cannot easily figure out how to operate the UI element.

If the design is not being used as intended (by the designer), then there is a flaw in the design.

If the majority of people try to drag the circle, then the designer should accommodate that action.

Lauren Dankiewicz
  • 1,008
  • 6
  • 8
  • Good points. But what is the metaphor and is it a valid one, per the OP's question? – Nicholas Pappas Feb 11 '15 at 00:16
  • The title question is different then the question in the body. The question in the body is "Are the designers mistaken by making it clickable, or is there another explanation I'm missing?" – Lauren Dankiewicz Feb 11 '15 at 01:54