Pushing the right buttons
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’.
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 — Houston, 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
To sum it up, here are a few examples on how different characteristics can influence the user experience:
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.
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.
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.
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.
Head over to hapticlabs.io to learn more about haptic feedback and how to design, prototype and evaluate with the sense of touch!
