UI vs UX. Ketchup, Chicken, and Egg

Masha Panchenko

Most non-designers use UI/UX as a joint term without thinking of separating it. As a design agency providing UI/UX services, we are sometimes asked why this term is united and why there is a slash between UI and UX. Read this article to find out the answer to one of these questions.

Meaning of UI and UX

UI stands for the user interface. The interface serves as an intermediary between the programming language and humans, all those elements that allow people to get the use of complicated software without being an IT professional.

The user interface consists of many elements like buttons, menus, icons. Actually, more than just that: also animations, sounds, shades, links colors, scrolling patterns, and so on. The voice-based interface (Siri, Alexa) is another type of interface.

UX means user experience. Experience consists of well-structured workflows, the understandable architecture of the website, clear commands, fast and efficient interactions. The job of UX design is to make the product easy and enjoyable to use.

The interface is an important part of user experience, and experience is built through interaction with the interface. Because of such a tight interconnection between UI and UX, the term UI/UX design became extremely common. They function together in harmony like yin-yang and there is no competition between the two. 

Ketchup, Chicken, and Egg

To better understand what differs UI from UX, let's take a look at....ketchup. Yes, you've read that correctly. There is a famous picture with two different ketchup bottles: a classic glass one and a squeezable plastic one with a cap at the bottom. Glass bottle looks neat and stylish, yet getting ketchup out of it is no easy task. On the other hand, squeezable packaging makes you think that it was made for providing the smoothest ketchup experience possible.

UI - glass tomato bottle, UX - plastic upside down tomato bottle
Image credit: uxdesign.cc

The message is clear, yet there have been lots of critics about this simplified way of explaining what is the difference between UI and UX design. The problem is the perceived antagonism of the two. UI and UX are not synonyms, but neither are the opposites. It is more like chicken and egg, two elements of the process.

But what came first: the chicken or the egg? Let's find out.

UX - egg - UI - chicken
Image credit: Depositphotos

UI. The Chicken

What did the user interface look like before UX/UI designers were a thing? First computers had just a screen where you had to type commands for the machine to do any operation. 

The command-line interface looks like an “anti UI” to modern users. Basically, humans had to talk to computers in computer language, the language that very few people knew. Terms like user-friendly, accessible, human-centered design were not applicable. It was computer-centered rather than human-centered.

It was not until the 80s when personal computers appeared on the market and the interface started moving from computer-centered orientation closer to the users, marking the beginning of the graphical user interface era.

from command line to desktop, folders, and files
Evolution of the user interface

The mere existence of functional software was a bit of a miracle back then and each new program was one of a kind, so the demand for a specific design was rather low. No one expected interaction with the machines to be easy. Over time, interfaces have become more and more advanced and UI capabilities have increased as well.

Nowadays, smart devices are everywhere, the solutions are numerous and there are always alternatives (whatever startup founders say). To attract users, software should be user-friendly. Sounds as obvious as Dale Carnegie’s advice. However, accomplishing that is not as easy. To get an orientation, check out these examples of great UI design.

UX. The egg

So, when did UX appear? Well, its history is as long as that of an egg. User experience existed since the first services appeared in human history, and arguably even before that: when an ancient man started using the first tools made of stone.

UX books may bring up an example of experience design from the 19th century when business owners were searching for ways of attracting customers. The users of first computers also had experiences, for sure, but the focus was set on functionality. For the reasons explained above, the user experience started playing an important role in software development a while after the appearance of the first PCs, as the evolution of the user interface took off.

desktops of 80s, 90s, 2000, 3D desktop

Nowadays, user experience is the priority of product design in the majority of software companies. UX defines the elements of the user interface and its general structure, strategy, and philosophy. And UI is what makes the experience delightful. 

UI vs UX design. The difference

Now that the unity of UI/UX design is crystal clear, let’s talk about the differences between the UI and UX design.

What do UI designers do? 

UI designers focus mostly on visual elements, and partly on the other means of an interface, such as sound and animation. Their job is to ensure consistency of the design, its coherence with the brand identity, and make the website or app look clear, attractive, and accessible to users.

