A good user interface is like a good suit: sure you could turn up to a job interview without one, but it’s not a good look. They’re especially important for mobile applications: you’re designing something that needs to look good across dozens of different screen resolutions, operating systems, and phone brands, and it needs to do all of that while small. It’s hard to get right, and many apps have fallen by the wayside without ever creating a satisfactory UI. We’re here to save you from that fate: here are five and a half tips you can use to take your mobile UI to the next level.
Consistency Matters
Design fundamentals here, but if the user swipes down to open the menu on the main page, they shouldn’t need to swipe up to open it on the next. Imagine you were driving down the freeway, then the steering wheel and accelerator decided to switch places. I’m not saying you’d necessarily crash, but you’d hardly rate it an optimal user experience.
That’s because any designed object has an internal logic: the pedals in a car and on a piano work in totally different ways but we don’t get them confused but their function is internally consistent; a piano pedal will never act like a car pedal, and—forgive me if this is a bit obvious—that makes it significantly easier to use. There is one exception and it doesn’t count.
Your things need to act in the same way whenever they come up, or users are going to get lost and frustrated, and they’re going to choose your competitors.
Keep It Simple
A lot of mobile app design patterns come down to this but it bears stating explicitly:
keep it simple.
Efficiency and Elegance
A significant number of popular design patterns have the same goal: reducing the number of screens and clicks it takes a user to get from entry to conversion.
Or, think about it this way: if your goal is to get somebody to run from point A to B, would you put them on a driveway or in a hedge maze? More pages means more opportunities for content, but it also means more places for a user to get distracted, lost, bored, or otherwise just put off buying.
The ideal UI has a low number of
- Pages
- Things on each page
The Amazon Kindle Store UI is a pretty great example: each book has a BUY button on the page. You click it, you get taken to a confirmation page. You confirm, then the book is on your Kindle in 5–10 seconds. Two pages, two clicks: almost perfectly frictionless. That’s not possible for everybody, but it’s good to keep in mind that you can create UIs that are stripped-down that much without compromising on control or quality.
Apps are different from storefronts of course, but you can apply the same philosophy. Each button, each feature, each visual element: ask yourself whether they’re enhancing the page, or whether they’re just distracting users and keeping them from doing what you want them to do. If you’re working off a different revenue model (like say being ad-supported) this is less of a concern, but should still be considered: you’re still trying to get them to do something, and doing that thing should be as easy as possible without compromising the experience.
Break It Down
Some of you probably found yourself asking the same question about the last section: what if I need to do a complex task? Well, you break it down into bite-sized chunks to make it easier to understand and process.
Which adds more pages and … oh no, we’ve got a problem here don’t we? Well, sort of, but it’s a problem every professional UI designer runs into: tasks often come under conflicting directives, and it’s up to the designer to strike the right balance. You’re trying to keep the number of pages and clicks to a minimum, but you’re also trying not to overload the page with five hundred words and six hundred buttons.
Breaking down complex pages into multiple smaller pages is a viable way to help guide users through them. I personally recommend keeping that path streamlined and railroad-straight. Anything that leads the user back into the app’s main page takes them further away from where you want them to be—no distractions and no loop backs unless absolutely necessary, and if they’re necessary then you’ve done something wrong.
Design For Accessibility
23% of the entire adult population of the United States has some form of arthritis; about 5% are colourblind; 3% are blind or have some form of impaired vision. Deafness, chronic pain, cognitive disabilities, the list goes on: if you are able-bodied and you design an app only for yourself, you’re going to make an app that is significantly harder to use for a huge portion of your customer base.
Designing with accessibility in mind makes life easier for a huge chunk of your customers and increases your customer base at the same time. It’s win-win: you get to help people while making money. How to design for accessibility is a topic in itself, but if you’re curious, please do some further reading. Accessibility design and considering user needs is what separates good app designers from great app designers.
Design Better Transitions
Transitions in apps are often functional at best: click the button, smash cut to the next page. Consider something like Tinder for a moment, though: the animations that transition between profiles when you swipe make the whole thing feel a lot more tactile. It’s like you’re flipping through a deck of cards, and that physicality makes the experience 1) easier to understand 2) more fun.
We can take some guidance from film here: transitions are a crucial part of film editing and they have a wide vocabulary and a whole lot of cool tricks to help you rethink how you’re moving from page to page. Apps are a different medium and have different modes of operation, but it’s still worth peeking over the fence and seeing what your neighbour is doing. Looking at something from a different angle is often enough to help you see your own work differently.
How apps are different is that they require user interaction. Whether it’s swiping, pushing, turning the phone or anything else you can think of, the user has the ability to choose when they make their transitions. Combine that with some clever animations and a few film editing tricks and you can make smoother, more engaging transitions.
In Closing
Really, it comes down to our half-a-point: keep it simple. Less is more. Elegance beats overload. I feel like I’m working against my own point here, but you get it—phones have small screens and a lot of people have trouble using them, so good UI design is about reducing barriers between your customers and your goals. Keep things simple, obvious, easy, comprehensible, bite-sized, simple, and obvious.
Okay, you get it, now get to designing.
