Blog

What Is The Difference Between UX & UI?

Back
UX & UI, What's The Difference?

Date
14 Feb 2022

Author
Jonathan Ward

UX and UI: Two terms that are often used interchangeably, but actually mean very different things. So, what exactly is the difference? 

UX and UI: Two terms that are often used interchangeably, but actually mean very different things. So, what exactly is the difference? 

We’ve all overheard conversations, discussions about the great ‘UX” of a product, or the poor “UI” of a website. Is it a secret language you will never be privy to? Are these people just using slang to look cool? 

Okay, probably yes to the latter, but a determinate no to the rest. If you are keen to learn exactly what UI and UX means and how the two differ then you have come to the right place. 

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. 

User experience (UX), on the other hand, is the internal experience that a person has as they interact with every aspect of a company’s products or services. 

What Is UX & UI To Begin With?

UI and UX designers discussing a project

UX design refers to the term “User Experience Design”, while UI stands for “User Interface Design”. Both elements are crucial to a product or service and work closely together. Despite being similar in name, the terms themselves are quite different. They refer to two very different aspects of a development process and the design discipline.

UX: A Brief History

The term ‘user experience’ was first introduced in the early 1990’s by cognitive scientist Donald Arthur Norman. In 1993, Donald was working as a User Interface Architect for Apple when he decided to change his title to User Experience Architect. 

Don defines the term as follows:

‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

And here’s what Donald had to say about inventing the term:

“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 a system, including industrial design, graphics, the interface, the physical interaction, and the manual.”

Even though the term wasn’t coined until the early 1990’s, examples date back even further. Walt Disney is considered one of the first UX designers because of his amusement parks and resorts. 

In the 1950’s amusement parks were viewed as dirty, seedy places that weren’t appropriate for children. Walt Disney wanted to change that. He wanted to provide park goers with a positive experience, one that everyone could enjoy. The parks displayed a strong UX design, they were created to appeal to all types of guests. Whether you are a teenager looking for thrill rides or a young family looking to ride Dumbo the Flying Elephant or the tea cups – there is something for everyone.

UX & The Digital World

Despite being a scientific term, its use since inception has been almost entirely within digital fields; one reason for this being that the tech industry started blowing up around the time of the terms invention. 

Essentially, UX applies to anything that can be experienced, be it a website, an app, a coffee machine or a visit to the supermarket. The “user experience” part refers to the interaction between the user and a product or service. User experience design, then, considers all the different elements that shape this experience. 

UX deals with:

  • Interaction Design
  • Prototypes
  • Information Architecture
  • User Research
  • Scenarios

When UX doesn’t consider ALL users, shouldn’t it be known as ‘SOME User Experience’ …..or SUX?

Billy Gregory – Senior Accessibility Engineer – Ubisoft

UI: A Brief History

What is user interface? Is a difficult question to answer because of its wide variety of misinterpretations. While user experience is a combination of tasks focused on the optimisation of a product for effective and enjoyable use, user interface design is its complement; the look and feel, the presentation and interactivity of a product. Like UX, it is easily confused by the industries that employ UI designers. To the extent that different job posts will commonly refer to the professions as totally different things. 

If you look at job ads and descriptions for User Interface Designers, you will mostly find interpretations of the profession that are similar to graphic designer, sometimes extending into branding design and even front end development. 

On the other hand, if you look at an ‘expert’ definition for the term, you will mostly find descriptions that are in part identical to UX designers, even referring to the same structural techniques. 

So, which one is correct? Unfortunately, neither. 

UI & The Digital World

So, let’s clear this up once and for all. Unlike UX, user interface design is a strictly digital term. A user interface is the point of interaction between the user and a digital device product. For example, the touchscreen on your smartphone, or the touchpad you use to select a coffee from a hot drinks machine. In simple terms, it focuses on visual appeal. 

In relation to websites and apps, UI design considers the look and feel as well as the interactivity of the product. It is all down to ensuring the interface of a product is as intuitive as possible. It involves carefully considering each and every individual visual and interactive elements that the user might encounter. A UI designer will think about icons, typography, colour schemes, spacing, imagery and responsive design. 

UI deals with:

  • Visual Design
  • Colours
  • Graphic Design
  • Layouts
  • Typography

A user interface is like a joke. If you have to explain it, it’s not that good.

Martin LeBlanc – Founder & CEO of Iconfinder.com

Ready to discuss a project?

Find out how we can help you grow your business.

The Difference Between UX & UI: Explained……With Ketchup

Let’s use the nations favourite Heinz Tomato Ketchup bottle to explain the difference. 

The Glass Bottle

Every product on the market, whether it be a website, app or even a bottle of tomato ketchup has a UX. It sounds strange but the ketchup bottle can be a classic example of UX product design.

We are all familiar with the original glass ketchup bottle. It first graced the shelves back in 1876. It looks great, the design is classic and it is instantly recognisable. This is good UI design. 

However, we have all battled to get the ketchup out of the bottle thanks to its narrow neck. You have to shake it with all your might. Smash the top with your hand, stick a knife, even a chip, down its neck, and sometimes, it still all goes horribly wrong. Uh oh!…..Until…..

Glass Ketchup Bottle
Updated Plastic Squeezy Ketchup Bottle

The Squeezy Bottle

In 1983 the Heinz Ketchup bottle changed. The glass bottle was replaced with a squeezy plastic bottle. Subsequently, in 2002, Heinz flipped the bottle 180 and designed the bottle to be stored upside down, with the lid at the base which saved users from all that shaking about! 

By doing this, it means the Ketchup is ready to come out, and the bottle is easier to use. This is an example of great UX design. What’s more, since the new bottle both looks good and is easier to use, its a perfect example of UX and UI working in conjunction with one another. 

All of the above highlights the importance of both UI and UX. If the bottle looks great but people hate using it, it won’t work as well. If the bottle works much better but looks unappealing, people won’t be inclined to pick it up off the shelf.  

A great product, such as a website or a smartphone needs both UI and UX. The Apple iPhone sells billions each year because it looks great and it is intuitive and easy to use. But, of course, sometimes people forget about UI and UX all together, and we end up with products like this……

Disposable, 1 Use Ketchup Packet

Fortunately, most brands acknowledge the importance of UI and UX. And because of that, our experiences as end users get better year on year.

It’s very important to understand that UX and UI do go hand-in-hand, you can’t have one without the other. We hope the article helped you understand the key differences between UI and UX a little better.

Got an upcoming project we can help you with? Contact us today and have a chat with one of our experts.

Did you enjoy this article?

Join our mailing list

MAKE AN ENQUIRY

Let's kickstart your project