The Toggled Situation and How I Overcame It
A toggled day
It all started from a tiny toggle which led me into a state of deep reflection, so much that I spent three days munching over toggle and check-box usability and how they impact intended user experience with changing user contexts. Sounds a bit too much but believe me there is more. After many productive discussions with my team, I decided to solve this case myself.
Am I over analysing?
Initially the issue appeared quite trivial to me. But Little did I know there is more to this than meets the eye. As I turned the ignition on and fired up my Google thrusters, I found out many forums with long discussions trails, extensively written detailed articles and published papers on this topic, which collectively made me realise; huh! I am not the only one!
There is still hope after-all!
Connecting the dots
Post my brief research, I collected my observations and learnings and started to connect the dots, and overall, here is what I made of it.
Origins
If you look closely at the mental models, a checkbox has its origins in paper forms. We acknowledge our choice with a tick mark and verify, submit or take a final executing or concluding action after the initial ‘tick’.
However, toggles appear as either light switches or as push. Buttons on certain machines where we start/enable or stop/disable something which leads to a following up engine stop/start or circuit connection/disconnection etc. A toggle action always leads to an Immediate effect or instant outcome in the real world.
The DIY
Now we know where these UI components originate from. This would help us in grasping their application in User Interface in a better way. So as a next step, to understand the difference of their application better, I conducted two small tasks-
Task 1.
Let’s say you want to switch off your Wi-Fi from inside your phone’s settings app (assuming you use a smartphone and its Android). For this task, you go to settings and switch ON the Wi-Fi using a toggle switch that on tap enables or disables Wi-Fi. The result is immediate as your Wi-Fi network disconnects.
Task 2.
Now, say one fine morning you got up and felt like your Account Auto-sync setting that automatically keeps your apps synced; should be disabled. You navigate to your settings list, open the Accounts page and tap on the overflow menu on the top right corner. A menu appears with a single checkbox option to enable or disable Auto-sync.
Now closely observe what follows. When you uncheck the option. It is immediately followed by a dialog box which clearly explains the repercussions of disabling the Auto-sync. Now the point to ponder upon is, Why so?
Well.. Well.. Well..
Here is why
The Wi-Fi on/off task utilises a toggle switch as the state change from on to off happens immediately without any kind of user reaffirmation. On the other hand, in task 2, as you uncheck the Auto-sync with intention to disable it, you are greeted by a check box even when the task quite similar. What!
Why does both actions have different UI components? Why can not both be a toggle or checkbox?
Our mental models are a product of our interaction with the real world all our lives. They play a very crucial role in creation of conceptual models while solving any kind of problems using a user centred design approach. A toggle switch is more or less a check box with a delight factor; it is more inviting and engaging with its subtle sliding affordance. But if you look closely, it also gives an impression of just flicking a toggle which results in something going on or off. It can be done multiple times as long it is not a destructive task. Like we switch off lights or TV casually, many-many times.
Now Auto- sync is a very important feature that once disabled will result in your mailbox or twitter feed not getting automatically updated. You will stop receiving your social media notifications and slowly become a Zombie. Just kidding. This task inherently demands user reaffirmation before final application. Hence the dialog box with all the explanation.
Conclusion
Check boxes and toggles may be used to convey on/off or a select option metaphor, but if we fail to take the context into proper consideration, it might lead to confusion. Use checkboxes in scenarios where user needs to make binary choices like ON/OFF, enable/disabled or multiple set choices that might need that extra consideration or a save/verify action. Toggle switches would work well where user needs to give a direct command, like switch on landscape view, Wi-Fi, flash mode etc.
Toggles produce the change immediately as user click or taps on them, where-as checkboxes mostly don’t and require a final concluding action.
As Designers it is our responsibility to observe the real world critically and try to translate these aptly into our solutions. If we do so efficiently, we might just save the user that extra cognitive currency for other decision intensive parts of the task which would eventually lead to a fluent user experience
Please share your thoughts/feedback and help me correct/refine my understanding if this doesn’t makes sense. Want to read more? Here is a link to my article Are familiar icons really familiar?
Thanks for reading!
