Let’s discuss the ergonomics of mobile UX, how to design user-friendly applications, as well as how to create a great mobile user experience.

The world has changed so much in the last few decades. For instance, computers that filled entire rooms were needed to fly rockets to the moon. Now, however, all we need to access a vast amount of knowledge is to simply reach into our pocket and pull out our phone.

As more and more of our lives move into the digital realm, it’s important to consider not only the amount of time we’re spending on mobile devices, but also how we interact with them. Functionality and aesthetics are in constant battle to deliver the very best experience. So, how do we ensure that when we’re creating applications, software, or web pages for mobile, that we deliver an experience that’s perfectly suited to humans?

The Ergonomics of a Successful Mobile App Design — Functionality and Aesthetics
Combine functionality and aesthetics to provide the best user experience possible. Image via Valeri Hadeev.

Mobile user experience design (“Mobile UX” for short) is a huge subject that covers all aspects of interaction with our devices. It’s so important that it’s taught in schools. However, today we’re going to take just one element of ergonomics and see how it can apply to the way we use our devices. That way when we’re creating applications for these devices, we do so in a way that doesn’t harm us, and indeed makes them a delight to use.

For example the iPhone, as Apple often alludes to, “just works,” and it’s this notion that has transformed this device into an integral part of our lives. Mobile design ergonomics has had a huge part to play in its success.


What Are Ergonomics?

You’ve probably heard of ergonomics more often applied to physical objects. The word often describes the way furniture and computers are laid out and designed so that, for example, humans don’t get harmed from sitting down all day, or from typing constantly on a keyboard. It’s the interaction between the physical and the human.

The Ergonomics of a Successful Mobile App Design — What Does "Ergonomics" Mean?
An ergonomic design places human needs and comfort at its center. Image via vasabii.

With mobile devices, the same applies. Manufacturers are constantly trying to create devices that best fit in people’s hands. However, for our purposes, we’re talking about the software itself. If a piece of software is created ergonomically, what parameters does that place on the software in order to best suit human interaction?

You see, it’s not by accident that phones ended up being portrait-oriented devices, despite desktop computers and TVs always being landscape. It’s not by accident that navigation bars on phones tend to be at the bottom of the screen rather than the top. Designers consciously made these decisions because of the way the phone sits in the hand and how far fingers can reach around a screen.

1. One Size Doesn’t Fit All

As devices have become much more personal, the number of permutations within user experience design have also increased.

Think about it. My hands are probably a different size than yours. You may be left-handed, and I’m right-handed. Sometimes, I may have both hands available to interact with my phone. Sometimes, I may only have one. Or neither. Sometimes, the “wrong” hand is available because I’m carrying groceries in the “right” one. Sometimes, I may want to watch a film on my device, whereas other times, I’ll be sending email or replying to messages. All of these permutations add up to create an infinite world of possibility. However, they all need to be catered to so that no matter what the situation, the device is constantly usable.

The Ergonomics of a Successful Mobile App Design — Flexibility and Ergonomic Design
Different people and situations require innovation and flexibility in design in order to meet their needs. Image via LDprod.

This demands that the interface—the buttons and elements that allow you to take action on your device—are laid out in such a way that no matter what the situation, the user never feels like they’re having to reach or stretch or search for something in order to do a task.

2. The Area of Usability

So, how do humans use mobile devices? Well, UX Matters conducted a survey revealing that forty-nine percent of us use our devices mostly one-handed, thirty-six percent use our devices mostly held in one hand with fingers from the other hand tapping the screen, and fifteen percent of us use our devices two-handed. This is important because the reachable areas of the device change significantly depending on how the device is used.

Here, you can see the easily reached, the moderately reached, and the impossible to reach areas for each scenario.

The Ergonomics of a Successful Mobile App Design — Various Reachability Scenarios
Reachability on a mobile device when using a single hand, one hand to hold and one hand to tap, and both hands to tap (left to right).

Although the area changes, what stays constant (in all three scenarios) is the bottom of the screen is always the area most easily accessible. This tells us that when we create applications, anything important — such as the way we navigate an app — should be placed at the bottom, leaving the least important information at the top.

Look at any mobile app — Twitter, Facebook, Instagram, Mail, Messages, Photos, or WhatsApp. The navigation bar is always at the bottom.

This is in direct contrast to the way we experience apps on bigger devices such as desktop computers, where the menus, buttons, and important information is usually at the top of the screen.

This same reasoning applies not just to navigation, but also to other important application features. We store our most important apps at the bottom of our phones. We unlock our devices from the bottom with a finger press or a swipe up. Icons that let us “like” and message each other on major social media apps, such as Instagram, features photos and posts underneath, not above them, so that when you’ve scrolled past the post, you can easily reach the buttons that allow you to take action. Important contextual menus that contain features — such as sharing, copying, or editing — often swipe in from the bottom of our devices, not the top.

