Designing a better mobile experience: 14 UX best practices

Mobile devices are now responsible for over half of all internet usage. They will only become more dominant as the technology continues to improve.

Pj Jones

This means one thing for websites–make sure your mobile experience is on point, or get eaten alive by the competition. Here are 14 mobile UX best practices that will make your mobile interface slick enough to need a wet floor sign.

 

1. Make Your Layout Fluid

Phones come in many shapes and sizes. Lazy developers might only want to design their interface for a 320 pixel width, but it means that users with other devices have a worse experience. Making your layout fluid and flexible ensures that it will look great and be easy to use on any phone.

 

2. Visibility is Key

Mobile interfaces are small, so it’s important that you make your elements easy to see. Consider visibility when you choose the colours of your theme. The design intern might be raving about how salmon on fuchsia is all the rage this year, but it’s not going to help your users when they are outside dealing with glare from the sun.

Small text should have a contrast ratio of 4.5:1 against the background, while large text should have a ratio of 3:1. Make sure that text is at least size 11 so that users don’t need to zoom in to read it. Greater line height and letter spacing can also help with legibility. Making the most of whitespace is another way to make interfaces easier to follow.

 

3. Use Notifications Carefully

Notifications are excellent for engagement, but they are also one of the most common reasons for users uninstalling an app. We’ve all gotten to the point of nearly throwing our phones across the room from the constant buzz of useless messages.

Developers need to make sure that they only send important and relevant notifications, otherwise they risk annoying the user. Diversifying messages through email, newsfeed messages, in-app notifications and push notifications is a great way to engage users without making their heads explode.

 

4. Kick Out Clutter

The mobile experience is fundamentally different from using a desktop. There is so much less space to work with that screens can easily become cluttered and confusing. Mobiles also tend to be used when people are on the go and need information quickly.

When designing for mobile interfaces, it is important to focus and prioritise the most important aspects and remove anything unnecessary. Cut back on text and images to make mobile use more direct and clear. It’s best to only have one primary action per screen–this makes the interface easier to use, learn and follow.

 

5. Touchscreens Still Suck

Fingers are much less precise than cursors–some people touch like they are trying to break through the screen, while others are more delicate. Design your buttons and forms so that they are large enough to be touched accurately without the user hitting the adjacent button by accident.

 

6. Cut Down on Typing

Typing on phones is about as fun as a hernia. It’s slow and easy to make mistakes, so developers need to minimise it as much as possible. Keep forms short and strip out any unnecessary fields. Autocomplete and autofill are also nice touches that save the user’s time and effort.

Instead of asking users to type in the date, you can let them input it with a visual calendar. You can even have separate forms for mobile users that ask for the bare minimum amount of data.

 

7. Make Forms Easier: Use Top Aligned Labels

Want users to give you their data? Make the forms as easy as possible. Using top aligned labels is a subtle change, but it makes a huge difference. They require half as many visual fixations as left or right aligned labels. Users just have to look straight down the page, whereas left and right aligned labels required a less efficient zigzagging motion.

 

8. Give Users a Seamless Experience Across All Their Devices

Smartphones have changed the way we work and play. Integrate the data across all of a user’s devices to give them a more seamless experience. They will appreciate being able to take notes on their phone, then get to work on their desktop later on, all without having to transfer anything themselves.

 

9. Follow the Interface Guidelines

Optimise the user experience by designing it alongside the Google Material Design for Android or the Apple iOS Human Interface Guidelines. This ensures that the app will be standardised as well as easier for the user to learn and use.

 

10. Take Advantage of Unique Mobile Features

Modern smartphones are powerful tools with a range of features that desktops don’t have. They have the ability to call, a range of sensors, GPS and much more. Engage your users by making the most of these unique aspects. You can have a ‘tap to call’ button on your contact page, enable easier sharing and give location specific information.

 

11. Make it Easy to Navigate

The size of phones means that they can’t display as much information as desktops, so it’s easier for users to get lost and confused. Keep your navigation consistent and coherent–make sure controls are in the same place and use visual metaphors to direct the user to the endpoint.

 

12. Rethink Your Menus

Menu bars for desktop websites take up too much precious screen space. Hide a drop down menu in an icon in the top right or left corner so that it’s out of the way unless users really need it.

 

13. Hand Position Is Crucial

One UX study showed that 49% of mobile use is with one thumb only. It is important to design your functions around the most common mode of use, otherwise people will struggle with the control and features of your app.

Keep commonly used features in easy to reach places, but make sure that negative actions, such as the delete button, are in places that are more difficult to access. Your users are done for if they erase the wedding photos by accident.

 

14. Test Test Test!

Before you launch, you need to test out your interface with real world users. What may seem intuitive to developers can be like finding the Ark of the Covenant for first time users.

Analytics and feedback are great for gauging how people use the app and you can use the information to improve features. Make it easy for users to give reviews and try to respond to them regularly. Testing doesn’t stop after the launch either, it’s a constant process of using metrics and feedback to continually optimise the app.

With the trend towards greater mobile use, it’s crucial that developers create a high-functioning and intuitive mobile experience. For more advice on making the most of apps and mobile websites, contact us at hello@staging.mallardandclaret.com. We’ll bring you up to speed on all the latest tips and tricks for the perfect mobile experience.

 

Sources:
https://uxplanet.org/mobile-design-best-practices-2d16d37ecfe#.sslzsge87
https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6#.oa2700vjj
https://www.sitepoint.com/7-best-practices-designing-mobile-user-experience/
http://mlsdev.com/en/blog/55-10-best-practices-for-mobile-ux-design
http://www.designyourway.net/blog/design/mobile-ux-principles-and-best-practices-for-a-better-app-experience/
https://www.thinkwithgoogle.com/topics/create-better-mobile-user-experience.html

What can we help you with?

What can we help you with?