Home UI vs. UX

UI vs. UX

What’s the difference between UI and UX?

The term UI and UX are sometimes thrown around interchangeably and while both are important designers and organizations should be thinking about them differently.

The User Interface or UI of a product is the part that you interact with. It could be a dial, a button, a handle, or other parts of the product that are manipulated. UI design is in most products we use, both intentionally and sometimes unintentionally.

The user interface in software typically relates to any on-screen element, including text, labels and buttons. These items communicate information and interactions. In physical products, the interface will also include things that you manipulate with your hands, or feet.

In computers the interface was originally called the graphical user interface (GUI) but now it’s commonly just called the UI.

Great user interfaces tend to convey “affordances.” An affordance is a clue as to how you should interact with an object. For example, the Macbook has a divet that shows you where to put your finger to more easily open it, the Airpods have this too. Buttons have shape and shadow to make them look pressable. These affordances make it easier to understand how objects should be manipulated

When affordances try to convey an interaction by mimicking real-world physical objects, that’s called, “Skumorphism.”
– The original iPad notes app, looking like a physical notepad
– The Trashcan, mimicking the look and interactions of throwing something away.
– The save icon mimicking the days gone by of disks.

All this stuff go into user interface design. There’s a ton to consider in terms of how to design a screen to be simple, friendly, intuitive, and have the right amount of information, features, and functionality.

UX or User Experience Design is often confused with UI but it’s really centered on the end-to-end experience of using a product or service. The interface is one part of the journey but ultimately most people don’t want to interact with an interface, they are looking to get something done.

If the product is a ketchup bottle, then the user interface is the cap, the bottle itself, the protective sheet that you have to remember to peel off to under the cap to get any ketchup out.

The user experience includes those elements but it’s considerations go beyond that. What does it look like on store shelves? How does it taste? How does it smell? Are fries or burgers more satisfying with ketchup? What ingredients are people going to look for on the back to avoid? Will the ketchup produce ketchup pee? Will the bottle make a sound when you squeeze it? Does too much or too little come out? Will I use this bottle at home or at a restaurant? Will someone at a restaurant try to refill the bottle with some other brand of ketchup? Will I know how to recycle the bottle?

All of these scenarios are experiences that someone may have with the product. These experiences may overlap with the actual interface but they are distinct. The interface is the ketchup bottle, and the experience is everything that happens, before, after, or during that may make for a good or bad experience.

Many companies that have software as part of their products have dedicated user interface designers but it’s equally important to have people thinking about the total user experience.

Thinking through the end-to-end user experience will help you uncover gaps in service delivery, customer service, and generally WHY people are using your products and HOW they go about using them. Great UI and UX go hand-in-hand in making better products that you and I can use and enjoy using every day.

This post is licensed under CC BY 4.0 by the author.