UI/UX Design UX Foundations & Design Thinking Syllabus

What is problem framing in design, and why does it matter?

Problem framing is deliberately defining the boundaries, perspective, and assumptions of the problem before solving it. It matters because the frame determines the solution space — a poorly framed problem leads teams to efficiently solve the wrong problem.

What is problem reframing? Give the classic "slow elevator" example.

Reframing is changing the perspective on a problem to reveal better solutions. Classic example: instead of "the elevator is too slow" (fix: faster motor), reframe as "the wait feels annoying" — solved cheaply by adding mirrors or displays so people are occupied while waiting.

What are "How Might We" (HMW) questions and what makes a good one?

HMW questions turn problem statements into optimistic, open-ended prompts for ideation (e.g., "How might we make check-in feel effortless for first-time visitors?"). A good HMW is broad enough to allow many solutions but narrow enough to give useful direction — and does not embed a specific solution.

What is the difference between empathy and sympathy in a design context?

Empathy is understanding and sharing the user's feelings and perspective from their point of view ("feeling with"); sympathy is feeling pity or concern for someone from the outside ("feeling for"). Design requires empathy, because decisions must be grounded in the user's actual experience, not the designer's assumptions.

What is an empathy map and what are its four classic quadrants?

A collaborative canvas that synthesizes what is known about a user. The four quadrants: what the user Says, Thinks, Does, and Feels. (Extended versions add Pains and Gains.) It exposes gaps and contradictions in user understanding.

Distinguish accessibility, inclusive design, and universal design.

Accessibility ensures products are usable by people with disabilities (an outcome, e.g., meeting WCAG). Inclusive design is a methodology that considers the full range of human diversity — ability, language, gender, culture — throughout the process. Universal design aims for one single solution usable by everyone without adaptation.

In Microsoft's inclusive design framework, what does the "Persona Spectrum" (permanent–temporary–situational) illustrate? Give an example.

That designing for permanent disabilities also helps people with temporary or situational limitations. Example for one-arm interaction: permanent — a person with one arm; temporary — someone with a broken arm; situational — a parent holding a baby. Solving for one benefits all.

What is equity-focused design and how does it go beyond inclusive design?

Equity-focused design centers the needs of historically underrepresented, marginalized, or excluded groups and aims for fair outcomes, not just fair access. It goes beyond inclusion by actively addressing systemic barriers and uplifting groups the product ecosystem has excluded.

What is an edge case in UX design, and why should designers plan for edge cases early?

An edge case is a rare or extreme situation outside the ideal "happy path" — empty states, errors, very long names, no connectivity, maximum data. Designing for them early prevents broken experiences for real users, since at scale rare cases occur constantly.

What are "stress cases" (per Eric Meyer and Sara Wachter-Boettcher), and how do they differ from edge cases?

Stress cases are moments when users are in crisis, distress, or high emotion — grief, emergencies, harassment. The term replaces "edge cases" to stress that these users are not marginal: design must not treat vulnerable moments as ignorable rarities (e.g., Facebook's "Year in Review" cheerfully surfacing a photo of a user's deceased daughter).

What is a dark pattern (deceptive pattern) in UX?

An interface deliberately designed to trick, pressure, or manipulate users into actions they did not intend — benefiting the business at the user's expense. The term was coined by Harry Brignull in 2010.

Name and define four common dark patterns.

Roach motel — easy to get into a situation (subscribe), hard to get out (cancel). Confirmshaming — guilt-tripping decline text ("No thanks, I hate saving money"). Sneak into basket — adding items/fees without consent. Hidden costs — revealing extra charges only at the last checkout step. (Others: bait-and-switch, forced continuity, privacy Zuckering, misdirection.)

What key ethical questions should designers ask to avoid harmful design?

Does this respect user autonomy and informed consent? Who benefits and who could be harmed or excluded? Is the design honest and transparent (no manipulation)? Does it protect privacy and use data responsibly? Would we be comfortable if the design's intent were made public? Are vulnerable users protected?

What is a mental model in UX, and what is its design implication?

A mental model is a user's internal belief about how a system works, built from past experience. Implication: interfaces should match users' existing mental models (or clearly teach a new one), because when the design's conceptual model conflicts with the user's mental model, errors and confusion result.

What is Jakob's Law, and how does it relate to mental models?

Jakob Nielsen's principle: "Users spend most of their time on other sites, so they prefer your site to work the same way as the sites they already know." It follows from mental models — following established conventions lets users transfer existing expectations instead of learning new ones.

Define the three types of cognitive load in cognitive load theory.

Intrinsic load — effort inherent to the task's difficulty itself; Extraneous load — effort wasted on poor presentation or confusing interface (what designers must minimize); Germane load — effort devoted to learning and building mental schemas (worth supporting).

What are the classic capacity estimates for human working memory?

George Miller (1956): about $7 \pm 2$ chunks ("the magical number seven"). Later research (Cowan, 2001) revised this to roughly $4 \pm 1$ chunks. Working memory is also brief — unrehearsed items fade within seconds.

