7 tips to create awesome mobile app designs

Native app UI design doesn’t give you much room to work with. When designing for smaller screens and shorter attention spans, your UI design must work at the speed of thought. Ideally, you want to design an interface that’s easy enough for novice users, without boring experienced users.

Goal-driven Design: You want to design for the right user. User research, such as surveys and interviews, will help you create personas for those most likely to use your app. This allows you to create specific goals for your users and tailor your app’s workflow to suit their needs.

Usability: This seems like a no-brainer, but your app has to be usable. If your audience can’t easily use the app, then they certainly won’t download it from the App Store. Usability makes a product useful, which is the first step in being desirable.

Affordance & Signifiers: The affordance is the function. Signifiers hint at affordance. For example, blue, underlined text indicates that clicking on it will take you elsewhere. Use signifiers correctly so users don’t need to think about what each UI element does.

Learnability: You want users to instinctively know how to use an interface. This is where design patterns come in handy, which we’ll talk about later in the article. Familiar patterns help a new user easily acclimate to an app.

Feedback & Response Time: Feedback lets users know if a task was completed or not. It can be as simple as a beep, or more complex like a modal window. Make sure your feedback is friendly, human, and responds within the timing guidelines set forth by the Nielsen Norman Group.

As Andrew Maier points out in his excellent UX Booth article, these five rules are the foundation you should consider before embarking on designing any kind of interaction, whether or not it’s for a native app.

2. How to design better mobile apps? Know Your Users

Screen size isn’t the only constraint in mobile design. According to Maier, users form the basis of your interface’s constraints. So the first step in creating a goal-driven app UI is to know your users.

Personas: Personas are fictional characters fashioned from the expected behavior of your target users. They allow you to determine what will drive users’ decisions within your app.

User Scenarios: Scenarios provide insight into how a persona will act. With user scenarios, you’ll be able to design a UI that best suits them and the goals they want to accomplish.

Experience maps: Here you’ll explore all the possible conditions for a single interaction. Experience maps chart each step that personas are most likely to take while using an app. They help you understand all the emotions and circumstances that surrounding those steps.

“So replace the startup dogma of ‘launch early and often’ with ‘learn early and often.’ For me, it opened my mind to all the different kinds of ways startups can learn, and how valuable user research can be to the core mission of any startup.”

In other words, make sure you conduct usability testing sessions between each major iteration. At a bare minimum, run some remote usability tests with a service like UserTesting so you can see how people use your app in natural settings. For more insights into behavior nuances (e.g. gestures and body position), we recommend running an in-person lab session with at least five users.

3. The best User Experience design starts mapping out the Content and building User Flows

Design and research work in parallel. For example, you can quickly sketch out user flows based on what you’ve learned thus far. Before committing to a path, however, create a simple prototype. It doesn’t have to be anything fancy — your prototype can be done on paper so you can start understanding how users flow between content and actions.

If you want to outline the flow, you can use the writing-first approach, which Jessica Downey writes about in her excellent article “Jumpstarting Your App Conception Without Sketching UI.” This outlining method helps flesh out app ideas and build a “common understanding” of each page of your app.

Before sketching or prototyping, a written outline helps you explore the most important part of your app – the content. Building flows around content gives you a much more accurate assessment of the total number of pages required for your app.

As a next step, you could then create a sketch for each page of your flow (in this case, you could create four sketches). From there, you could continue iterating the sketches on paper and cut them out for a paper prototype, or move to a digital prototyping tool like UXPin.

The outline helps you quickly explore different page flows. The sketches bring those flows to life with more detail around layout and structure. Finally, a quick prototype helps you test those ideas with users.

We’re not suggesting that you flat-out copy the designs of others. Use common UI patterns as a baseline for usability, then layer on your own creativity. In doing so, you’ll ensure that your app design matches user expectations without feeling boring.

As showcased in the free e-book Mobile UI Design Patterns, there are two categories of interaction design patterns you must master for good mobile design.

Animations: Motion keeps users grounded in the UI while adding context. There’s a difference between elements that vanish and those that slide out of sight. The former is deletion; the latter is available for use later. When animations are combined with gestures, they add another depth to the experience.

Mobile interaction patterns help dictate the layout of common interface elements. For example, navigation buttons at the bottom of the screen are easier for users to tap with a thumb than buttons at the top.

Yelp is a good example of intuitive mobile interaction design. The app is very clean, with nice, big buttons that state their purpose. The buttons’ clear labels are easily understood by just about any user. Much more than that, the app uses some common mobile UI patterns, like the toolbar at the bottom, which is a pattern you’ll see in a lot of native apps.

Speaking of text, you’ll want to make sure that copy is always easy to understand. Some tips for text:

Phrase labels positively to make users feel in control.

Important words must appear first. Mobile users are especially impatient, so use “Full name” instead of “Name (full)”.

Wording must be consistent and styled uniformly across each screen.

Check out the UI libraries capptivate and Use Your Interface for excellent interface examples that incorporate all the gestural, animated, and textual nuances of mobile design.

5. Don’t forget Accessibility: design For Fat Fingers

Fingers are much thicker than pixel-precise mouse cursors, so you should pay attention to finger-friendly design.

Specifically, allow enough space for users to tap with a fingertip. If your buttons are too small or bunched too closely together, users can’t tap them accurately (which only increase frustration and therefore abandonment).

Here are a few tips to keep in mind when designing buttons and other touch targets:

We hold our phones in different ways. According to Josh Clark, there are three ways to hold a phone: one thumb/one hand, two hands/one digit and two hands/two thumbs. And there are also different ways to hold a tablet, but users mostly hold tablets on the side.

The 44-pixel guideline isn’t always true. You don’t want to design a button so big that folks won’t think of it as an action, as Steven Hoober warns. Nevertheless, you should factor in people’s fingers and how they’ll interact with your app.

When thinking about buttons, toggles and other visual cues, you must consider the use of shadows. As Erik points out, “just as we have little shadows on all the undersides of all our facial features, there are shadows on the undersides of just about every UI element you can think of.”

Shadows, and by extension gradients, make UIs appear much more natural to the user. You can use shadows and gradients to create 3D buttons and input forms, where the effect makes the element appear inset or outset.

7. A basic principle of simple and clean design: Cut Out the Clutter

While the 3-click rule has been debunked in UX design, it’s still worth considering when in app design. Why? Because it forces you to consider whether you really need all of your screens.

Ideally, the user should be able to perform tasks quickly and in as few steps as possible. Yahoo CEO Marissa Mayer advises designers in a FastCo article to use the “two-tap rule” too. She says, “once you’re in the app, is it two taps to do anything you want to do?” If not, it’s time to redesign.

As she pointed out:

“The Yahoo Flickr app uses this to great effect: from the opening screen, you can take a picture, surf your screen, navigate albums, check out groups, set alerts, and more, all with just a couple taps.”

So think about how to reduce the amount of work that users must do. The less they have to think about, the more likely it is that your app will achieve success.