Author: Kyaw Tan

It would seem that there is nothing complicated here: UX is the user experience, or how users interact with the product, and UI is the user interface and how this product looks. It seems to be impossible to confuse. But concepts do not live separately from each other: they work in tandem. Because of this, confusion arises: what a UX designer should be responsible for, and what a UI specialist should be responsible for, whether these roles can be combined in one person and what these simple-looking concepts generally conceal.

In this article we'll figure it out. Let's start with how UX appeared in general, let's study the difference between the terms UX, UI and usability and find out if UX and UI skills can be combined in one specialist.
Where did UX come from
UX may seem to come from the 2010s, but in fact it is much older - from 1988, when Donald Norman, co-founder of the Nielsen Norman Group and now a former vice president of Apple, first introduced this term in his book "Design of Familiar Things". He wrote that the UX user experience is broader than just usability or user interfaces.
One of the most popular examples of bad UX is the so-called "Norman doors": those that are unlikely to be opened the first time, because it is unclear whether to pull or push them.
After the emergence of UX as a term, it quickly became part of the design process when creating a product and began to evolve.

UX in a cascading development model
As soon as the concept of UX was formed, the user experience became a decisive factor in the creation of the product and integrated into the cascade model. To work out the UX, it was necessary to go through successive steps:

  • research, definition and categorization of problems;
  • development of target persons and CJM;
  • creation of hypotheses, development of prototypes, testing;
  • product development based on the selected prototype.

After launching the product, the designers collected feedback from users and returned to the first step to implement improvements.

UX in Agile
The faster progress became and the more technology developed, the less viable the cascade model became. Instead, a faster approach was required, in which the product could be provided to users in just a few weeks. So UX has made friends with Agile, which focuses on fast iterations.But the friendship turned out to be short-lived: UX design was required to fit into a tight development schedule, but it was not possible to cram full-fledged research and testing into them before launch. So UX began to slow down the rapid process of creating a product and block the development of client business, so companies began to abandon it. Instead of specialists who did research and tests before launching the product, they simply hired graphic designers who "spanked" beautiful layouts in a couple of weeks.

The era of UX/UI designers
A little later, Agile spawned a hybrid called UI/UX Designer. The solution was working and cool, but it also had negative consequences. The perception of the user experience has been greatly distorted: UX has become more often associated with visual effects than with the elaboration and improvement of the experience. Such a skew in places persists even now.
Lean UX as a solution to the problem
Classic UX is the process of creating a product based on requirements. Lean UX is more result-oriented. This approach was invented in 2013 by Jeff Gotelf and Josh Seiden - it includes strategies and methods with which UX can be applied in a rapidly changing Agile environment.

But this concept also has its own problems: insufficient elaboration of the product at the start often leads to losses (these are stalled projects that never fired and did not go into development, and endless design edits).
Google Ventures to replace all concepts
Google Ventures' approach suggested using a design sprint - a short five-day process consisting of an idea, creating a quick version of a product, launching it, and training based on real user experience. The concept has become a hit because it is able to solve critical business tasks quickly and with minimal losses.

Now designers can quickly test their solutions instead of convincing everyone of the correctness of hypotheses, and business gets results faster and implements improvements.

But even the most working concepts do not eliminate misunderstandings about what the user experience includes and what it is not. 

What is UX really
Donald Norman initially defined UX as a concept that covers all aspects of human interaction with a product: together with design, interface, physical interaction and user guidance.

The history of its development was as follows: there was a product - paved paths and a green lawn around. He was released into free swimming, and people began to use him. But not in the way the creators intended: instead of a paved path, they walked on the lawn, because it's shorter and more convenient. After such feedback, the team decided to give users an MVP — a temporary gravel path. The new version of the product was given to users: they appreciated it and began to walk on gravel without a twinge of conscience. Then the team changed the product and in a new iteration made a full-fledged paved path out of a gravel path.

Thanks to close work with UX, a lot of convenient pieces appeared:
The QWERTY keyboard was born due to a problem in the first typewriters. Those had a serious drawback: if you quickly press two letters next to each other, the machine jammed. To prevent this from happening, the creators of the layout familiar to us identified the most used letters and divided them on the keyboard among others.
Smart Text substitution: T9 and other smart text input technologies have allowed us to spend less time printing characters and correcting errors.
E-book readers: with them you can adjust the font and brightness and no longer buy and carry heavy paper books.
UX, UI, usability — what's the difference?
UX is often confused with usability (ease of interaction with the product) or UI — user interface design, which focuses on the appearance of the product. And this is not entirely true.

