1. UI vs UX: Roles & Affordance
The Engine and The Paint
In professional software engineering, UI and UX are often lumped together, but they represent two distinct stages of the product lifecycle. Understanding the boundary between them is what separates a UI/UX Engineer from a graphic designer.
🧠 UX: The Invisible Logic
UX (User Experience) is the invisible logic of a product. It is grounded in cognitive psychology. A UX Engineer's goal is to reduce Cognitive Load—the amount of mental effort required to use your app. If a user has to stop and think about how to navigate, you have already failed.
- Roles: User Researcher, Information Architect, UX Strategist.
- Responsibilities: User Journeys, Wireframing, Usability Testing, and Logic Flows.
🎨 UI: The Visual Translation
UI (User Interface) is the visual execution. It is the skin, the typography, and the interactive elements. UI is the tool we use to establish Visual Hierarchy, telling the user's brain what to look at first, second, and third.
- Roles: UI Designer, Interaction Designer, Visual Lead.
- Responsibilities: Design Systems, Typography Scale, Color Theory, and High-Fidelity Mockups.
🚫 The Mystery Meat Problem
A classic failure occurs when UI and UX collide poorly: Mystery Meat Navigation. This happens when a UI designer creates beautiful, minimalist icons (UI), but the UX fails because those icons don't clearly communicate their function (Affordance).
In the upcoming lab, you will encounter a 'broken' minimalist navigation bar. The icons look clean, but they provide zero clues to the user. To fix this, you must provide Visual Affordance. You will interact with the Sandbox to toggle text labels 'ON' for every icon. Never assume a user knows what an abstract symbol means without context.
Broken Button — Fix its Affordances
A button must signal it is clickable. Apply all three affordance cues below.
Knowledge Check
Ready to test your understanding of 1. UI vs UX: Roles & Affordance?