If you’re interested in the Web, you’re bound to have come across images of varying relevance to the differences between user experience (UX) and user interface (UI).
Among these, the image of the ketchup bottle is frequently used. Here it is.
I don’t know the author. If I did, I’d probably congratulate him on his contribution to the popularization of UI and UX concepts. That would be my only compliment, as I’d also blame him or her for misleading millions of people about what UX and UI really are.
This widespread image, which has already been widely criticized in numerous articles, leads to misconceptions about UX, UI and the difference between these two concepts. In the remainder of this article, I’m going to be no exception, and I’m going to refute the meaning of this image too, but you’ll see that I’ll be doing so for reasons other than those generally put forward by my colleagues.
Some background
The concepts of UX and UI have been around for years, they’re useful, they’re used to describe professions, methods and approaches. So it’s absolutely essential that web professionals know and understand these concepts. To achieve this, there’s nothing like simple metaphors and images. As we shall see, this is not the case with this image, which nevertheless continues to be widely used and shared.
Let’s start with the seminal article The Definition of User Experience (UX) by Jakob Nielsen and Don Norman. His summary explains: “User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
Further on in the same article, the authors state:
“It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design.”
As we can see, UX includes all interactions with the product or service. The interface (UI) is involved in only one part of UX.
I’ve been working on quality assurance for the web since 1999. In 2001, with Eric Gateau, I designed the VPTCS model (Visibility, Perception, Technical, Content, Services). If you’d like to find out more about our approach, read the article “Web Quality Assurance: From User Requirements To Web Risk Management” on Smashing Magazine.
The VPTCS model is read in chronological order of the user’s visit to the site, in three main phases: before, during and after.
- Visibility is what happens before you actually come into contact with the interface,
- Perception, technology and content are ALL things that happen while you’re in contact with the interface,
- services are what happens when you are no longer in contact with the interface.
We use this VPTCS model in particular to distinguish the total user experience (UX) from the user interface (UI). The UI is covered by the three central sections of the model: Perception, Technical and Content, and of course, this is only part of the journey.
When we look at the difference between UX and UI with the VPTCS model, it looks like this:
VPTCS applied to tomato sauce
Let’s use the VPTCS model to analyze the UX and UI of a user’s consumption of ketchup. We’re going to list the interactions with the product in question. So get ready for a user journey to the land of tomato sauce. Of course, some interactions are optional. Let’s go on an adventure where you’re the hero and VPTCS is the special sauce.
Before the interface (Visibility)
This phase is about what happens before you come into contact with the product – before the UI.
Here are a few examples:
- I saw an advert for ketchup, and it makes me want to eat it.
- I’d love some pasta with ketchup, do I have any left?
- Dad, can you get some ketchup?
- Honey, can you add ketchup to the shopping list?
- I’m in the store, where is the ketchups aisle?
- I’m standing in front of the ketchup aisle. Which one should I choose?
During the interface (Perception, Technique, Content)
This phase concerns what happens while I’m in direct contact with the product – UI
- What is the price of the ketchups on offer?
- I’m allergic to certain ingredients, is the composition indicated (it’s written sooooo small)?
- My blind sister is coming to visit, is the label in Braille?
- My son has just thrown the ketchup into the cart, I hope it hasn’t broken!
- I bring it home, take it out of the shopping bag
- Where do I put it? in the cupboard, in the fridge (let me take a look at the label)
- I’m making pasta, and I want to put ketchup on it
- I pour myself some ketchup
- Interface 1: I shake and the ketchup doesn’t fall on the plate (I’m getting annoyed).
- Interface 2: all I have to do is press and the ketchup pours out (it’s great, but it’s a plastic bottle, too bad).
After the interface (Services)
- The ketchup is finished, how and where can I dispose of the packaging?
- My stomach hurts but I’ve already thrown away the empty bottle, so I’m going to rummage in the garbage can to see
- if the ketchup’s use-by date has passed.
- I’m going to call the consumer service, is the phone number on the bottle?
- It was really good, I really want to leave a review of the ketchup, how do I go about it?
- Alternatively (and more likely for me): it wasn’t good, I absolutely want to tweet that I don’t like ketchup.
- I’m taking my son to a sporting event, and the event is sponsored by a ketchup brand, which makes me think I’d like to eat pasta with ketchup, but I’ve run out, so where can I buy some (back to phase 1, visibility).
So there you have it, the partial story of a human’s relationship with a bottle of ketchup. And as you can see, there’s a lot going on before they connect with the bottle and therefore the interface. The moment when the ketchup is poured onto the plate is just one small part of the story.
Let’s look at it again: these are two interfaces.
These two packages and their ergonomics induce differences in the way the user pours ketchup onto his plate. The two images of the bottle describe only two very small parts of the direct interaction with the interface, namely the moment when the ketchup is poured. The two images represent different interfaces and therefore variations in the user experience.
But to fully understand what’s going on and more accurately represent the UX and UI, we need another image, which takes into account a few examples of interactions throughout the journey.
Conclusions
By nature – and especially when it comes to web design – we tend to:
- exaggerate the importance of the moment when we interact with the interface
- forget entire sections of the user experience (before the interface, after the interface)
- start with the interface, whereas users expect us to analyze and improve their entire experience
- underestimate the importance of service (yes, customer service and the people behind it are often very important)
- consider that our way of interacting with an interface is the standard way of interacting with that interface, which invisibilizes all those users who interact differently, by choice or by necessity.
There are many articles criticizing the initial image, but generally it’s to come to the conclusion that the user experience is not correctly represented by the bottle but by what happens to the user who actually uses it in a slightly different way.
An analysis with the VPTCS model shows us many other interactions with the product and a user journey that goes far beyond the simple act of pouring ketchup.
In fact, the user’s path goes from a point where he needs something to another point where his need is satisfied. To do this, he will use different interfaces in different experiences.
With the VPTCS model, you can explain a lot of things simply. The most important thing is the notion of before, during and after:
- Lots of things happen before you come into contact with interfaces or products. This is the visibility phase.
- Products are also interfaces that have not only ergonomic (or gustatory) stakes, but also technical stakes (glass, plastic, fragility) and content stakes (composition, weight, characteristics, etc.).
- Products are associated with many services (consumer service and support., recycling, customer reviews).
To conclude this article, you have to know that I hate tomato ketchup.
Links
https://www.smashingmagazine.com/2021/09/journey-into-web-quality-assurance/
https://www.opquast.com/en/vptcs-a-ux-and-qa-model-2001/
https://uxplanet.org/ok-boomer-it-depends-that-ux-ketchup-meme-e89372053077
This article was originally published in French. It was then translated with the help of deepl, an automatic translation tool. If you notice any improvements, please let us know.