UX design is a holistic process of creating a product that meets the needs of users and businesses. It involves working on information architecture, design, content and other important components of a useful experience. Usability and interface are also parts of UX that appear in the product at later stages.

The relationship of the three concepts may look like in the image below: along with UI and usability, UX also includes research, target persons, interviews, information architecture, content and testing. The procedure is usually important: we start with research, end with testing.

How UX, UI and usability relate
In short, UX is the logic of user interaction with the product, and UI is how this product looks. Therefore, UX and UI have different tasks and different results of work:
UX Tasks
— Research of product users: their needs, goals and motives.
— Creation of target persons to help in the development of the project.
— Interviews with stakeholders to understand the goals and objectives of the product.
— Interviews with users (including in-depth ones).
— Mapping users' journeys to understand their actions and context.
— Usability tests for feedback.
— A/B tests to evaluate hypotheses.
— Search and identify bottlenecks and hypotheses on how to improve them.
— Basic information architecture.
— Development of the interface and creation of product prototypes.
— Creating a product in conjunction with developers.
UI Tasks
— Detailed study of the information architecture.
— Creating layouts that users will interact with.
— Creation of adaptive design.
— Development of user interface elements (buttons, icons, gestures for applications).
— Selection of typography and color palette.
— Elaboration of interactivity of interface elements (what happens to buttons when pressed, etc.).
— Selection and elaboration of animations of elements.
— Creating a guideline with all the elements of the user interface.
UX Results
— Site map.
— Design system.
— Prototypes and wireframes.
— CJM.
— Analytics based on user reviews and interviews with them.
UI Results
— Layouts of pages and application screens.
— The guide line.
— Presentation of the design.
The difference between UX and UI is clearly shown on one of the most popular Internet pictures with Heinz ketchup. On the left is just a beautiful classic bottle that looks stylish, but causes problems for the user: ketchup is hard to put on a plate. On the right is a package that solves this problem.

Total: UX makes interfaces useful, and UI — beautiful. When they don't think about the benefits, the sensations of the product, its convenience and appearance, something uncomfortable and infuriating turns out.

UX and UI specialization: together or separately?
There are usually three different roles related to UX and UI design:

  • UX designer is also a product designer;
  • UI designer is also a user interface designer;
  • UX/UI is a versatile designer who knows how to use both UX and UI.
  • Usually, individual UX and UI specialists are needed in large multi-level teams. The separation of roles has both pros and cons. The advantages are that everyone is doing their own thing in detail: a UX designer analyzes potential users, creates a prototype and tests it, a UI designer turns a prototype into a ready-made layout, bringing interface beauty there. The main disadvantage is the isolation of specialists from each other and the loss of context.

Sometimes other people also participate in product development: for example, instead of a UI designer, there is a UI developer, as well as an application developer and a graphic designer. Each of them has its own front of work.

The process of creating a product and its participants
Another common practice is that UI tasks are given to young professionals to hone their skills in visual design, and leading designers and art directors are responsible for UX, because they already have experience and vision of products. At the same time, a third person, an analyst (or even a UX analyst), may be responsible for research and interviews in general.

Now there is a trend towards blurring the boundaries between UX and UI roles: designers have to combine the skills of both UX and UI, as well as understand product development. This is very similar to the evolution of roles in development:
first there were webmasters who could build a website alone;
then there were frontenders and backenders, and everyone was doing their own thing;
now there is no clear division again: the coder must understand equally well both in the front and in the back, and can perform different tasks.

In short
UX — user experience is broader than just usability or user interfaces.

UX is the logic of user interaction with the product, and UI is how this product looks.

UX is more than just usability or user interfaces and includes user analysis and research, interviews, building information architecture, content development, UI and usability, as well as testing.

The UI is responsible for the visual part of the product (colors, fonts, icons, animations, gestures and the interface as a whole).

UX is a continuous process.

UX defines the purpose and usefulness of the product. UI is the quality of user interaction with the product.

UI is a means that leads us to the desired result from using the product, UX is a feeling from the process of using it.

UX may not work if there are budget constraints, misunderstandings, pressure from stakeholders that compress the deadlines for working on a project and force you to abandon important components of UX (for example, research or testing).