UI development
UI development
UI development

To develop a mobile application, create a computer program or a microwave interface - in practice, these are absolutely identical processes. For this, similar approaches and design methods are used.

What is UI

Speaking of user interface, I mean the way of communication between the user (human) and the program.

The User Interface is often understood only as the appearance of a program. However, through interaction with the interface, a person gets an impression of the product as a whole. User interface development combines many elements and components that can affect the implementation of a software product. And the interface also affects whether the product will bring money and love to the audience.

Why UI is needed

For example, to take a chair and move it to another corner, we do not need any interface, but only our hands. And we are accustomed to such direct control of physical objects. But in the modern world, faced with more complex objects, only hands are not enough for us. If you want to turn on the TV - take the remote control, if you want to make a call to a friend - take a smartphone, open contacts and so on. Interfaces surround us everywhere, helping us to control objects using buttons, sensors, a computer mouse, and even voice. At its core, the user interface is in a simplified form of a "smart machine" that understands the commands of a person and gives him relevant information. And in order for this “machine” to work for you and me, it needs to be made convenient and understandable.

The process of designing a user interface is a work with a certain sequence. The task of developing an interface is to make it useful, intuitive and as simple as possible. There will be room for creativity, but any creativity in this process must be justified either by money or benefit. User interface development is divided into several stages.

Stages of user interface development


Any project begins with the development of its concept - without understanding the purpose of the product being developed, it will not work. The collection of information about the product being developed begins with answers to the questions “for what?”, “To whom?”, “How?”.

Last but not least is the question of monetization. Since the owner of a particular product for which we are developing an interface will be interested in profit.

At this stage, data about users, their preferences, lifestyle, habits, and professions are analyzed. Since the user interface is primarily focused on the person, the designer needs to know what the user wants to receive, and what the business wants to receive. Implement the received requirements in the project.

User audience research methods can vary, ranging from collecting user data through focus groups, analyzing counters and metrics, and ending with direct observation. Generalized experience in interface development will tell you to focus on the following ways of collecting information:

 - Interviewing. Poll of a potential user. In some cases: friends, colleagues, relatives. Questions like: “how are you solving the problem now?”, “what does not suit you in existing services?”. No closed-ended questions, no “would you use the product?” questions, and no “what would you like?” fantasies. Otherwise you will!

 - Business. Conversation with the customer of the project, with interested parties. These are the people who initiate the work of the project and are responsible for the performance.

 - Internet. Peep something from competitors, study reviews of an existing product. See how it's done and try to guess why.

 - Case study. Examine the working materials related to the product. These can be marketing plans, market research, specifications, technical documentation. Everything related to the subject area of ​​the project.

As information is collected, signs of key people, or representatives of the target audience, will also be collected. They are also typical users who can have a different standard of living, any profession. They are united by a range of tasks to be solved, they will get the maximum benefit from the same functionality. By highlighting the set of characteristics of one of the key people, we place it at the center of the user story. This will be a user story, including a story about the person's interaction with our product.

Approximately here it is good to understand what tasks the interface solves in the context of work. This is a very convenient framework for formulating tasks. As if the product was doing the job - Jobs To Be Done. He does not rely on the personal qualities of a key person, but explores her motivations, needs, problems. A microwave oven heats food, a train delivers from station A to station B, and it is better to abolish all other interface actions.

Ultimately, the goal that the user wants to achieve in given circumstances using the interface is formulated. The stages of performing “works” of user interaction with the interface are added up in a Job Story. Job Stories are context sensitive.

Presentation of the interface through the prism of UX / UI design

By combining the information received, we have a user scenario in our hands (User scenario), which will help us already pave the user's route to achieve the goal, that is, to form the skeleton of the interface.

In fact, at this stage, the basic logic of the future interface is laid, which the UX designer will have to work out. User Experience should bring to life a user scenario - a detailed description of the possible options for user behavior when interacting with the interface. Successful user interface design depends on how well the UX designer can understand the person, calculate their possible actions and make the software product convenient and useful.

With the help of blocks and arrows, it clearly demonstrates each step of the future user, shows additional routes. What should the warframe (or layout) look like? You can draw on paper with a pencil. It is important that the structure of the product paths is reflected in the warframe.

The presentation of the prototype of the developed interface will show how the future user interacts with the interface elements. To do this, the design team draws up a map of screens connected by lines and arrows. Such a map, or user flow, describes in detail the expected actions of the user and the various reactions of interface elements to them.

By the way, it is always useful to make a prototype map also because testers check it in the future. For example, when checking a working version of a mobile application, extra steps and unnecessary functions may be revealed, which are excluded from the user flow.

UI (User Interface) - design is the visual embodiment of UX design. Often these tasks are carried out by the same person, so the line between UX and UI is barely visible. And yet the difference is that the UI designer is responsible for the graphical controls, decides exactly how each screen (of a mobile application), page (of an Internet site) will look like, whether anyone can intuitively understand your interface without reading instructions. . Here confusion can arise, since the development of the entire interface and the development of its visual part are called UI in different sources, and only sometimes the visual component is called correctly - Visual design.

Here is a simple household example. Ordinary iron with a steamer. At what point the iron will automatically release steam from the holes in the soleplate, where the spray button will be located, is the responsibility of the UX designer. But what shape, what color and size this button will be, will be decided by the Visual or UI designer.


Wireframes are sometimes referred to as a prototype, which is what a UX designer does. Sometimes they are interactive prototypes that look and work almost like a finished product. This paragraph is about the latter. And this stage is UX again.

Prototyping the user interface will take us one step closer to the final product. However, at this stage, you should not rush, but think through each action. The mistakes and shortcomings made now will only multiply, and it will be extremely difficult and costly to eliminate them in the finished product.

If necessary, a detailed prototype can be made interactive. In practice, this happens quite often, because there is a need to test the interface "in combat conditions". In the case of a mobile application or website, the interactive prototype should be clickable. Then you can both evaluate the logic of the product and understand how simple or complex the interface turned out to be, where the user “stumbles” and, of course, draw the appropriate conclusions.

Analysis again

The success of good design lies in simplicity. A user does not notice a great design, because in practice it is important for a person that the design is convenient and understandable, so that they do not need to be distracted by a large number of elements, but simply perform their tasks, achieve the desired goals from the product and be satisfied. You can explore quantitatively using analytics tools like Google Analytics, or you can do it qualitatively. Ask a person to implement a simple task with an interface and see how he copes.


Hire UI developers here