The Ketchup Bottle Meme
This meme has been drifting around the internet for years. At first glance, haha, yeah. It implies that the ketchup bottle on the left is a user interface and the one on the right is a user experience. Simply, it's saying that the bottle on the right is 'better' than the bottle on the left. But actually, well, that's wrong. What? A meme with misinformation? Leading the uneducated consumer to believe they just learned something but in reality the message was false? What an improper use of a meme!
Truth is that each bottle has its own unique user interface AND a distinct user experience. Let's look at each in detail and
try to answer the question: Is one better than the other?
Model 1
We'll call this Model 1.
The UI is constructed from glass in a cylinder to cone shape with a metal screw-cap. The glass has some impressions like the one that indicates "57". The round base of the bottle has serrated ridges. The glass is adorned with labels made of paper printed with ink in several colors and attached to the glass with glue. The labels depict a logo, title, images and some statistical data about the content of the bottle. There is a face label and a band label near the top.
It is made of glass, which is easily recyclable. That makes
me feel good about using it. 4
When I grasp it, it feels solid and cold. It's not too heavy but hefty.
It fits my hand nicely. My fingers wrap all the way around
it and I have no problem gripping it.
It looks classy & classic. Provides a sense of nostalgia.
Brings back memories. It makes me smile. Its normal
position is with the cap up. Placing the bottle with the
cap down is very unstable.
I imagine it is hard to refill.
It pours slowly. Is that bad? Remember the old TV commercial that used the song "Anticipation"?
Anticipation could devolve into frustration.
The cap is not attached. It could get lost.
Can break if dropped on a solid surface.
Can be used as a microphone! Bonus!
Bruises your hand when you slap its bottom.
Hard to get all content out. When you slap the bottom to
get content out, you may miss your target. You can fit a
knife through the hole to assist getting all the content out.
Model 2
We'll call this Model 2.
The UI is constructed of plastic in a hybrid rounded-rectangle to cylindrical shape with a large plastic screw cap with pop-open lid. There are several curves and bulges in the shape of the main body of the bottle. The body surface is smooth. The cap has serration around the edges and an indentation in the pop-open lid. The plastic is adorned with a single face label that conveys similar information as the labels on Model 1.
It's made of plastic which may or may not be recyclable.
That makes me question if it's eco-friendly or not.
When I grasp it, it feels soft, cool but not as cold and weighs about the same as model 1.
Fits my hand nicely, not better than model 1, just different. My fingers don't wrap all the way around it but I don't have any problem gripping it.
It looks modern and innovative. Its normal position is
"upside down" with the cap at the bottom but it can also be
placed equally well with the cap up which is quirky and even fun. It makes me smile.
I imagine it is not as hard to refill as model 1 because the
cap looks bigger, but is that really the case?
It pours according to your squeeze pressure but it can splatter if you squeeze too hard.
The cap is attached so it can't get lost.
It can break if dropped or thrown at a solid surface, but not
as easily as model 1 and the result would not be as hard to
clean up.
Not a good microphone.
It can bruise your hand when you slap its bottom but not as
bad as model 1 because the plastic is softer and it has a
larger surface area on the bottom.
Hard to get all content out. Splatters or sprays content
when it is nearly empty. Can't fit a knife through the hole
without unscrewing the whole cap.
Which is better?
Back to our original question: Is one better than the other? Neither is universally right or wrong, better or worse. Each provides the user a unique experience that may fit the context in which it is used. If I have a diner with a vintage atmosphere and I serve burgers and fries, I might choose model 1 because it provides the experience that matches the mental model and expectations my users have of their experience in my diner. For residential use, I might choose model 2 if I'm a parent and have young children that are prone to dropping things, leaving caps off or losing them and being impatient.
UI or UX?
Is one a "UI" and the other a "UX" as the original meme suggests? Absolutely not. Each has a UI made from different components. Each has a UX that is unique to the composition and behavior of the UI.
How does this relate to software?
We can apply this analysis of UI and UX to our software very easily. Software design decisions about what interface components to use, how they should be arranged, how they should be styled, how they should behave or even animate, all of these things compile into a user interface with a specific, unique experience. Think of a modal panel that slides in and out of the UI with an animation. There are dozens of parameters that define how that panel moves during the animation. The animation itself can have a dramatic effect on the user experience. What is the experience like if the animation is slow and choppy (not smooth) and has a large bounce? (Bounce is where the element hits its end point and bounces past it and then returns to the end point) Compare to the experience if the animation is extremely fast and sudden and hits its end point hard. What about somewhere in between where the animation is quick but not frighteningly fast and has a smooth easing as it reaches its end point? Same user interface in all of these examples, but totally different user experience.
From ketchup bottles to UI animations, we see that elements can be put together in unlimited different ways. The design choices that go into building a UI will result in a unique UX. Product designers apply their training, knowledge, skill and expertise to create consistent user experiences across a product. Understanding who their users are and what their mental models are for completing any given task is key to creating a successful user experience.