Mobile UX Design Checklist. 13 things to keep in mind

This article is intended to:

  • People, looking for some Mobile UXD information, tips and answers
  • For those who are willing to avoid common usability pitfalls
  • Provide customers with a list that will help them to describe their requirements in a better way and provide them with a better understanding of a job done by designers squad

1. App icon



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.

2. Splash Screen




Eye2eye chat by Django Stars — Google Play / App Store | ShareTheMeal — App StoreThe 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.

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 DribbbleIn 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 DribbbleMake 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.

Do you have something to add? Feel free to leave us your comment below

You are in one click from Django Stars knowledge base

Comments