UX and UI: What’s ketchup got to do with it?

Recently I sat down with our User Experience Designer to discuss a popular topic in the digital industry: user interface vs user experience. Analysts at Gartner have demonstrated that user experience design is an increasingly critical component of competitive strength.

As the digital age continues to evolve, so does our approach to design. In fact, design is a critical element to application adoption and usability. As a result, design choices directly influence the ability of an application to achieve its business goals, and User Centered Design is imperative.

The concept of design, however, is not as simple as it once was. Today, the term “design” encompasses both the look-and-feel of an application and the experience that users receive when interacting with it. As a result, two disparate yet related design disciplines have evolved: UX (user experience) design and UI (user interface) design.

What’s the difference between UX and UI? While there are a number of responsibilities that fall under the umbrella of a designer title, the differences between UI and UX are significant. UI is a subset of UX tasks, so a more appropriate question would be, “What is UX and how does UI fit into that overall picture?”

To answer, let’s talk about condiments, specifically Heinz ketchup. Recently, a meme made its way around the design community that illustrates the UI vs UX question. 

You may be wondering “What’s ketchup got to do with design?” The ketchup bottle example is a perfect example because nearly everyone reading this post can relate to the evolution of the glass and plastic bottles over the years.

Picture the bottle and label as the user interface and the ketchup inside as the actual product. Every aspect of this interface is influenced by design, including the shape of the bottle, the material used to create the bottle, and the fonts and colors used on the label.   

The top concern for UI designers is how the product is laid out and its visual appeal. When Heinz decided to rebrand their bottles, the designer was tasked with the responsibility of re-envisioning the bottle’s label using the company brand book as a guide.

In the UI scenario, a designer may create many iterations of the design before stakeholders agree on a direction. The UI designer stays within the brand guidelines for each design idea. In user centered design, this process is referred to as visual design, where the aesthetics are applied to a new or existing product. Visual design is the use of color, shapes, images, and typography to enhance the aesthetics of an experience. Design principles like hierarchy, balance, and contrast are used to effectively bring the design together. For instance, on the ketchup bottle, the label looks symmetrically balanced. There is also visual hierarchy as you read “Heinz” then “Ketchup” and finally the amount of ketchup in small print at the bottom.

On the other hand, UX designers are primarily concerned with how how the user actually interacts with the product. UX designers explore different approaches to solving a very specific user problem, such as the ketchup not coming out of the bottle easily.

In the UX scenario, the design team would focus on a broader perspective of the user centered design process, which includes research, iterative design, and user testing. During this process, the design team observes families in their homes and in restaurants interacting with the ketchup bottle.

After thorough observation, they would identify the challenges associated with the glass bottle, such as hitting the bottle and scraping it with a butter knife to get the last bit of ketchup out. Designers would develop many design iterations, from quick sketches to high-fidelity prototypes. They would then refine the design of the upside-down bottle through user testing where the design team observes users interacting with the various iterations of the prototype. 

UI falls under the subset of UX tasks. Like UI, there are many different specialty areas within the UX field, including information architecture, user research, interaction design, and many more. The necessary combination of tasks varies by application. Sometimes the objectives of the application may only call for UI Design. Other times, there may be a need for user research and testing to meet the business goals of the application.

Integrating user centered design into your software development lifecycle can produce significantly improved results with increased sales, reduced development waste, reduced time-to-market, and increased customer satisfaction.

Whether you have an existing UX team or you’re considering starting one, it’s important to avoid limiting the team’s potential by only focusing on wireframes and graphic design mockups.

Giving your UX team direct access to users for research and testing is critical to the team’s ability to produce results when these tasks are required to achieve the application’s business goals. Even the best designers are only as good as their understanding of the user and the task at hand.