Table of Contents
UX or UI: stages of development
Let’s start with understanding what UX / UI design is, how UI and UX differ, and how they are related to interface design. And we will also check out how does SECLGroup.com team create web services, adaptive sites, and mobile applications. UX design (User Experience) is responsible for how the interface WORKS. UI design (User Interface) is responsible for how the interface LOOKS.
One part cannot exist without the other. Now it is hard to imagine that you can develop an interface and not think about how it will look, and vice versa – design the UI in isolation from UX design.
To understand what is included in the UX part and what is in the UI, let’s analyze all the stages of interface design.
Interface design stages
The user interface designer is flexible in his planning. This implies that he can select a different set of measures to address a particular issue. The four steps of a designer’s process are research, design, visual design, and solution verification.
For a detailed study of the task, the interface designer uses various UX research tools: interviewing future users, studying competitors and the subject area, and analyzing the product and existing problems.
The designer is looking for insights. That is, it understands what exactly the user needs and whether the method of solving the problem that the customer defined is suitable for him. The interface designer necessarily communicates not only with the customer but also with the potential user of the product.
At this stage, there will be calls, meetings, clarifications of the task, and new details. At the end of the stage, they will gather into a single picture of wishes, requirements, and restrictions.
Let’s imagine that a designer has received a task: to design a mobile application and a landing page for clinical diagnostic laboratory service. Users of this application should be able to order and pay for tests, call a doctor at home, view old test results, and add another user to the application, such as a child.
During the discussion of the task with the customer, the designer will ask why these functions cannot be added to the personal account on the site, and why it is important to put them in a separate application. From the customer, the designer learns that the application is a hypothesis. If the majority of users start ordering tests through the application, it will be improved, new features added and the application expanded.
At the stage of preparatory studies, the interface designer visualizes the task algorithm. Here he can apply different tools, for example:
- a step-by-step user scenario (User Flow), to visually see the user’s path from registration to purchase;
- a user experience map (CJM, Customer Journey Map) to understand where the user’s key pains are and how to solve them.
Before proceeding to the interface design stage, the designer determines in advance the metrics by which the effectiveness of the design will be measured.
In the brief of the customer from the example above, there was a request for two formats: a mobile application and a landing page – a one-page site that will tell about the functions of the application. Each format will have its own performance rating, for example, for a landing page, this is the number of application downloads.
After the preparatory stage, when all the data is collected, the designer visualizes the structure of the product or service in the form of an outline.
The fastest rough sketch that shows an idea is called a wireframe. Typically, the design of the layout follows the “progressive jeep” method, when the entire structure is made first, and the details are worked out gradually.
Already at the sketch stage, you can send the specification to the developers who will program the application. This is necessary to understand whether they can implement all the ideas of the designer.
The wireframe is detailed and becomes a realistic prototype in the process of coordination with the client and parallel testing with the developers. On the way from point A to point B, the layout goes through several iterations. The UX designer presents the prototype to the client, and tests and improves it.
Designing the visual part – UI design
The interface designer moves on to the UI design stage as the next task. To complete the UI part, he must have visual design skills. At this stage, the designer decides how the elements will look, and selects pictures, fonts, and colors – the general style. If necessary, the UI designer will create animated objects.
In the UI part, the designer monitors not only the overall beauty of the interface but also that the user correctly reads the interface elements in all screen states and that the interface meets accessibility standards. This applies both to the visual part and to the interaction with the interface. That is, in terms of UI, the designer continues to think about the UX of the interface. Unlike UX design, UI design principles are extremely specific. It is better for a novice designer to focus on the standard rules for interface visualization.
The interface designer tests their layout with various tools. The simplest is corridor testing, it helps to quickly find blunders. The designer comes up with a survey scenario and interviews several possible users. Then he collects and analyzes the feedback, and if necessary, returns to the previous stages. For more complex testing, usability studies and AV tests are used.
In the end, the designer finalizes the interface prototype and gives it to web developers. He is still included in the task and controls the process up to the delivery of the finished product to the customer.
The interface designer is the user’s advocate. At each design stage, the designer thinks both about how the interface will work (UX) and how it will look like (UI). This concern is not about the interface, but about the user, whether he will be comfortable in the end. Yes, the designer takes into account the interests of the business, and the possibilities, and limitations of technology, but his main goal is to develop an interface that will solve the user’s problem.