Why the Ketchup Bottle is a Bad Example for UX/UI Design

Scrolling through my LinkedIn feed one day, I came across a familiar image: the classic ketchup bottle meme used to explain the difference between User Interface (UI) and User Experience (UX) design. It was an image of two ketchup bottles side by side: the traditional glass bottle on one side, and the modern squeezable plastic bottle on the other.

The classic ketchup bottle meme used to explain the difference between User Interface (UI) and User Experience (UX) design

The message was clear: the glass bottle represents bad UI because it’s difficult to get the ketchup out, while the plastic bottle is praised as good UX because it allows you to squeeze out the exact amount you need.

At first glance, the analogy seems to work. But the more I thought about it, the more I realized this popular example misses the mark. It’s an oversimplification that doesn’t fully capture the nuanced relationship between UI and UX. In reality, both ketchup bottles represent both UI and UX in their own ways — and understanding the complexity of this relationship is key to good design.

The Flaws of the Ketchup Bottle Analogy

The intention of the ketchup bottle analogy is to simplify the complex distinction between UI and UX into a relatable example. The idea is that the glass bottle’s design represents poor UI, making it hard to extract ketchup, while the plastic bottle, which allows controlled dispensing, represents superior UX.

UI and UX are interconnected aspects of design

While this analogy has its merits, it fails to recognize a deeper truth: UI and UX are interconnected aspects of design, and you can’t really separate them as clearly as the ketchup bottle example suggests.

Both the glass and plastic bottles have user interfaces — their physical form, the way you interact with them, the way they are designed to dispense ketchup. Both also deliver a user experience — the emotional reaction you have while using them, whether that’s frustration when shaking the glass bottle or satisfaction when squeezing out the exact amount you want.

In this case, the analogy oversimplifies a nuanced relationship. The truth is, a product can have great UI but poor UX, or vice versa, depending on other contextual factors.

Understanding the Relationship Between UI and UX

To dive deeper into the ketchup bottle debate, let’s break down the fundamental aspects of UI and UX in more concrete terms:

UI (User Interface)

UI is the design, shape, buttons, and interactions that users directly interact with.

UI refers to the visual and interactive elements users engage with. In both physical and digital products, it’s the design, shape, buttons, and interactions that users directly interact with. UI is about creating a clear, effective way for users to perform tasks.

Example: Consider a simple on/off switch or an iPhone interface. The on/off switch has a straightforward design: flip it up to turn a device on, and down to turn it off. Similarly, an iPhone’s interface includes app icons, touch gestures, and buttons designed for intuitive interaction. In both cases, the UI is designed to be easily understood and navigable, allowing users to complete their tasks with minimal friction.

UX (User Experience)

UX encompasses the entire experience a user has while interacting with a product or system.

UX is broader. It encompasses the entire experience a user has while interacting with a product or system. It considers factors like ease of use, efficiency, emotional satisfaction, and how effectively a product solves a user’s problem.

Example: Imagine two users holding identical iPhones. While the design and layout (UI) of the iPhone remain the same, one user might feel confused or frustrated due to poor app performance or difficulty navigating the system, leading to a negative experience. On the other hand, the second user might be satisfied and happy with how efficiently the iPhone meets their needs, providing a smooth and seamless experience. This highlights how UX involves more than just the UI — it’s about the entire experience, influenced by factors beyond just visual or interactive design.

In the context of the ketchup bottles, the glass bottle may have poor UI (since it’s difficult to use), but it might still provide a nostalgic or satisfying UX for certain users who appreciate tradition. Meanwhile, the plastic bottle, while offering more control, might be perceived as cheap or less appealing by some users. Both bottles have UI and UX implications that affect users differently depending on the context.

Another Example: The Elevator Button Panel

To further illustrate the distinction between UI and UX, consider an elevator’s button panel. It has a clear, well-designed UI: users simply press the number corresponding to the floor they want to go to, and the elevator takes them there. However, the overall user experience could be poor if the elevator is slow or overcrowded, leading to long waits and frustration.

An elevator’s button panel has a clear and intuitive Interface. However, the overall Experience could be poor if the elevator is slow or overcrowded.

This shows how even the best UI design can fail to deliver a satisfying UX if other contextual factors — like speed or convenience — are lacking. UX is the sum of the user’s entire journey, not just the immediate interaction with the product’s interface.

The Problem with Oversimplified UX/UI Comparisons

Using simple examples like ketchup bottles can be useful for beginners, but they often fall short of explaining the complex relationship between UI and UX. In reality, a product’s UI and UX are deeply interconnected, and success requires a balance between the two.

Let’s take a toothbrush as another example. A toothbrush has an obvious and clear UI — it’s meant for cleaning your teeth. But someone could use the same toothbrush to clean their car rims. Here, the UI remains the same, but the user experience varies depending on how the user decides to use the product. The design intent doesn’t always determine the final user experience, highlighting the role of context in design.

Conclusion: Both Bottles Represent UI and UX

Ultimately, both the glass and plastic ketchup bottles represent UI and UX in their own ways. The plastic bottle may be easier to use (good UI), but depending on the context, the overall UX could still vary. Likewise, the glass bottle’s challenging design could still deliver a satisfying experience for some users.

Both the glass and plastic ketchup bottles represent UI and UX in their own ways

UI and UX are interconnected, and a product’s success depends on finding the right balance between the two. A well-designed interface can greatly enhance the user experience, but the two elements cannot be fully separated, and a simplistic analogy like the ketchup bottle doesn’t capture the full picture.

Key Takeaways

• UI and UX are intertwined: You cannot have a successful product with good UI but poor UX, or vice versa.
• Context matters: A well-designed UI can lead to a bad UX if other contextual factors are not addressed (e.g., environment, convenience, user preferences).
• Strive for balance: The best designs balance clear, user-friendly interfaces with a positive, satisfying user experience.

By understanding the complexity of the relationship between UI and UX, designers can create better, more holistic products that meet users’ needs on all levels.

Cheers,

Paul Trubas — Sr. UX/UI Designer