• UI vs UX: What is the Difference?
  • Darin Dimitroff
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Nicolas Li
  • Proofreader: Frank(XffFrank), Yang Liuqing

As an all-around product designer, I’ve observed a title obsession in the industry over the years. Sure, we can mock and tweet funny jokes at the same time, but who does that help?

It’s like, “Should designers type code?” The “UX vs UI” question has become an insider joke.

On the one hand, this trend also gives experienced designers an outlet. In fact, there’s a Tumblr blog dedicated to this.

One problem, however, is that the industry can seem difficult and difficult for beginners. But it’s a shame that the barrier to entry for a novice designer has never been lower. (I mean, it’s actually great.)

Too long, so don’t look 🙂

UI stands for user interface. These are objects that users can interact with directly within the software or web page, such as those that you can see, touch, and hear. It is the outermost layer of an application – the controller.

As it stands now — given the type of device we’re using — UI design remains consistent with visual interface design specifications, despite the widespread acceptance of voice and handwritten input, thanks to various voice assistants and voice interactions.

UX stands for user experience. It is a holistic term that covers each of the different types of touchpoints that users are involved in using a product.

For digital products, UX includes not only the front end of the software, but also the implementation of the entire technology stack, customer service, brand concept, corporate public image, product availability, price and customer communication.

UX includes UI. The two have different meanings and should not be used in confusion at any time. From a semantic point of view, the title “UX/UI designer” is completely meaningless. By definition, every UI designer is a UX designer, and UX designers who do not have expertise in their field are rare. Talking about “UX” on the basis of a lack of domain knowledge makes any conversation meaningless.

So, what is the problem with the “UI/UX designer”?

As far as I am concerned, there are three main problems:

  1. It’s misleading: designers, developers, recruiters, investors, etc. More and more junior designers are using this title – and I can’t blame them. Everyone does it, and in this trend, being too honest about your skills often makes you feel left out.
  2. It gives people the wrong idea of where their careers are headed, that being a “UI designer” is not enough. If digital products are anything like Pokemon Mobile, UX/UI Designer won’t be a cooler, more advanced version of UI Designer.
  3. It greatly undermines the importance of the “UX designer”, which is really the sum total of everyone’s work.

The UI is the UXPart of the

Simply put, human-computer interaction happens on the UI. While this is an important part, it is only one layer on the overall UX stack, and it includes many design principles.

Let’s look at a real-life example: watching television.

UX design for WATCHING TV includes the quality of the content, specifications for the TV, placement, furniture, your current state of mind, and so on. On the other hand, THE UI design of watching TV is a small part: the quality of the remote control and the design of the menu on the TV screen.

The relevanttheseThe picture

UI vs UX . Credit: digitalfractal.com/

Yes, these pictures. I don’t want you to think of me as the old man yelling at the sky in The Simpsons animation, but most of the images used to compare UI and UX are missing the point. A designer named Sebastian de With made the same point on twitter a year ago.

Many of the recurring images (like this one with two bottles of tomato sauce and another showing a shortcut across the lawn) not only lack meaning, they can have the opposite effect. These images drive UI and UX into opposites and imply that the UI designer’s work is useless because users are already using the product in other ways.

We can take a look at the following example of ketchup bottles and fix it. We’ll only need to use one bottle, because it doesn’t make sense to label two different designs as “UI Vs UX” :

  • The UI layer is the bottle itself, containing the cap and label. This means any bottle – not just the version 1 with the bottle upside down
  • The UX layer is a combination of factors such as corporate branding and marketing capabilities, the nutritional and quality of ketchup itself, specific online and offline product discovery and purchase actions, corporate interactions with customers on social media networks, and contact points between each business and its existing and potential customers.

Where does the term UX come from?

The origins of UI long predate UX. It has been used since the early days of computers because it is a scientific term. UX took a long time to catch on.

The term UI was introduced to The public in The mid-1990s by Don Norman, a partner in The Nielsen Norman Group and author of The best-selling book “The Design of Everday Things”. In the beginning, UX was clear, and Don Norman even made an entire video to deal with the details of the issue.

A UI is more than a GUI: Design an API

When we think about interfaces, we usually refer to graphical user interfaces or GUIs. Almost every device and system we use today interacts with a series of visual interface models: action Windows, ICONS, buttons, navigation bars, page sliders, input ports, and so on.

The UI and GUI have become almost synonymous, which has its advantages: most users need to use instruction/code based tools directly for their daily work. However, a UI is more than just a GUI.

In my day job, I focus on front-end design systems, so designing a developer-oriented layer in a system is part of my job. In this case, a component’s API layer is an interactive interface for programmers to use. Designing and documenting the API layer was one of the trickiest tasks I’ve tackled in years.

Even if you don’t code, I don’t recommend spending your time on this type of task, or even making it a personal challenge. Many modern frameworks, such as React, do a great job of encouraging and implementing teamwork in a more meaningful way than sharing a Sketch file and the day is over.

Reject false dichotomy

While it’s definitely a good thing to be more professional about certain titles and semantics in the design world, talking too much about “UI Vs UX” is counterproductive. This is a hot topic, and I totally agree with Jared Spool when he said, “Everyone is a designer.”

I’ve lost count of the number of great UI design ideas from developers and valuable UX improvements from visual designers. It’s important to be aware of the title responsibilities you have within your organization — but being limited to that won’t prevent you from moving on to other areas.


  1. Heinz continues to sell bottles with an upturned top because of loyal customers and because of customers who don’t trust plastic packaging. ↩

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, React, front-end, back-end, product, design and other fields. If you want to see more high-quality translation, please continue to pay attention to the Project, official Weibo, Zhihu column.