10 key mobile UX design principles

10 minutes read

A mobile phone is a very different beast to a desktop or laptop computer. Sure they all talk the same binary language of 1s and 0s, but how we interact with them, when, where and how we use them, even our relationship with them is very different. Designing for mobile requires a slightly different mind-set to designing for desktop. It requires a slightly different skillset, and it certainly requires a different rule book. You don’t exactly have to throw away everything that’s been learnt over the last 30 odd years about good UX design, but a lot of what works on desktop, simply doesn’t on mobile. With this in mind here are 10 UX design principles that I think are key for creating really great mobile user experiences. Obviously there is a lot more to think about than just these 10 design principles, but they’re a pretty good place to start.

1. Focus on key user goals

If you’re as old as me then you might remember Palm PDAs (see the image below). Palm PDAs (personal digital assistants) were a forerunner to today’s Smartphone. Palm were one of the mobile computing trailblazers, and they knew a thing or two about designing for mobile devices. They helped to write the mobile UX design rule book and I would heartedly recommend that you take a look at their Zen of Palm ebook which provides guidance for designing Palm PDA applications. It might now be over 10 years old but it’s still packed with loads of great advice which is still very relevant today.

One thing that Palm makes very clear is that when designing for mobile devices you should focus on key user goals. In their guide they liken a desktop computer to an SUV (i.e. one of those big lumbering, gas guzzling trucks/cars) and a mobile device to a nippy little sports car. Like a sports car an application or website for a mobile device should be lightweight. It should be quick, nimble, focused and stripped down. It shouldn’t be bloated with unnecessary features as mobile devices are simply too small and fiddly, their duration of use too short and their environment too distracting to try to do too much.

Think about what it is your users will be trying to accomplish and focus on their key goals. For example, users might need to find a local hotel, get the time for the next train or work out what the weather will be like today. Focus on the key user goals that you have identified (ideally through user research) and don’t get distracted by trying to design and build features that are very unlikely to be used on a mobile anyway.

2. Don’t just port from desktop

Does this sound familiar to you? “Quick, we need a mobile [app / website], and we need it now. Just take our existing design and make it work on a mobile. How hard can it be?”

Mmmm, what could possibly go wrong? A little CSS tweak here, a hamburger menu there and hey presto, a design that sucks on mobile because it was never designed with mobile use in mind.

You can’t just shoehorn an existing desktop design on to a mobile device and expect it to work. The differences between the two are too great. Different input methods (mouse vs touch). Different screen sizes (big vs small). Different duration of use (prolonged vs bursts). Different context of use (indoors vs out and about). I could go on. Just look at the early Microsoft Pocket PC and Windows Mobile interfaces if you don’t believe me that porting a desktop design to mobile isn’t the best way to go about doing things.

Rather than trying to shoehorn a desktop design onto mobile, it’s much better to take a step back and to consider how you would design for mobile from the start. What key user goals will you need to focus on? What features can you take out? How will a mobile user journey be different from a desktop user journey? How does the UI need to change to support touch and a much smaller screen? This is where I think a lot of responsive designs go wrong. It’s assumed that you can simply tweak a desktop design to make it work on mobile. Whilst this might be OK for simple interactions, like reading an on-line article, it simply doesn’t work for more complex ones. Rather than simply porting your desktop design over to mobile, it’s really necessary to rethink your desktop design. You don’t need to start again from scratch, but you certainly need to consider the key differences between desktop and mobile, and think about how you’re going to design for these.

3. Cut out the clutter

Clutter is one of the many enemies of good design. Not that I’m likening designers to superheroes (a lot of designers certainly don’t need any more of an ego boost) but if they were then one of their arch super villains would surely be called Dr Clutter.

Clutter is bad enough on a desktop app or website, but on a mobile one it’s a hundred times worse. Unnecessary text and elements cluttering up the UI. Unnecessary features cluttering up the user’s experience. It’s important to get rid of anything on a mobile design that isn’t absolutely necessary. Try to use icons instead of text, although you might need a label if the icon is not obvious. Use progressive disclosure to show key controls and content, with an option to view more. In short, if you can get rid of it on a mobile design, you should get rid of it. In fact, where possible you should get rid of the UI altogether. Have a read of Golden Krishna’s thought provoking The best interface is no interface blog post and subsequent book to find out why mobile experiences are often best when no, or at least very little interaction with an interface is required.

4. Break tasks into bite sized chunks

Breaking tasks into bite sized chunks, such as the steps of a checkout process is a well-established UX design principle. This principle is even more important for mobile designs because you don’t want to throw too much complexity at a user at any one time. Don’t just replicate the steps from a desktop site or app, because there is likely to be too much complexity when tackled on a mobile. Instead try to keep each step as focused and as simple as possible. Ideally each step should focus on one thing, and one thing only. This might result in more steps but will also result in a better mobile experience.

5. Make everything bigger than it would be on desktop

I know that the temptation is there to squish everything down for a mobile design in a desperate attempt to pack in as much as possible, but resist this temptation. Resist, resist, resist. When you’re creating a mobile design you need to make everything bigger than it would be on a desktop design. Bigger text, bigger buttons, bigger line spacing, bigger controls, bigger everything. Why? Because the design needs to support fat fingers, and poor eyesight. Users might be using their mobile outdoors where the screen is hard to read. They might be using their mobile on the move where reading teeny tiny text is very difficult. They’ll be using their thumbs and less than dexterous fingers to poke at buttons and controls on their mobile. You’ll also be surprised to learn that not all mobile screens are as pin sharp as you might think. I know that it’s hard to believe but there are still some people who don’t own an iPhone with a super sharp retina display! Bigger isn’t always better, but when it comes to mobile UIs this really is the case.

