Is there really a difference between UI and UX design? When I first got into design, I was familiar with the term “UI/UX Designer”. I had the assumption that it was the term used to refer to people who designed digital products. Was I right? To the layman, probably. However, in the tech world, I was only partially correct. UI and UX are used together and interchangeable so often that it is easy to understand why there is a general misconception about those two terms.
User Interface (UI) Design and User Experience (UX) Design are crucial parts of designing a product. While they are not opposites, they are neither the same. In simple terms, UX design is the user-centered approach to designing a solution-oriented product, UI design is the user-centered approach to creating the visual properties of a product.
Goal
The goal of this article is to distinguish between User Interface design and User Experience Design. I identified 8 features that clearly define both terms:
At the end of this article, I want the readers to have a basic understanding of what User Experience Design and User Interface Design are, how they differ, as well as their roles in a design.
Target Audience
This article is for newbie designers, people who are thinking about starting a career in UX design, potential UI design or UX design employees or employers, as well as those who are just interested in knowing more about UX design.
Defining UX
Don Norman, a cognitive scientist, takes the credit for coining the term, user experience. According to him, “User experience’ encompasses all aspects of the end-users interaction with the company, its services, and its products.”
Defining UI
As User Testing says, “At the most basic level, the user interface (UI) is the series of screens, pages, and visual elements—like buttons and icons—that enable a person to interact with a product or service.”
Differences between UI and UX Design
Here are some roles that differentiate User Interface Design and User Experience Design:
pixabay.com
UX Design is usually the starting point of a product design. At this point, design thinking takes place. Wikipedia says that design thinking refers to the cognitive, strategic, and practical processes by which design concepts are developed. I particularly like this definition by Interactive Design Foundation, which says,
“Design Thinking is an iterative process in which we seek to understand the user, challenge assumptions, and redefine problems in an attempt to identify alternative strategies and solutions that might not be instantly apparent with our initial level of understanding. At the same time, Design Thinking provides a solution-based approach to solving problems.”
What we get from these definitions is that UX Design is what a product is built on. We can say UX design involves the conceptualization and rendering/implementation of a design. The elements of design thinking in UX Design are:
Problem Framing/Formative Research: Through formal methods like surveys, interviews, focus groups, etc., you can identify target users and their needs, as well as possible solutions that also exist. This would help a great deal not only in zeroing in on a problem but also in creating new approaches to creating a solution. Formal research methods are great because they provide accurate data, facts, and figures. However, they could come at a cost. maps.
Ideation/Brainstorming – These two involve thinking up solutions to a problem.
Creating a User-centered Picture: With the data retrieved from research, a UX designer can create user persona, sketches, scenarios, storyboards, user journey, user flow, and wireframes.
Rendering/Implementation: After the UI part of the design is complete, the UX designer, using user flow would do the prototyping. The UI designer can also do this
As the tangible part of a design, that is the part that is seen, touched, and interacted with, UI ensures that the visual elements of a design are appropriately used. On the other hand, a UI designer comes in immediately after the wireframes have been mapped out. The UI designer is concerned with the visual part of the digital product created by the UX designer. The colors, typography, interaction, images, etc., are what the UI designer concerns themself with the following. Design Elements
Typography: Good typography fundamentals must be ensured
Language: Language is important in UI because it used to label
Colors: Colours are used to incite moods and beautify a design.
Icons and Illustrations: Icons will help engage users and make an interface look decluttered
Images: Images will keep users interest and give visual representations for people who might not be willing to read texts
Interface Accessibility: A UI designer is responsible for making a design accessible on all (or almost all) kinds of screens
As an analogy, it can be said that while a UX designer creates a skeleton, the UI designer adds the body that we can touch and see.
Imagine a product created to help people with depression. After user research, the UX designer comes up with a great, well-researched product. A UI Designer understands that the use of mild, comforting colors would be great for that app. S/he would know not to use colors like red because it is not a color associated with calmness and comfort, which the app is supposed to incite. From the conceptualization process of a US design, we see no reason how various elements of research and brainstorming help ensure that a product is providing viable solutions to real problems. A bad UI will always tell on a design because UX design cannot stand on its own.
3. UX – User Journey / UI – Intuitive Experience
UX Design, otherwise known as user-centered design, takes into cognizance the start to the endpoint of using a product. We call this user journey. It is the entire process a user goes through to achieve a goal with a product. The visual/psychical contact points a user encounters are the UI. Similar to emotional connection, a UI is usually expected to be intuitive. Users should ‘naturally’ know what next to do. Their eyes should ‘naturally’ land in the most important information on a page. The UI designer, through the use of sound UI elements like the ones explained above, is expected to make these connections. The natural intuitions of a user are developed through previous interactions with other apps and users’ expectations of similar experiences.
4. UX – Overall Usability / UI- Visual Aesthetics
Another basic difference is the visual aspect of UI design. As I mentioned before, UI is a blend of visual and interaction design. Let’s take you back to the example above. Assuming you see an ‘app settings’ button on that app. It looks really great and beautifies the design. The UI’s job is partially fulfilled. Now, when you try to click that button and it leads you to your profile page instead of the setting page as it says, what would you think/feel as a user? Even though the profile screen will include another link to the actual settings screen, users might feel stressed out by the “long journey”. Imagine more of these physically appealing buttons scattered all over the app and don’t exactly lead you to the right screens. Though the design might look great, the user experience will most likely be zero.
While UI is generally expected to look good, a UX-centered design should focus more on functionality than visually appealing properties.
To reiterate, see the diagram to get a better understanding of the roles of a UI and UX designer in product design
altexsoft.com
How UI and UX Work Together
The reason UI and UX go hand in hand is that digital products are usually tangible; we can see and touch them. Digital products are for solving real-life problems. This is the meeting point of UX design and UI design. As (user testing quote) suggests, they cannot be exactly compared because they are not in an “either-or” situation. I like how Craig Morrison – Head of Product at RecordSetter, Founder of Usability Hour, as cited in User Testing, explains this:
“I hear this question all the time, and I’ve answered it multiple times. Ultimately I’ve come to this conclusion… There is no difference between UX and UI design because they are two things that aren’t comparable to each other. For example, it’s kind of like asking, ‘What is the difference between red paint and the chemicals the paint is made up of?’ There is no difference. Red paint is made up of all sorts of different chemicals that when combined together make red paint…
From my understanding of both concepts, this stance makes sense. So, while the aim of this article is t distinguish between User Interface design and User Experience Design, it does not contrast them. I consider UI and UX design as parts of a whole, as they are both crucial in the creation of a digital product.