The toggled situation

What the toggles!

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?

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

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.

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!

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.

Thanks for reading!

Related posts:

All the stars live in Hollywood, closets full of red scarfs, & gardens full of spades All the stars above Beverly Hills, they go blank when you blink close your eyes, i want to show you something……

Do not forget to study abroad. The overview of the reasons why you should consider studying in Australia will help you choose the right destination for you. VIT Australia institute is a world-class…

Unlike most people my age, I didn’t grow up playing video games; I grew up playing text adventures, or interactive fiction. After exploring the dungeons of Zork, all 12-year-old me wanted to do was…