The user interface, or UI (User Interface) is the appearance of the product, a way of communication between the user and the program. And the interface also affects whether the product will bring money and enjoy the respect and love of the audience.
It is convenient to prove the importance of design as a magnet for users using the example of social networks with millions of users. The redesign of Kinopoisk became a resonant case in Runet. 96% of negative reviews on it speak for themselves: the owners of the site, the Yandex company, did this without regard to the opinions of users.
So, let’s take a look at the features of the UI development services step by step.
Design
At this stage, you will find a lot of theory, hypotheses and speculative conclusions that have to be confirmed or refuted. These conclusions relate to the functionality of the product and stem from the questions: “Why is this product needed?”, “Who needs it?”, “How will users work with it and solve problems?” and “How will it earn for its owners?”.
Investing time and money in design is investing time and money in understanding what will come out.
Drawing up a portrait of the target audience (TA) will help answer most of these questions – the very people for whom the product is being made.
The main task of designers when studying the audience is to turn on empathy to the maximum and understand how this audience thinks, breathes, sees, hears and acts. The following methods contribute to this:
- Corridor method. Feedback comes from family, friends and fellow designers. It’s easy to assemble, but it’s not enough.
- Conversation with you. It is fair to assume that you know better than anyone what your audience needs.
- Field studies. As part of the method, designers go to the people: communicate with people directly if they are making a product for the local market, or read forums if they are for a foreign one;
- Problem interview. By asking users questions about their lives and the place of the problem in it, designers will find out how this problem is being solved now and how useful their product will be. The fact that it can turn out to be useless is also a valuable result: you don’t have to spend money on an application that no one will use.
- Designers process the collected information and receive, firstly, key persons, and secondly, user routes.
Key persons are characteristic representatives of the target audience. They may be different in profession, standard of living, motivation to use the application and other parameters, but the experience, expectations and fears of each person form the basis of the appearance of the product and its functionality.
Prototyping
A prototype is a sketch of a product that encapsulates its appearance, operation logic, and main functionality.
Work on it begins with the creation of a layout. One of the layout options is a wireframe (from the English wireframe – “wireframe”). Outwardly, it looks like a bunch of rectangular blocks surrounded by lines and arrows. These blocks and arrows contain the structure of the product and the order of user interaction with it.
Whether the wireframe is a rough sketch that you made with pen and paper for a printer, or an organized map of screens created in a graphics editor is up to you. The only thing: be prepared to explain to the client that visually the wireframe has nothing to do with the final product.
Using the terms of electrical drawing, all buttons, texts, media files and other elements have been replaced in the wireframe with conditional graphic symbols. This is not an interface yet, but something close – like a Christmas tree that will become a New Year’s tree when it is dressed up.
The detailed prototype is the wireframe’s next step up the UI evolution ladder. Like a wireframe, this is a layout, but a little more specific: if in a wireframe the chat screen consists of circles and rectangles that only hint at their purposes, then in the detailed prototype the circle is EXACTLY the user’s photo, and the rectangle is EXACTLY the text of the message with attached files , audio recordings and stickers.
Showing screens is not enough to present a prototype. It is necessary to show what and where the interaction of the future user with interface elements leads to. By connecting the elements with lines to other screens that the user enters, you will get user scenarios for using the application, or user flow.
User flow is a navigation map that shows the behavior of the user of the mobile application, how he achieves the goal and how easily he succeeds. Externally, the User flow looks like logically connected rectangles, in which the emphasis is on user actions.
In the future, this map will be useful for testers to compare with a working application in order to check if some action is lost or if the logic is broken. At this stage, the user’s path is optimized: unnecessary steps are eliminated, unnecessary functions are removed, and similar ones are combined into one step.
To recap: you get a detailed prototype, its clickable version (optional) and a screen map. They correspond to the product hypotheses developed and agreed within this stage.
Most often, a pool of user cases is also formed, target segments are described, and user behavior in the system is modeled. In addition, the stage is accompanied by technical design, synchronized with the processes above.
Everything is documented as artifacts: terms of reference, functional task, architecture description, and so on. With the help of this, we make sure that what we have designed is not only supported by arguments from the market and users, but also technically amenable to implementation, and we have an idea of how exactly to do this and what the risks might be.
Developers receive a prototype and user flow from designers in order to accurately assess the development stage and navigate the product logic. Then the style begins to roll on the future product.
As in the case of the prototype, the finished design is agreed with the client. When everyone is happy with everything, the design is prepared for transfer to the developers.
Stylization
The prototype has logic, but it does not have its own face, which the product will show to users, and the voice with which it will speak to them. By face and voice, we mean corporate identity, which consists of a color palette, font, icons and illustrations.
This is where the mini-stage of the design concept begins, which we talked about above. Its essence is to take a few blank screens of the prototype and try on the corporate identity on them. If the client likes what he sees, then the design team works with the rest of the prototype in the same direction.
Conclusion
Ordinary people will primarily use the product, not its creators. Being simple people, while working with a product, they will run it through a filter of three questions: “What to do?”, “Where to go?” and “Where to click?”. If you are serious about the stages of work on the interface, your users will receive a clear answer to these questions and will be satisfied with the product.
“What to do?”
This is a question about how the user understands the main function of the product. You need to designate it at the design stage – at the same time when the target audience is determined.
“Where to go?”
The path to the goal lies through the interaction of the user with the interface. Button after button, input field after input field, screen after screen – and so on until the cherished purchase or publication of the post. A well-designed user scenario, rehearsed on a prototype, will remove all bumps from this path.
“Where to press?”
A button with a target action is different from other elements on the screen. How to emphasize the difference – color, size or shape – is up to the designer at the design stage.
