30-point UX checklist for mobile apps

image

This article is a reminder about what you need to double-check in the design of your application before sending it to AppStore / GooglePlay. The list is divided into thematic blocks:

  1. Login Registration
  2. First experience
  3. Daily interactions
  4. Notifications
  5. Account Settings
  6. Tape
  7. Search
  8. AppStore / GooglePlay

EDISON Software - web-development
This article was translated with the support of EDISON Software, a company that develops applications and sites , and also deals with user interfaces .

1. Login / Register


1. Screensaver

A splash screen is displayed when the application starts. This is the first thing the user sees, this creates the first impression of the product, even before the start of work.

image

Logo splash screen by Gleb Kuznetsov

image

Rider Launch Transition by Uber

Here are some tips for making good screensavers .

2. Forgot your password

The average person is registered in 90 online services that require a password. Therefore, passwords are often “forgotten”. According to statistics, 21% of users forget their password for 2 weeks, and 25% forget one password at least once a day. If your application requires a password, then take care of the password recovery form.

image

Forgot password flow by Emmanuel Torres

2. First experience


3. Welcome screen / instruction on first run (Onboarding)

Onboarding is a UX-design term meaning how to understand the user what to do with your application, how to navigate it, where to click. Good onboarding increases the likelihood that “newcomers” will become “permanent.”

image

Animated onboarding experience by Cuberto

Here are practical tips for good onboarding .

Here are creative concepts for onboarding .

4. Screen with notification of successful confirmation of data

Many mobile applications ask for confirmation of mail / phone. A notification about a successful data confirmation operation appears after the user has completed everything necessary.

image

Confirmation screens by Diana Caballero

For this screen, it is vital to ensure:


5. Stubs for "No content yet"

Content is what users install most applications for. It is important to think over those places where the user managed to glance, where there is no content yet. These unexplored places should not be empty.

Instead of leaving a void, insert a tutorial or instructions on what to do next.

image

Symplicity careers app empty state

6. Default user avatar


Most users (~ 95% according to Jared M. Spool ) do not change the default settings. This means that users will have the avatar that you have chosen for them.

image

Cute default user avatar in Dropbox

Here are some ideas on how to make a default avatar .

3. Daily interactions


7. Resolution request screen

When a user opens a new application, the last thing they want to see is a lot of pop-ups asking:


Such requests negatively affect the user experience, and lead to the fact that the application can be deleted in an anger. Such permission requests have a very negative impact on user experience and usually leads to the app abandonment. Therefore, it is better to ask permission at the time of user interaction.

image

Notification Permission Dialog by Anton Tkachuk

Here in more detail about the request for permission .

8. Various states for interactive elements

Buttons and other interactive elements have several states. It is very important to think over the default / pressed / not available states for each interactive element in your application.

image

Three button states

image

Material design button by Vadim Gromov

Here are tips on how to design buttons .

9. Icon set

It will be better if your icons are of the same style.

image

Tab bar icons in the Twitter app for iOS

Here's a checklist for the icons .

10. Error messages

The best error message is one that does not appear at all. A better way to prevent mistakes is to properly instruct the user in advance. But if, nevertheless, an error has occurred, then a competent error message not only teaches the user how to prevent it in the future, but also makes it clear to the user that they are taken care of and not ignored.

image

Error Interaction by Dwinawan

Here are a few cases for which you need to think about error messages:


Here's a how-to article on how to make good error messages .

11. The boot process

Although the instant response from the application is the best, there are times when your application will have to “dive”. A poor internet connection may cause a slow response, or the operation itself may take a long time. In such cases, in order to minimize user stress, you must assure users that the application is working on their request. When an application cannot notify users that it takes time to complete an action, users often think that the application has not received the request and they try again. Due to the lack of feedback, the user can press all the buttons hard.

An animated progress indicator is the most common form of providing system status to users when something happens or loads.

image

Smile loader for AI product design by Gleb Kuznetsov

Here are some tips for creating loading indicators .

12. The message that you did everything right

Success states are screens that we show users when they complete tasks. Designers should consider the following types of success conditions:


image

