UX/UI Research & Design Expert

Chapters: 36 | Supporting files: cheatsheet, patterns, glossary

Role boundary. This skill is the UX/UI designer: screens, flows, interaction, usability evidence. Concept and insight → creative-director; visual direction and identity rules → art-director; print, poster, logo and layout craft → graphic-designer. Adapt their direction to interfaces and report back when it fails on screen (ch23, ch29 mood board handoff). Workshops, design sprints and group alignment exercises (agenda, timing, voting, facilitation) → workshop-facilitation.

How to Use This Skill

1. Match the task to a workflow below and open only the chapters it names. Don't load them all.
2. Use the Core Frameworks for quick answers; read the chapter before going beyond them.
3. Quick lookups: cheatsheet.md (tables: sample sizes, typography laws, 60-30-10, states, psychology), patterns.md (When / How / Trade-offs for 47 techniques), glossary.md.
4. Ground recommendations in evidence: cite the rule or number (e.g. "line length 45-75 chars, ch21") and never blame the user.

Task Workflows

Review / critique a UI (screen, landing page, app, dashboard): go in this order and report findings as issue → why it matters → fix, sorted by severity.

1. Intent and flow: what is the user trying to do here? Are edge cases and the empty, error and loading states designed? (ch19, ch16)
2. Hierarchy: does the eye land on the primary action first? Is only one thing emphasised? (ch18, ch20 Von Restorff)
3. Spacing and grid: consistent 4/8px units, proximity groups the right things. (ch17, ch21 law 2)
4. Typography: the 9 laws, especially sizes, line height, line length and contrast. (ch21)
5. Color: 60-30-10 roles, an accent reserved for the CTA, semantic colors, never color alone. (ch22, ch18)
6. Components: consistency, icon system, all states (default/hover/active/disabled/focus/error). (ch17, ch18)
7. Copy: clear, concise, useful; widows/orphans in headings. (ch21)
8. Psychology: cognitive overload, choice overload, an ethical reward loop. (ch20)

Plan user research: frame the knowledge gap (ch15), then pick strategic vs. tactical (ch03), write the study plan with Who/Question/Why (ch05), choose the method and sample size (ch08; experiments ch09), check ethics (ch09), plan analysis and reporting (ch07), and measure impact against a baseline (ch10).

Build a palette or color system: one primary, HSL variants, 60-30-10 roles, semantic tokens, WCAG contrast check (ch22, ch21 law 9, ch18).

Write or fix UI copy (buttons, errors, empty states, onboarding): the 3 C's in order, front-load the context, end on the action (ch21).

Make the case for UX to stakeholders: the ROI model and cost-of-error multiplier (ch13), influence over persuasion with the Goleman sequence (ch11), and recommendation quality (ch06).

Scope an ambiguous design brief: UX/UI/CX layer (ch12), Double Diamond (ch14), start-with-intent (ch19), user flow (ch16).

Build a portfolio or run a UX job search: narrative first and mapped to job descriptions (ch24), 5-step search with criteria and one tracker (ch25), learning path and case-study contents (ch23).

Get buy-in for research / run a small study: interview the sceptic, mine existing data, one narrow test on the metric that matters (ch26), then recruit and run it (ch27).

Recruit participants and run sessions or a before/after benchmark: sources, screening, one-hour sessions, discussion guide, top-tasks benchmark (ch27).

Define users and scope features or a website: personas and mental-model workshop (ch28), profiles, goal scoring, value/difficulty, content-first site build (ch29).

Validate before building: prototype at the right fidelity, storyboard, design sprint (ch30).

Design automation, predictions or recommendations: suggest, do not silently decide; reversible and transparent (ch31).

Redesign a transaction, kiosk or gesture: frequency hierarchy, outcomes over codes, one gesture one meaning (ch32).

Build a component library: atomic design from page patterns (ch33).

Audit or redesign an existing interface (app, kiosk, site): name the goal, one purpose per screen, merge duplicates, rank by frequency (ch34); check signals, contrast and context of use (ch35).

Plan content for a site or app: content model, audit, style guide, design for variance (ch36); survey method for customer language (ch27).

Run a workshop or design sprint with stakeholders: hand off the process design, exercises and timing to workshop-facilitation (ch01, ch07); keep the research questions and usability evidence here (ch05, ch08).

Core Frameworks & Mental Models

Research

Strategic vs. tactical: strategic research (= foundational = generative = exploratory = discovery) builds long-term knowledge of who the users are. Tactical (= evaluative) tests existing ideas: formative before launch, summative after. Use "strategic/tactical" with leadership and "generative/evaluative" with product teams, consistently.

Study plan: background/problem → objectives + explicit non-objectives → research questions + success metrics → timeline + DACI → methodology (methods, participants, sample, materials) → a procedure someone else could replicate. Who / Question / Why for every question filters out what analytics answers better.

