Image for post
Image for post

Pushing the right buttons

Thomas Müller
Nov 16, 2019 · 8 min read

What you need to know when choosing push buttons for physical devices

On July 16, 1969 a single press of a button launched Apollo 11 into the orbit. The button initialising the ignition process was, at the time, the pinnacle of UX design. It reflected its power in a precisely-crafted haptic feedback and a perfectly balanced actuation movement. Every launch since has been initialised with a button, featuring the same characteristics, resulting in what we know today as the ‘Apollo haptics’.

Image for post
Image for post

That story is completely made up and that button was most likely no different from the one on the coffee machine nearby. But what if it was true and every button we use would be tailored to its specific purpose?

Why this is important — Huston, we have a button problem

Everyone knows the situation: You press a button. Nothing happens, and you end up wondering if you pressed it deep enough, hard enough or maybe too fast?

Almost every electronic device nowadays features at least one (push) button. Unfortunately as designers, we are usually not well prepared to specify the optimal requirements and in the worst cases end up not defining the characteristics at all for various reasons.

So what are the magic ingredients for a successful button UX?

Push button characteristics

First off, let’s start by aligning our vocabulary:

Switch: A switch is a (mechanical) component with an “on” and “off” state. In our case, it connects or disconnects electrical contacts in a circuit. The correct terminology for a button is ‘button switch’.

Button: The physical component that actuates the switch.

Push-/ Rotary-/ Slide- button: Describes the general action which needs to take place in order to activate or deactivate the button. Here, we are focusing on push buttons, actuated with a single finger press.

Contact state: Usually the switch is open (off) when not in use and close (turns on) when operated. This behaviour is called normally open. Vice versa, a normally closed switch is closed (on) when not in use and opens (turns off) when operated.

Image for post
Image for post

Push buttons come in different variations and over time certain characteristics have become well established:

Momentary: The switch stays closed (on) only while the button is actively being pressed. Taking your finger off will return the button return to its initial position and open the switch (turn it off).

Latching: When the button is pushed, the switch closes (on) and stays locked in the depressed position even after lifting your finger. Pushing the button again will release it from its active state, returning it to the initial position.

Alternating: When the button is pushed, the switch closes and stays closed (on) but the button returns to its initial position. Push the button again and the switch opens (off), with the button returning to its initial position.

Image for post
Image for post
Push switch characteristics

The amount and type of tactile feedback you receive when activating a button has an immediate impact on the quality of the user experience:

Tactile button: The user receives tactile feedback when actuating the button (activating the switch). Some buttons feature multiple switch points, each resulting in separate feedback.

Non tactile button: When actuated, non tactile buttons do not provide any tactile feedback to the user (except reaching a mechanical end-position). Instead those interfaces (hopefully) rely on different methods such as visual or auditory feedback. Compared to tactile buttons these have a longer lifespan and are cheaper, but can create confusion during the interaction.

Image for post
Image for post

On a side note, there is a difference between haptic and tactile feedback.

Haptic feedback: Feedback a user can feel without using the senses of smell, sight, sound or taste. Haptic feedback is a combination of tactile and kinesthetic reception.

Tactile reception: The things we feel on the surface. Through different sensors in our skin tissue we are able to feel things such as vibration, pressure, texture and temperature. This enables us to recognise certain variables, for example the rough surface of a coffee cup or the temperature of its contents.

Kinesthetic reception: The things we feel inside. Sensors in our muscles, joints and tendons recognise the force applied on them. Our brain can translate these into feelings of weight, elasticity, size or rigidity. This way we can tell, for example the approximate size of a mug, it’s weight, and how you hold it relative to your body.

In most cases, (push-) buttons require low forces to operate and return a small amount of feedback where the term ‘tactile’ is appropriate. However a higher force of actuation and feedback may result in ‘haptic’ feedback.

There are two more receptions called ‘thermal reception’ (sensing of temperature and temperature differences) as well as ‘nocio reception’ (sensing a damaging stimuli/ pain reception) which should not be relevant for button interactions.

Image for post
Image for post
Image for post
Image for post

Talking about feelings

The world of tactile button feedback can be further divided into two camps: It’s either sharp or soft.

