What are UI and UX Design?

While “design” is often equated with graphic design or visual design, design is a vast discipline with many subdisciplines – everything from industrial design to service design falls under the umbrella of design. Merriam-Webster offers one appropriately broad definition of design: “to plan and make (something) for a specific use or purpose.” Intentionality and problem-solving are at the core of design. Design can include tasks ranging from thinking about what color a button should be on a screen, to deciding how passengers should flow through an airport.

In recent years, user interface (UI) design and user experience (UX) design have been at the forefront of conversations about design. Understanding UI and UX design help focus our work on the experience of the user while ensuring products and systems meet real needs in an intuitive and pleasant way.

After reading this article, you’ll be able to explain the differences between user interface (UI) design and user experience (UX) design.

What is User Interface (UI) Design?

A user interface is the interface through which a user interacts with a device. For example, on a mobile phone, the user interface is what is displayed on the screen of the device.

A user interface is what a user interacts with. For devices with screens, the user interface is what is displayed on the device’s screen. Photos: Linus Mimietz and Daniel Korpai, via Unsplash.

Early computing systems were controlled by punch cards or command lines, which meant that only users with a certain level of technical skill were able to use these systems. The introduction of the Graphical User Interface (GUI) in the 1980s enabled the rise of the personal computer, as well as the rise of user interface (UI) design as a field.

Apple’s Lisa, introduced in 1983, was the first GUI-based personal computer available to the public, but was a commercial flop. The Macintosh was soon to follow in 1984, with a refined core design language including iconography and typefaces designed by Susan Kare. With the advent of the GUI, user interface design (UI) became a field of its own, with designers like Kare leading the way.

Apple Lisa (1983), the first GUI-based personal computer available to the public. Photo: Gerhard »GeWalt« Walter, CC0, via Wikimedia Commons.

User interface (UI) design is a design discipline focused on the visual elements of the interface, for example:

• Layout: Where do elements appear on the screen?
• Colors: What palette is used and what emotions do those colors evoke?
• Typography: What typefaces are used and what do they communicate?
• Interaction design: How do elements respond to user interaction?
• Brand identity: How do all of the visual elements come together to represent the brand’s vision?
• Responsiveness and usability: Is the interface easy to use across different devices?
• Accessibility and inclusivity: Does the interface work for everyone?
• Front-end development: What is the code and technical backbone powering the interface?

What is User Experience (UX) Design?

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” –Don Norman and Jakob Nielsen

User experience (UX) describes the entire experience around a product or service, taking into account the user’s emotional state, the context or environment, and the designed system or artifact.

User experience (UX) takes into account the user, the context or environment, and the system in use, as defined by Hassenzahl & Tractinsky (2006).

Early in the history of computing, evaluation of interfaces focused on reliability and performance, minimizing errors and assessing how quickly systems performed. With time, the user became more of a focus, starting with assessing the speed of the user rather than the speed of the system alongside the emergence of human-computer interaction (HCI) as a discipline, and later focusing on usability. Today, user experience (UX) is at the center of our assessment of systems and interfaces, focused on designing for pleasure rather than the absence of pain.

Five phases of evolution of evaluation in human-computer interaction (HCI) defined by Jofish Kaye and Phoebe Sengers, as summarized by Craig MacDonald and Michael Atwood.

User experience (UX) design is a human-centered design discipline that addresses the holistic experience of a product, focused on:

• User journey: The entire process surrounding use of a product, from the problem to be solved through the impact of the solution.
• User research: Qualitative and quantitative research to put the user at the center of the design process.
• Deliverables to document the user experience and define the workflows and features of a product or design, such as:
• Personas: Summaries of example and target users, generally based on a composite of user research.
• Journey maps: A timeline of user actions related to accomplishing a particular goal related to a product or design.
• Storyboards: A sequence of panels (often resembling a comic book) depicting a user story chronologically.
• Prototypes: Iterative models, sketches or wireframes of a design used to gather feedback and inform the final design.

