Everything you need to know about mobile app design best practices

Everything you need to know about mobile app design best practices

As the use of smartphones rises globally, apps continue to be big business. But there’s a lot of competition out there, and users’ expectations are higher than ever. They want something that not only functions seamlessly but an experience that looks good and is a pleasure to use.

According to one 2018 study, apps get deleted in 5.8 days after they’re last used. Clearly, people have no qualms about uninstalling apps. So how do you make sure yours doesn’t end up on the cutting room floor? It’s a question of providing the best user experience possible. It’s no easy task, but here are the top best practices you’ll definitely need to know for any great mobile app design.

Optimize user flow

The user flow refers to your user’s journey from the moment they open the app to the minute they close it. A good user flow gets the user to the intended finish line — whether that’s a purchase, a subscribe, or simply using the app for its intended purpose. A poor user flow can cut their journey short, allowing them to leave before completing the action.

Source: Erica via dribble.comSource: Erica via dribble.com

There are a number of reasons as to why this latter scenario may happen. As previously mentioned, confusing the user with a cluttered or complicated home screen is one way. But friction points can occur in any area of the app, so it’s important to identify where they are.

This isn’t always easy. When you’re working closely with something you’ve designed and you know its intended purpose, you might be blind to the problem areas. Try applying these four approaches:

1. Break tasks into chunks

Whether you’re running a marathon or filling out an online form, it’s nice to know how far away the endpoint is so you can pace yourself. When it comes to app development, chunking is a popular method for dividing big tasks into a series of smaller ones. For example, at a store’s checkout, the payment process is often broken down into a series of 4 or 5 stages. This improves the customer’s comprehension and patience because they have an idea of how long the task will take. It’s especially important when leading your user through tedious tasks.

2. Use data

Use your customer’s data to make their interaction easier. For example, Uber uses your geolocation to show you nearby drivers (and guide your selected driver to you). This means the user only has to select their pickup location, which makes the experience faster and easier.

3. Make it intuitive

Make sure each step in the process is logical and clearly signposted with a weighted design that leads the user onto the next stage. Draw up a wireframe (either by hand or via diagramming software) to see this path more objectively and help visualize the whole process as a whole.

4. More is less.

Too much choice is proven to increase anxiety and decrease satisfaction, so keep it simple and prioritize one action per page. Again, use design to clearly guide the user towards this desired action with CTAs highlighted in large buttons and contrasting colors.

Keep it simple, stupid

The journalistic principle Keep It Simple, Stupid (KISS) is key during the first few moments a user has with an app. Interfaces involving too many options, icons, and buttons increase cognitive load which is an instant turn-off.

Keeping things simple and clutter-free is far more enticing and will encourage the user to stick around. It’s part of the reason Apple is so successful: simplicity.

This is especially important on a mobile device, where screen size is limited. To make the best use of space, break each step down into separate pages. Only show them the information and details they need to be able to make one decision per page.

Source: Anastasia, via dribble.comSource: Anastasia, via dribble.com

Help with navigation

Make your navigation menu easy to find, constantly visible, and helpful. Always tell the user where they are and show them where they can go.

Moreover, when choosing a navigation pattern, choose something familiar, such as the hamburger menu. Implementing an instantly recognizable design means users will know straight away what it means.

Make everything obvious

When you’re on a desktop, your curser usually changes from an arrow to a pointing hand when you hover over something you can click on. You don’t have this same function on a mobile app, so make it obvious to the user which things they can click on, and which they can’t. Again, use design here to make clickable things stand out, either with shadowing, buttons, or contrasting colors.

Ensure it’s finger-friendly

It’s tempting to make elements smaller when you don’t have much screen space to play with, but this would be a mistake. You need each target to be big enough to tap (aim for something between 7mm and 10mm). It’s also important not to bunch too many buttons together, so the user doesn’t accidentally hit one while aiming for another.

Know your thumb zones

Think about how you hold your phone. The first third of the screen is easy to reach with your thumb. The second third is a little more of a stretch, and the last third is difficult or — if you have small hands and/or a large device — impossible.

Take this into account when designing your app. Place frequently-tapped icons and CTAs in the green zone, and destructive items (such as ‘delete’) in the red zone so users don’t accidentally tap them.

Make it multichannel

Users switch between app and desktop, so make that transition seamless. For example, users shopping for clothes on their mobile device might add items to their basket on their phone, then complete the transaction on their computer. Make sure those same items are saved in their cart, whatever the device.

Use skeleton screens

Waiting for something to buffer or load can be frustrating. Rather than showing the user spinning dots or a load bar, give them a skeleton screen, which is basically a version of the page that shows where the information will soon appear. This helps them focus on progress, rather than waiting.

Source: Anglea, via dribble.comSource: Angela, via dribble.com

You should also use animation when pages are loading to let the user know the app hasn’t frozen. This can be as simple as a pulsing box or a color change. Visual signs of progress give the user a sense of control and minimize any frustration they may be feeling. Of course, doing everything you can to keep your page load times down is also a must.

Avoid dead ends

An empty state (aka a zero state) is where your user gets an error message. Rather than just telling them ‘something went wrong’, tell them a little more information about what exactly the issue is, and how they can fix it. This lowers the frustration levels and makes the user feel more in control.

You can also use it as an opportunity to entertain. Flickr has a great error screen: it’s informative, on-brand and it makes you smile, even if you don’t have what you need.

Source: flickr.com Source: flickr.com

Make it personal

From greeting someone with their name to remembering their preferences, using making the most out of your data means the user not only has the information they need more quickly, but it also makes the interaction feel more genuine.

Surprise and delight

Like the Flickr error screen, when we see something that goes above and beyond what’s expected, it entertains us and makes us feel valued. Delighting users with quirky functions, animations, and even unusual color choices make the experience pleasurable and help create an emotional connection between you and your audience.

Make your notifications count

According to one report, annoying notifications are the number-one reason people uninstall apps. But even if they don’t uninstall your app, sending too many push notifications in a short amount of time will lead to something called notification overkill. Notification overkill is when a user stops responding to the information they receive and clears it without reading. To get around this, consider bundling your information in one notification. Make sure the information is relevant. And send it at a time users will be awake and on their phones.

Final thoughts

When a design is good, it’s seamless: the user is able to use the app without being aware of the interface. Achieving this zen state is often a process of trial and error, but the tips above will give you a leg up in getting there. Combine these with plenty of research, your own experience, and tools to help make the wireframing job easier, and you’ll be well on your way to creating an app that lasts.

Georgina Guthrie Georgina is a displaced Brit currently working in France as a freelance copywriter. Before moving to sunnier climates, she worked as a B2B agency writer in Bristol, England, which is also where she was born. In her spare time, she enjoys old films and cooking (badly).