Decision making in UI design: an example of animated buttons

Creative Navy
May 24 · 5 min read

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:

  1. Neutral
  2. Press
  3. Waiting
  4. 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

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:

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.

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

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

2) When the label changes

3) The outcome

Conclusions

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.

Creative Navy

Written by

Shaping hyperreality, a synthesis of human condition, physical and digital reality, through design and technology. Daily. UI/UX.