Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Design for Mobile: App UI Best Practices: Part I

DZone's Guide to

Design for Mobile: App UI Best Practices: Part I

Stuck trying to design your app? Read on to get unstuck with some best practices for the UI you're slaving over.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

With millions of apps to choose from, having a great design is often the reason users will download, positively review, and continue using your app. Design goes much deeper than making a beautiful app. As Steve Jobs said, “it’s not just what it looks like and feels like. Design is how it works.”

With that in mind, there are several important topics to understand before you start designing for mobile. In part one of this series, I’ll talk about creating your app’s mission, understanding how people really use mobile apps, and the basic tenants of designing for simplicity. Ready? Let’s dive in.

Create Your App’s Mission

Before you start sketching how your app will work, it’s important to clearly define what your app does and how it is unique.

Fill a need

The first step to defining what your app does is understanding which needs your app is solving. With the millions of apps already in existence, there’s a good chance that there’s already an app (or maybe hundreds of apps) that does something similar to what you’re envisioning. You need to consider how your app is different, and what will make it stand out from the crowd. Which specific scenarios are you targeting? Is there a specific audience you’re looking to attract?

Understand Your App’s Context

Understanding the mindset of the user is the next step in defining your app. You can think of this as one step below your app’s genre. What is the user’s situation and what are they trying to accomplish? Are you a productivity app? I need to complete a task. Entertainment? I’m bored and looking for something fun to do. Travel? I’m in San Francisco and looking for sushi.

Focus on the Most Important Task

Knowing your app’s primary function and its audience can still leave you with a wide range of use cases. At this point, it is critical to understand the single-most important task of your app so you can optimize the design. What is the best interface that will allow your audience to complete that task? Design for this single, core function and build out from there.

Keep Users Coming Back

Getting downloads is one thing, but you’ll need users to continue using your app for it to be successful. A large majority of apps are used once and never opened again. For certain genres of apps, this is slightly easier: productivity tools and content apps have repeat use built-in while games offer new levels, achievements, and goals. What does your app offer after the user completes basic content?


 After completing the introductory “7 Days of Calm,” Calm offers many other meditation series that can only be accessed by subscribing.

Understand How Users Interact With Mobile Apps

Once you define what your app does, it’s worth understanding how people are actually using mobile apps.

Focus on Speed

As you design and develop your app, you spend hours using each feature and testing every use case. This makes it easy to forget that people will not spend much time in your app. In fact, outside of games, most people try to spend the least amount of time in an app as possible. They have a task and want it done efficiently so they can get back to their day.

Make Your Design Invisible

Almost no one will notice your amazing design, but they will absolutely notice when the app breaks or doesn’t work as expected. Every issue, every glitch can mean another lost user. As a designer/developer, you have to think about every single component on every screen to ensure the best user experience. Every interaction should be simple and easy, never jarring.

Onboard Users Quickly and Easily

The onboarding experience is usually the most important flow within your entire app. The longer and more complex this flow is, the more people will abandon your app. However, it’s important not to force users into a mandatory intro flow when they just want to dive right in. Teach users within the natural flow of the app so they can start interacting immediately.


Color was an app that launched to much fanfare, but its interface was utterly confusing and provided no guidance.

Design for Simplicity

Now that your app has a clear purpose and you better understand how people use apps, it’s time to start designing. The following are universal strategies for designing great mobile apps.

Just Say No

After your app is released, you’ll probably receive feedback and feature suggestions from users, and feel pressured to add new features. As an app maker, it’s important to to stay true to your product’s mission and not give into every suggestion. Make additions only when necessary. When you do need to add something, use analytics and other user research to base your decisions on what users are actually doing rather than making changes based on individual requests.

Position Elements Appropriately

There is an optimal location and size for everything, which can be derived from the importance of the task or element. When setting a component’s position, first follow de facto standards (i.e. put the back button in the top-left corner in iOS). Beyond that, consider thumb ergonomics and position frequently-used components within the thumb’s range.

Do More With Less

While designing your app, you’ll probably think of many buttons, gestures, and interactions you would like to add. Before adding a component, ask yourself: can the user still accomplish their goal without it? Be considerate of more advanced users, who might become unhappy when components and features disappear. Be sure to trim your app as much as possible before its first release; it’s easier to add features and components than it is to take them away.

Make Tasks Obvious

Basic functions should be completely obvious, and important information should be prominent. Your users don’t want to think, so guide them through your app with subtle hints and a clever, dynamic onboarding. If scrolling reveals more information, show the ‘tip of the iceberg’ on the screen to indicate it. If the app has a gesture shortcut, animate the interface to show the user rather than telling them explicitly.


 Clear relies heavily on gestures, but makes them very easy to learn by including instructions on the preloaded tasks.

Wrapping Up

Now that you understand the basic principle of mobile app design, you’re ready to start designing. In Part II of this series, I’ll go deeper into organizing your app, using common interface components, and working with gestures.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
mobile ,design

Published at DZone with permission of Chris Beauchamp, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}