Rethinking the iOS switch controller✌️
🤔 Are you ready to make a choice?
In this article I’ll describe the prosess how we designed UI and UX for our own switch. I’ll explain feelings and thoughts we had during the process.
Our team have been working on an app for a while, and the time has now come to develop the Settings screen. This is where users can customize the experience of the app. Switches are a natural part of such a Settings view.
🤩 Let’s find some inspiration!
To get inspiration, we looked at previous work. First we turned our eyes to iOS Settings.
First thought; there are a lot of switches on this page. We’re all familiar with the iOS Switch. We know how it looks and how it behaves. While using this switch I often think of making bigger change to my system. Therefore I toggle this switch with caution. We want our switch to have a more lightweight feeling.
🤔 Give our switch a unique look
We needed to have a switch in our design, so our first sketch looked like this:
After rebranding this switch to something that felt more at home in our design, our sketches now looked like this:
This looks good! Now let’s talk about the behavior of this switch!
🕺 Behavior through motion
The switch is clickable, and therefore we would like to give user feedback while interacting. First off, we turned our eyes to Fluid Interfaces and two important aspects:
- Responsitivity
- Interruptibility
To make it responsive, we animated the scale of the switch to let the user know that the touch is received. After a user touches the switch, they can either release the touch inside its canvas to toggle its state, or release the touch outside to cancel the action. We had to define animations for both scenarios.
What do we want the button to feel like?
This was our inspiration:
This mechanic have 3 states. No, Intermediate and Yes. We wanted to copy this feeling, and to do so we implemented Haptic Feedback.
For the Intermediate state we triggered a light feedback and on Yes state we triggered a heavy feedback. By using Haptic Feedback we improve the user’s feeling of control. After the Intermediate state is reached, user may choose to cancel the action. In that case, the switch will animate back to its previous state.
😮 Size of this button
At this time, we felt like the touch area of this switch was too small.
Touch areas are often too small, which is frustrating! You shouldn’t have to focus to be able to hit them.
So, why not increase the size of the switch?
Why not let the whole canvas be touchable?
👏 Let’s prototype
To see if we were on the right track, we made some prototypes based on our thoughts. These prototypes were both made in After Effects and developed with React Native. By developing with React Native we were able to test our prototypes with Haptic Feedback.
It’s important to try out prototypes on the plattform you’re developing for. In our case the prototype was tested on a smartphone. While using the switch, we quickly noticed whether or not it felt right.
Read more about Fluid Interface and having the “right feeling”.
First iteration
We started off by adding touch area to the whole canvas, and then animating the background based on state of touch. The background animated to 60% of the width. That’s the Intermediate state we talked about earlier. The switch is selected when the whole canvas is filled with a yellow background color.
We liked the feeling we had while toggling the switch. It felt kind of equal to the feeling we got while toggling a pen.
We also played around with Micro Animation.
Second iteration
We were quite happy with our first iteration. We used very little time on these prototypes. The feeling we had while toggling the switch was exactly the feeling we were looking for. Now our next task was to create an animation that suited the product.
The background / Intermediate state animation was something we would like to take a closer look into. But the team wasn’t quite happy with how the yellow background animation looked. So we made some new concepts.
It’s quite easy for the user to feel in control of this animation. It’s easy to understand when the switch is toggling states.
We also created a new Micro Animation. This one is simpler and cleaner compared to the Micro Animation from the first iteration.
Third iteration
Still we liked the Intermediate state message animation, but we also felt that the animation was a little “too much”. It didn’t fit the style of the rest of the app. Therefore we tried to animate the Intermediate state view differently.
Fourth iteration
We had a handful of prototypes at this time — many more than shown here. It was now time to ask other people what they thought about these prototypes. We built an app with our prototypes, had a walk in the park and asked random people to try them out.
Based on people’s feedback, the winner is:
🥇 First place
People like it simple. With a few adjustments to the timing and easing curves, this will be perfect. Maybe have a tiny animation that clarify that the switch is being toggled.
🥈 Second place
Still, simple versions were favoured. The Intermediate state is very clear, but people also had the feeling that this was a bit too much.
🥉 Third place
Many people liked using this switch. But a lot of people couldn’t explain how the switch actually worked.
Questions that were asked:
- Are we up uploading something?
- Am I added to the queue when the whole button is yellow?
It sounded like people wanted an actual checkbox, and wasn’t quite sure when the switch was checked. Though they like the animation, but couldn’t quite understand the switch.
🙌 What did we find out?
- Users were happy with the checkbox. It was simple, and easy to understand.
- Users loved the feeling of using the switch. With the Haptic Feedback, user felt in total control.
- Users also loved the reponse in each state. The feeling of always having control of what’s going on.
😊 Summary
This is how we made our own switch. We redesigned it, and gave it a behavior users loved to use.
We had a fun time developing this, and it didn’t take that much time to complete. Hopefully this article can inspire your future work.
