Once upon a time, when we were a younger company, we blazed through creating new features in the race to keep our investors and clients happy. In the midst of doing so, we overlook the details of certain aspects of our product, such as the simple switch.

Recently, I was given the opportunity to relook at the basic components that makes up our product, and I was excited about being able to improve it.

What should a switch do (in web)?

Simply put, a switch turns something on or off. Much like how you interact with the switch the turns your house lights on, it requires a single action that results in an immediate effect or feedback.

What we had

It wasn’t too bad. (You should have seen the version before)
But it wasn’t ideal. We haven’t had much users telling us it was hard to understand. But we are definitely not in the ‘If it ain’t broke, don’t fix it’ mindset. There were definitely a few things that could be improved.

Too big

It was a tad too big. It looks pretty alright on its own, but if you put it in a list like our Event Settings Page or User Profile Settings, it quickly becomes obvious that it takes up too much space.

Unclear

While it’s pretty obvious when placed in a list, on it’s own, it’s not immediately clear which is state it is in.

Poor Assessibility

Since the color is the most obvious indicator of the state, this would be how it would look to those who are color blind.

As you can see, it’s hard to tell which is on and off, since the white could seem like the switch while the grey could seem like the depressed area, when it was actually the other way around.

The New Switch

Cohesive Sizing

As part of a bigger change, all other components like inputs and buttons have been standardized to the same height, making it easier to lay them out next to each other.

Affordance

Affordance theory, simply put, is that the perception of objects will give understanding and drive action.

Unlike the previous version, when this turns on, it turns not only the background pink, but the entire border to be even more obvious. This cue makes it harder for users to misunderstand the state of the button.

The on is also moved to the right side according to the web standard.

Accessibility

In this case, when the switch is on, there is only a single word that states the current state, that could be understood without color cues. Animation has also been added, clearly moving the text from an “Off” to an “On” label.

This is just a small improvements in as series of changes aim to make the base experience slightly better.

Tag , ,

About the Author
Alex Kwa

UX Designer, Repro
Alex has been designing for Repro since the company begun. He worships his design heroes, Dieter Rams, Tokujin Yoshioka and Naoto Fukasawa. He's an occasional digital nomad and is obsessed with the streetwear brand, Supreme.
Website