Before we start talking about developing a graphical user interface, let's clarify what it is, just in case. Interface — a common boundary between two functional objects, the requirements for which the standard is defined; a set of tools, methods, and rules of interaction (management, control, etc.) between the system elements. This is an accurate but boring definition.
In other words, but more interesting said Jeff Raskin:
The user interface is the way you perform a task with the help of a product, namely, the actions you perform and what you get in response
In everyday life, we are always faced with interfaces. These are social media sites, controls in the car interior, remote control for the TV, voice control of the smart home, and a button panel in the elevator. It turns out that we use one product to manage another product. But let's not list all the phenomena in our lives, but talk directly about web services and applications and how to make their use convenient.
We ask many business questions, delve into business logic and understand what problems there are — looking for a solution to help. Analyze competitors:
Collect a list of the main ideas of the redesign and how it will help the client's business: for example, "improve the search form so that the product can be found in 2 clicks, and now you need 10 clicks", " make a personal account for wholesale customers".
Conduct a stress test of redesign ideas:
Usually, the last question is the best way to understand how confident the client and we are that the idea is worthwhile.
The most critical stage of UX design and analytics that affects the final result. We analyze the business audience, and it needs to understand who will use the product and take into account users' interests. We fix the context of interaction, conditions, technical and business restrictions.
Simplify your life and use the help-out tools:
A powerful tool for visualizing the customer’s experience. Use storytelling to capture key user moments and enhance communication.
Another for user story or customer journey maps.
With this visualization tool, users can create simple or more complex customer data diagrams.
We develop a rough interface design. We work through the main interface scenarios and build a user's end-to-end path. The first version of the invention is tested, and after the results, we correct errors, clean and get rid of excess.
Make a note of what you need to do:
After working through 2-3 main scenarios, it becomes clear how to build the rest. At this stage, we work out similar plans: for example, making a delivery when buying in an online store, buying in installments, or choosing related products for the main order.
We prepare a UI-kit or design system: we clean out styles, elements, blocks and modules, illustrations, and icons. We associate aspects with each other in dependencies through classes and variables.
The finished UI-kit can be downloaded for free. Here are some of them:
It and make sure that everything is fine. We help developers and control the quality of design implementation. We check the live interface, make a big list and give recommendations on how to fix them. If something is missing — we draw new screens.
In Alan Cooper's "The Inmates are Running the Asylum" it is said that excessive savings on the UI in the future result in spending on technical support, bug fixes, and training of new employees. A beautiful wrapper in the form of a modern design is not a human interface; the key to this humanity is designing for a real user.
User interface design reduces design time and simplifies user interaction with the product. Well-designed UI = grateful user = happy you.