The mobile app market spans almost every aspect of life — communication, health, finances, shopping, education, travel, entertainment, government services, and so on. With each passing day, the demands for speed and convenience of mobile apps are growing, and if an app is found lacking in usability, users quickly switch to another, given the vast array of choices available.
How to design a mobile app to meet user needs, how to structure processes, and what mistakes need to be avoided — Vlad Kovin, the UX designer and Product Owner of the Bilderlings mobile app is answering these questions.
Research and “Tag Cloud”
In broad terms, the preparatory work, under circumstances where there are no resources for extensive research, looks like this:
- Find out what people need (for example, by talking to colleagues who are in direct contact with customers);
- Study how people are accustomed to do this (look at what competitors do);
- Constantly communicate with colleagues who know more than me.
In mobile app design, there’s no need to reinvent the wheel: it’s crucial to understand what people are accustomed to! Specifically, how people are used to doing certain actions. Use familiar, well-established patterns, gestures, and interactive elements.
For example, to refresh a page, people are accustomed to pulling down from the top. And to make a payment, a person is used to “tapping” rather than “scrolling” or “swiping”. There’s no need for “slide to pay” — we already have the habit of “tap to pay”.
If you see a color-saturated, rectangular, or rounded-end object with text in the middle, you automatically perceive it as a button: you’re accustomed to the idea that this object needs to be pressed on.
And there are many such nuances. When working on the design of an app, you study all these details from others, take screenshots, and compile a sort of “tags cloud”: what generally should be in the app, various sections, functionalities — everything in one place.
This “tags cloud” grows through conversations with colleagues: you ask about what is needed, what is possible, how data is obtained, and how things are structured.
Then, you start to spin this “cloud” in your mind’s chambers like Sherlock Holmes, organizing it into a structure.
Initially, everything is in a pile, somewhat chaotic, but then you begin to structure it, find unifying factors, and eventually, a hierarchical structure emerges where connections and logical separations become apparent. You can then move on to creating so-called user flows in the form of flowcharts — where a user might click and where it will lead them.
Now we have enough information to move directly to creating screens that will display the information and functionalities we’ve identified in the flowcharts. From these screens, we’re ready to create a prototype and test it with real users. It’s also essential not to forget to describe all the logic, show all the possible states, and highlight unobvious nuances.
In the end, we obtain a complete set of information that allows us to organize the working out and describe tasks for different team members.
What Young Designers and Developers Should Consider
It might not be obvious, but the most crucial skill in mobile app design is the ability to seek information.
There is no education that teaches everything, there is no website that answers all the questions. You need to be able to search for everything on your own — and be able to find it.
There are two main devices for which we create interfaces — those from Apple and Google. And each has its own recommendations: what we, as designers, need to consider to ensure the interface is organic and doesn’t disrupt the consistent user experience.
Consider this: if every app was as it is, as a separate universe, people wouldn’t enjoy using an iPhone. Therefore, it’s in Apple’s interest to impose its logic, philosophy, and design language.
Thus, Apple and Google have their guidelines: Human Interface Guidelines and Material Design. These documents cover everything: from the general concept and ideology to specific details, including contrast, sizes, and so on.
Context and User Psychology
If I want my service to be used everywhere, I need the designer to adapt the product for all platforms. But not just adapt; it should be done considering how the context of use changes depending on the platform.
If you’re running to catch a train and doing something in the app on the go, it’s not the same as when you’re sitting in an office chair scrutinizing a bank statement. The context is different, the goals are different, and the way to achieve these goals is different.
Therefore, in a web interface, you can use more information, more comprehensive, and more serious. Because sitting in front of a monitor, a person is more prepared to delve into and analyze. This determines not only the information you present but also the functionality and visual solution.
From a smartphone, people need simple and quick actions: like sending a small amount of money to someone, something like that. It needs to be as contrasting, large, and clear as possible — without tiny gray text that requires squinting, thinking, making complex decisions, no multiple choices. Ideally, a single bold button. Like installing apps in Windows, you just press Next, Next, Next, without reading too deeply or agonizing over choices at each step — the path should be simple, and the cognitive load needs to be minimal. The same logic is needed for smartphone use, where a person fearlessly, without making any special intellectual effort, presses the obvious button.
When someone has a problem they want to solve — say, planning their day — they start searching and find a whole page of apps offering them solutions. In these hunger games, only one app survives: the one that is most convenient for the user.
Bad Practice
One could compile a giant list of all the mistakes found in mobile apps, but here are a few from literally recent experience.
- When an online shopping app redirects you to a browser while searching for a product. This is a basic customer need: to find a product. And it’s very inconvenient when you’re thrown into a browser with this need.
- When an online shopping app, upon searching for a product, shows you an entire category instead — they’re selling you the idea of how great these products are, but there’s no option to click on a specific one and buy it immediately.
- When one brand has two different apps. For example, a chain of offline stores. They have one app where you can monitor discounts/promotions, and another where you register a loyalty card. In the end, you always mix up which is which, get frustrated, and it’s easier just not to use them.