The Ergonomics of a Successful Mobile App Design — Keep Important Information at the Bottom of the Screen
The navigation position of important features are often found at the bottom of the device. Image via jossnat.

However, swapping things from top to bottom doesn’t mean you’re done. As mobile devices start to trend bigger again (this comes and goes in cycles, but the trend is very much towards slightly larger devices at the moment), the reachable area of our screens decreases.

One pertinent example is using a keyboard on screen. If you have two hands available, the entire keyboard is east to reach. However, when typing one-handed, the keys that sit on the opposite side of the screen aren’t always accessible with one finger. Conscientious app designers have now started to include the ability to contract the keyboard. This mean that when a user types one-handed, every key is easily within reach. Equally, you can also swap the way that the menu contracts, so that it’s still usable no matter which hand is holding the device. It’s the seemingly tiny details that make our devices constantly usable.

The Ergonomics of a Successful Mobile App Design — Increasing Usability
App designers are constantly updating our devices for increased usability.

3. Bigger Is Better

The one great thing about desktop computers is their accuracy and precision. Humans have created some truly awe-inspiring things with a mouse and keyboard. Mice have been around since Apple made the GUI (graphical user interface) popular with the release of their first Macintosh computer back in the 70s. It’s been a stalwart companion of our lives ever since.

That’s why on desktop computers with huge screens, you see tiny buttons because a mouse is super-precise. Obviously, a mouse was never going to work on a touch device, so our fingers took its place. The problem with fingers, however, is that they’re incredibly inaccurate at pinpointing specific points, such as buttons on a screen. This means that when creating apps for mobile devices, we have to make everything bigger in order to ensure that the user can still perform the action. Imagine an app with tiny buttons that no matter how much you tried to hit with your finger, you always missed. Mobile apps created this way would’ve never become popular.

When taking action on a mobile device, the buttons need to be super large so our inaccurate fingers always hit the right part of the screen, every time. It’s also why you often find that apps for our phones are much more cleanly and simply designed. Filling the screen with buttons simply wouldn’t work because we would constantly be tapping the wrong thing. And, that leads us quite nicely to the final point on ergonomics.

The Ergonomics of a Successful Mobile App Design — Large Buttons on Small Devices
Large buttons on small devices increase contact accuracy. Image via doodlia.

4. No Interface Is the Best Interface

So, here’s the turn out. We’ve talked for a while about the ergonomics of mobile UX and how to design applications. We now know to help a user interact with their devices by ensuring they can always reach the interface, as well as ensuring that it’s the right size and layout for our fat fingers.

However, the very best interface is when there’s no interface at all.

The Ergonomics of a Successful Mobile App Design — The Best Interface is No Interface
The best interfaces are unobtrusive…or even invisible. Image via LDprod.

If you’ve ever worked for a large corporation, you’ve probably had to work with legacy enterprise software. That’s a fancy term for the thing you have to log into everyday at the office, the thing you complain about, the thing that has all the buttons and dials that you’ve really never used. And still, after working there for ten years, nobody has any clue how most of it works. No doubt it’s an area of frustration on a daily basis.

The reason you complain is because it feels like it’s getting in the way. It’s hindering your progress, and it’s always forcing itself into a situation. If you’re creating these types of applications — that don’t get out of the way whenever feasibly possible — then you’re headed down a path that will lead to upset and dismay. Less really is more. If it doesn’t need to be there, then get it off the screen. Real estate is at such a premium on mobile devices, so whenever you can hide the interface it’s usually best to do so.

Think about when you’re watching a movie on your phone. The interface is there for a few short seconds, then it fades out so that the whole screen is filled with your content. This is good interface design, good ergonomic understanding, and leads to a great mobile user experience.

The Ergonomics of a Successful Mobile App Design — Remove Unnecessary Information
If the information is unnecessary, remove it from the screen. Image via izabel.l.

Takeaways

This is just the tip of the iceberg when it comes to designing ergonomically sound mobile apps. Still, it’s a great foundation for building experiences that people truly want to use. Here’s our roundup for how to get started:

  1. Think about the size of the device and the amount of real estate you have available. Think about where hands can reach and where they can’t in different positions and orientations. Is it always the same or does the interface need to stretch and shift, depending on the situation?
  2. What are the most important features of your app? Place those first and place them at the bottom. Now, think about how the rest of the content fits around it.
  3. Make everything bigger. It sounds counterintuitive on a smaller screen, but do it.
  4. Think about the user journey. That is, how a user gets from one part of the app to the next. Does that menu or button need to be there at that moment? If not, hide it. Content is king.

Want to learn more about designing with your customer in mind? Check out these articles: