Mobile App Design: The Ultimate UX / UI Guide
Mobile application design is essentially the creation of a mobile version of a website with additional features. At the same time, the main task of developers is to create a convenient ecosystem with a perfect UX.
By downloading an application, the user is loyal by default: he has already performed the target action, and if he can solve his problem with the help of your service, he will use it on a regular basis. However, if at least one section on the client s path does not work or is inconvenient, the person will simply delete your application and never return to it.
This is the fundamental difference between the UX design of websites and applications: as a rule, the user evaluates the convenience of several web products, and even if the person did not perform the targeted action during the first visit, there is always the possibility that after a while he will return to your site. That said, re-downloading applications is the exception rather than a common practice.
Audience analysis and application UX design
Before moving on to the prototype, the designer must conduct an analysis of competitors, target audience and the tasks facing the application. For example, if the target audience is women, then buttons and other elements of interaction can be made smaller, if men are larger. Most users press on the screen with their thumb, so such a small detail will help the male audience to interact more comfortably with the service.
At the stage of UX development, the designer must think over the entire user journey from the initial acquaintance screens to the implementation of targeted actions, of which there may be several in the application. As a rule, User Journey is a branching tree of opportunities with different functionality: subscribing to an application, contacting support, reading text, paying for goods, and so on. And each “branch” should be well thought out already at the prototype stage.
There are several important details in interface design that the designer and the client should be aware of:
- the main application controls should be at the bottom; the upper left corner in the App design is used minimally and only for certain purposes, for example, the “Back” button, since it is difficult to reach for it;
- control is not necessarily performed only with buttons; In the application, the user can swipe or hold certain elements to control;
- applications can be scrolled from bottom to top or from right to left; if you are using side scrolling, you should give the user a hint;
- the logo should not be duplicated on all screens of the application; it is enough that your brand will be on the service icon and on the loading screen;
- fonts should not be unreasonably small; for headings in web studio IGNI we usually use 18 – 24 px font, for body text – 14 – 16 px, for tips – light gray fonts 12 – 14 px; it is also worth using font weight differentiation for visual accents;
- colors should be diversified and natively suggest to the user which elements are clickable and which are not; also different in meaning elements are distinguished by color;
- hints are good; if there is a possibility that the user will click on a non-clickable element several times or you have non-standard controls, add a tooltip.
UI design of the application and creation of responsive versions
After you ve designed the interface, you can move on to the visuals and clean up the application. The main task at this stage is to bring the design to a single Style Guide.
It is advisable to use no more than 5-6 types of one font (different sizes, colors and thicknesses) and 4-5 colors for the entire application. This is enough for highlighting and creating a neat interface. It is also worth considering the animation of the transition from one screen to another: disappearance, displacement, preloader, etc. When choosing colors, it is also worth considering that the color palette of the Iphone is usually better than the palette of Android devices, which means that you need to abandon dirty and adjacent flowers.
At the final stage, adaptive versions are developed. If the application is available only for iOS, you are in luck, because at the stage of creating adaptives, you only need to draw two versions: for Iphone 6 and Iphone X. However, if your task is a service for Android, you will have to select 4 – 5 most popular resolutions in specific segment of the target audience.
An important stage of UX design is testing the usability of the finished interface. It includes the evaluation of the prototype for a number of parameters:
- efficiency – achievement of tasks by the user;
- effectiveness – the time spent on achieving the goal;
- satisfaction with service quality and user experience.
The simplest option for conducting test sessions would be to create clickable prototypes in Figma and record the process of using the service with subsequent feedback. However, there are also more advanced services that broadcast the process of user interaction with the application in real time, for example, Userlytics, TryMyUI and UserTesting.
After that, the designer s mission in creating mobile applications is considered complete.