Confirmation screen in Booking.com

13. Autofill

Designers should always strive to minimize the cost of interaction by removing unnecessary actions. Autocomplete simplifies user input, reducing the number of clicks that the user must complete to complete the request.

image

Image: Louise Chang

14. Cancel the operation

We all make mistakes, but when it comes to interacting with the user, it is extremely important to provide an option that helps the user recover important data.

image

Undo for Delete item. Image: Sashoto Seeam

image

Undo for sending email. Image: Tyler Beauchamp

15. Localization / Internationalization

Since many development teams have plans for global reach, it is important to make localization / internationalization a natural part of the design process. The visual properties of the elements (e.g. size) and UX copies should be selected taking into account localization / internationalization.

image

Upvote button in different languages. Image: Chier Hu

16. Help / Instructions

When users have a problem, their first natural reaction will be to find a solution in the application. Therefore, it is a good idea to provide a link to the help / frequently asked questions section in the application.

image

Help and Feedback by Alex Muench

17. Accessibility

Accessibility allows people with all abilities to perceive, understand and interact with your product. Here's a great summary from Lillian Xiao about what designers need to know about the availability of mobile devices.

And here is a list of tools for checking color contrast .

4. Notifications


18. App notifications / Push notifications

Did you know that lousy notifications are the main reason why users uninstall the application?

image

Annoying notifications are the reason people uninstall mobile apps (71% of respondents say).

However, you can turn this UX antipattern into something meaningful and useful for both business and the user. To achieve good results with notifications in the application, designers need a publishing strategy that is best suited for mobile devices.

Here is an article that provides information on how to create good notifications .

And here are some inspirational design ideas .

19. Notification Settings

It is always a pleasure to give users freedom of choice. In the context of mobile notifications, this means being able to choose which notifications they want to receive.

image

Set notification options in Slack

5. Account Settings


20. Tool for cropping profile photo

Allow users to not only upload an avatar, but also modify it to suit their needs right in your application.

image

Editing avatar by Scott Thomas

21. Screens for viewing / changing personal data

Allow users to edit their personal data directly in the mobile application. Create screens to preview shipping / billing information and to add this information to an editable list.

image

Home and office addresses are editable. Select a shipping address from Dhiraj S. Karki

22. Log out

If your application requires logging in, then there should also be an opportunity to log out.

image

Logout in Facebook for iOS

23. Terms of use

Add the Terms of Service to your application to avoid legal action.

image

Image: Cristian Dina / Shutterstock

24. Privacy settings

Let users see what data they send to you and let them choose.

image

Image: Vitaly Friedman

Here are tips on how to deal with privacy in applications .

25. Send feedback

Providing a quick way to share feedback on your product, you not only collect valuable information about your product from real users, but also make them believe that their reviews are valuable to you.

image

Skype for iOS gives users the option to "Leave feedback", "Report a problem" or "Suggest a feature."

6. Tape


26. Scrolling

Mobile displays are small. To save space on the screen, designers often want to optimize the displayed information and hide everything that does not represent value to the user. This is why many channel screens have two states: the default state (the screen that users see when they enter the channel) and the scroll state (when the user scrolls up to see more content).

image

Note that the title area collapses when scrolling. Craiglist Mobile animation by Aurélien Salomon

Search inside the application


27. The default behavior

Wang needs to decide what the default search order will be. For example, if you are designing a search results page for an e-commerce application, you need to decide whether to sort the output according to the best match / price / delivery time.

28. Share / Bookmark

Allow users to share and bookmark what they find.

image

Like, Bookmark and Share options in the App AE by Martin Berbesson

29. Empty form for “No results”

What will users see if they are looking for something, but there are no search results? The “No Results” screen should not mean the end. Tell the user what step to take next.

image

Google Flights app offers users clear all filters to find flights

8. AppStore / GooglePlay


30. Icon for the application

You need to design a catchy icon for your application, something that reflects the essence of your product and arouses interest among potential users.

image

Monument Valley is a beautiful game, and the OS app icon is perfect for the wonderful adventure you're about to take.

Source: https://habr.com/ru/post/474472/


All Articles