What is a sharp feel? Very short and distinct tactile feedback with a defined mechanical end position is called „sharp feel“. Feedback is created inside the button by a metal spring, activating a snapping mechanism or a dome which collapses by applying force. In most cases the travel is short, usually ranging between 0.1 and 0.3 mm. Metal dome buttons are the most common type. You can find them in your mobile phones, kitchen devices, electric toothbrushes and many more.

The most simple application of metal domes are membrane buttons.The dome is glued between a conductive and a water and dust proof cover layer. These are mostly found in cheap electronics but also in devices which are exposed to water, chemicals or excessive cleaning. They can be both tactile and non-tactile.

Image for post
Image for post

What is a soft feel? A soft and less distinctive tactile feedback with a less defined end-position is called soft feel. Inside the button, a rubber dome or spring is compressed until it collapses into its active state. The travel is usually a bit longer than using metal domes, between 1 and 2mm. While being a tad more expensive and less durable, the feedback of rubber domes are usually associated with higher quality products.

Image for post
Image for post

The materials and mechanics used will have a direct influence on the amount and type of feedback as well as the operating force of the button. Using a metal dome with a high material thickness will result in a very distinct feedback, while a thin one may result in feedback untraceable to human fingers.

Image for post
Image for post

Enhanced haptics: Since Apple introduced its “taptic” technology back in 2016, traditional button switches are being replaced with electromechanical ones. Inside, they feature a moving mass to achieve tactile feedback similar to that of traditional push buttons. They are highly customisable and can react to user input with specific feedbacks. To find out more, make sure to read this story.

Image for post
Image for post
Apple’s taptic engine based on a linear resonant actuator

Force travel diagram

With a force travel diagram, the characteristics and feedback of every button can be described. Each type has a specific curve based on the mechanics and material used. The graph shows both force and travel of the push- and the return-actuation.

Image for post
Image for post

Actuating force: The amount of force needed to activate or collapse the internal switch mechanics (close the circuit). The distance which the button has to be pressed (travel) until reaching that point is called ‘peak travel’. Most button libraries simply refer to it as ‘travel’.

Contact force: The amount of force needed to keep the internal switch mechanism at it’s depressed position. It is substantially lower than the actuating force, resulting in a tactile feedback. The amount of travel that happens while the internal mechanism collapses is called contact stroke

Snap force: The difference between actuating and contact force. A low snap force results in little tactile feedback and vice versa.

Snap ratio: This ratio is widely used to make comparing the snap force between different buttons easier. Ratios of 40–60% generally have a good tactile feel, while a snap ratio below 40% results in little tactile feel (but an increased operating life).

Return force: Amount of force needed to return a button to its original state.

Over stroke/ -force: Buttons based on a rubber dome structure can be pushed past the contact stroke. This results in a less defined end position.

Image for post
Image for post
Force-travel diagram of different button characteristics

Choosing the right button

When designing a user interface there is more to keep in mind than the semantics and position of a button. By starting with the user’s perspective and identifying the intended outcome of a button- press, we have the opportunity as designers to create a user experience tailored to its application. For basic principles of integrating tactile feedback, have a look at this guide for digital applications.

In future when integrating a push button into your design, try going a step further and take some time to think about the amount of travel, the operating force as well as the amount and quality of the feedback.

Image for post
Image for post

To sum it up, here are a few examples on how different characteristics can influence the user experience:

Image for post
Image for post

Emphasise: Operating a machine on a construction site may require the button to translate tactile feedback through workers’ gloves and prevent unintentional usage thus resulting in a strong tactile feedback as well as a high operating force and travel.

Image for post
Image for post

Adapt: Using a consumer product in an office environment might require the button to feature a silent operation, making a rubber dome button the best option. In addition choosing little travel can support a frequent usage.

Image for post
Image for post

Distinguish: In order to create clear interactions it can be helpful to highlight or separate specific buttons. For example giving a confirmation-/ or power-button a contrasting feel to its surrounding buttons.

Image for post
Image for post

Translate: Characteristics can also be used to differentiate between purposes. There is a correlation between longer travel and the perception of a more important reaction or a sharp feedback with a precise environments.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store