Try to have buttons and UI components that are at least 1cm x 1cm large (about 44px X 44px) as this will provide a good sized tap target. If this isn’t possible then you can compromise a little in height, but don’t go less than 44px X 30px. Also ensure that there is good amount of spacing between tap targets and increase both text size and line spacing. A base font of 16px with a line height of 200% is a good starting point. Vary.com have a nice little tool for checking the font size on a mobile website.

6. Minimise the need for typing

Until evolution (or science) delivers us fingers with stylus nubs rather than finger tips (think Edward stylus hands), typing on a mobile will continue to be a slow and painful process. It’s therefore best to always try to minimise the amount of typing required to use a mobile design.

If possible, always allow users to tap, rather than type. Keep forms as short and simple as possible and remove any unnecessary fields. Use smart features such as autocomplete and postcode lookup so that users only have to enter the bare minimum of information. Remember addresses and personal details so that these only have to be entered once and if users have to enter a password then it’s a good idea to let them see the password they’ve entered by providing a show password option.

7. Hand positions should influence the placement of controls

If you’re reading this article on your mobile take a look at how you’re holding it. If you’re not reading this on a mobile but have one to hand, pick it up and take a look at where your fingers and thumbs sit. Where can you easily tap? Which parts of the screen can you easily reach when holding your mobile with only one hand? (If it’s all of it then you either have freakishly large hands, or a really teeny tiny mobile phone).

Hand positions and grip should influence the placement of controls on a mobile design. The image below is from How we hold our gadgets on A list a part. It shows the areas of a screen that are easiest to tap when holding a normal size mobile (i.e. not a massive phablet) with one hand. Try to place common actions in the easy to reach green zone and place controls such as edit and delete that you don’t want users to accidentally tap in the hard to reach red zone (although you should always confirm or have an undo for a deletion). It’s also important to test the ergonomics of a mobile design with a range of people and mobile devices. You will want to see how people physically interact with the design when using it with their mobile device, or at least a mobile device that is very similar to theirs.

8. Take advantage of mobile capabilities

Modern mobiles really are a modern day miracle of technology. No doubt your super smart smartphone has a GPS device that can tell you precisely where you are, anywhere in the world. It probably has an accelerometer and gyroscope for detecting position and orientation. It invariably has a digital camera, a microphone and even a vibrator (not that sort, don’t be so dirty) for providing haptic feedback. Try to take advantage of these mobile capabilities wherever possible to improve the user’s experience.

For example, you could use the digital camera to allow credit card numbers, or unique codes to be automatically read. You could use the GPS to detect and default to the local location. You could utilise shake and other movements as part of the design. Don’t go overboard, but it’s certainly worth thinking about how you can utilise the technology available to enhance your mobile designs.

9. Test, test, test on mobile then test some more

All too often a mobile design looks great when viewed on a large desktop monitor but doesn’t work nearly half as well when taken for a test drive on an actual mobile. If there is one key principle that you take-away from this article it’s the importance of thoroughly testing mobile designs on mobile devices. And when I say testing I don’t just mean trying it out on your own mobile to see if it works without crashing. I mean user testing it with real users on a variety of mobile devices. Of course you should test it out yourself first, but it’s only when you ask real users to carry out realistic tasks that you can see how well the design really performs.

With the latest prototyping tools such as InVision, Axure and Proto.io it’s now incredibly quick and easy to create an interactive mobile prototype. Services such as Usertesting.com, UX recorder and InVision allow you to easily record mobile user testing sessions so there’s really no excuse not to carry them out. As they say, the proof of a pudding is in the eating, and when it comes to mobile UX design, that pudding is best served with a healthy slice of user testing.

10. Create a seamless experience

What do Facebook, Amazon and Spotify all have in common? Aside from being market leaders and perhaps secretly building some Dr Evil inspired underground lair somewhere they all know the importance of providing a seamless experience for their users. Take Spotify for example. You can set-up a playlist on your computer and it will instantly be available on your mobile. They recognise that whilst the design of the mobile app is very important, creating a seamless experience across mobile, desktop and tablet is just as important for their users.

You shouldn’t think of a mobile design in isolation. You should also consider the bigger picture. Where does mobile fit into the user’s journey? Is a user’s journey likely to start with mobile? Where are the likely transitions between channels, such as mobile to desktop? Try to design a seamless experience, rather than designing a mobile experience that is great in isolation, but not so great when it’s joined up with the other pieces of the wider user experience puzzle.

See also

• Design principles FTW (For The Win)
• How we hold our gadgets (A list apart)
• Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes (Smashing Magazine)
• The best interface is no interface (Cooper)
• Zen of Palm [eBook] (Palm)
• The best interface is no interface [Book] (Golden Krishna)

Image credits

• Palm TX by Stefano Palazzo
• Lotus Elise 111R by The Car Spy
• PocketPC HP h6340 by Carobeppe
• An HTC Touch2 being operated with a stylus by Asim Saleem
• Mobile tap zones from How We Hold Our Gadgets by Josh Clark
• Mobile usability testing by TechEd