Mobile app design is essentially creating 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 perfect UX.
When downloading an application, the user is loyal by default: he has already completed 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 of the customer journey 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 complete the target action during the first visit, there is always a chance that after some time he will return to your site. However, re-downloading applications is an exception rather than a common practice.
Audience analysis and app UX design
Before moving on to a prototype, the designer must conduct an analysis of competitors, the target audience and the tasks facing the application. For example, if the target audience is women, then buttons and other interaction elements can be made smaller, if men are larger. Most users press the screen with their thumb, so such a minor detail will help the male audience interact with the service more comfortably.
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 complete the target action during the first visit, there is always a chance that after some time he will return to your site. However, re-downloading applications is an exception rather than a common practice.
Audience analysis and app UX design
Before moving on to a prototype, the designer must conduct an analysis of competitors, the target audience and the tasks facing the application. For example, if the target audience is women, then buttons and other interaction elements can be made smaller, if men are larger. Most users press the screen with their thumb, so such a minor detail will help the male audience interact with the service more comfortably.
At the UX development stage, the designer must think through the entire user journey from the initial introduction screens to the completion of target actions, of which there may be several in the application. As a rule, User Journey is a branching tree of possibilities 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 client should be aware of:
the main application controls should be at the bottom; the upper left corner in App design is used minimally and only for certain purposes, for example, the “Back” button, since it is difficult to reach;
control is not necessarily performed only using buttons; In the application, the user can swipe or hold certain elements for control;
applications can be scrolled both from bottom to top and from right to left; if you use a side scroll, you should give the user a hint;
the logo should not be duplicated on all application screens; 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 the IGNI web studio, we usually use a font of 18 – 24 px, for the main text – 14 – 16 px, for tooltips – light gray fonts of 12 – 14 px; It’s also worth using differentiated font thicknesses for visual accents;
colors should be diversified and natively tell the user which elements are clickable and which are not; Also, elements of different meanings 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.
There are several important details in interface design that the designer and client should be aware of:
the main application controls should be at the bottom; the upper left corner in App design is used minimally and only for certain purposes, for example, the “Back” button, since it is difficult to reach;
control is not necessarily performed only using buttons; In the application, the user can swipe or hold certain elements for control;
applications can be scrolled both from bottom to top and from right to left; if you use a side scroll, you should give the user a hint;
the logo should not be duplicated on all application screens; 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 the IGNI web studio, we usually use a font of 18 – 24 px, for the main text – 14 – 16 px, for tooltips – light gray fonts of 12 – 14 px; It’s also worth using differentiated font thicknesses for visual accents;
colors should be diversified and natively tell the user which elements are clickable and which are not; Also, elements of different meanings 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 adaptive versions
Once you have designed the interface, you can move on to the visual component 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 the same font (of different sizes, colors and thickness) and 4 - 5 colors for the entire application. This is enough to place accents and create a neat interface. It is also worth considering the animation of the transition from one screen to another: disappearance, displacement, preloader, etc. When selecting colors, it is also worth considering that the color palette of the iPhone is usually better than the palette of Android devices, which means you need to abandon dirty and adjacent colors.
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 adaptive images you only need to draw two versions: for Iphone 6 and Iphone X. However, if your task is a service for Android, then you will have to select 4 - 5 most popular resolutions in specific segment of the target audience.
Once you have designed the interface, you can move on to the visual component 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 the same font (of different sizes, colors and thickness) and 4 - 5 colors for the entire application. This is enough to place accents and create a neat interface. It is also worth considering the animation of the transition from one screen to another: disappearance, displacement, preloader, etc. When selecting colors, it is also worth considering that the color palette of the iPhone is usually better than the palette of Android devices, which means you need to abandon dirty and adjacent colors.
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 adaptive images you only need to draw two versions: for Iphone 6 and Iphone X. However, if your task is a service for Android, then you will have to select 4 - 5 most popular resolutions in specific segment of the target audience.
Usability testing
An important stage of UX design is usability testing of the finished interface. It includes evaluating the prototype according to a number of parameters:
efficiency – user achievement of tasks;
effectiveness - time spent achieving the goal;
satisfaction with the quality of service 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 in real time the process of user interaction with the application, for example, Userlytics, TryMyUI and UserTesting.
After this, the designer’s mission in creating mobile applications is considered completed.
An important stage of UX design is usability testing of the finished interface. It includes evaluating the prototype according to a number of parameters:
efficiency – user achievement of tasks;
effectiveness - time spent achieving the goal;
satisfaction with the quality of service 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 in real time the process of user interaction with the application, for example, Userlytics, TryMyUI and UserTesting.
After this, the designer’s mission in creating mobile applications is considered completed.