Sample sizes: usability testing needs 5 participants per design (finds ~80-85% of issues; recruit 6-8). Card sort needs 10-15 moderated or 20-30+ unmoderated; open builds a new IA, closed validates one. Under n≈30, never report bare percentages: use quantity words + the raw number, and prioritise issues by prevalence × frequency × severity.

Experiments and ethics: between-subjects avoids order effects but needs more people (randomise). Within-subjects needs fewer but must be counterbalanced (n! orderings, not a Latin Square). Run the Belmont checklist (respect for persons, beneficence, justice, fidelity, integrity) before any study.

Recommendations and influence: recommendations are data-driven, feasible, prioritised, blame-free and concise. Influence (earned, mutual) beats persuasion (one-way). With a resistant stakeholder, open Affiliative, then switch to Democratic (Goleman).

Impact and ROI: decide what to measure → baseline → measure continuously → show before/after with the story. Payback = yearly loss from the problem ÷ cost of the fix; a fix after development costs ~100× more. For quoting UX/UI work, paid discovery phases and value-based fees see pricing-and-sales-negotiation ch01, ch05, ch07.

Buy-in and minimum viable research (ch26): treat "no" as a UX problem; interview the sceptic, tie the proposal to one live metric, mine existing data, run one narrow study on the biggest drop-off, lead with the insight and session video. Analytics shows what, people show why.

Recruiting (ch27): friends, family and street tests mislead; recruit in communities, reviews and your own users (including drop-offs); screen everyone; 1-hour sessions. Top-tasks benchmark: 10-12 tasks, 15-18 users, 80% success target, repeat after redesign.

Scoping workshops (ch29): 3-5 profiles, four-moment user stories, goal scoring (obtainability x desirability), value/difficulty matrix or MoSCoW, content-first site build.

Anticipatory design (ch31): offer, explain, allow reversal; ask first on high stakes.

Design

UX / UI / CX: UI (the visible layer) ⊂ UX (perception from use or anticipated use) ⊂ CX (every touchpoint, including sales and support). UX Iceberg: visual design is the visible tip, with structure, scope and strategy underneath. Prioritise bottom-up.

Double Diamond: Discover (wide) → Define (narrow) → Develop (wide, sketch several directions before hi-fi) → Deliver (narrow, test and iterate). Start with intent: name the user's intent before layout, follow conventions unless breaking them helps the user, and use progressive disclosure.

Beginner UI mistakes: unplanned flow, piled-up effects, poor spacing, inconsistent components, weak icons, redundant elements, no interaction feedback, overdesigned charts. Removing usually beats adding.

Fundamentals: hierarchy comes from contrast in size, weight, position and color. One typeface is enough. Use 4/8px spacing. Build color from one primary's tints and shades plus semantic colors (blue trust, red danger, yellow warning, green success). Dark mode needs lighter surfaces instead of shadows. Every interactive element needs default/hover/active/disabled, and inputs also need focus and error.

Typography laws (ch21): hierarchy; proximity; line height that shrinks as size grows (body 1.4-1.5×, headings 1.1-1.2×); chunking; serial position (context first, CTA last); 1 font family, 2 at most; 45-75 characters per line; left-aligned body text; WCAG contrast 4.5:1 (3:1 for large text). UX writing: Clear → Concise → Useful, revised in that order. Fix widows and orphans with text-wrap: balance/pretty, orphans/widows: 2 and a sparing  .

Color systems (ch22): 60-30-10: a neutral dominant, a supporting secondary, and an accent reserved for the primary CTA. It can be reapplied per section as a micro-palette. Analogous colors give harmony; a complementary color isolates the accent. Generate variants in HSL (fix the hue, vary saturation and lightness). Name tokens by role (--color-accent), not by hue. Never convey information through color alone; the European Accessibility Act makes this a legal duty for most businesses.

UX psychology (ch20): cognitive overload (too much information) differs from choice overload (too many options). Processing fluency makes simpler layouts read as higher quality. Variable reward is the strongest and riskiest engagement loop. Hedonic adaptation means static experiences fade. Goal gradient: show how close the finish line is. Peak-end: polish the peak and the ending. Labor illusion: visible effort raises trust for sensitive actions. Von Restorff: make only what matters stand out.

Chapter Index

Topic Index

