Table of Content

1. Introduction
2. Design
3. Navigation
4. Mobile Guidelines
5. Feedback
6. Content
7. Icons
8. Most-Used Elements
9. Technical Permissions

Introduction

When designing a Mobile App, you will inevitably encounter requirement constraints, user-related specifications, platform and technology considerations, and other possible factors which will impact your design decisions. Having a good understanding of Mobile App needs will help you successfully plan your designs.

The following best practices will help you audit your design, evaluate the design choices, and test an iterate to satisfy the user’s needs.

Design

Key: Make the design user-driven.

To create a successful UI/UX, you must always consider who the design is talking to: the user.

As a designer, you need to ask questions such as:

• Who is the user?
• What are the user’s interests?
• What is the user’s age?
• What type of accessibility cases do you need to consider?
• What will be the main goals for the user to perform?
• How much time do you expect the user to engage with your Mobile App on a daily basis?

These questions are examples of the types of information you need to consider, investigate, and discover as a designer before engaging in an actual design. Always put the user’s needs first; to do so, you need to know and understand the user’s motivations and expectations.

To learn more about the questions you should ask when gathering user data, take a look at our blog post “Understanding the Requirement Gathering Process for UI/UX Projects.”

Navigation

Key: Navigation needs to be precise.

When considering the user, one of the most crucial points involves the user’s actions or desired goals while using the Mobile App—activities such as sending a message, checking the weather, reading the news, taking a photo, buying a product, etc.

When you establish the primary and secondary actions the user will perform, you can plan the UI/UX navigation of the Mobile App accordingly.

But what defines effective navigation? Here are some ideas you may consider implementing as you think about navigation:

• It’s all about the user finding the right things in the right place.
• Users must have the ability to move between sections quickly. Always provide a way to go back, or, in the case of modal screens, to cancel.
• Order, plan, and classify the content of your Mobile App.
• Use established navigation patterns (such as menus, cards, tab bars, hamburger menus, full-screen menus, etc.).
• Give users feedback and always let them know which screen or section they are currently interacting with.

Mobile Guidelines

Key: Review and consider Mobile Guidelines from Apple and Google.

Designers love to create and find new ways to communicate messages or ideas. Creativity is an exercise you must always practice. Still, when you refer to already-established behaviors in operating systems, it’s better to go with what the user is already accustomed to.

Apple and Google currently manage the two most-used operating systems: iOS and Android. Both companies provide designers with guidance on how to use (and how not to use) established components, menus, graphics, and other elements that live within the operating systems.

As a designer, you have the freedom to use the provided information and elements from their guidelines and adapt them to your Apps needs, but always consider that users already interact with these operating systems and know how to move within them. Ignoring or changing some of an operating system’s native elements may confuse the user. That doesn’t mean you must lose your creativity or stop thinking outside the box. It just means that your design will live on a platform with established individual specifications, so consistency is essential.

Design guidelines from Apple and Google are available through the following links.

• Google’s Material Design: https://material.io/design

• Apple’s Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/

Feedback

Key: Provide useful feedback to the user.

There are multiple ways of providing feedback to users about their actions in a Mobile App. Feedback happens when users provide input to a mobile app, such as entering information in a form, confirming a product’s purchase, etc. But feedback can also appear while a process is happening behind the scenes. With that in mind, users must also know to complete specific tasks and be aware of processes like updates, analysis, etc.

So, what are some effective ways of providing feedback to users? Here are some thoughts:

