In the web world, the terms UX and UI are frequently used interchangeably, and are often lumped together as "UX / UI" when referring to an ambiguous aspect of web design. A glance at the retroacronyms (yeah, the new word du jour) gives us a little insight into the differences between them:
UX stands for User Experience Design.
UI stands for User Interface Design.
Okay, but what does that mean?
Let's imagine a standard bicycle. The handlebars, brakes and seat are part of the UI, which is the interface we interact with. The feeling we get from riding a bike is the UX, which defines how smoothly it rides, how safe it is and how fast it can go. If, for example, a company wants to produce a fast bike, the UX designer would look for elements that would increase speed and add them to the basic design or layout of the bike, which could include gears, frame material, type of handlebars, etc. The UI designer would then make sure that the bike feels like it's going fast. The UI designer would then ensure that each element was compatible and coherent with the bike as a whole, for example, the choice of color, shape and additional elements adding character.
Using this bicycle analogy, we can see that the role of a UX designer is to create a plan containing the most important elements of the product in order to create a specific user experience or fulfill a need, such as a bicycle that can be ridden quickly. We can also see that the role of a UI designer is to take this plan and design the look and feel of this product (how it should look, how it should feel), providing a specific aesthetic and describing the details of each element of the bike.
In this way, UX and UI complement each other to provide an experience that is both functional and pleasurable. While UX makes products and interfaces functional, UI makes them pretty and pleasant.
So why is this important for people who aren't designers?
The reason it's important, especially for people who want to do business with a designer or design agency, is because understanding the difference between UX and UI allows you to better manage the budget and time allocated to a project for this purpose, as well as better communicate with the team and know what to expect from them.
Let's move on from analogy to practice when it comes to web UX and UI.
What is user experience in web development?
The main role of a UX designer is to take the needs of the user or customer and create a map to ensure functionality, user satisfaction and meet the product's purpose. Normally, UX developers work with the marketing team as well as developers in the creation of deliverables such as: user flowcharts, specifications and wireframes.
An example of a designer's work is the famous flowchart that simulates the user's navigation from point A to point B.
Figure 1. Flowchart
This is a simple flow chart showing the main pages of a site, including the possible navigation between pages from the home page to the purchase page of a book. Normally, a flowchart is present in the early stages of product development and evolves iteratively into a more detailed plan that shows the different elements contained on each page, as well as the decisions the user is likely to make while navigating the site - thus mapping the user experience.
Figure 2. Detailed flowchart
In the early stages of a design process, you can expect at least one flowchart mapping a user's navigation through the site. The next step would, in most cases, be to carry out a series of wireframes to determine the placement of elements on the page, while establishing an information hierarchy based on user and customer needs. In order to create this hierarchy of information, the UX designer must carry out advanced product research, including competitive analysis, with the aim of defining a minimum viable product (MVP).
Wireframes can be black and white documents with content boxes and fake text (Lorem ipsum). It's a way of showing how information will be structured to maximize the visibility of certain elements or actions. The logigram and wireframe are created to create a visual consensus between client and designer on the specific needs of the client and the experience the user will have. These documents are crucial because they enable the production team to know exactly what the customer wants.
Figure 3: Wireframes
For the purposes of this article, we won't go any further into the role of UX in web development. But there's more to the UX designer's work than that. Even after the platform has been launched, a series of rigorous tests must be carried out to ensure the quality of the user experience. The UX designer must therefore act iteratively to ensure that the website meets the user's needs, through each evolution of the platform.
What is user interface design?
Okay, now we know that the UX designer is responsible for the plan or foundation of the product. So we can say that the UI is the "bling bling", is the "pimp mon char" of a website. We need a structure, a plan and a prototype that conveys a feeling.
UI designers not only work closely with UX designers, but also with the marketing team and customers, to ensure that the design matches the company's values, but also the site's intentions. UI designers are in charge of determining the level of seriousness, elegance, fun and other characteristics that influence the emotions felt by the user.
Figure 4: Mock-up
The various elements of UI design include typography, colors, photo treatments, graphic elements, illustrations and the spaces between elements. What is often referred to as graphic design is the work of the UI designer, enhanced and supported by the upstream work of the UX designer. On the web, another type of UI design is animation. The way buttons behave when the cursor passes over them, the way transitions between pages are animated, or Parallax Scrolling, that famous trend that gives a sense of depth when scrolling down the page - all these are aspects of UI design that are carefully chosen and developed to reinforce certain emotions when browsing the site.
If you think that UI design is the most important part of user experience development, think again! UI is a crucial aspect of the experience, certainly, and focuses essentially on the aesthetics of the platform; however, it's UX that lays the fundamental foundations of the user experience, taking users easily from point A to point B.
Well, we've done it! We've solved the mystery of UX and UI design, at least in its simplest form.