Give four practical UI techniques for reducing users' cognitive load.

1) Chunk information into small groups (e.g., phone numbers, form sections); 2) Rely on recognition instead of recall (visible options, menus, autofill); 3) Use progressive disclosure to show only what's needed now; 4) Follow familiar conventions and remove visual clutter so attention goes to the task.

State Hick's Law, including its formula.

Hick's Law: decision time increases logarithmically with the number of equally likely choices: $$T = b \cdot \log_{2}(n + 1)$$ where $T$ is decision time, $n$ is the number of choices, and $b$ is an empirical constant. Design implication: reduce or organize choices to speed decisions.

State Fitts's Law, including the Shannon formulation of its formula.

Fitts's Law: the time to acquire a target depends on its distance and size: $$MT = a + b \cdot \log_{2}\left(\frac{D}{W} + 1\right)$$ where $MT$ is movement time, $D$ is distance to the target, $W$ is target width, and $a, b$ are empirical constants. Closer, larger targets are faster to hit.

In Fitts's Law, what is the Index of Difficulty and its formula?

The Index of Difficulty quantifies how hard a pointing task is: $$ID = \log_{2}\left(\frac{D}{W} + 1\right)$$ (Shannon form; original Fitts form $ID = \log_{2}\frac{2D}{W}$), measured in bits. Movement time grows linearly with $ID$: $MT = a + b \cdot ID$.

Give three interface design implications of Fitts's Law.

1) Make frequently used and important targets (buttons, links) large; 2) Place related targets close to where the user's pointer/thumb is likely to be; 3) Exploit screen edges and corners, which act as infinitely deep targets (e.g., macOS menu bar) — and keep destructive actions small/far to prevent accidents.

What are the Gestalt principles of perception, and what overarching idea do they share?

Principles from early-1900s German Gestalt psychology (Wertheimer, Koffka, Köhler) describing how humans perceive organized wholes rather than separate parts — "the whole is other than the sum of its parts." Key principles: proximity, similarity, closure, continuity, figure/ground, common region, common fate, symmetry.

Define the Gestalt principles of proximity and similarity, with a UI example of each.

Proximity: elements close together are perceived as a group — e.g., a form label placed near its input field reads as belonging to it. Similarity: elements sharing color, shape, or size are perceived as related — e.g., all hyperlinks in the same blue are understood as clickable.

Define the Gestalt principles of closure and continuity (good continuation).

Closure: the mind completes incomplete shapes — we see a full circle in a dashed outline (used in minimalist logos like WWF's panda, and loading spinners). Continuity: elements arranged on a line or curve are perceived as related and the eye follows the path — e.g., items in a horizontal carousel are read as one continuing set.

Define the Gestalt principles of figure/ground and common region, with UI examples.

Figure/ground: perception separates a focal element (figure) from its background (ground) — e.g., a modal dialog over a dimmed page. Common region: elements inside a shared boundary are perceived as grouped — e.g., content inside a card or bordered panel is read as one unit.

List Jakob Nielsen's 10 usability heuristics.

1) Visibility of system status; 2) Match between system and the real world; 3) User control and freedom; 4) Consistency and standards; 5) Error prevention; 6) Recognition rather than recall; 7) Flexibility and efficiency of use; 8) Aesthetic and minimalist design; 9) Help users recognize, diagnose, and recover from errors; 10) Help and documentation.

Explain Nielsen's heuristics "visibility of system status" and "user control and freedom," with an example of each.

Visibility of system status: keep users informed with timely feedback about what is happening — e.g., progress bars, loading indicators, "message sent" confirmations. User control and freedom: provide clearly marked exits from unwanted states — e.g., undo/redo, cancel buttons, easy back navigation — so mistakes aren't traps.

Explain Nielsen's heuristics "recognition rather than recall" and "error prevention," with an example of each.

Recognition rather than recall: minimize memory load by making options, actions, and information visible — e.g., menus and recently-used lists instead of requiring memorized commands. Error prevention: eliminate error-prone conditions before they occur — e.g., disabling invalid options, date pickers instead of free-text dates, confirmation before destructive actions.

List Ben Shneiderman's Eight Golden Rules of interface design.

1) Strive for consistency; 2) Seek universal usability (shortcuts for experts, help for novices); 3) Offer informative feedback; 4) Design dialogs to yield closure; 5) Prevent errors; 6) Permit easy reversal of actions; 7) Keep users in control (support internal locus of control); 8) Reduce short-term memory load.

In Shneiderman's Eight Golden Rules, what do "design dialogs to yield closure" and "support internal locus of control" mean?

Yield closure: organize action sequences with a clear beginning, middle, and end, with confirmation at completion — e.g., a checkout flow ending in an explicit "Order confirmed" screen. Internal locus of control: users should feel they initiate and control the system's actions, not that the system acts on them — avoid surprising, unrequested behavior.