# User Interface vs. User Experience

Teams use a classic breakfast cereal metaphor to distinguish surface design elements from real human interaction, diagnosing where their product or process breaks down. Small groups list concrete UI parts, map the actual user experience, and pinpoint mismatches.

**Time:** 15 minutes. 15 minutes as noted in the source material
**People:** 4 to 24. Small groups of 3 to 4 participants

## Choose this exercise

**Purpose:** Distinguish surface interface components from total user experience to pinpoint practical product or service issues.
**Use it when:** Use when a team conflates visual design or system features with user satisfaction, or when troubleshooting an underperforming workflow.
**Skip it when:** Skip when the team has no shared product, service, or process to examine, or when deep technical architecture rather than user interaction is the core issue.

## Materials and tools

- One copy of the Cereal Metaphor Reference Sheet per small group
- One blank paper or sticky note pad per small group
- Pens or markers for each group

## Before participants arrive

1. Print or display the Cereal Metaphor Reference Sheet.
2. Form small groups of 3 to 4 participants with a shared table or digital workspace.

## Say this to open

Today we are separating how a tool looks from how it feels to use. Think of breakfast cereal: the bowl and spoon are the interface, but eating the cereal is the experience. We will use this contrast to look at our own work and spot where the user experience breaks down.

## How to run it

### 1. Introduce the Metaphor (3 minutes)

Say the opening script. Direct groups to the Cereal Metaphor Reference Sheet. Give a clear neutral example: a ceramic cereal bowl with a hole in the bottom looks like a bowl, but creates a messy, frustrating eating experience. Have each small group agree on one specific tool, product, or workflow to analyze.

### 2. Map Interface vs Experience (5 minutes)

Small groups divide a sheet of paper into two columns: 'Interface (What is presented)' and 'Experience (What actually happens)'. In silence for 2 minutes, participants jot down observations, then share in their small group for 3 minutes. Any participant may pass or observe.

### 3. Identify the Core Mismatch (4 minutes)

Each group identifies one key mismatch where an interface component leads to a broken or awkward user experience. The group writes one sentence describing the breakdown on a central sticky note or shared board.

### 4. Debrief Key Insights (3 minutes)

Facilitator calls on two or three groups to share their mismatch sentence. Facilitator asks debrief questions to close the session.


## Debrief questions

- Where did our interface look acceptable on paper while the actual experience failed?
- What is one small change to the interface that would immediately improve the user experience?

**Finished output:** A two-column comparison sheet per group showing interface elements versus actual user experience, highlighting at least one specific breakdown.

## Remote

Run in video breakout rooms of 3 to 4 people. Share the Cereal Metaphor Reference Sheet via a shared slide or link. Groups use a collaborative digital whiteboard with a two-column template to capture points. Call back to the main room for the final 3-minute share-out.

## Hybrid

Pair in-person participants with in-person tables and remote participants in their own virtual breakout room. Use a shared online workspace so in-person and remote cohorts can read each other's mismatch sentences during the whole-room debrief.

## Access and participation choices

- Participants may contribute via writing, speaking, or silent observation.
- Participants may pass during the group discussion without offering an explanation.
- Written text alternatives are provided alongside the cereal visual metaphor.

## If the session gets stuck

**A group debates technical system architecture instead of user interaction.**

Remind the team of the cereal metaphor: refocus on what the human user touches, sees, and feels when attempting their task.

**Participants cannot agree on which product or feature to analyze.**

Assign the team's most common shared daily tool or current sprint deliverable to avoid stalled decision-making.


## Terms used here

- UI (User Interface): The specific screens, buttons, forms, physical tools, or visible touchpoints someone interacts with.
- UX (User Experience): The complete end-to-end feeling, ease, and outcome someone has while trying to accomplish a goal with that tool.

## Participant material: Cereal Metaphor Reference Sheet

The Cereal Metaphor:

1. User Interface (UI):
- The physical bowl, spoon, box, and milk carton.
- The visible layout, shapes, colors, and controls provided to the user.

2. User Experience (UX):
- Eating the cereal.
- Is the spoon too small? Is the bowl leaking? Does the cereal stay crunchy or turn to mush? How easy and satisfying is breakfast?

Your Task:
- Name one specific product, service, or internal process.
- Column A: List the UI parts (screens, buttons, forms, tools).
- Column B: List the actual UX (confusion, delays, satisfaction, roadblocks).
- Write one sentence highlighting the biggest mismatch between what was designed and what happens.

## Sources and adaptation

Observed in Relationship Makers Handbook, page 456.

The source fragment references a breakfast cereal metaphor, UI vs UX distinction, a 5-15 minute timeframe, and small-group breakdown. UWT structured the timing to a 15-minute run sheet, added concrete turn-taking steps, provided the explicit reference handout to replace the missing image mentioned in the source, and created debrief prompts.

Current run sheet: https://unitedwetransform.com/exercises/user-interface-vs-user-experience/