UX and UI are interchangeably used so often that we think they mean the same thing. But there is a difference between these two terms: UX Design and UI Design. By understanding the difference between them, you will be able to build your product with the right design process. It is common for product managers, founders, CEOs, hiring managers to refer to design as ‘UX/UI design’ when these are 2 dissimilar work scope. This can be seen by the sheer amount of job posts looking for UX/UI designers.
Let’s start by looking at the definition of User Experience Design and User interface Design.
What Is User Experience Design?
User Experience Design: Process of building relationships between a business, its product and its customers.
User Experience (UX) Design is the process of researching, developing and improving all aspects of the users’ interaction with the product in order to satisfy its users. The main goal is to improve the users’ experience with the product, this is done through conducting usability tests, evaluating the results and refining the design – ultimately creating a product that is not only useful and valuable, but also easy and pleasing to use.
Fun fact: Did you know that Donald Norman helped coin the term User Experience? Norman’s time at Apple in the 90s as a User Experience Architect was the first-ever case of ‘User Experience’ to be used in a job title. During an interview with Adaptive Path in 2008, Norman said:
“I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose it’s meaning.”
UX design is vital in contributing to a product that provides an effective and successful user experience, even accommodating to human error. It includes various disciplines such as interaction design, visual design, usability and more.
In a nutshell:
- User experience design is NOT about visuals or mockups, it focuses on the overall process/service flow, it’s usability and experience. UX designers craft these experiences, thinking about how the experience makes the user feel, and how easy it is for the user to complete their desired task.
- User experience design is the process of developing and improving the quality of interaction between the user and all facets of the company.
- The ultimate purpose of UX design is to create usable, efficient, relevant, easy and all-round pleasant experiences for the user.
UX design research
User research includes getting valuable insights and feedback from users to understand their requirements and pain points. Some of the commonly used techniques for UX research include:
- User personas- These help in creating a semi fictional representation of the users so that the product team would design solutions by keeping the user persona in mind.
- User interviews- These help in collecting user insights (such as their pain points or expectation), to check if the design meets their requirements.
- User surveys- These help the UX designers by creating a set of questions to quantify the user’s preferences and attitudes with a larger population.
- Focus groups- These are similar to interviews but carried out within a moderated and specific group of users to generate ideas and solutions for certain problems.
What is User Interface Design?
User Interface Design: Process of making visual elements and appearance of the product.
User Interface (UI) Design determines the visual appearance of a product, with the aim of visually designing the product for effective user experience. A good UI design attracts users and aids in providing a pleasant experience.
The element of UI design include documents, images, videos, text, forms, buttons, checkboxes, drop-downs along with their respective interactions, the behaviour of what will happen when the user interacts through clicking, dragging or swiping. The main goal is to create a compelling and beautiful user interface that elicits an emotional response and balance with good usability
The purpose of UI design is to make sure the user interface of a product is as intuitive as possible, and that means treating each and every visual and interactive element with careful consideration.
In a nutshell:
- User interface design conveys the brand’s strengths and visual assets to a product’s interface, ensuring the design is consistent, coherent and aesthetically pleasing.
- User interface design considers all the visual and interactive elements of a product’s interface – including icons, spacing, buttons, colour schemes, typography and responsive design.
- The ultimate goal of UI design is to visually guide the user through the product’s interface, creating an intuitive experience that doesn’t require the user to think too much.
UI design research
UI designers usually (and should) work together with the UX team to analyse the user research results obtained earlier. This helps them to get to know the target audience, their requirements, as well as the pain points or issues they encountered with other similar products from competitors.
This also means that UI research includes competitor research as a vital component.
Competitor benchmarking and studying their website/app user interface helps UI designers to analyse what competitors do to overcome specific design challenges in keeping the UI design consistent, stylish, screen responsiveness, and scalability of various UI elements.
What Is the Difference?
UX design and UI design always overlap but there is a distinct difference.
“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper match on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.” – Rahul Varshney, co-creator of Foster.fm
In terms of functionality, UX is how things work, UI is how things look. UX is a process, whereas UI is a deliverable.
It’s important to note that UX and UI go together hand-in-hand: you can’t have one without the other (at least you shouldn’t). A good way to understand the difference is to look into the different aspects of what UX designers and UI designers do:
A UX designer considers the user’s entire journey throughout the product to accomplish their task: what steps does the user take? What tasks do they need to complete? Is the experience straightforward?
Much of a UX designer’s work goes into investigating problems and pain-points that users come across and how to solve them. A UX designer, often working with a User Researcher, conducts extensive user research to first find out who the target users are, and what their needs are in relation to the product. After that, they will map out the user journey, adding in the information architecture – how the content is organized and labelled, and the various features the user needs. In the end, a wireframe is created, this is a blueprint or skeleton of the product.
With the blueprint, the UI designer steps in to bring it to life by considering all the visual aspects of the user journey. They consider all the individual screens and the respective touchpoints that the user may encounter – tapping a button, swiping through an image gallery or scrolling through a page. Asking questions like “How can different colour schemes and combinations be used to create sufficient contrast and enhance readability? or “How can we pair colours to cater to those who are colour blind?”.
UX design focuses on wireframing and prototyping, interaction design and user testing whereas UI design includes visual design and interaction design. It’s important to note that both UX design and UI design require interaction design, which guides the user’s feelings and behaviour.
UX Designer’s Skill and Responsibilities:
- Content and Strategy: Competitor Analysis, Customer Analysis, Product Structure & Strategy, Content Development, Design Research
- Prototyping and Wireframing: Testing & Iteration, Planning, Creating Prototypes & Wireframes, Development Planning
- Analytics and Execution: Coordinating with Developers and UI Designers, Analysis & Iteration, Tracking Goals and Integration
UI Designer’s Skills and Responsibilities:
- Look and Feel: Branding & Graphic Development, User Guides & Storyline
- Responsiveness and Interactivity: Adaptation to All Device Screen Sizes, Interactivity & Animation, Implementation with Developers, UI Prototyping
How can UX design and UI design integrate?
Since we’ve already listed down the functions of each, we now understand that they are both vital and rather, go hand in hand.
Imagine coming up with an awesome idea for creating a website or a mobile app that offers a vital solution to user problems. With good UX research and an experienced UX designer, you can figure out the exact features and tabs that your target customers might want.
However, if you miss out on UI design, you probably wasted all your efforts for simple reasons like customers not being able to locate a button, text being not legible, etc.
Therefore, even with excellent UX design and research, the project could eventually be unsuccessful with poor UI design.
And the vice versa is true too!
There are innumerable examples (although we wouldn’t want to quote those here!) of websites that are beautifully designed, visually appealing, but are painfully hard to navigate or use. A classic example of great UI design with failed UX.
It can, therefore, not be stressed enough that for a successful project/ product design, both UX and UI need to work together.
SUMMARY: UX Design and UI Design – What Is the Difference?
- UX design usually comes first in the product development process, followed by UI design.
- The UX designer maps out the bare bones of the user journey and the UI designer filled it in with visual and interactive elements.
- UX design is about identifying and solving user problems whereas UI design is about creating intuitive and aesthetically-pleasing interactive interfaces.