How It All Fits Together: Five Elements of UX Design

Distinguishing between all this different terminology can be confusing! What are the differences between UI design and UX design?

One useful model for understanding where these terms overlap and differ is the “Five Elements of UX Design” from Jesse James Garrett. This model shows the layered steps required to turn an idea into a functional product, with each layer of the model building upon one another, from the bottom up. The layers are arranged from abstract to concrete. UX design encompasses the entire model, while UI design focuses on the surface layer.

The Five Elements of UX Design, from Jesse James Garrett’s The Elements of User Experience.

Strategy

What problem is this product intended to solve? This layer, the most abstract of the model, takes into consideration both user needs and business goals.

Example: Mobile Phone
Who is the target audience and how will it fit into their lives? Smartphones with a smaller form factor might target users who are frequently on the go, or those who want to reduce their smartphone use.

Scope

What is the product that will be created to solve the problem? Within this layer, the team defines functional requirements (what features to build) and content requirements (written and visual information to include).

Example: Mobile Phone
What are the product specifications, such as the size of the screen and amount of storage available? Which apps are included by default with the phone? What aspects of the experience are customizable?

Structure

How is the design organized and how do interactions work? This layer includes information architecture (the structure and organization of content) and interaction design (the interactive experience of the product).

Example: Mobile Phone
How do users access key applications? What functionality is accessible from the screen and from physical buttons? What should appear on the home screen and lock screen by default — for example, does the phone display the time and the weather?

Skeleton

How is information presented and arranged? This layer begins to consider interface design (design of interface elements), navigation design (how users move through a system), and information design (presenting information to facilitate understanding). A common output at this stage is a set of wireframes.

Example: Mobile Phone
Where and how can users access search? Are some elements on the home screen larger than others? How is information arranged in menus and toolbars? Can users customize their workspace?

Surface

How does the product look and feel to users? This stage emphasizes visual design, for example, what colors and typefaces are used, and is the stage where UI design is front and center (though it is not exclusive to the surface).

Example: Mobile Phone
What colors and typefaces does the system use? Are a light mode and a dark mode available? What is the icon style? What kind of animations occur on-screen? What sounds does the interface make?

Who Are the User and End-User?

We’ve spoken a lot about “the user” — but who exactly does this refer to?

The user refers broadly to anyone who may use or maintain the product, and could include people such as system administrators, IT experts, and computer technicians. In early computing, these were often the only people using computing systems, since they required technical knowledge to operate.

The introduction of personal computers and GUIs opened up a wider range of potential non-technical end-users. In today’s landscape, it’s useful to differentiate between the user and the end-user: the person intended to ultimately use the product, who may not have the technical know-how or skill of the product’s administrators.

For example, a medical device may have a variety of users, including doctors and technicians who use the device for monitoring and may help patients set up their device or interpret its readings. The end-user of this medical device would be the patient who needs to interact with the interface on a regular basis. In other cases, such as deciding which web browser to use at home, the user and end-user may be the same person.

Recap

We’ve reached the end of our explanation of user interface (UI) design and user experience (UX) design! Here’s a recap of what we’ve learned:

• Design is an intentional problem-solving process focused on planning or making something for a specific use or purpose.
• Understanding user interface (UI) design and user experience (UX) design helps focus our work on the experience of the user while ensuring products and systems meet real needs in an intuitive and pleasant way.
• User interface (UI) design is focused on the visual design of the interface through which users interact with a product or system.
• User experience (UX) design is focused on the holistic experience around a product or service, taking into consideration the user, system, and context.
• The 5 elements of UX design, from abstract to concrete, are strategy, scope, structure, skeleton, and surface. UX design encompasses the entire process, while UI design primarily focuses on the surface.
• The user is anyone who might use or maintain a product.
• The end-user is the person ultimately intended to use a product, who may have less technical know-how.

In future lessons, we’ll explore the career landscape around UI and UX design, as well as key methodologies and tools used within the field.