What are the main differences between the design of web and mobile applications? What are the main mistakes that designers make that interfere with the perfect user experience? The main secrets and life hacks of mobile app design reveal Maria, Head of UX / UI design at Softvoya.
In your own words, who is a UX / UI designer and what are their main responsibilities?
Maria: A UX / UI designer is a psychologist who builds a bridge between the requirements of a business and a person who uses the product.
The designer’s job is not to force the user to think too much and react intuitively.
A product can have an infinite number of functions, and 80% of users may not need most of them. If the product is available, understandable and covers the needs of both an experienced user and someone who is familiar with technologies, then the designer has successfully completed with their task.
With the increase in the number of smartphone users, we see a large increase in the number of mobile applications. What are the main differences between the design of web and mobile applications?
Maria: Creating web applications is like making a spaceship. We are used to seeing a lot of information on the computer screen. If it is well structured, it is easy to process it and figure out how to navigate to the desired function or section. A person sitting in front of a computer usually has more time.
Mobile applications are the minimum that a person can process quickly. Users should be able to receive or send the necessary information without a lot of fuss, they do not need to keep unnecessary things in mind when navigating through the screens, everything necessary should be in sight, while being presented concisely and in the expected place.
It is better not to transfer complex functions that are easier to perform on a computer into a mobile phone: they are unlikely to be used, but if they are, users will not thank you for that.
Describe the process of creating a mobile app design in Softvoya in accordance with the agile methodology.
Maria: In a world with ideal clients who understand that design is not just beautiful pictures, but also well-defined logic, navigation, solved user problems, design begins with research.
We conduct market research, study our competitors, identify product goals and determine the target audience: this is a joint work of a designer and a business analyst.
The clearer business requirements are formulated, the less likely it is that the client will be disappointed with the outcome.
After receiving the analytics and research artifacts, you can start developing prototypes. At this stage, the application structure and navigation are being worked out. Even with the very top-level rendering of prototypes, at this stage, you can immediately avoid further errors in the user journey and make adjustments even before the development begins. After that, it remains only to technically implement what you have planned, without inventing anything on the go.
Prototypes can be:
- Low-fidelity: to show how user can switch to functions and blocks;
- High-fidelity: almost ready-made screens with structured information.
After prototypes are approved, several UI proposals are created to coordinate the client’s vision of the future product. At the same stage, a brand identity can be developed if necessary. Based on the selected colors, typography, general style, graphic elements, a UI-kit is created. UI-kit is some kind of library of components and styles for the future product.
When it is ready, the designer just needs to connect UI and UX and send it to the customer for further approval. At this stage, in close cooperation with the business analyst and the client, several rounds of edits usually take place, changes can be made both in the user flow and in visual parts to possibly simplify the development. As a result, we prepare mock-ups for transfer to development
During the development stage, the designer’s work does not stop: they must periodically monitor whether the logic and user interaction is correctly understood, if UI is correctly implemented, whether the states and behavior of the components correspond to the UI-kit. Upon receipt of the working functionality for the demo, the designer can help the QA in testing.
As for working on agile, I haven’t used this methodology on small products, only on fairly large-scale web- and mobile applications. Yet, the approach is no different from the development process: we take tasks on each sprint and provide ready-made layouts at the conclusion (only they are not considered an increment and are not demonstrated during scrum events).
Design is a part of the overall process. Designers, just like developers, participate in the planning phase, attend daily meetings and discuss problems and the recommended solutions.
What are the main mistakes that designers make that interfere with the perfect user experience?
Maria: There is no perfect user experience. There is always a person who will write to support that nothing is working.
- Missed stages of design development and requirements lead to errors. Wrong logic, gaps in the user journey or conflicting requirements.
Very often, too much time is spent on a beautiful wrapper with broken functions. The user does not care how beautiful his animation is, especially when this animation is on the endless loading screen.
- What seems absolutely clear and intuitive to the designer and developer is not always clear to the user. It is always necessary to conduct testing on a real independent audience to gather the most honest feedback.
- Ignoring the visual part: the user processes information more efficiently when it’s supported by graphic elements. Users don’t like reading large chunks of text.
- An undeveloped interaction: if users do not see a response from their actions, it will feel like they are doing something wrong.
- The user always has the right to make a mistake. If, in case of an accidental miss, they can not fix it in any way, they will delete the application and not download it again.
- If registration/authorization path is too long, you’ll lose their interest. Users who have just downloaded the application don’t know what is waiting for them inside. If you hold them at the entry stage for too long, they will not continue into the application.
- Always enable pre-filled fields. There is no need to force the user to guess why this or that field is constantly hitting an error, for example, “wrong format.” It is better to explain right away what is required, in the placeholder, inside the field, or under the description.
- Avoid using patterns that are not native to mobile platform users. Often, to speed up the development of an app, teams create something between iOS and Android: as a result, we get dissatisfaction on both sides, because we break the simple path that is familiar and routine for either platform users.
Is there a different approach to designing apps for Android and iOS devices? What are the features of these platforms?
Maria: When designing a user-friendly application, it is necessary to follow the platform guidelines: Human Interface Guidelines (HIG) for iOS and Material Design for Android. Using native components greatly facilitates development and user experience.
There are things that can be reduced to the common denominator and generalized on both platforms, but still, most of visual and behavioral components are very different. This also applies to navigation: now in iOS everything is built on gestures, there are no buttons at all. For example, going backward by swiping from left to right is a very common pattern for iOS users, while for Android users it will be more intuitive to reach for the back button in the lower right corner.
The navigation inside one screen is also different. On Android tabs are used, between which you can navigate by swipe, on iOS this is a segmented control.
Different screen aspect ratios, typography (Roboto-Material, San Francisco-HIG), rounded corners. The material UI has a wider range of using shadows, one of the main characteristics of “elevation” is responsible for this-the height of raising the element above the surface, when navigating the user literally sees how the screens overlap one another.
Tell us about the main trends in mobile app design in 2021-2022.
Maria: It’s better to use trends to fill your portfolio with beautiful pictures. On Dribbble, for example, trending shots become popular faster and easier. In most cases, these techniques become obsolete very quickly.
What can be used:
- Custom illustrations and icons. It’s hard to miscalculate this, stock photos and vectors have already blurred everyone’s eyes, and it’s always nice to see unique rendered pictures that reflect the brand and corporate identity of the product;
- Glassmorphism: use minimally and very carefully. When applied to a complex background, a very beautiful effect is created. As a good example, I would mention the native iOS menu where it is used.
- Minimalism and simplicity.
The design should be built around content, correctly emphasized accents and without scattering the user’s attention. White background is the best. Pay attention to the trend in the redesign of the largest platforms, most have removed the accent color from the background and kept it only in places where it is most appropriate, thereby making the interface cleaner and more airy. Examples: Youtube, VK, Twitter, Dribbble;
“A good interface is one that is not visible.”
- 3D illustrations: even very simple and accessible forms serve well as a capacious graphic element, for example, on empty screens or error screens, even in non-entertainment applications:
- SVG and JSON animation: another improvement in the user experience is appropriate animation of interface elements. SVG and JSON animation is created by code. It is easier to process (since it is minimal in weight and size), scalable (since it is created based on a vector), and universal to use on different platforms. For example, Lottie is a library from Airbnb for Android, iOS, Windows, which analyzes Adobe After Effects animation exported as JSON and displays it on mobile devices and on the Internet.
In conclusion, I would like to say: 25% of users who download an application open it only once, delete it and never return again.
That is why it is important not to forget the 3 “C” rules when designing mobile apps: consistency, clarity, content.
We do not break the usual user patterns, we create an application with a simple and intuitive interface (consistency);
We avoid overloading the user’s path with unnecessary actions and screens with unnecessary information (clarity);
We place the expected blocks in the expected places, supplement the text with laconic graphic elements (content).
And as a result, we avoid losing 25% of users, but we keep their engagement thanks to a positive user experience (UX), a visually pleasant UI and positive emotions that the application provides.
