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

Design for Mobile: App UI Best Practices: Part III

DZone's Guide to

Design for Mobile: App UI Best Practices: Part III

In this last part of this series, learn how to pull together mobile design in a way that works for your apps.

· 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.

In the first part of this series, we discussed your app’s mission and how to design for simplicity. In the second part, we moved onto app organization, interface components, and gestures. In the third and final part of this series, we’ll show you how to interact with your app’s users, create your visual identity, and introduce your app via an onboarding process.

Communicating With Your Users

In the real world, when you want to establish rapport with someone else, etiquette matters. The same goes in the digital world when you want to create a well-designed app. This means giving careful thought to your messaging and how it is delivered to the user. Both iOS and Android have standard communication conventions, which you should understand when designing your app.

Alerts and Dialogs

When the iPhone launched, it only had alerts, which are modal boxes that appear in the middle of the screen. These interrupt whatever the user is doing and require a response before they can continue. Android has a similar component called a dialog, and as a user – you can’t miss them.

As a general rule, alerts and dialogs should only be used for urgent information. If you abuse this rule, your users may become desensitized to these messages. If a user is conditioned to quickly tap through the message, when something important actually happens, your alert may go unnoticed.

A few examples of appropriate alert or dialog usage:

  • Something is preventing the app from functioning properly
  • The app needs user assistance in order to complete a task
  • The app requires user permission before accessing information such as GPS location, calendar, or contacts
  • What are some examples for when it is not appropriate to use an alert or dialog?

  • To communicate fleeting issues like poor GPS signal. This can be displayed more effectively, which we’ll discuss below.
  • To ask for a rating. Interruptions can be frustrating for users, but it’s especially frustrating when the interruption has nothing to do with their current task. If you really need to ask for a rating, do it on the about or setting screen with a friendly, no-pressure tone. “Enjoying MyApp? Please take a moment to write a review.”
  • Banners and Notifications

    The other major type of notification is called a banner (iOS) or notification (Android). These can contain the same content as alerts and dialogs, but are more subtle because they don’t interrupt the user’s flow.

    These messages appear at the top of the screen, and on Android sometimes appear simply as an icon in the notification area. On both platforms, the user can see the details of the notifications by opening the notification drawer (called Notification Center on iOS).

    In general, there are two main types of notifications. The first are local notifications, which are scheduled and delivered by an app on your device. The second are push notifications, which are sent by an app’s server to a notification service which then delivers them to the user’s device(s).

    These notifications are less intrusive than alerts, so they can be used in more scenarios. However, careful thought should always be given to the content and frequency of notifications. Sending irrelevant notifications or sending notifications too often will quickly become frustrating to your users.

    Writing Alerts and Notifications

    Each time you communicate with your users, your messaging should be crafted with care. Describe the situation clearly and provide enough information so that users can understand how to proceed.

    The text itself should focus on the message, not the available actions that can be taken. Avoid telling people which alert button to tap or how to open your app. The message should be concise, and displayed on one or two lines. Of course, always be sure to use sentence case capitalization and appropriate punctuation.

    Badges (iOS Only)

    Alerts and notifications are best when there’s an important message to tell the user, but sometimes your message can be conveyed with a simple badge. A badge is the numbered red circle attached to app icons on the iOS home screen.

    Badges passively indicate unread messages, missed calls, remaining tasks and other important content. It is important to make sure the badge accurately reports the current status; it can be annoying for the user to investigate the badge only to realize that they’ve already seen the content.

    Spinners and Activity Indicators

    In situations when your app cannot immediately respond to a user action (it might be waiting to receive a response from a server or executing a long-running algorithm), your interface needs to respond accordingly.

    In these cases, it’s useful to use a spinner or activity indicator to communicate that the app is waiting for something to complete before it can continue. These are common elements across both iOS and Android, and should also display a message to describe what the app is waiting for.

    Once the spinner disappears, the user knows that the task is complete and they can continue using the app.

    Creating Your Visual Identity

    No matter what kind of app you’re creating, visual aesthetics are important to the user. Creating a unique visual identity will usually require the help of a talented UX designer, but this section can help you understand its importance and the different topics that you should keep in mind.

    What Is Your App’s Personality?

    Every design choice contributes to your app’s personality. Before you start thinking about colors schemes and navigation, consider how you want people to perceive your app: Business-like? Comforting? Edgy?

    Choose your app’s personality before you start designing its visual identity so that you have a framework for making consistent decisions based on the personality you want to achieve.

    Creating Custom Interfaces

    Early iPhone interfaces were full of custom graphics until iOS 7 established a flatter, more minimal design. Many apps followed suit to maintain consistency between the OS and app experiences.

    If you decide to create a custom interface, there are two directions you can take.

    1. Create a completely custom interface from top to bottom where you build every element from scratch.
    2. Customize the standard Android or iOS elements with your own designs.

    When creating custom interfaces, keep the following tips in mind:

    • Be consistent in your customization and style related components similarly.
    • The custom interface shouldn’t distract from the main content. No matter how beautiful your interface is, make sure the content has priority.
    • Maintain realism by using a top-down light source.
    • Make sure your interface is readable: choose higher contrast colors for fonts and other important interface elements.
    • Minimize the number of fonts you choose and make sure you choose fonts that are highly readable on screen.

    Using Metaphors Appropriately

    In the earlier days of the iPhone, metaphors were much more popular as the iPhone promoted skeuomorphism, a design concept of making items represented resemble their real-world counterparts.

    This can be beneficial if you want a unique visual identity, but it’s important that the visuals are easily understandable and usable. Ideally, your visual metaphor should be intuitive to use, and based on real-world counterparts. UX designers refer to these intuitive metaphors as affordances.

    Metaphors and skeuomorphic designs can make an app more playful and immersive. However, be sure to maintain balance within the app. If you go too far with sound effects or animations, your app can quickly become frustrating to use.

    Onboarding New Users

    A user has downloaded your app and arrived at the first screen. Ideally, your app is so easy and intuitive that it’s immediately obvious how it works. Unfortunately, this is extremely rare.

    In reality, each app is unique and users will require some hand-holding until they know how to use it.

    There are many different ways to onboard users, but there are several common patterns that you should consider when creating your onboarding.

    Benefits-Oriented Onboarding

    Benefits-oriented onboard was the first type of onboarding to appear in apps, and there’s a very good chance you’ve seen it yourself.

    This method explains the key benefits of the app along with a few images (I recommend no more than three) that illustrate those benefits. The images could be of app screens or they could be related imagery.

    In this introductory flow, your app should answer a few basic questions. What does the app do? How should it be used? What value will it provide?

    Each screen should present one key idea, and while you’ll be tempted to include more detail, remember that most users have a single goal in mind. At this stage, they don’t want — or need — to read about the details of your app.

    Finally, focus on the essentials of the idea, and make each screen as easy to scan as possible. Users want to use the app, not spend time learning how to use it, so the faster they can get through onboarding the better.

    Function-Oriented Onboarding

    Function-oriented onboarding, as with benefits-oriented onboarding, usually includes three or more introductory screens. However, instead of focusing on benefits, function-oriented onboarding focuses on key functionality.

    In this introductory flow, your app should answer a few basic questions. What is the key functionality? When should I use this functionality? How do I use the functionality?

    In function-oriented onboarding, each screen is typically an app screenshot with annotations that explain key functions in the interface. One common example of function-oriented onboarding is helping the user get started by showing how to create new content.

    Progressive Onboarding

    Progressive onboarding is quite different from the two previous techniques. Instead of forcing the users to swipe through screens, progressive onboarding allows them to dive right in. Once immersed in the app, key benefits and functions are explained to users within the app’s flow.

    Complex workflows are the best candidates for progressive onboarding, since there are likely more than 3 simple screens to explain how the app works. However, this type of onboarding is also useful when functionality is hidden or apps are more gesture-driven.

    Hybrid and Alternative Onboarding

    Of course, it’s possible that one type of onboarding might not be enough. In that case, you should consider combining benefits-oriented or function-oriented onboarding with progressive onboarding. This option gives the user a high-level overview upon the first app open, then drills into more specific content as they continue to use the app.

    Another alternative is to use a video or animation that explains how to use the app. If you choose this option, keep in mind that the user may not be somewhere that they can play sound so using subtitles is a must.

    Wrapping Up

    Thanks for taking the time to read the Design for Mobile: App UI Best Practices series. I hope you’ve enjoyed reading as much as I’ve enjoyed sharing.

    As a user experience designer, I love creating great product experiences for users, but what’s even more satisfying is sharing my knowledge with others so they can create great product experiences as well.

    I wish you all the best as you create your next mobile app. Now go make something amazing!

    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:
    user interface

    Opinions expressed by DZone contributors are their own.

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

    {{ parent.tldr }}

    {{ parent.urlSource.name }}