Designing the push button widget
Design Thinking
4 Hour Sprint
Prototyping
The Context
A push button widget for Vec-TR
We were tasked to design a new dashboard widget for Vec-TR - a push button.
The push button widget will be used to send a command to a remote vehicle or device. Unlike a toggle that sends ON or OFF command alternatively, the push button will be used to send the same command every time it will be used.
Sounds easy? Actually, it isn't. Getting this wrong meant operators would press it multiple times — flooding a vehicle with duplicate commands because they weren't sure the first one went through. The feedback had to be absolutely clear.
The real design challenge
How do we represent a physical, consequential action accurately inside a digital canvas with enough confidence that an operator won't press it multiple times?
Let's see how we solved it.
The Approach
Anatomy of a push button
Instead of jumping straight into Figma, we spent time looking at real push buttons — industrial panels, elevator controls, machinery — and asked: what actually makes a button feel like a button?
We landed on five things that every physical push button has.
This framework became our filter. Everything in the final design had to map to one of these five properties. Anything that didn't was decoration — and decoration had no place in an operator-facing control widget.
Anything more than these five elements is decoration. And in an interface controlling a real device, decoration is noise.
The design
Finding the perfect design
We explored a few shapes in Figma — square, hexagonal, round. Round won. It's the most universally legible button form, no explanation needed.
Each of the five properties got its digital translation: a circular frame for the ring, an inset face with a visible gap, three horizontal dashes on the face mimicking tactile ridges, and a colored light ring for feedback — just like the indicator lamp on a physical industrial button.
The Hard Part
Engineering the right interaction
This was probably the most demanding but definitely the most rewarding phase of this activity.
We cracked the design of the static component. But in motion, it felt wrong. The press registered, the light flashed, and everything snapped back to its resting state in a fraction of a second. It looked like a toggle being flicked, not a command being sent to a machine on the road.
Try it yourself.
Click/Touch Me!
The problem was consequence. A button that controls a remote vehicle needs to feel like it carries weight. The feedback had to communicate: something happened, and it's been acknowledged.
We arrived at a three-part interaction model:
The Push
When the user clicks on the button, the widget has to immediately indicate that the it is being pushed.
The Release
When the user releases the click, the widget has to immediately indicate that the it is being released.
The Acknowledgment
After the release, the widget should also offer a sense of acknowledgment to user, and this should not be easy to miss.
So, we experimented with different push states, different light transitions, delays between push and acknowledgement. Some of which you can try below.
Click/Touch on the button to test each iteration.
What we found that, a lingering light after the release adequately indicates the acknowledgement and also carries the weight that we are looking for.
The Final Prototype
Best among all
Just test it and compare it yourself. Isn't it the best one till now? The perfect push, release and the perfect acknowledgement.
The Final Solution
It works perfectly because, on push, the button shrinks and LED ring glows. And, on release, the button comes to its original size but the LED glow fades out slowly - providing acknowledgement and weight to the action that the user just performed.
Just test it and compare it yourself. The perfect push, release and the perfect acknowledgement.
The First Prototype
The Final Solution
The shrink and snap-back says "you pressed it." The lingering light says "it's been received." Two different jobs, two different timings.
The Takeaway
Small surface, serious thinking
The lesson from this project wasn't really about buttons. It was about resisting the urge to jump to a solution. Because we took the time to understand what a button actually is before designing one, every decision after that was faster and more grounded.
However small the brief, the design process deserves the same rigour.