Skip to main content

UX is not UI

31 March 2017

Digital design, and the digital world in general, are becoming more and more complex and confusing every single day. When someone tells you they work as a UX/UI designer, you struggle to understand what it is they actually do.

Even though UX and UI are inextricably linked with each other when it comes to the design process of a product or service, we'll start by explaining both concepts separately. Be careful about confusing UX (User experience) with UI (User Interface), since they play two different roles

 

What is UX (User Experience) design?

UX design is the process of enhancing user satisfaction with a product or a service by taking into consideration needs, limitations and preferences to ensure the best experience for the user. In other words, UX design is all about the human experience and can easily be replicated in the real world if you think about the experience of going to a shop or a restaurant.

According to the Nielsen Norman Group, a leader in the user experience field, "user experience encompasses all aspects of the end-user's interaction with the company, its services, and its products".

So, what does the interaction require to be defined as user experience? Let's take the example of watching TV. The purpose of TV entertainment is to deliver a TV series, a reality TV show or a movie that triggers reactions in the audience (joy, sadness, empathy, laughter) through an interface (Smart-TV). This interaction has all the elements to be defined as UX, because it focuses on enhancing the satisfaction of the end-user: minimizing user effort, providing quick and smooth access the to type of entertainment content they want to see.

UX studies the interaction by asking questions like "who is the target audience", "what is the purpose" and "what are the motivations". UX designers use several techniques to answer those questions:
 

  1. Wireframing
    A guide to plan the layout of the product or service according to how you want your user to process the information.
     
  2. Usability Testing
    Evaluate a product or service by testing it with representative users. Participants will try to complete typical tasks while observers watch, listen and take notes.
     
  3. Personas
    Reliable and realistic representations of key audience segments, based on observation and research, to help create different designs for different kinds of people that will interact with the product or service.
     
  4. Scenarios and Storyboards
    Tools to explore and describe how a user interacts with a product or service. A scenario is a story or narrative to help explore the set of user tasks and user interactions required for the product or service. Storyboards are similar to scenarios, but instead of using a list of steps, they illustrate the interaction required to achieve a goal. 

 

What is UI (User Interface) design?

While UX targets optimizing a product or a service to make it easy, effective and pleasant for someone to use, UI focuses on the visual components, sensations and interactivity. A UI designer is responsible for content, information architecture, information interaction and visual design. UI is about everything that is visually perceptible and provides for a positive user interaction (a button, a different menu, a sound, etc.).
 

"UI design is the process of taking the way a machine works and translating it into the way a person thinks." - Strategist & Apprenticeship Program Manager at Fresh Tilled Soil"


A famous example of UI is Google's interface. All it contains is Google's logo, two buttons and a search field on a white background. It is recognized worldwide and remains almost unchanged since 1998.

To create a successful user interface, the UI designer should follow 8 principles:

  1. Know the user
  2. Pay attention to patterns already used in other applications

  3. Keep consistency throughout the application

  4. Use visual hierarchy

  5. Give feedback to the user

  6. Have redundancy and fault tolerance to allow for different uses and to excuse use errors

  7. Speak the user's language

  8. Keep it simple

 

How to apply UX and UI

To sum up both concepts and see how they work together, let's take a look at a practical example:
 

  • A product or service (the food).
  • A more or less appealing or refined, memorable interface (plates) where content is delivered.
  • An experience that includes the content as well as the interface and goes a step further, thinking about how and when (context) the product or service will be used.
     
Product, interface and experience


If we look at the images, we can have a better understanding of how UX and UI work together: the experience (UX) is delivered in a cosy restaurant with comfortable chairs, nice-looking plates and elegant silverware (UI), so that the user can enjoy the meal (product or service). The context as well as the different interfaces enable a more satisfying user experience.

UX gives usefulness to the interface to achieve a certain purpose and UI takes care of visuals and appearance to connect emotionally with the user.


Why you should use both, UX and UI

When designing a product or a service, you should always take into consideration both, UX and UI. Applying only of them could lead to major mistakes in the design of the product and not have the expected results for the end-user and consequently, for the provider.
 

"A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success - Rahul Varshney, Co-creator of Foster.fm."
 

An example of UX/UI is the Heinz ketchup bottle. In the images below, you can see how the interface design of the product evolved, keeping in mind a better user experience. It is worth reminding that UX and UI are part of the same process and have the same end goal - pleasing the user - and when combined, the result is a better end-product or service, with added value for the end-user.

 

Bottle example

 

Plastic bottle