Using science to make truly tappable user interfaces
by Scott Hurff
You know that feeling even if you can’t name it — the mix of frustration and annoyance when you’re using a touch interface that you can’t quite get to work correctly. When you feel like you have to touch delicately just to trigger that command that’s right there in plain sight.
But what if you could create user interfaces on a regular basis that you knew would reasonably avoid this situation? What if you knew you could reliably create touch elements that helped your customers reduce errors, get things done faster, and ultimately be happier with your product?
It's possible. Let's explore why.
You've failed me for the last time, iOS 9
I used to run into this problem when using the music controls on the iOS 9 lock screen.
Thankfully, iOS 10 came along and changed things. Bigger controls. Generous tap targets. Larger artist and song information, making it way easier to read who’s gracing my headphones.
In other words, my on-the-go song hopping error rate noticeably decreased.
Why?
Science has the answer.
Learning from 120 million taps
In 2006, researchers from the University of Oulu, Finland and the University of Maryland, College Park teamed up. Their goal? To determine what size buttons were easiest to use on a touch screen for one-handed use.
They tested two scenarios. The first: people performing one-time tasks (things like activating buttons, check boxes, or radio buttons). The second: people performing a sequence of tasks, like inputting a phone number.
During the study, the researchers tested a range of button sizes for each scenario. They discovered that error rates increased significantly when buttons were smaller than 9.2mm for single tasks; the same happened for buttons smaller than 9.6mm for serial tasks.
Curiously, for the serial task phase, error rates held steady from 9.6mm up to 11.5mm. More on this later.
Five years later, a study was conducted by researchers from two German universities. Their goal: to determine the optimal touch target size for a touch screen button.
Curiously, the 2011 study also found accuracy improvements of little significance for target sizes over 12mm.
There are countless other studies I could cite, including recommended element sizes established by major vendors like Apple, Google, and Microsoft (which I’ll get into later) — but we first need to discuss the granddaddy of all of these standards: Fitts’s Law.
A time portal into history
As product designers, we’re benefiting from the hard work of our predecessors. In this instance, Paul Fitts — a psychologist at The Ohio State University (Go Bucks!) — created a principle in 1954 that would later become known as Fitts’s Law. It's since become a foundation of human-computer interaction.
At its most basic, Fitts's Law is a model for how long it takes for you to move your hand to an object. The closer the object and, roughly speaking, the larger it is, the quicker and easier it is to move your hand to it.
But Fitts was able to mathematically model this. And if applied to a touch screen interface, for example, we could determine how long it'd take for you to point your finger at something if we knew the size and distance of the objects on the screen.
Here's the actual equation:
MT = a + b log2(2A/W)
Where:
Now, I'm no mathematician, but the research I've done on this says that the logarithmic portion of this function is really important.
Cognitive scientist and co-author of the book Mind Hacks Tom Stafford summarizes the impact of this dynamic incredibly well:
"Although the basic message is obvious (big things are easier to select) it is the precise mathematical characterisation that is exciting, and that this characterisation includes a logarithmic function – which means that the shape of relationship between size and reaction time is curved so that small increases in size for small objects result make it much easier to select them (whereas small increases in size for big objects don’t make that much difference). And the same applies for changes in target distance."
What’s exciting is that modern research continues to prove this over and over again. In the two papers I cited before, each demonstrated diminishing returns past a certain button size — somewhere along 12mm to 15mm.
But the best part? We can use this to design better user interfaces.
Here’s how:
Designing better user interfaces using Fitts’s Law
by Scott Hurff
You know that feeling even if you can’t name it — the mix of frustration and annoyance when you’re using a touch interface that you can’t quite get to work correctly. When you feel like you have to touch delicately just to trigger that command that’s right there in plain sight.
But what if you could create user interfaces on a regular basis that you knew would reasonably avoid this situation? What if you knew you could reliably create touch elements that helped your customers reduce errors, get things done faster, and ultimately be happier with your product?
It's possible. Let's explore why.
You've failed me for the last time, iOS 9
I used to run into this problem when using the music controls on the iOS 9 lock screen.
For the life of me, whenever I wanted to skip a song while on the go, I couldn’t get the button to work on the first, second, sometimes third try. I’d even end up jacking the volume up high. Other times, I might pause the song.
Ultimately, the negative experience with this interface made me change my behavior: I avoided it.
This was a terrible failure. An interface designed with the sole intention of saving me time ended up costing me a lot of wasted minutes.
Somehow, somewhere, iOS 9’s music controls broke a key law of the user interface. But which one?
Thankfully, iOS 10 came along and changed things. Bigger controls. Generous tap targets. Larger artist and song information, making it way easier to read who’s gracing my headphones.
In other words, my on-the-go song hopping error rate noticeably decreased.
Why?
Science has the answer.
Learning from 120 million taps
In 2006, researchers from the University of Oulu, Finland and the University of Maryland, College Park teamed up. Their goal? To determine what size buttons were easiest to use on a touch screen for one-handed use.
They tested two scenarios. The first: people performing one-time tasks (things like activating buttons, check boxes, or radio buttons). The second: people performing a sequence of tasks, like inputting a phone number.
During the study, the researchers tested a range of button sizes for each scenario. They discovered that error rates increased significantly when buttons were smaller than 9.2mm for single tasks; the same happened for buttons smaller than 9.6mm for serial tasks.
Curiously, for the serial task phase, error rates held steady from 9.6mm up to 11.5mm. More on this later.
Five years later, a study was conducted by researchers from two German universities. Their goal: to determine the optimal touch target size for a touch screen button.
To conduct the study, the researchers released an Android game that was downloaded ~100,000 times, recording ~120M touch events. The gameplay was simple: players had to tap floating circles of various sizes to progress forward. The circles could be anywhere on the screen.
After analyzing the game’s tap events, the researchers found that for circles less than 15mm in size, gamers’ error rate steadily increased — rising sharply below ~12mm. And for tap targets less than 8mm, gamers missed the circles at rate of over 40%!
Curiously, the 2011 study also found accuracy improvements of little significance for target sizes over 12mm.
There are countless other studies I could cite, including recommended element sizes established by major vendors like Apple, Google, and Microsoft (which I’ll get into later) — but we first need to discuss the granddaddy of all of these standards: Fitts’s Law.
A time portal into history
As product designers, we’re benefiting from the hard work of our predecessors. In this instance, Paul Fitts — a psychologist at The Ohio State University (Go Bucks!) — created a principle in 1954 that would later become known as Fitts’s Law. It's since become a foundation of human-computer interaction.
At its most basic, Fitts's Law is a model for how long it takes for you to move your hand to an object. The closer the object and, roughly speaking, the larger it is, the quicker and easier it is to move your hand to it.
But Fitts was able to mathematically model this. And if applied to a touch screen interface, for example, we could determine how long it'd take for you to point your finger at something if we knew the size and distance of the objects on the screen.
Here's the actual equation:
MT = a + b log2(2A/W)
Where:
- MT = the time it takes to complete the movement
- a,b = parameters which vary with the situation
- A = distance of movement from start to target center
- W = width of the target along the axis of movement
Now, I'm no mathematician, but the research I've done on this says that the logarithmic portion of this function is really important.
Cognitive scientist and co-author of the book Mind Hacks Tom Stafford summarizes the impact of this dynamic incredibly well:
"Although the basic message is obvious (big things are easier to select) it is the precise mathematical characterisation that is exciting, and that this characterisation includes a logarithmic function – which means that the shape of relationship between size and reaction time is curved so that small increases in size for small objects result make it much easier to select them (whereas small increases in size for big objects don’t make that much difference). And the same applies for changes in target distance."
What’s exciting is that modern research continues to prove this over and over again. In the two papers I cited before, each demonstrated diminishing returns past a certain button size — somewhere along 12mm to 15mm.
But the best part? We can use this to design better user interfaces.
Here’s how:
Designing better user interfaces using Fitts’s Law
