UX and UI: these two terms are often used interchangeably, but they mean very different things. UX design is short for "user experience design", while UI stands for "user interface design".
At the most fundamental level, the user interface (UI) is the series of screens, pages, and visual elements—things like buttons and icons—that allow a person to interact with a website, product or service.
On the other hand, user experience (UX) is the internal experience that a user has as they interact with every aspect of a company’s website, products and services.
Before we consider the key differences between UX and UI, let’s dig deeper into what each term means individually.
What is UX?
User experience, or UX, grew as a result of the improvements to UI. Once there was something for people to interact with, their experience – whether it be positive, negative, or neutral - changed how people felt about those interactions.
Don Norman, a cognitive scientist, is credited with creating the term, "user experience" back in the early 90’s when he worked at Apple. He defined it as:
‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.
In essence, UX can apply to anything that can be experienced—be it a website, a soda machine, or a visit to the grocery store. So, the user experience describes the interaction between a person and a product or service. This means user experience design must consider all the distinct elements that shape that experience. A UX designer considers how the experience makes a person feel, and how easy it is for them to accomplish their desired tasks. For example: how easy is the checkout process when shopping at an online store? Can you search a clothing brand’s site for specific product colors and sizes? Does your online investment app make it easy for you to manage your funds? The ultimate purpose of UX design is to create easy, efficient, relevant, and satisfying experiences for the user.
To understand what makes an experience a good one, the ‘usability honeycomb’ developed by Peter Moreville offers a great visual that highlights what goes into effective UX design.
The usability honeycomb creates the foundation for best practices for UX and it helps guide designers and developers in their efforts across multiple touchpoints with a user, including:
- How they discover your company’s product
- The series of actions they take as they interact with the interface
- Any thoughts and feelings that arise as they try to complete their task
- The impressions they take away from the interaction
UX designers are responsible for making sure a company delivers a product or service that meets the needs of the customer and lets them seamlessly accomplish their preferred outcome.
What is UI?
User interface (UI) is anything a person may interact with to use a digital product or service. This encompasses everything from screens and touchscreens, sounds, keyboards, and even lights.
Unlike UX, user interface design is a strictly digital. A user interface is the point of interaction between the user and a digital device or product; for example, the touchscreen on your smartphone, or the touchpad you use to select what kind of soda you want from the digital soda machine. In relation to websites and apps, UI design encompasses the look, feel, and interactivity of the product. It is all about ensuring the user interface of a website, product, or service is as intuitive as possible, and it means carefully considering every visual and interactive element a person might encounter. A UI designer works on icons and buttons, typography and color schemes, spacing, imagery, and responsive design.
UI is responsible for conveying all the development, research, layouts, and content that goes into a product or website and turning it into an attractive, guiding and responsive experience for users.
What is the difference between UI and UX?
At its core, UI is comprised of all elements that let someone interact with a website, product, or service. UX is what the person interacting with that website, product, or service takes away from the whole experience.
Still not totally clear? Think about baseball: UI is the cleats, gloves, and the bat. UX is the feeling you get when you hit a home run.
Now that we have defined UX and UI, what are the key differences between the two? The core difference to keep in mind is that UX design is all about the entire feel of the experience, while UI design is all about how the actual interfaces look and work. This is how we handle UX and UI.
At Provisio, our approach to UX design takes the whole user journey into consideration in order to solve a particular problem: what steps do they take? What tasks must be completed? How simple is the experience? We focus on finding out what issues and pain-points users encounter, and how the website we are building might solve them. Extensive user research is conducted to determine who the target users are and what their needs are in relation to what we are developing. Next, the user’s journey is mapped out across the website, while keeping in mind things like information architecture (how content is organized and labelled) and what types of features the person might need. Finally, we create wireframes that outline the simplified blueprints for the site.
Next our UI designers come in to bring the wireframes to life. They consider all the visual aspects of the user’s journey, including each individual screen and touchpoint they might encounter; this means the tapping of a button, scrolling down a page or swiping through a gallery of images. While our UX design maps out the journey, the UI designer focuses on every detail that make this journey possible. We are not saying UI design is all about looks, it also has a big impact on whether a product is accessible and inclusive. Read more about UI design for accessibility here.
Good UX and UI design are fundamental to building a successful website. Whether you are looking to create a totally new site or update the UI and UX on your current site, Proviso can help take your business further, faster? Let’s connect!