The Essential Mobile UX Design Checklist

13 things to keep in mind

Don’t be shy to put some efforts in creating a custom design for your app icon. Make it easily recognizable among other apps on the relevant app store and user’s mobile device. Be sure to keep it simple, with a single focus point and avoid transparency. Do not forget to test your icon vs different wallpapers. It should look amazing regardless of the background image your end user will choose.

Continue reading this article about UX design checklist on Django Stars blog.

2. Splash Screen

Eye2eye chat by Django Stars — Google Play / App Store | ShareTheMeal — App Store

The first decision here is if the splash screen is actually needed. Think of the actual use cases of your app. Is your app designed for a quick access to some data? Is it designed to push users to make some actions? Do not use a splash screen that simply wastes user’s time. Use it to show the application’s loading progress or as an appeal to user’s feelings and emotions, to prepare them for a journey through your app as the Share the Meal app does.

3. Neat interface

Dating app by Django Stars — on Dribbble

“Simplicity is the ultimate sophistication” — William Gaddis said. Make things clear and easy to interact with. Every extra button, form, image or any other part of the interface makes the screen looking bulkier and adds more pressure on user’s attention, which should be directed appropriately. Keep all the most important things on the main screen, try to hide all the secondary.

“Simplicity is the ultimate sophistication”

4. Content is legible

Text should be legible for users to be able to read it with no zooming. Recommended font sizes and tips are described in details in the following official recommendations by Apple and Google.

5. Forms

Forms should be as easy to use as possible. Input field’s height and width should be selected accordingly. Once again Apple and Google did a great job to provide you with the recommendations. Form should provide you with the understanding of where you are right now, and what will be next. Autocomplete is the good choice to save user’s time, while including autocorrect will become an additional pain for the end-user. Type of data that user is going to enter in some specific fields matters. That’s obviously nice to have “@” and “.com” buttons on your keyboard, while filling down the email form and the numpad while putting in the phone number. And finally, try to avoid the manual data input where it’s possible (e.g. locating address via GPS).

6. Images

App concept by Django Stars — on Dribbble

In case we are talking about the “selling” app such as online shop, food delivery, etc. — images should be in the highest resolution possible to provide the most detailed view of what you are actually trying to sell. Zoom-in photos is a great idea to give your users a better look at the product. Pick a default image that is shown in full size and display clickable thumbnails that produce enlarged images A thing to consider here is the geolocation of your main user group. In some countries internet connection speed doesn’t give an opportunity to load highly detailed images fast enough.

7. Do not forget about white spaces

White space is an area with no content, that performs an important function — adds a neatness to design and helps to set priorities visually (it creates a clear hierarchy of where to look first and where to look next), while also preventing users from random misclicks.

8. Empty States

These not only make the screen look more esthetic but provide users with important info and guidelines. Make sure that user is always in the know of what’s happening or what is missing on the every step of interaction with your app.

9. Good color contrast

Timedom booking app by Django Stars — on Dribbble

Make sure to keep a solid contrast between the font and the background color. That will make your text better for perception. The W3C recommends the following contrast ratios for body text and image text:

Small text should have a contrast ratio of at least 4.5:1 against its background.
Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

10. Navigation

Navigation through the app should be natural and represent the common ways to interact with the OS chosen. Do not move the navigation controls to unexpected places — that will just disorient the user. While planning the way of placing the navigation elements you should also consider the hand position. It will be different on the mobile phone and tablet, same as in the portrait and landscape layouts.

11. Portrait/Landscape layouts

Decide if you really need both types of layout. We recommend you to deny the layout changing option in the applications with a complex UX architecture, that has a lot of navigation elements (for example facebook, which has even made its Messenger as a separate app to make the interface of the initial app less cluttered) as it will lead us to the dramatic loss of space for the content. In case of multimedia applications such as Youtube, where the user spends most of time viewing the content, instead of navigating through the sick amount of options — things goes the opposite way and adaptation is required. Also, do not forget that landscape layout forces you to use both hands for manipulations, that will affect the controls positioning.

12. Confirmation of the deleting actions

Even in case your tap targets are big enough and the distance between those are solid there is always a chance for a “user error”. Implementation of the confirmation step (this may also include the undo option) for the destructive actions is essential.

13. Do not request to rate your app too quickly or too often

Give users some time to form their own impression of the app. Avoid the frequent, annoying, iterative CTA process.

The article is written by Dmytro Puchkov(DMYTRO PUCHKOV) — UI/UX Design Lead at Django Stars. This article about ux design checklist is originally posted on Django Stars blog.

Specially shared with Hackernoon community.