• Toasts: Toasts are temporary messages that appear on the screen to communicate a specific message to the user. The toast will disappear after a certain amount of time. Toasts are not tap-able. (If tap-able, they would be notifications). To learn more about toasts, check out our blog post “Mobile Components and Their Use: Parts 1 and 2.”
• Interactions/Animations: Interactions and animations are graphics that reinforce actions and ideas offered to the Mobile App user. Imagine, for example, a process is running that the user is aware of. You can let the user know the process is continuing to run. You can complement the message with an animation that allows the user to see the time remaining or the completion of the process or just that the process is still running. With no animation, there would be no way for the user to know if a process is still running or if it has stopped or if the system is still flowing.
• Component Behaviors and Feedback: The user’s interaction with components is an essential part of UX in Mobile Apps. Components are tap-able elements that will receive input from users to perform specific actions. So, when a user places a finger on the screen and taps on a component, you need to let the user know that the interaction has started. You can accomplish this by putting a different UI in the element (pressed looked); another option is to change the real-time parameter value.
• Confirmation Messages: Confirmation messages may seem simple, but they’re often forgotten. After a user completes a process—small as it may seem—it is crucial to let the user know the result. That doesn’t mean you need to create a separate screen with a confirmation message. If the input needs to be validated, you can just include a graphic the user already relates to completion of a process. As an example, consider a form. After the form is completed within a Mobile App, you can let the user know if the information is valid or not. Another option is to provide feedback for each field, letting the user know if something is incorrect before allowing the user to complete the entire form.

Content

Key: People don’t read. Help them understand the content.

All designers want to think that users are fully engaging with Mobile Apps and dedicating 100 percent of their attention. Unfortunately, this is simply not the case. Sometimes users do dedicate their full attention to Mobile App content; at other times, however, users interact with content while doing something else at the same time.

You can also expect this distracted behavior when users engage with cluttered screens. Sometimes there is just too much information for users to dissect what they need and where to start.

Here are some solutions for scenarios like this:

• Content Planning: Deliver content in a manner that provides users with meaningful information and clear instructions about what they need to achieve. If extra information or explanation is required, consider including a Help section and/or a list of helpful shortcuts.
• UI Editorial Design + White Space: Quality editorial and practical layout design can help you separate information in such a way as to drive users’ attention to specific actions. Remember that white spaces are rest areas for users’ eyes. To learn more about the use of white space, see our blog post “Applying Basic Design Principles to UI/UX Digital Interfaces.”
• Drive Attention with UI Enhancements: Various design options can drive users’ attention toward certain elements within a Mobile App. Examples include color changes, size changes, font style usage, and animations, among others. Not all actions users perform on a screen have the same importance. From a UI perspective, make sure you distinguish the actions that are most important.

Icons

Key: Icons are not magic tricks. Design simple icons and provide labels, if needed.

It’s an unfair practice to think that a great icon is one that means a lot of things. The right icon is the one that best represents what the actual act of pressing it accomplishes.

Here are some ideas about building effective icons:

• Address Complex Actions: Sometimes a required action or section is too abstract for a simple representation. As a result, you may have to build an icon that, alone, will not communicate to the user what it means. In these cases, try to use a label as a complement, to help the user fully understand what the action or section is.
• Use Well-known Graphics: Think of it this way—the most-used icons are objects related to the intended action, but not necessarily the act itself. You can find many icons across websites and Mobile Apps that users already know. Examples of well-known icons include the plus sign (for addition), the pencil (for writing an email), the “T” (for text), and the hamburger (for the App menu). As mentioned previously, thinking outside the box is admirable, but always consider what the user is already familiar with.

Most-Used Elements

Key: Keep the most-used elements within the user’s reach.

For this best practice, it is essential to ensure effective content planning and quality UI design. With regard to UI, consider the following scenarios:

• Type of Device: Understand that an app’s usage will be significantly different from a mobile device to a tablet. First, it is essential to consider ergonomics. The way a user holds a phone is not the same as how a user holds a tablet. Elements on a tablet will probably be more dispersed, so you may need to consider design changes to keep the most-used elements still within the user’s reach. By the same token, size and layout are also important factors when designing for mobile phones.
• Hot Spots: Numerous research studies report how users engage with mobile devices and where users are most likely to place their fingers on a screen. This research data can help Mobile App designers decide where to place elements and require specific actions.

Technical Permissions

Key: Don’t ask for technical permissions out of context.

Most users do not understand the technical implications when Mobile Apps ask for permissions regarding topics such as location or notifications. With that in mind, it is essential for Mobile Apps to ask for these permissions within the right context and not when users first interact with the App.

If permissions are requested out of context, users will be asking questions: Why do they need to know my location? What is the App going to do with this information? Why do they need to send me notifications?

In this scenario, users will probably end up saying no to the permission. If, however, you present the request for permission when users are performing an action that requires a location or notification, they will better understand what they’re agreeing to and why it is required.