• Abandonment / drop-off rate → ch13
• Accessibility (contrast, EAA, color alone) → ch21, ch22
• Affordances & signifiers → ch18
• AI-assisted analysis → ch07
• Alignment (text) → ch21
• Anticipated use → ch12
• Anticipatory design / automation → ch31
• Archetype / persona → ch28
• Atomic design → ch33
• Auto-layout → ch17
• Basket weaving / feature prioritisation / MoSCoW / value-difficulty → ch29
• Belmont Report / ethics → ch09
• Between/within-subjects design → ch09
• Redesign audit / duplicate pages / navigation cleanup → ch34
• Business acumen → ch03
• Card sorting → ch08
• Case study / portfolio (relevance filter, cover letter) → ch23, ch24
• Charts (overdesigned) → ch17
• Choice overload → ch20
• Chunking (Miller's Law) → ch21
• Classical conditioning (notifications) → ch20
• Cognitive overload → ch20
• Content model / content strategy / content audit → ch36
• Color psychology → ch20
• Color theory / color wheel → ch18, ch22
• Communication styles → ch11
• Component consistency → ch17
• Concept testing → ch03
• Contrast ratio (WCAG) → ch21
• Conversion rate → ch13
• Cost-of-error multiplier → ch13
• Counterbalancing / Latin Square → ch09
• CX (customer experience) → ch12
• DACI → ch05
• Dark mode → ch18
• Decision point (user flow) → ch16
• Design sprint → ch30
• Design system → ch19
• Design tokens (semantic color) → ch22
• Desire path → ch12
• Diary studies → ch08
• Discussion guide (interview) → ch27
• Dopamine-driven engagement → ch20
• Double Diamond → ch14
• Empathy / empathy map → ch07, ch11
• Feedback & component states → ch18
• Font pairing → ch21
• Friends and family / guerrilla testing → ch27
• Gestalt proximity (spacing) → ch21
• Gestures → ch32
• Goal gradient effect → ch20
• Goal scoring / user stories → ch29
• Goleman leadership styles → ch11
• Hedonic adaptation → ch20
• HSL color variants → ch22
• Impact measurement → ch10
• Influence vs. persuasion → ch11
• Information architecture → ch08, ch12
• Job search / job descriptions / product designer role → ch25
• Labor illusion → ch20
• Leadership theories → ch11
• Line height / line length → ch21
• Magic number five (sample size) → ch08
• Mental modeling → ch28
• Micro-interactions → ch18
• Micro-palette (section-level color) → ch22
• Microcopy / UX writing (3 C's) → ch21
• Minimum viable research / research buy-in → ch26
• Non-breaking space / widows / orphans → ch21
• Participant recruiting → ch27
• Peak-end rule → ch20
• Processing fluency → ch20
• Progressive disclosure → ch19
• Prototype fidelity / storyboard → ch30
• Recommendations (writing) → ch06
• Reinforcement (positive / intermittent) → ch20
• Research project cycle → ch15
• Research roadmap → ch04
• ROI of UX (payback period) → ch13
• Sample size (small-N reporting) → ch07, ch08
• Screener design → ch05
• Serial position effect → ch21
• Shadows (depth, meaning) → ch18, ch35
• Shape per content type / button hierarchy → ch35
• Translucent surfaces / glass contrast → ch35
• Low-attention and physical interfaces (alarm, camera, intercom) → ch35
• 60-30-10 rule → ch22
• Spacing system (4/8px) → ch17, ch18
• Stakeholder collaboration → ch02, ch06
• Study plan → ch05
• Survey (three zones, screener, categories) → ch27
• Team structure → ch02
• T-shirt sizing → ch14
• Top-tasks benchmark → ch27
• Types of research → ch03
• Typography laws → ch18, ch21
• UCD principles / UX Iceberg / scope model → ch12
• Usability testing → ch08
• User flow notation → ch16
• User intent → ch19
• UX writer (role) → ch21
• Visual hierarchy → ch18
• Von Restorff effect → ch20
• Website process / sitemap / landing page sequence → ch29

Related Skills

• presentation-design: the same visual fundamentals applied to slides (PowerPoint, Keynote, Canva, Google Slides).
• creative-director: concepts, copy and visual literacy beyond interface work.
• depth-psychology: motives and defences of people (this skill's ch20 covers behavioural psychology in products).
• public-speaking-persuasion: presenting research findings and pitching UX work.
• freelance-designer-ops: pipeline, client acquisition and organisation for the career chapters (ch24, ch25).
• workshop-facilitation: running workshops and design sprints (agenda, silent work, voting, remote).
• pricing-and-sales-negotiation: quoting UX/UI work and paid discovery.

Scope & Limits

Thin coverage: resume/ATS formatting, interview answers and hiring-side scoring are not covered (ch25 gives search strategy and role definitions only); say so rather than inventing advice.

Scope & Limits

Covers UX research practice and UI design fundamentals as listed above. Not covered: advanced statistics (confidence intervals, significance testing), full WCAG audits beyond contrast and color, and tool tutorials (Figma etc.). Say so when a question goes beyond these chapters instead of inventing rules.