Gautam

September 5, 2024

TOGGLE MANIA!

I still vividly remember the time I held a magnificent work of art and technology combined, that beautifully fit in my palm.

It was the iPhone 4S. I was pretty stunned by the fact that the device actually communicates with you by touch.

It was mind blowing as I’ve been using or only exposed to interaction by clicking, pressing on a button. A physical button. Like a TV remote, a phone, opening a cool pencil pouch.

But it was pretty shocking that almost everything happened on touch.

But the real magic wasn’t there. I was just awestruck with this device and I kept seeing it around like a baby admitting its toy and transporting to a whole new world.

That’s when the real magic happened. Something different.
The toggle switch.

IMG_8682.PNG


I just enquired what this was. I learnt that it was on-off mechanism to either set your phone on silent / ringer mode. 

The icing on the cake was you could also, configure that switch to manage your orientation settings. 

I mean what! What the what? A switch. It’s called a toggle. My mind = booommm!! 


Technically speaking, this wasn’t the first time I was exposed to a toggle. It was a switch. Like how I switch on - off the fan, light, appliances. But I’ve never a switch that sleek. I never knew a switch was called a crazy name - TOGGLE. 

Toggle - UX-er Perspective: 

As I had decided my career into UX design, I got to work a lot of design components and UI elements. 

As I progressed through many projects and application designing, I perhaps developed a brain to relate the UI  elements to the real world scenario. 

So, when I got to observe the ways of switching between views, swapping between  options, designing for the user to easily choose this or that.. I understood toggle.

Relation between the real world and the digi world: 

When you see a switch to ON or OFF a fan or light or an appliance, you decide to switch it ON or switch it OFF.

IMG_8679.JPG


When you place your finger on the switch to do either of these two options, but you do it for a single appliance. One at a time.

So, you switch on the fan or off it. Simple, neat, straightforward.

Likewise in the digital world, you decide to switch off or on the WiFi. Neat and nice. This or that.

IMG_8680.JPG


Do you know what’s annoying?
When you switch on a light, it emits white light. 
You switch off the light again and immediately on it, to emit the warm light. 
You switch it off again and back to on to emit the disco lights. 

That’s annoying. I’m not joking. That was a trend. In fact some homes do have such lighting solutions. 

I don’t find it innovative. I find it a path to get my BP shoot up to the roof. 

Why? On off on off on off… ah there you go disco light. 

Oops, I actually wanted the warm light. 
On off on off and now the warm light. Five times on, four times off to have my desired light. 

What? Isn’t this annoying. 

Imagine, in the Digi world, u take your phone, switch on your toggle to activate WiFi. And the off and on to switch the same toggle to mobile data and then On and off for personal hotspot. 

What just happened? Congrats, that’s the best way to end up doing bad design inspiring from the real world bad UX. 

The best rule to abide is a switch for an option. That’s it. 

Button as a switch, may not a toggle always

Have you viewed this? Let’s take some water motor switch would have three options.

IMG_8690.PNG


In the UI world, when you have to play 3-4 closely related options, it is highly recommended to group them and present them as a group button.

IMG_8685.PNG

In fact, in some cases, a group button could be highly preferred for 2 options.
As previously elaborated in my previous blog, here’s a quick view of the 2-option group button:

IMG_8683.PNG


Conclusion: Real world & digital product

The real world scenario is a good way to grab some inspirations, it’s a great way in fact to build some clarity while you start off design or develop some ground breaking products.

But, it’s also a bad idea to always stay rooted to the real world scenario, as you may start to not do justice to the user experience focused on the software product.

For instance, when the world was introduced to the digital / smartphone era, app icons and user interfaces chose to be designed purely inspired from the real world scenario. The “notes” had a meticulously detailed skeumorphic design inspired from a real notebook or a diary.

IMG_8687.JPG


But today, the tables have turned. The same “Notes” app is clean, neat with a minimalist approach. This is because the world is now fully (almost) ok with understanding how the app works. 

IMG_8688.JPG


The real world scenario is just the pressure for the software product to comfortably take off. Once it’s off the ground, it’s essential to bid a good bye and start innovating from there on. 

Disclaimer: all images attached in this article were taken from the internet. The images were solely used here for visual understanding purposes.

Read next: Best Practises to use the toggle switch ->> HERE

Until next time, 

About Gautam

UX Designer by the day,
Over-thinker by the night,
Good music puts me to sleep!

Read my other blogs. Catch me on LinkedIn