VPNs conceal the IP address of users for private browsing. It’s critical for users to know when they are protected and when not.
The “Connect” button is the main action in any VPN app. Here’s how I designed a connect button that is clear about the state of protection at a glance.
Requirements and approach
In design, we try to make UI elements communicate system’s states and to build on existing notions users are familiar with. In return, users feel more in control of the product because the feedback they get by interacting with the UI is in line with their expectations.
The connection process has three states: neutral, connecting, and the outcome-(either positive or negative). So the objective for the button is to visually communicate those states to the user:
- Outcome (a. Positive, b. Negative)
Visually a button can communicate in a few ways, but the two most important ones are text and iconography. Icons are great for indicating that a process is ongoing, while text is an unambiguous way of communicating the state.
Thus there are 6 elements in a single cycle:
Three labels: “Connect”, “Connecting”, “Connected”
Three icons: Connect icon, Connecting icon, Connected icon
We did a few rounds of prototyping that showed how difficult it is to combine all these elements in a way that is clear and visually appealing. To find the best solution we explored the alignment of the elements as the main challenge and then looked at animation.
Alignment itself is a major factor that makes design look polished.
In the practice of button UI that includes both text and an icon, there are multiple approaches to alignment:
- Wide container, icon on the left, mathematically aligned label:
- Short container, icon on the left, visually aligned label:
- Wide container, both icon and label mathematically aligned:
Even though I was aware of this, I noticed that no matter how much I tried to align the elements, the button would feel flimsy in the animated prototype. Why? Because this is a multi-state button scenario, where three labels of different lengths affect the overall alignment.By stretching the labels I’d commit one of many sins of typography, and by adjusting the font size for each label I’d commit one of many sins of UI design.
Simply said, I got stuck.
I decided to consult with our Lead Designer about the issue.
His solution was rather simple and effective: use a completely different alignment.
- Short container, label aligned along the left margin, icon on the right
His suggestion was to move the icon to the right side of the container, and anchor the labels by aligning them along the left margin — this in return made the button feel consistent, removing any kind of flimsiness or randomness during the transitions.
Animation is great to direct a user’s attention, but it must do so in a natural way.
The core principles of animation are rooted in the way things move and interact in the physical world. Physical buttons are subject to physics, and often times it is beneficial to use those fundamentals in UI design. Does that mean we should always strive to emulate real life if we want to craft digital products of better quality? Far from it. Research has shown that older generations have a preference for skeuomorphic designs, while younger audiences favour flat design. So there’s a fine line.
Once again, the design approach must be directed by user needs.
When a physical button is pressed, it dips into the surface and appears smaller. But replicating that in the animation is not good enough in the case of VPN apps, as the user must recognise three things:
1) When the button is pressed
- Feedback in the form of labels and the icon ensures users understand the effect of their action. Thus it is best for the size changing dip effect to be used sparingly, solely as a momentary touch feedback.
- In contrast, by indicating the elevation change with a permanent change of size, we risk the user interpreting the animation as if only having two states: ‘On’ and ‘Off’.
- A good approach would be to indicate the elevation change in a more subtle way, such as using a shadow. In our case, a smaller shadow suggests that the button is pressed while the VPN is connecting.
2) When the label changes
- The three labels (Connect, Connecting, Connected) are very similar, only a few letters make the difference, so the transition must clearly indicate the change. Going with the upward transition not only serves this goal but also matches the icon animations in our scenario.
3) The outcome
- Finally, a simple colour transition along with the icon animation and a label change finalizes the connection process in a definitive way.
- In case of an unsuccessful connection, by slightly increasing the shadow we give an impression of a raised button, inviting the user to tap the button again to reconnect.
Guidelines are useful, but ultimately only extensive prototyping, meticulousness, and an evidence-based approach will deliver a meaningful user experience.
Even for a simple UI element, such as a button, details need enough attention and a mindful approach, to produce an overall result that is both useful and aesthetically pleasing.