Switch & Swirl — UI Element
The Toggle switch is a common UI element on a phone or web application. It's got a very decisive functionality and operation. Its usage boils down to 3 major applications - ON/OFF, switch modes, Add-ons. Lately, UI designers have come up with interactive illustrations to the toggle, which at-max improves the user experience. But, is there something more to the toggle switch? Can there be any added functionality to this UI element that brings a fresh interaction to the table?
So, this was the plot for my next venture in my self-taught UI/UX designing. When talking about UI elements, we usually consider their position and orientation. In simple terms, where to place the UI element for better accessibility and how should it be placed (for example, a toggle is a horizontal switch which is turned OFF by default, indicated by the circular switch at the left). Sometimes to find more functionalities to a UI element, you have to 'look' at it with a different perspective.
This leads to switching the orientation of the toggle. Let's look at what a vertical toggle has to offer. Right out of the bag there's nothing amazing about a vertical toggle. It's not hard to conceive and to many, it might look like just another UI element. But, there's a catch! Here, do this small survey! Go onto any website or online forum and try finding an app design with a vertical toggle!
On second thought, the vertical toggle is just weird now! And when I came up with this idea I was confused with just the operation of it. Does toggle UP indicate ON or toggle DOWN? Both seemed right to be honest. By adding functionality and considering accessibility, toggle DOWN seemed more like an ON.
Let's break this down, changing the orientation wasn't going to add more use-cases to a toggle. There had to be something more to make this UI element stand out. That's where the 'Swirl' comes in. The swirl is a circular slider, integrated into the toggle switch! Not just a circular slider but any knob like interaction can be translated to it. Now, this opens up this UI element to quite a few use cases. Coming back to the point of why toggle DOWN is ON, it's simple, it's for better accessibility! The swirl is usually done by the thumb and having the circular slider at the bottom makes it more accessible! That's all that's there to it.
Talking about its use-cases, it can be used to control volume, the hue of smart lights, thermostats, alter co-ordinates of elements on a digital canvas, and many more! In general, a slider can be made and a circular slider and a circular slider can be converted to Switch & Swirl!
At this moment, the use-cases might seem niche but I'm certain there are more coming!