To create a good user interface, knowledge of graphic design principles is essential. Composition, typography, layout, colors are as important in web design as they are in printed materials. That is why UI designers often come to this profession from graphic design.

The skills needed for UI design are not limited to work with graphic design instruments such as Figma and Photoshop. In small products, designers also perform the role of front-end developers. Basic knowledge of the front-end also makes the process of handing out the elements of web design to the developers and overall design-developers communication go smoothly.

Here are some of the common questions that UI designers face:

  • What is the best layout to make this text readable?
  • How do I make the design adjustable for both desktop and mobile?
  • What pictures to choose and where to place them to catch the attention of the users?

What do UX designers do?

While most UI designers base their solutions on the general principles of design, UX designers rely heavily on user research.

To make the design easy to use, the focus is on the target audience, people that already use the product (or are likely to use it in the future). The skills of UX designers include psychology, analytics, in some cases, sociology, anthropology, and, one of the most important, empathy. No Ph.D. is required, but basic knowledge is a must.

To get the right information from the users, UX designers conduct in-depth interviews, field research, mouse tracking, eye-tracking, and a variety of other UX research tools and methods. Another important skill is choosing the right ones out of this bunch of tools.

UX research process may look rather simple from the outside, but it has lots of hidden nuances. Even when we talk about interviews, the basis of every user research process, to get useful and unbiased information out of the focus group, the UX designer has to prepare a script and follow a certain methodology. Here is a list of UX research interview questions for you to get a glimpse of the preparation process.

And though the research takes a large chunk of UX designers’ work, they also work on actual design and testing. If you want to find more about that, read our articles with a detailed explanation of what UX designers and researchers really do.

These are some of the questions that UX designers ask themselves when working on the product:

  • Is it easy for users to find a pair of red sneakers, size 9 on the website?
  • How can we change the structure of the menu to make it easy to understand and intuitive?
  • What problems do users encounter when using the app? (and how can they be fixed?)

These are just some of the differences between UI and UX designers, and then come product designers… This position requires a wider set of skills, from psychology to business development, marketing, branding, project management, and so on. Product designers often lead teams of UI/UX designers, but can also work alone on small startups. For further details, read our article product designers vs UI/UX designers.

How do you know if your product needs a UI, UX, or UI/UX designer?

Here at Eleken, we don’t have a strong separation between UI and UX designers, our team members have diverse backgrounds and expertise in both UI and UX. It makes sense since we work a lot on small projects that require one to three designers.

In big software companies that have over a hundred professionals working on UI/UX design, you may see all sorts of specializations: UI designer, UX designer, UX strategist, Interaction designer, Information architect, Information designer, Service designer, Accessibility specialist, User researcher, and many more.

Narrow specialization is not necessarily better than having a UI/UX designer with a wide range of skills and responsibilities. The choice between the two options is strongly tied to the size of the product and team. Both have their pros and cons.

There is no rule that you need to have a division between UI and UX professionals when your design team starts to grow. When in-team communication works well, the responsibilities are distributed between the designers according to their interests, skills and the needs of the project.

A UX designer working in a large team would be capable of building UI, and vice versa. Having a narrower range of tasks helps save time and provides a deeper focus on what they are doing. We recommend you base your hiring decisions on skills and experience rather than on the title of the profession.

To sum up

If this article was still lacking UI vs UX comparison images, here is one more:

Twitter post: I label increasingly nonsensical images with "UI" and "UX" and hope they get used in serious presentations. UI - watermelon with swimming cap, UX - basketball ball in a glass vase
Image credit: Sebastiaan de With

If you don’t get the point, that’s fine. There is no sense, the picture is one of a Twitter thread full of increasingly nonsensical images with “UI” and ”UX”. These images turned into a meme since there have been so many attempts of simple visualization and so many critics and discussions.

So where does that leave us? Let’s recap.

There are quite a few differences between the UI and UX, but what is the most important is their yin-yang harmony. User interface and user experience design are part of the whole and one is not complete without the other.

UI and UX work together on making software clear and understandable for every user. Want to know how? Read our article about the UI/UX design process.

Read more about SaaS design