Interactive concept map·Course structure

Syllabus-driven course structure · 25–26 · BCSAI · IE University

The full course, mapped session by session.

Everything from the official syllabus — objectives, teaching methodology, assessment, and all 30 sessions organised into modules — turned into a navigable study map. Each session links back to the part of the interactive concept map where you can actually touch the idea.

30 sessions·9 modules·6 ECTS credits·150 study hours

01 Course Overview

What this course is, who teaches it, and how it fits the BCSAI degree.

This course introduces students to the fundamentals of Human–Computer Interaction (HCI), focusing on understanding user needs, designing user-friendly interfaces, and conducting user research. Students gain practical experience through hands-on assignments, a semester-long group project, and a final exam.

The spine of the course is Jesse James Garrett's The Elements of User Experience — the five-planes model (Strategy → Scope → Structure → Skeleton → Surface) that walks a product from abstract purpose to concrete pixels. Around that spine the course layers user research methods, usability evaluation, accessibility, mobile and multi-platform design, a team project, and emerging-technology ethics.

Course code

UXUI-CSAI.4.M.A

Degree

BCSAI — Computer Science & AI

Year · Semester

4th · 2nd

Credits

6.0 ECTS

Sessions

30 (live, in-person)

Category

Compulsory

Language

English

Area

Computer Science

Academic year

2025–26

Professor

Dr. Robert David Polding

Office hours

On request · Tower 04.17

About the professor

Dr. Polding holds a Ph.D. and MSc in Information Systems from the University of Sheffield, with a focus on user-experience design, development methodologies and online-marketing strategy. His research centres on customer centricity and user-centered software design. He is founder/CTO of Linotek (digital museum tour guides) and has worked with British Telecom, Indra, Greenpeace and others. He currently serves as an assistant vice dean and lecturer.

AI policy: AI is permitted but must be acknowledged when used (with quotation and citation) as with any other source. Submitted reports should be your own work and should not be AI-generated.

Prerequisites & how this course connects

As a fourth-year, second-semester BCSAI course, this builds on the programming, web and data foundations you already have. No prior design training is assumed — but the skills you bring matter. Front-end/web development lets you turn prototypes into working interfaces; data science & statistics sharpen the quantitative-research and metrics work in Module 5; software engineering & project management underpin the team capstone (Module 8); and your AI/ML background feeds directly into the human-centered-AI and GenAI ethics discussions in Module 9. HCI is the layer that asks not just "can we build it?" but "does it actually work for a human?" — the discipline that connects everything else in the degree to real people.

What comes next: the user-research, prototyping, accessibility and human-centered-AI skills here transfer to product design, UX research, front-end engineering, design-systems work, and responsible-AI roles — and to any project where you ship software other people have to use.

02 Learning Objectives

By the end of the course you should be able to do each of the following.

01

Understand the foundations of HCI, including its history and interdisciplinary nature.

02

Identify and explain user-centered design principles and how to implement them.

03

Create user personas and scenarios to inform interface design.

04

Design and run usability evaluations using various methods.

05

Design and prototype user-friendly interfaces.

06

Understand the importance of accessibility and inclusive design in HCI.

07

Explore emerging trends in HCI and understand ethical considerations.

08

Analyze real-world HCI case studies, and how to work in cross-functional teams.

09

Collaborate in user-centered design projects and effectively communicate results.

10

Reflect on personal and professional growth as an HCI practitioner and explore career paths in HCI-related fields.

03 Teaching Methodology

IE University's method is collaborative, active and applied — you build knowledge by participating, not by watching. The 6 ECTS map to roughly 150 hours of total student work, distributed as below.

Lectures
13.3%
Discussions
6.7%
Exercises / async / field work
30%
Group work
30%
Individual studying
20%

Estimated effort: Lectures ≈ 20h · Discussions ≈ 10h · Exercises/async/field ≈ 45h · Group work ≈ 45h · Individual study ≈ 30h · Total = 150h. Note that 60% of your time is hands-on (exercises + group work) — this is a making course, not a reading course.

Weekly study-load — what to expect

Across roughly 15 teaching weeks (30 sessions, two per week), 150 hours of total work averages about 10 hours per week — counting class time, reading, the weekly individual assignment and the group project. Plan for an uneven load rather than a flat one: the early five-planes weeks are reading- and reflection-heavy (Garrett chapters + short deliverables); the user-research weeks (11–14) front-load planning and pilot data collection; and the project weeks (19–24) are the heaviest, peaking at the Week-24 delivery and presentation. Reserve dedicated time in the final fortnight for exam consolidation (Sessions 29–30).

A sustainable rhythm: read the assigned chapter before its session, do the weekly assignment within 48h while the session is fresh, and treat the group project as a slow-burn — small steady increments every week beat a sprint the night before Week 24.

04 Assessment

Your grade is continuous: five weighted components across the semester. The bars show each component's weight.

Final Exam
30%
Individual work
30%
Group presentation
15%
Group work
15%
Class participation
10%
30%

Final Exam

Comprehensive exam covering all course material. Week 30.

30%

Individual work

Weekly assignments delivered throughout the semester.

15%

Group presentation

Presentation of the user-centered design project. Week 24.

15%

Group work

Delivery of the group project artefacts. Week 24.

10%

Class participation

Active participation in sessions and submission of in-class exercises.

Passing grade

The minimum passing grade is 5.0 / 10. Four chances total are allowed to pass a course, spread over two consecutive academic years (ordinary + extraordinary calls).

Attendance (80% rule)

Students who do not meet the 80% attendance requirement fail both calls for the year (ordinary and extraordinary) and must re-enroll the following academic year.

Re-sit (June / July)

Failing the ordinary call (and meeting attendance) earns a re-sit: one comprehensive exam, in person, on the enrolled campus. The continuous-evaluation grade is ignored; max attainable grade is 8.0 ("notable").

Re-takers

Students re-enrolled after failing in a prior year must check the assigned professor's syllabus and contact them about specific criteria. Max grade in the retake (3rd call) is 10.0.

Grade reviews & appeals

A review session follows graded exams; attending it is a prerequisite to any grade appeal.

Conduct & ethics

Governed by IE University's Code of Conduct, Attendance Policy and Ethics Code. Failing >18 ECTS in a year after re-sits may lead to leaving the program.

What each component asks of you — criteria, format & tips

Final Exam — 30%

FORMAT: comprehensive written exam · Week 30 · in person · covers all modules

Tests conceptual mastery across the whole syllabus — you should be able to define every glossary term, place each topic on Garrett's five planes, and apply named principles (Nielsen's heuristics, Fitts's/Hick's/Jakob's laws, WCAG POUR) to short scenarios.

  • Recall & definition — precise use of vocabulary; no hand-waving.
  • Application — diagnosing a described interface against principles, not just naming them.
  • Synthesis — explaining how planes and cross-cutting concerns (research, accessibility, ethics) interrelate.

Tip: if you can re-draw the five planes from memory and slot every session's topic onto them, you are exam-ready. Use the concept-map quiz to self-test.

Individual work — 30%

FORMAT: weekly assignments (reflections, personas, requirements, wireframes, research instruments, audits)

The steady backbone of your grade. Each weekly deliverable applies that week's concept to a real artefact. Quality compounds — early personas/requirements feed later wireframes and evaluations.

  • Correct application — the method is used as taught (a persona grounded in research, not a stereotype).
  • Evidence & rationale — decisions justified, not asserted; sources cited (including AI, per policy).
  • Craft & clarity — legible, well-structured submissions delivered on time.

Tip: submit within 48h of the session while it's fresh, and keep a running design-rationale doc — it becomes free material for the project and exam.

Group work — 15% · Group presentation — 15% (combined capstone, 30%)

FORMAT: team user-centered design project · delivery + live presentation · Week 24

A cross-functional team runs the full five-planes process end to end — research → strategy → scope → structure → skeleton → surface → prototype → evaluation — then presents and defends it. Delivery grades the artefacts; presentation grades how you communicate them.

  • Process rigour (delivery) — visible user research driving design, not retrofitted opinion.
  • Prototype quality — coherent, usable, accessibility considered, iterated on test findings.
  • Narrative (presentation) — problem → research → design → evidence, told clearly in the time given.
  • Teamwork — balanced contribution and a defensible design rationale under Q&A.

Tip: lead the presentation with the user's problem, not your solution — the audience must feel the pain before they value the fix. Rehearse the Q&A; "why this choice?" is where grades are won or lost.

Class participation — 10%

FORMAT: active in-session contribution + submission of in-class exercises

Rewards engaged, prepared presence: contributing to discussion, giving and taking critique constructively, and completing in-class exercises. Note the 80% attendance rule is a hard gate independent of this score.

  • Preparedness — having done the reading so you can contribute substance.
  • Quality of contribution — advancing the discussion, not just speaking.
  • Critique etiquette — feedback on the work against goals, never on the person.

Tip: one well-aimed question or critique per session beats silence and beats noise. Treat critique as a skill you're being assessed on, not a social risk.

05 Program — All 30 Sessions

The 30 live sessions are grouped here into nine teaching modules that follow Garrett's five planes and then expand into research, accessibility, multi-platform design, a team project, and the future of the field. Each session lists its objective, topics with short explanations, the core HCI concept it teaches, a "key idea" to remember, and its readings and assignment. Where a session maps onto an interactive demo on the concept map, follow the linked chip to try it.

Module 1 · Foundations

Introduction to HCI & the Five Planes

Sessions 1–2

Sets the stage: what HCI is, where it came from, why it matters, and the mental model that organises the whole course — Garrett's five planes of user experience, starting from Strategy.

Module learning outcomes
  • Explain HCI as an interdisciplinary field and trace its key historical milestones.
  • Articulate why usability and experience matter for modern technology.
  • Distinguish the Strategy plane — user needs vs. product objectives — and define success metrics.

SESSION 1 · LIVE IN-PERSON

Introduction to HCI

Objective: understand what HCI is, where it came from, and why it matters.

Overview of the courselogistics, deliverables, the five-planes throughline.

Overview of HCIHCI sits at the intersection of computer science, cognitive psychology and design. It studies how people interact with systems and how to make that interaction effective (users reach their goal), efficient (with little wasted effort) and satisfying (they'd choose to do it again). To apply it, you treat the human, the machine and the dialogue between them as one system to be designed — not just the software.

Historical perspectivesThe field's arc explains why interfaces look as they do today. Vannevar Bush's "Memex" (1945) imagined associative information; Engelbart's 1968 "Mother of All Demos" introduced the mouse, hypertext and windows; Xerox PARC and the Macintosh popularised the GUI (1980s); the web (1990s) and the smartphone (2007) each redefined interaction; and we are now in an AI-driven era of conversational and generative interfaces. Knowing this lineage helps you recognise which "new" patterns are genuinely new and which are old ideas re-skinned.

Importance of HCI in modern technologyWhen most products are technically capable, experience becomes the differentiator: people abandon a banking app that is secure but baffling. HCI is also an accessibility and ethics obligation — a confusing medical or voting interface can cause real harm. It is a discipline, not a coat of paint applied at the end.

Core concept — Human–Computer Interaction: the design, evaluation and implementation of interactive computing systems for human use, and the study of the phenomena surrounding them (ACM SIGCHI). Its three pillars: the human, the computer, and the interaction between them. Example: the same "transfer money" task is one HCI problem on a phone (thumb reach, glare, interruptions) and a different one on a desktop (mouse precision, larger context) — the human and computer changed, so the interaction must too.

Concrete example: the iPod's click-wheel won not because it stored more songs than rivals, but because "1,000 songs in your pocket" became findable with one thumb — an interaction win, not a storage win.

Key idea: HCI reframes "the system works" into "the system works for this person, in this context." Technical correctness is necessary but never sufficient.

Common pitfall: assuming you are a representative user. You are an expert who built (or studies) the system; your fluency hides friction that real first-time users will hit.

Connects to → everything: this session's three pillars reappear as the five planes (Sessions 2–10), the research that grounds them (11–14), and the ethics that constrain them (25–26).

↗ Explore: HCI history timeline ↗ Explore: the 5 planes

Suggested readings

  • Garrett, J. J. — The Elements of User Experience, Chapters 1–2. Ch. 1 argues why experience matters and defines UX; Ch. 2 introduces the five-planes model that structures Sessions 1–10. Read it as the map for the whole first half of the course.
TakeawayHCI is the study of making interaction work for real humans in real contexts — design the interaction, not just the software.
Assignment: Personal reflection on a frustrating user experience.

SESSION 2 · LIVE IN-PERSON

Developing a Strategy

Objective: define why a product exists before deciding what it does.

User experience and the webThe web turned software into a service people choose rather than tolerate: switching cost is one click, so experience drives adoption and retention. This is why UX went from niche to mainstream in two decades.

Introduction to StrategyThe bottom plane and the most abstract. Everything above it (scope, structure, skeleton, surface) inherits its assumptions, so a clear strategy is the cheapest insurance against expensive rework later.

ObjectivesThe product and business goals: what the organisation wants to achieve (e.g. "increase trial-to-paid conversion," "reduce support tickets"). Stated concretely enough to argue about.

Target audienceWho the users are, segmented by needs and context — not demographics for their own sake. "Time-pressed parents booking on mobile" is a useful segment; "ages 25–45" usually is not.

Success metricsMeasurable indicators (task success rate, time-on-task, retention, conversion, SUS score) that tell you whether the strategy is working. Agree them before building so you can actually tell later.

Core concept — Strategy plane: the intersection of user needs and product objectives. Get it wrong and every decision above it inherits the mistake. Example: a streaming service whose objective is "maximise watch time" and whose user need is "find something I'll enjoy quickly" must design so those align — autoplay serves the metric but can betray the need, the exact tension this plane forces you to confront.

Concrete example: Google's homepage objective (search ad revenue) and the user need (find an answer fast) align so well that a deliberately empty page became iconic — strategy made visible in the design.

Key idea: "Why are we building this?" is answered here. Define success metrics early — you cannot improve what you never agreed to measure.

Common pitfall: the "vanity metric." Tracking page-views or sign-ups that look good but don't map to a real user need or business goal lets a failing product appear healthy.

Connects to → Scope (Sessions 4–5): strategy decides why; scope turns that into what. A requirement that serves no objective or user need is a candidate to cut.

↗ Explore: Strategy plane (peel the stack)

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 3 (the Strategy plane). Defines user needs vs. product objectives and how to surface both; the source for your success-metrics vocabulary.
TakeawayStrategy = user needs ∩ product objectives, made measurable. Decide why and how you'll know it worked before deciding what to build.
Assignment: Personal reflection on a frustrating user experience.
Module 2 · Strategy & Users

Personas, Research & Scope

Sessions 3–6

Turns "users" into concrete people, then converts what those people need into a defined, prioritised scope of features and content. This is the move from Strategy into Scope.

Module learning outcomes
  • Build evidence-based personas and scenarios from interviews and surveys.
  • Translate user needs into functional and content requirements (the Scope plane).
  • Prioritise requirements and resist scope creep.
  • Apply familiarity and convention so interfaces feel learnable.

SESSION 3 · LIVE IN-PERSON

Strategy Part 2 — Personas & Scenarios

Objective: represent target users as concrete personas grounded in research.

User personas and scenariosA persona is a fictional-but-evidence-based archetype capturing one user type's goals, frustrations and context; a scenario narrates that persona accomplishing a task ("Maya, a nurse on a night shift, needs to log a patient observation in under 20 seconds"). To apply them, you design for the persona and test designs by walking them through scenarios.

Conducting user interviews and surveysQualitative interviews surface the "why" behind behaviour (open questions, follow "tell me about the last time you…"); surveys scale the "how many." Together they ground personas in reality rather than assumption. The classic mistake is asking what people want instead of observing what they do.

Core concept — User-Centered Design (UCD): an iterative process that keeps real users and their needs at the centre of every decision, validating with them at each stage rather than designing for an imagined "average user." Example: instead of arguing internally about a checkout flow, a UCD team tests two versions with five real shoppers and lets the observed failures decide.

Concrete example: Alan Cooper introduced personas while designing an airline-IT tool — naming and grounding a user ("Kathy") stopped the team designing for themselves and ended circular feature debates.

Key idea: A persona without research is just a stereotype. Personas exist to create empathy and to settle arguments with evidence, not opinion.

Common pitfall: the "elastic user" — a persona so vague it can be stretched to justify any decision. If your persona would happily use every feature, it isn't doing its job.

Connects to → user research (Sessions 11–14), which supplies the evidence; and Scope (Sessions 4–5), where persona goals become the requirements you prioritise.

↗ Explore: Persona Builder

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 3 (strategy & users). Connects user research and segmentation to the strategy plane — read it as the bridge between "who" and "what we'll build."
TakeawayPersonas and scenarios turn abstract "users" into specific people with goals, so the team designs for evidence instead of for itself.
Assignment: Create a user persona based on a real or fictional user.

SESSION 4 · LIVE IN-PERSON

Scope — Requirement Analysis

Objective: decide what the product will and won't do.

Requirement analysisElicit, document and validate functional requirements (what the system does — "user can reset password") and content requirements (what it must contain — "a 200-word product description with one image"). Good requirements are testable: you can later check whether each was met.

Working out what you want to buildScope is the bridge from abstract strategy to concrete specification. Ambiguity here ("make it user-friendly") becomes expensive rework later, because every plane above scope is built on it. Choosing a CMS or platform is itself a scoping decision — it bounds what's cheap vs. costly to build.

Core concept — Scope plane: functional requirements + content requirements. It is the negotiated "spec" — the contract between strategy and execution. Example: "support file uploads" is a functional requirement; the allowed file types, size limit and error copy are the content/specification detail that turns it from a wish into something buildable and testable.

Concrete example: the difference between "users can share a document" and "users can generate a read-only link that expires in 7 days" is the difference between a vision and a scope — and the second one can actually be built and verified.

Key idea: Writing scope down is itself a design act: the act of specifying forces the hard questions that vague vision statements let you dodge.

Common pitfall: gold-plating — specifying features nobody asked for because they're interesting to build. Every requirement should trace back to a strategy objective or persona goal, or it's a candidate to cut.

Connects to → Strategy (Session 2) above it and prioritisation (Session 5) right after; the requirements you write here become the MoSCoW list you triage next session.

↗ Explore: Scope plane (MoSCoW)

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 4 (the Scope plane). Explains functional vs. content requirements and why specifying is itself a design decision — your reference for writing testable requirements.
TakeawayScope converts strategy into testable functional and content requirements — the contract that protects every plane above it.
Assignment: Research possible CMSs for your project.

SESSION 5 · LIVE IN-PERSON

Scope Part 2 — Prioritising Requirements

Objective: separate the essential from the nice-to-have.

Requirements analysis (cont.)Refine and disambiguate requirements into testable statements, removing duplicates and resolving conflicts (two stakeholders often "must have" incompatible things).

Prioritising requirementsTechniques such as MoSCoW make trade-offs explicit and defensible. Related tools include value-vs-effort mapping (do high-value/low-effort first) and the Kano model (distinguish must-be features from delighters). The point is to decide deliberately, not by whoever argues loudest.

Core concept — MoSCoW prioritisation: sort requirements into Must, Should, Could and Won't-have-this-time. If everything is a "Must," nothing is — prioritisation is the antidote to scope creep. Example: for an MVP booking app, "complete a booking" is a Must, "save a favourite venue" a Should, "dark mode" a Could, and "social feed" a Won't (this release).

Concrete example: the original iPhone shipped with no copy-paste and no app store — deliberately a "Won't (yet)." Cutting beloved features to ship a coherent core is prioritisation working as intended.

Key idea: Scope creep is the silent killer of UX. A small, finished, coherent product beats a large, half-built, incoherent one.

Common pitfall: "Must-have" inflation. When everything is labelled Must, the list stops guiding decisions; force a real ranking and protect the "Won't" column.

Connects to → the group project (Sessions 19–24), where a tight MoSCoW list is what makes a one-semester prototype achievable; and back to Strategy, the tie-breaker when two requirements compete.

↗ Explore: prioritise with MoSCoW

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 4. Same chapter as Session 4, here read for how to resolve and prioritise competing requirements rather than just capture them.
TakeawayPrioritisation (MoSCoW) is a design decision: a small coherent product beats a large half-built one, and the "Won't" list is your defence against scope creep.
Assignment: Complete the requirements analysis.

SESSION 6 · LIVE IN-PERSON

Skeleton — Metaphor & Familiarity

Objective: use existing mental models so interfaces feel instantly learnable.

How to build apps that don't frustrate usersFrustration usually comes from violated expectations: a button that doesn't look clickable, a gesture that does the opposite of every other app. Matching conventions removes that friction so users spend their attention on their goal, not on decoding your interface.

Using familiarity to our advantageMetaphors (desktop, trash can, shopping cart) and platform conventions let users transfer knowledge instead of re-learning. A cart icon instantly communicates "items I intend to buy" because the physical metaphor does the explaining for you — no tutorial required.

Core concept — Jakob's Law: users spend most of their time on other sites/apps, so they expect yours to work the same way. Familiar patterns lower cognitive load. Example: putting your logo top-left linking home, search top-right, and primary nav along the top costs you nothing and saves every user a re-learning tax — deviating needs a strong reason.

Concrete example: when Snapchat radically redesigned its navigation in 2018, millions of users revolted and engagement dropped — a textbook violation of Jakob's Law on an interface people had deeply internalised.

Key idea: Innovate on value, conform on convention. Be surprising in what you offer, predictable in how it's operated.

Common pitfall: a broken or mixed metaphor — e.g. a "trash" that actually archives, or a save icon that no younger user recognises as a floppy disk. A metaphor that lies is worse than none.

Connects to → Nielsen's "consistency & standards" and "match between system and real world" heuristics (Session 13), and the whole Skeleton plane (Session 9) where these conventions get laid out as wireframes.

↗ Explore: heuristics (consistency & standards)

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 4. Read here for the move from scope into how conventions and learnability shape what you build.
TakeawayHonour convention (Jakob's Law) so users transfer existing knowledge; spend your novelty budget on value, not on reinventing controls.
Assignment: Brainstorm ways to use metaphor and make the experience easier for the user.
Module 3 · Structure

Interaction Design & Information Architecture

Sessions 7–8

The Structure plane: how the pieces fit together. Interaction design governs behaviour over time and error handling; information architecture organises content so people can find it.

Module learning outcomes
  • Design interaction flows and graceful error handling.
  • Build information architecture: sitemaps, taxonomies and metadata.
  • Read and produce architecture diagrams that communicate structure.

SESSION 7 · LIVE IN-PERSON

The Structure — Interaction Design

Objective: design how the system behaves and how it recovers from mistakes.

Interaction designDefining the states a system can be in, the flows between them and the responses to each user action, so behaviour is predictable and forgiving. Think in terms of "what can the user do here, what happens, and how do they know?" — every action needs visible feedback (Nielsen #1, visibility of system status).

Error handlingPrevent errors where possible (disable invalid actions, use sensible defaults, confirm destructive ones); when they still happen, explain them in plain language, say what went wrong and how to fix it, and never blame the user. "Email already in use — sign in instead?" beats "Error 409."

Core concept — Error prevention & recovery (Nielsen #5 & #9): the best error message is the one never shown; the second-best clearly states the problem and a constructive fix. Always provide an "emergency exit" — undo, back, cancel. Example: Gmail's "Undo Send" turns an irreversible mistake into a 5-second recoverable one — error recovery designed in, not bolted on.

Concrete example: form fields that validate inline ("password needs a number") prevent the error before submit, rather than rejecting the whole form afterward — prevention beating recovery.

Key idea: Design for the unhappy path. Users will make mistakes — the question is whether your interface treats them as failures or as ordinary, recoverable events.

Common pitfall: destructive actions with no confirmation or undo. A "Delete" that fires instantly with no way back turns a slip of the finger into lost work — violating "user control & freedom."

Connects to → Nielsen's heuristics (Session 13), which formalise this; and Information Design (Session 8), its partner half of the Structure plane.

↗ Explore: error-related heuristics ↗ Explore: Structure plane

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 5 (the Structure plane). Covers interaction design and conceptual models; pair it with Nielsen's error heuristics for the practical rules.
TakeawayDesign the unhappy path: prevent errors first, and when they occur, explain them plainly and always offer a way out.
Assignment: Document how you can help the user, and the possible ways they can make mistakes.

SESSION 8 · LIVE IN-PERSON

Structure Part 2 — Information Design

Objective: organise content so users can find and understand it.

Information designPresenting information so it communicates effectively and supports decisions: grouping, ordering, visual hierarchy and the Gestalt principles (proximity, similarity, common region) that make a screen read at a glance rather than as a wall of text.

Architecture diagramsSitemaps and flow diagrams that map organisational structure and navigation paths before any pixels are drawn. They let the team agree on "what links to what" cheaply, on paper.

Metadata descriptionsThe labels, tags and attributes that make content findable and machine-organisable (categories, author, date, alt text). Good metadata powers search, filtering and accessibility alike.

Core concept — Information Architecture (IA): the structural design of shared information environments — organisation, labelling, navigation and search systems. Card sorting reveals users' own mental categories so labels match their words, not yours. Example: an e-commerce team unsure whether "robes" belong under Sleepwear or Bathroom runs a card sort; users consistently group them with towels, settling the navigation with evidence.

Concrete example: IKEA's site uses users' task words ("store & organise," "sleep") rather than internal jargon ("modular shelving systems") — IA shaped by the user's mental model, not the org chart.

Key idea: The best IA is invisible — users find things without thinking about the structure. Test it with card sorting before you commit to a navigation.

Common pitfall: mirroring your company's org chart in the navigation. Users don't know (or care) which department owns a page; they navigate by task and by their own vocabulary.

Connects to → the Skeleton plane (Session 9), where this structure becomes concrete navigation and wireframes; and Gestalt principles in the glossary, which govern how grouped information is perceived.

↗ Explore: Card Sorting (IA)

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 5. Read here for information design and how structure is communicated; complements card-sorting practice.
TakeawayIA organises content around users' mental models, validated by card sorting — when it's right, finding things feels effortless and invisible.
Assignment: Create the architecture designs and metadata descriptions.
Module 4 · Skeleton & Surface

Wireframing, Prototyping & Visual Design

Sessions 9–10

The top two planes. Skeleton fixes where things go (interface, navigation, information design, wireframes); Surface is the sensory layer (colour, type, motion). Both are explored through prototyping at increasing fidelity.

Module learning outcomes
  • Use metaphor and familiarity to improve learnability on the Skeleton plane.
  • Explain why prototyping fits into the product design lifecycle.
  • Choose between low- and high-fidelity prototypes and the right tools for each.

SESSION 9 · LIVE IN-PERSON

The Skeleton — Metaphor

Objective: shape layout and navigation so the experience feels enjoyable and intuitive.

Making apps that people enjoyDelight comes first from effortlessness (the task just works), then from small, well-placed moments of personality — a satisfying confirmation animation, a friendly empty-state. Delight layered on friction is lipstick; remove the friction first.

FamiliarityReuse interface patterns users already know (tabs, cards, pull-to-refresh) to minimise the learning curve, reducing the choices a user must make to reach a goal (a Hick's-Law concern — more options means slower decisions).

Using metaphor to aid the CXMetaphors carry meaning from the physical world into the interface (folders, swipe-to-refresh, the "card" you can flick away). They let you skip explanation because the user already knows how the real-world object behaves.

Core concept — Skeleton plane: interface design, navigation design and information design — the concrete arrangement of elements that makes content reachable. Wireframes live here. Example: deciding the checkout's "Pay" button sits bottom-right, sticky, and larger than secondary actions is a Skeleton decision — placement and prominence, decided before colour.

Concrete example: a greyscale wireframe of a sign-up screen reveals that the "Skip" link competes with "Create account" for attention — a layout problem you'd never spot if you'd jumped straight to choosing brand colours.

Key idea: Wireframes are about arrangement, not aesthetics. Solve "where does everything go?" in greyscale before you ever pick a colour.

Common pitfall: decorating the wireframe. Adding real colours, photos and copy too early turns layout reviews into colour debates and hides structural problems.

Connects to → Jakob's Law and metaphor (Session 6) feeding the layout, and prototyping fidelity (Session 10), which takes these wireframes toward the Surface plane.

↗ Explore: Wireframe Sandbox

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 6 (the Skeleton plane). Distinguishes interface, navigation and information design and explains why wireframes precede visual design.
TakeawayThe Skeleton decides arrangement, navigation and prominence in greyscale — fix "where does everything go?" before "what colour is it?"
Assignment: Brainstorm and document ways the experience will improve through familiarity and metaphor.

SESSION 10 · LIVE IN-PERSON

Prototyping & Wireframing

Objective: externalise ideas as testable artefacts at the right fidelity.

Importance of prototyping & the product design lifecyclePrototypes turn debates into experiments: instead of arguing whether a flow works, you build a rough version and watch someone use it. They fail cheaply and early, which is exactly the point — a problem caught in a paper sketch costs minutes, the same problem caught after launch costs a release.

Prototyping tools and techniquesPaper sketches, click-through tools (Figma, Marvel), and coded prototypes — chosen by the question being asked. To find broken flows, paper is enough; to test a tricky animation or real performance, you need higher fidelity. Use the cheapest tool that answers your question.

Low- vs. high-fidelity prototypesLow-fi (paper, greyscale) tests structure, flow and concept and invites blunt feedback because it looks unfinished; high-fi tests look, feel and micro-interactions but risks people reacting to polish instead of substance.

Core concept — Surface plane & fidelity: Surface is the sensory experience — visual design as a coherent system of design tokens (named colour/spacing/type variables), not an ad-hoc "vibe." Match prototype fidelity to the decision you're trying to make. Example: testing "can users find checkout?" needs only a grey paper prototype; testing "does this loading animation feel fast?" needs a high-fi coded one.

Concrete example: the famous "paper-prototype usability test" — a facilitator swaps hand-drawn screens while a user "taps" them — routinely uncovers navigation flaws in an afternoon for the price of a marker and Post-its.

Key idea: Fidelity is a tool, not a goal. High fidelity too early invites bikeshedding about colour while the flow is still broken.

Common pitfall: the "too-pretty prototype" trap — a high-fi mockup makes testers (and stakeholders) reluctant to suggest big changes because it looks done, and makes them critique pixels instead of the concept.

Connects to → the Skeleton wireframes (Session 9) that prototypes build on, and the usability testing methods (Sessions 13–14) you'll use to evaluate them. This module's skills power the whole group project (Sessions 19–24).

↗ Explore: Surface — Design Tokens ↗ Explore: Wireframe Sandbox

Suggested readings

  • Garrett — The Elements of User Experience, Chapter 6. The Skeleton-to-Surface chapter; read it for how prototyping carries a design from arrangement into the sensory layer.
TakeawayPrototype at the lowest fidelity that answers your question — cheap, early, ugly prototypes catch the expensive mistakes.
Assignment: Create a paper wireframe prototype of a mobile app.
Module 5 · User Research

Research Methods & Usability Evaluation

Sessions 11–14

How we know what we know about users. Distinguishes UX research from opinion, separates qualitative from quantitative and attitudinal from behavioral, then drills into concrete evaluation methods: heuristics, usability tests, cognitive walkthroughs and surveys.

Module learning outcomes
  • Define what is and isn't UX research, and where it fits the lifecycle.
  • Choose between qualitative/quantitative and attitudinal/behavioral methods.
  • Run heuristic evaluations, usability tests, cognitive walkthroughs and surveys.
  • Design a research instrument and pilot it.

SESSION 11 · LIVE IN-PERSON

User Research: Overview (1 of 2)

Objective: understand what UX research is and why it de-risks design.

What is and isn't UX research?Structured, systematic inquiry into user behaviour and needs — not asking friends, not designer intuition, and not analytics read in isolation. Research means a question, a method chosen to answer it, and findings you can act on. "We think users want X" is a hypothesis; UX research is how you test it.

Importance in the product design lifecycleResearch isn't a single phase — it informs strategy (discovery), validates scope, checks designs before launch (formative testing) and measures them after (summative). De-risking decisions with cheap research early prevents costly wrong-product mistakes later.

Quantitative vs. qualitative methodsQual explains why (interviews, usability tests — small N, rich, generates hypotheses); quant measures how much / how many (surveys, analytics, A/B tests — large N, generalisable, tests hypotheses). They answer different questions and are strongest together.

Core concept — the research-methods landscape (NN/g): methods map on two axes — attitudinal↔behavioral (what people say vs. what they do) and qualitative↔quantitative — plus the context of use (natural, scripted, or none). Example: interviews are attitudinal+qualitative; A/B tests are behavioral+quantitative; usability testing sits in the behavioral+qualitative corner. Locate your question, then pick the matching method.

Concrete example: analytics show 60% abandon a form (the what) but can't say why; five moderated usability sessions reveal the password rule is hidden until submit (the why) — behavioral-quant plus qual, triangulated.

Key idea: What users say and what users do often differ. Behavioral methods catch the gap that self-report misses.

Common pitfall: leading or loaded questions ("How much did you love the new design?") that manufacture the answer you hoped for. Ask neutrally and, where possible, observe rather than ask.

Connects to → personas (Session 3), which this research grounds; and the concrete evaluation methods (Sessions 13–14) that sit inside this landscape.

↗ Explore: Research Methods Quadrant

Suggested readings

  • Krug, S. — Rocket Surgery Made Easy. The friendly, jargon-free playbook for DIY usability testing on no budget — your practical starting point.
  • NN/g — When to Use Which User-Experience Research Methods. The article behind the quadrant model; read it to choose a method by question, not habit.
  • NN/g — Quantitative User-Research Methodologies: An Overview. Companion piece on the measurement side — surveys, analytics and metrics.
  • Goodman, Kuniavsky & Moed — Observing the User Experience. Comprehensive practitioner handbook for the full qual+quant toolkit; use as a reference, not cover-to-cover.
  • Chapman & Rodden — Quantitative User Experience Research. For the data-minded: statistical and large-scale UX methods.
  • Albert & Tullis — Measuring the User Experience. The reference on UX metrics — task success, time, satisfaction, SUS.
TakeawayUX research is choosing a method to fit your question on the say/do × qual/quant landscape — and trusting behaviour over self-report.
Assignment: Design a research project and corresponding methodology based on a user problem.

SESSION 12 · LIVE IN-PERSON

User Research: Overview (2 of 2)

Objective: turn the research-methods landscape into a concrete plan.

What is and isn't UX research? (cont.)Deepening insight vs. anecdote: one vivid complaint is a hypothesis, not a finding. A finding is a pattern you've seen recur across participants or confirmed with data.

Importance in the lifecycle (cont.)Matching method to project phase, budget and risk: lightweight discovery interviews early, formative usability tests mid-design, summative metrics near launch. Higher-risk decisions justify heavier methods.

Quantitative vs. qualitative (cont.)Combining methods so each covers the other's blind spot — qual generates the hypothesis, quant tests how widespread it is. Sample sizing matters: ~5 users per round for qual usability, far larger N for statistical claims.

Core concept — triangulation: converging evidence from multiple methods (e.g. interviews + analytics + a survey) produces conclusions more robust than any single source, because each method's weakness is covered by another's strength. Example: a survey says users want feature X, analytics show no one uses the existing version of X, and interviews reveal they can't find it — triangulation turns a contradiction into a clear discoverability fix.

Concrete example: a team planning a redesign runs 6 interviews (why), a 400-person survey (how many), and reviews 3 months of analytics (what actually happens) — agreement across all three gives them confidence to commit budget.

Key idea: Choose the method to fit the question and the constraints — there is no single "best" research method, only the right one for this decision.

Common pitfall: over-generalising from a tiny qualitative sample ("3 of 5 users disliked it, so 60% of users will") — qual finds problems, it doesn't measure their prevalence.

Connects to → the methods landscape (Session 11) it builds on, and the research-instrument assignment you'll pilot in Sessions 13–14.

↗ Explore: pick the right method

Suggested readings

  • Same set as Session 11 — Krug · NN/g (both articles) · Goodman/Kuniavsky/Moed · Chapman/Rodden · Albert/Tullis. Here, read the NN/g articles specifically for how to combine methods and plan a study, not just pick one.
TakeawayTriangulate: combine qual and quant so each covers the other's blind spot — and never generalise prevalence from a small qualitative sample.
Assignment: Design a research project and corresponding methodology based on a user problem.

SESSION 13 · LIVE IN-PERSON

Usability Testing, UI Evaluation & Surveys (1 of 2)

Objective: evaluate an interface with expert and user-based methods.

Heuristic evaluation & expert reviewsA few evaluators independently inspect an interface against recognised principles (Nielsen's 10 heuristics), then merge findings — fast, cheap, no users required, ideal for catching obvious problems before you spend test sessions on them. NN/g recommends 3–5 evaluators because no single expert finds everything.

Usability tests & cognitive walkthroughsIn a usability test, real users attempt real tasks while thinking aloud and you watch where they struggle. A cognitive walkthrough is an expert method: you step through a task as a first-timer asking "will the user know what to do, and know it worked?" at each step.

User surveysScale attitudes and satisfaction across many users. Standardised instruments like the SUS (System Usability Scale, 10 items → 0–100 score) let you benchmark and compare over time.

Core concept — Nielsen's 10 usability heuristics: (1) visibility of system status; (2) match between system and the real world; (3) user control & freedom; (4) consistency & standards; (5) error prevention; (6) recognition rather than recall; (7) flexibility & efficiency of use; (8) aesthetic & minimalist design; (9) help users recognise, diagnose & recover from errors; (10) help & documentation. Example: a checkout that shows "Step 2 of 3" satisfies #1; one that lets you edit the cart without losing your place satisfies #3.

Concrete example: evaluating a flight-booking site against #6 (recognition over recall), you flag that the return-date field expects you to remember your outbound date instead of showing it — a recall burden a small change removes.

Key idea: Nielsen & Landauer's research showed ~5 users uncover ~85% of usability problems — you don't need a huge sample to learn an enormous amount; run more, smaller rounds instead.

Common pitfall: the facilitator leading the participant ("you'd tap the blue button here, right?"). The moment you hint, the test stops measuring the interface and starts measuring your prompting.

Connects to → error handling (Session 7) and consistency/familiarity (Session 6), which heuristics formalise; and the heuristics audit you'll deepen in Session 14.

↗ Explore: score the 10 heuristics

Suggested readings

  • Krug — Rocket Surgery Made Easy. The how-to for running your own usability sessions and writing tasks — the backbone of this week's instrument.
  • Albert & Tullis — Measuring the User Experience. For turning observations into metrics (task success, time, SUS) you can report.
  • Plus the NN/g articles · Goodman/Kuniavsky/Moed · Chapman/Rodden (as Sessions 11–12).
TakeawayCombine cheap expert review (heuristics, ~3–5 evaluators) with ~5-user think-aloud tests; both find most problems without leading the participant.
Assignment: Design a research instrument (survey, usability-test script, heuristic guide) and collect data in a pilot study.

SESSION 14 · LIVE IN-PERSON

Usability Testing, UI Evaluation & Surveys (2 of 2)

Objective: run a pilot evaluation and interpret the findings.

Heuristic evaluation & expert reviews (cont.)Rating each finding for severity (frequency × impact × persistence) so the team fixes the painful, common problems first instead of bikeshedding cosmetic ones. A severity scale (0 = not a problem … 4 = usability catastrophe) makes triage defensible.

Usability tests & cognitive walkthroughs (cont.)Moderating well: set tasks not instructions, stay quiet, count silently before prompting, and capture quotes and behaviours, not just opinions. The hardest skill is not helping when you watch someone struggle.

User surveys (cont.)Writing neutral, single-barrelled questions; using validated scales where possible; and analysing closed responses quantitatively while coding open responses into themes.

Core concept — formative vs. summative evaluation: formative testing happens during design to improve it (find & fix problems); summative testing happens after to benchmark it (does it meet a target?). Most class and project work is formative. Example: watching 5 users fail a sign-up to fix it is formative; later measuring "92% complete sign-up in under 60s" is summative.

Concrete example: after a pilot test, findings get a severity rating — "can't find logout (sev 2)" vs "checkout fails on mobile (sev 4)" — and the team fixes sev-4 first, a defensible priority backed by evidence.

Key idea: The goal of a usability test is to fix the product, not to judge the user. If a user fails a task, the design failed the test.

Common pitfall: confirmation bias in analysis — hearing only the feedback that supports the design you already love. Pre-define tasks and success criteria so the data, not your hopes, decides.

Connects to → usability-driven iteration in the group project (Session 21), where these findings directly drive the next design revision.

↗ Explore: heuristics audit

Suggested readings

  • Krug — Rocket Surgery Made Easy. Re-read for moderating tactics and "the trickiest part is keeping your mouth shut."
  • Albert & Tullis — Measuring the User Experience. For severity scoring and presenting findings as data stakeholders trust.
  • Plus NN/g · Goodman/Kuniavsky/Moed · Chapman/Rodden (as before).
TakeawayRun formative tests to find & fix, rate findings by severity, and remember: a failed task means the design failed, not the user.
Assignment: Design a research instrument and collect data in a pilot study.
Module 6 · Accessibility

Accessibility & Inclusive Design

Sessions 15–16

Designing so that everyone — regardless of ability — can use the product. Covers accessibility principles, assistive technologies, inclusive-design practice, and how to involve participants with disabilities in research.

Module learning outcomes
  • State the principles of accessibility and the WCAG POUR model.
  • Identify common assistive technologies and how interfaces must support them.
  • Apply inclusive-design practices and audit a real product.

SESSION 15 · LIVE IN-PERSON

Accessibility & Inclusive Design (1 of 2)

Objective: treat accessibility as a baseline requirement, not an extra.

Principles of accessibilityContent must be Perceivable, Operable, Understandable and Robust (WCAG's POUR): don't rely on colour alone, ensure sufficient contrast (4.5:1 for normal text at AA), make everything reachable by keyboard, write clear language, and use valid semantic markup. These are concrete, testable success criteria, not vibes.

Assistive technologiesScreen readers (VoiceOver, NVDA), magnifiers, switch access and voice control. They rely on the interface exposing semantics — real headings, button/link elements, form labels, alt text, ARIA roles — so a div styled as a button but lacking the role is invisible to them.

Inclusive design practicesDesigning for the full range of human diversity, including situational ("solve for one, extend to many"). Microsoft's inclusive-design framing shows a one-armed person, a parent holding a baby, and someone with an arm injury all benefit from the same one-handed design.

Core concept — WCAG & POUR: the Web Content Accessibility Guidelines organise success criteria under four principles — Perceivable, Operable, Understandable, Robust — at conformance levels A / AA / AAA. AA is the common legal/target baseline (and the level most accessibility law references). Example: captions (Perceivable), full keyboard operation (Operable), plain error messages (Understandable) and valid ARIA (Robust) each map to one letter of POUR.

Concrete example: the UK government's GOV.UK service manual mandates WCAG AA — and the resulting high-contrast, keyboard-friendly, plain-language pages are routinely cited as some of the easiest sites to use for everyone, not just disabled users.

Key idea: Accessibility isn't charity for a minority — it's the baseline, and accessible design (captions, contrast, keyboard support) is better design for everyone.

Common pitfall: "accessibility overlay" widgets or last-minute audits bolted on at the end. Accessibility designed in from the wireframe stage is cheap; retrofitted onto a finished product it is expensive and incomplete.

Connects to → the curb-cut effect (Session 16), semantic structure from the Skeleton plane (Session 9), and the colour-not-information rule that recurs on the Surface plane.

↗ Explore: Accessibility Simulator + contrast checker

Suggested readings

  • Horton & Quesenbery — A Web for Everyone, Chapters 1–2. Frames accessible, inclusive design as simply good design; the conceptual grounding for POUR and personas with disabilities.
  • Lazar — Research Methods in HCI, Ch. 16. How to involve participants with disabilities in research ethically and effectively — the research side of accessibility.
TakeawayAccessibility = WCAG's POUR built in from the start (AA baseline); it's the floor of good design, and it benefits everyone.
Assignment: Analyze the accessibility of a website or application.

SESSION 16 · LIVE IN-PERSON

Accessibility & Inclusive Design (2 of 2)

Objective: audit accessibility and design with assistive technology in mind.

Principles of accessibility (cont.)Applying POUR to the hard cases: forms (labels, error association, no time-outs without warning), media (captions, transcripts, audio description) and navigation (skip links, logical focus order, visible focus rings).

Assistive technologies (cont.)Hands-on testing: navigate your own product with the keyboard only (Tab/Enter/arrows), then with a screen reader running and the screen off. The gaps you hit are exactly what disabled users hit daily.

Inclusive design practices (cont.)Writing accessible content (plain language, descriptive link text, meaningful alt text) and designing for situational and temporary impairments — glare outdoors, a broken arm, a noisy train — which affect everyone sometimes.

Core concept — the curb-cut effect: accommodations built for disabled users routinely benefit everyone — curb cuts help wheelchairs and strollers, luggage, cyclists. Example: captions were made for Deaf users but are now used by the majority of viewers watching video on mute in public; the accessible feature became a mainstream one. Inclusive design widens the market.

Concrete example: the OXO Good Grips peeler was designed for arthritic hands but became a best-seller because its fat, soft handle is more comfortable for everyone — the curb-cut effect in a physical product.

Key idea: Colour is decoration, not information. Always pair colour with text, icon or shape so colour-blind and low-vision users lose nothing.

Common pitfall: conveying status by colour alone — a red/green dot, or a form field that only turns red on error. ~8% of men can't reliably tell red from green; add an icon or label.

Connects to → heuristic/usability evaluation (Sessions 13–14): an accessibility audit is a specialised expert review, and assistive-tech testing is usability testing for a wider population.

↗ Explore: colour-blindness filters

Suggested readings

  • Horton & Quesenbery — A Web for Everyone, Chapters 1–2. Re-read for the inclusive-design mindset and the curb-cut argument.
  • Lazar — Research Methods in HCI, Ch. 16. Practical guidance for running your accessibility audit with real participants with disabilities.
TakeawayTest with keyboard and screen reader, never signal with colour alone, and remember the curb-cut effect: inclusive design helps everyone.
Assignment: Analyze the accessibility of a website or application.
Module 7 · Multi-Platform

Mobile & Multi-Platform Design

Sessions 17–18

Designing across screen sizes and modalities: responsive layout, mobile UX best practice, and multimodal / cross-device experiences (touch, voice, AR/VR).

Module learning outcomes
  • Apply responsive-design principles across breakpoints.
  • Follow mobile UX best practices (touch targets, thumb zones, performance).
  • Reason about multimodal and cross-device interaction.

SESSION 17 · LIVE IN-PERSON

Mobile & Multi-Platform Design (1 of 2)

Objective: design one experience that adapts across devices.

Design considerations for mobile & multi-platform appsDifferent input methods (touch vs. mouse vs. voice), screen sizes, sensors, and contexts of use: mobile users are often distracted, one-handed, on flaky networks and in bright sun. Designing for the worst case (the bus, not the desk) makes the best case effortless.

Responsive designFluid grids, flexible media and breakpoints so layout adapts to the viewport while content stays intact. A responsive page reflows from three columns on desktop to one on mobile without hiding or losing anything essential.

Mobile UX best practicesTouch targets large enough to hit reliably (~44–48px), primary actions in the thumb-reachable bottom zone, minimal typing (pickers, autofill, sensible keyboards), and fast loads on slow connections.

Core concept — Fitts's Law: MT = a + b·log₂(2D/W) — the time to acquire a target grows with distance (D) and shrinks with target size (W). On touch screens this dictates minimum tap-target sizes (~44–48px) and placing key actions within thumb reach. Example: a tiny "X" close button in a far corner is slow and error-prone; a large bottom-sheet "Done" button is fast — Fitts's Law quantifies why. (Related: Hick's Law — decision time rises with the number of choices, so trim menus on small screens.)

Concrete example: iOS moved Safari's address bar to the bottom precisely so it sits in the thumb zone — a direct application of Fitts's Law to one-handed phone use.

Key idea: "Mobile-first" isn't about phones — it's a discipline. The small screen forces you to cut to the essential before you have room to bloat.

Common pitfall: hover-dependent interactions (tooltips, hover menus) that simply don't exist on touch, and tap targets crammed so close together that users hit the wrong one — both violations of Fitts's Law on mobile.

Connects to → the Skeleton plane (Session 9) at multiple sizes, accessibility (Sessions 15–16) where large targets and reflow also help motor- and vision-impaired users, and multimodal interaction (Session 18).

↗ Explore: three-breakpoint preview ↗ Explore: Fitts's Law demo

Suggested readings

  • Neil, T. — Mobile Design Pattern Gallery. A browsable catalogue of proven mobile UI patterns — your go-to when you need a known-good solution rather than inventing one.
  • The Handbook of Multimodal-Multisensor Interfaces, Vol. 1. The academic foundation for combining touch/voice/gesture — theory behind Session 18.
  • Design of Multimodal Mobile Interfaces. Focused treatment of multiple input/output modes on mobile.
  • Design Beyond Devices: Creating Multimodal, Cross-Device Experiences (Cheryl Platz). How to design one experience that spans screens, voice and ambient computing.
TakeawayDesign mobile-first for the distracted, one-handed worst case; Fitts's Law (big, reachable targets) and Hick's Law (fewer choices) are your sizing rules.
Assignment: Design a prototype for a multimodal application (mobile, AR/VR, web).

SESSION 18 · LIVE IN-PERSON

Mobile & Multi-Platform Design (2 of 2)

Objective: extend the design into multimodal and cross-device contexts.

Design considerations (cont.)Continuity across devices — start a task on the phone, finish on the laptop — while respecting each platform's native conventions (iOS vs. Android vs. web) so the app feels at home everywhere rather than uncanny.

Responsive design (cont.)Content-out breakpoints (let the content decide where it breaks, not arbitrary device widths) and performance budgets so the experience stays fast on a 3G connection, not just office Wi-Fi.

Mobile UX best practices (cont.)Gestures with visible affordances, graceful offline states, and permissions/notifications requested in context and used sparingly — pestering users is the fastest route to an uninstall.

Core concept — multimodal interaction: combining input/output modalities (touch, voice, gaze, gesture, haptics) lets users interact in the way that best fits their context and abilities — a key thread toward AR/VR and ambient computing. Example: a car interface where you speak a destination (eyes on road), the system confirms by voice, and you tap only to choose between options — each modality used where it's safest and fastest.

Concrete example: a smart speaker + phone combo — you ask the speaker to set a timer (voice, hands busy cooking) and glance at the phone for the remaining seconds (visual) — one task, two modalities, chosen by context.

Key idea: A great cross-device experience feels like one product handing off between screens, not three apps that happen to share a logo.

Common pitfall: "voice-first" or "AR" applied as a gimmick where a tap would be faster and more reliable. A modality should be chosen because it fits the context, not because it's novel.

Connects to → accessibility (multimodality is giving users alternative ways in) and emerging tech / human-centered AI (Sessions 25–26), where conversational and ambient interfaces dominate.

↗ Explore: responsive breakpoints

Suggested readings

  • Platz — Design Beyond Devices (cross-device & multimodal). The most directly useful here: how to choreograph one experience across screens, voice and ambient devices.
  • Plus Neil · Handbook of Multimodal-Multisensor Interfaces Vol. 1 · Design of Multimodal Mobile Interfaces (as Session 17).
TakeawayMultimodal, cross-device design should feel like one coherent product; pick each modality because it fits the context, not because it's flashy.
Assignment: Design a prototype for a multimodal application (mobile, AR/VR, web).
Module 8 · Applied Project

User-Centered Design Project

Sessions 19–24

The capstone: a team applies the entire five-planes process end to end — research, strategy, scope, structure, skeleton, surface, prototype and evaluation — then presents it. Worth 30% of the grade (15% delivery + 15% presentation), assessed in Week 24.

Module learning outcomes
  • Run a complete user-centered design process as a cross-functional team.
  • Iterate a prototype through regular check-ins and feedback.
  • Communicate design decisions and results to an audience.

SESSION 19 · LIVE IN-PERSON

Project Kickoff

Objective: form teams and frame the design problem.

Group project kickoffdefine the problem space, target users and scope.

Designing & prototyping a user-centered projectplan the process across the five planes.

Regular project check-insestablish the iteration/feedback cadence.

Core concept — iterative, user-centered process: design → prototype → test → refine, repeated. Each loop is informed by real users rather than internal opinion. Example: the Double Diamond (Discover → Define → Develop → Deliver) makes the rhythm explicit — diverge to explore the problem, converge to define it, diverge to explore solutions, converge to ship one.
Key idea: Start narrow and real. A sharply defined problem for actual users beats a vague platform "for everyone."

Common pitfall: falling in love with a solution before defining the problem (skipping the first diamond). Teams that start by naming features instead of the user's problem usually build the wrong thing well.

Connects to → the whole course: this is where Strategy, Scope, Structure, Skeleton, Surface, research and accessibility all get applied at once. Treat your earlier weekly assignments as raw material.

Suggested readings

  • TBD (project-specific resources provided in class). Revisit Garrett (planes), Krug (testing) and Horton & Quesenbery (accessibility) as your working references.
TakeawayKick off by defining a sharp, real problem for real users (first diamond) before touching solutions; then iterate design→test→refine.
Assignment: Start working on the group user-centered design project.

SESSION 20 · LIVE IN-PERSON

Project Work — Design & Prototype

Objective: produce a first working prototype.

Designing & prototyping (cont.)translate research and IA into wireframes and a clickable prototype.

Regular check-inssurface blockers early; align the team.

Core concept — design critique: structured, constructive feedback on work-in-progress that critiques the artefact against stated goals rather than the person. Example: "the CTA loses to the banner image — does that serve the goal of getting sign-ups?" is critique; "I don't like the colour" is just taste.
Key idea: Show the work early and often. Feedback on a rough prototype is cheap; feedback after launch is expensive.

Common pitfall: polishing one screen to perfection before the end-to-end flow exists. Build a thin, complete walking skeleton first, then deepen — a broken flow with beautiful screens still fails the user.

Connects to → prototyping fidelity (Session 10) — keep this first prototype low enough fidelity that the team still feels free to change it.

Suggested readings

  • TBD. Krug's testing chapters are the practical reference for the first round of feedback on this prototype.
TakeawayGet a rough end-to-end prototype in front of people fast; critique the artefact against goals, not the person, and change it cheaply.
Assignment: Continue the group user-centered design project.

SESSION 21 · LIVE IN-PERSON

Project Development & Refinement (1 of 2)

Objective: refine the prototype against feedback.

Project development & refinementiterate on flows, IA and visual design based on test findings.

Regular check-instrack progress against the plan.

Core concept — usability-driven iteration: let evaluation findings (Module 5 methods) directly drive the next design revision, ranked by the severity ratings from Session 14. Example: if three of five testers miss the filter control, that's a sev-3 finding that earns a redesign this iteration — not a "maybe later."
Key idea: Refinement means cutting as much as adding. Removing a confusing feature is a legitimate — often the best — improvement.

Common pitfall: treating test findings as a wish-list to debate rather than a prioritised to-do. Tie each change to an observed problem; ignore "wouldn't it be cool if…" until the core works.

Connects to → usability testing & severity rating (Sessions 13–14), which feed this loop directly.

Suggested readings

  • TBD. Re-use your own pilot-study instrument from Sessions 13–14 to test each iteration.
TakeawayIterate from evidence: let severity-ranked test findings drive each revision, and count removing a confusing feature as a real improvement.
Assignment: Continue the group user-centered design project.

SESSION 22 · LIVE IN-PERSON

Project Development & Refinement (2 of 2)

Objective: reach a presentation-ready prototype.

Project development & refinement (cont.)polish, fix accessibility issues, finalise the design system.

Regular check-insrehearse the narrative of the work.

Core concept — design rationale: the documented "why" behind each decision, linking it back to research, a persona goal or a heuristic — essential for defending the design under Q&A and for the presentation narrative. Example: "we moved checkout to one page because 3/5 testers abandoned the multi-step version (sev 3)" is rationale; "it looks cleaner" is not.
Key idea: A design is only as strong as your ability to explain why each choice serves the user.

Common pitfall: leaving the accessibility and rationale work to the final night. Run a quick WCAG-AA pass (contrast, keyboard, labels) and capture decisions as you make them — reconstructing "why" from memory at the end is painful and unconvincing.

Connects to → accessibility (Sessions 15–16) for the final audit, and the Week-24 assessment (15% delivery + 15% presentation).

Suggested readings

  • TBD. Use the accessibility checklist from Module 6 for the final polish pass.
TakeawayReach presentation-ready by polishing, passing a WCAG-AA check, and documenting the evidence-backed rationale for every key decision.
Assignment: Continue the group user-centered design project.

SESSION 23 · LIVE IN-PERSON

Project Presentation (1 of 2)

Objective: present the project and defend its decisions.

Finalizing & presenting the group projecttell the story: problem → research → design → evidence.

Class discussionpeer critique and Q&A.

Core concept — communicating UX: translating process and evidence into a persuasive narrative for stakeholders — a core professional skill, since a design only ships if you can sell the reasoning. Example: structure it as problem → research insight → design response → evidence it worked, and show the prototype live rather than describing it.
Key idea: Lead with the user's problem, not your solution. The audience must feel the pain before they value the fix. (Assessed: Week 24 — 15% presentation + 15% delivery.)

Common pitfall: a feature tour ("and then we added…") with no story. Stakeholders remember the user's problem and your evidence, not a list of screens.

Connects to → the design rationale (Session 22) you documented, and reflective practice (Session 24).

Suggested readings

  • TBD. Borrow the storytelling spine from your strategy work (Session 2): objective, audience, success metric.
TakeawayPresent as a story — problem → research → design → evidence — and demo live; make the audience feel the pain before showing the fix.
Assignment: Present the group project to the class.

SESSION 24 · LIVE IN-PERSON

Project Presentation (2 of 2)

Objective: complete presentations and reflect across teams.

Finalizing & presenting (cont.)remaining team presentations.

Class discussioncross-team comparison and shared lessons.

Core concept — reflective practice: extracting transferable lessons from a finished project to improve the next one (Schön's "reflection-on-action"). Example: a quick team retro — what to keep, drop, try — turns one project's pain into the next project's process improvement.
Key idea: The most valuable output of a project is often what you learned to do differently next time.

Common pitfall: a blameful or vague retro. Focus on the process ("we tested too late") not people, and commit to specific changes, or the same mistakes recur.

Connects to → the reflective-practitioner thread that closes the course (Session 30) and the cross-team lessons in the case-study module (Sessions 27–28).

Suggested readings

  • TBD. Compare your team's process against the Double Diamond and five planes to spot where you skipped a step.
TakeawayClose the project with an honest, process-focused retro — the lessons you extract are often worth more than the artefact itself.
Assignment: Present the group project to the class.
Module 9 · Horizons & Wrap-Up

Future Trends, Case Studies & Final Exam

Sessions 25–30

Steps back to the field's frontier and the profession: emerging technologies and their ethics, real-world case studies and cross-functional teamwork, then review and the comprehensive final exam.

Module learning outcomes
  • Discuss emerging HCI technologies (VR, GenAI) and their ethical stakes.
  • Analyse real HCI successes and failures and work in cross-functional teams.
  • Consolidate the whole syllabus and demonstrate mastery in the final exam.

SESSION 25 · LIVE IN-PERSON

Future Trends in HCI (1 of 2)

Objective: examine where HCI is heading and the ethics it raises.

Emerging technologies (VR, GenAI)Immersive (VR/AR) and generative (LLM) interfaces change how — and whether — users stay in control. VR raises presence, motion-sickness and consent issues; GenAI raises trust, hallucination and over-reliance issues. New interaction paradigms bring new failure modes.

Ethical considerations in HCIDark patterns, persuasive design, privacy, algorithmic bias, manipulation and the attention economy. As a CS/AI student you'll build these systems — this is where you decide what you'll refuse to build.

HCI research & innovationHow the field investigates novel interactions responsibly: informed consent, participant wellbeing, and ethics review for studies involving immersive or AI systems.

Core concept — dark patterns & design ethics: interfaces engineered to trick users into acting against their interest — hidden costs, forced continuity, confirm-shaming ("No thanks, I hate saving money"), roach motels (easy in, hard out). Ethical design respects user autonomy and transparency. Example: a subscription you can start in two taps but must phone to cancel is forced continuity — a dark pattern now illegal in several jurisdictions.

Concrete example: the US FTC fined companies over "negative option" cancellation traps, and the EU's GDPR/DSA restrict manipulative consent banners — ethics here is increasingly law, not just principle.

Key idea: "Can we?" is an engineering question; "should we?" is the designer's. New capability without new ethics produces new harm.

Common pitfall: optimising a single metric (engagement, conversion) without an ethical guardrail — the path by which well-meaning teams ship addictive feeds and manipulative funnels one A/B test at a time.

Connects to → Strategy & success metrics (Session 2) — a metric chosen without ethics is how dark patterns are born — and human-centered AI (Session 26).

↗ Explore: Future Trends & Ethics cards

Suggested readings

  • TBD — current articles on VR / GenAI ethics provided in class. Look up Brignull's deceptive.design dark-patterns taxonomy as a practical companion.
TakeawayEmerging tech multiplies both capability and harm; ethical design means asking "should we?", naming dark patterns, and refusing to weaponise metrics.
Assignment: Write a reflection paper on the ethical considerations in HCI.

SESSION 26 · LIVE IN-PERSON

Future Trends in HCI (2 of 2)

Objective: connect emerging tech to responsible innovation.

Emerging technologies (cont.)Multimodal AI, conversational and ambient interfaces where the "UI" is increasingly invisible — language, voice and proactive suggestions instead of buttons. Designing these means designing behaviour and trust, not just screens.

Ethical considerations (cont.)Accountability (who is responsible when the AI is wrong?), explainability (can the user understand and contest a decision?), and inclusion (does it work and behave fairly across groups?).

HCI research & innovation (cont.)Turning research into responsible products: designing for appropriate trust — neither blind reliance nor reflexive rejection — and surfacing model uncertainty.

Core concept — value-sensitive & human-centered AI: designing intelligent systems that keep humans in control, surface uncertainty, and account for the values of all stakeholders (Google's PAIR and Microsoft's HAX guidelines codify this). Example: an AI writing assistant that shows confidence, cites sources and makes its suggestions easy to reject keeps the human in charge; one that auto-applies silent edits does not.

Concrete example: Microsoft's Human-AI Interaction (HAX) guidelines — "make clear what the system can do," "support efficient correction," "convey uncertainty" — are Nielsen-style heuristics adapted for AI interfaces.

Key idea: As interfaces get more autonomous, the designer's job shifts from arranging controls to safeguarding human agency.

Common pitfall: over-trust by design — a confident, fluent AI that hides its uncertainty leads users to accept wrong answers. Calibrated confidence and easy correction are usability requirements, not nice-to-haves.

Connects to → your AI/ML coursework in the degree, the heuristics (Session 13) that HAX guidelines extend, and accessibility/inclusion (Module 6).

↗ Explore: upside vs. dark pattern

Suggested readings

  • TBD. The Google PAIR Guidebook and Microsoft HAX guidelines are the practical references for human-centered AI.
TakeawayHuman-centered AI keeps the person in control: convey uncertainty, support easy correction, and design for calibrated trust rather than over-reliance.
Assignment: Write a reflection paper on the ethical considerations in HCI.

SESSION 27 · LIVE IN-PERSON

HCI Industry Case Studies (1 of 2)

Objective: learn from real successes and failures in industry.

Working with cross-functional teamsDesigners, engineers, PMs and researchers collaborating through shared language and artefacts (personas, journey maps, design systems). The designer rarely has authority, so influence comes from evidence and communication.

Analyzing real-world HCI successes & failuresReverse-engineering what made famous products usable — or notoriously not — and naming the principle behind each outcome rather than just admiring or mocking it.

Guest speakers from industryPractitioner perspectives on how UX actually works inside organisations (TBD).

Core concept — cross-functional collaboration: UX is a team sport; the designer's influence comes through communication and shared artefacts, not authority. Example: a shared journey map gives engineering, product and design one picture to argue against — replacing "my opinion vs. yours" with "does this serve the user's journey?"
Key idea: Study failures as hard as successes — a well-analysed disaster (e.g., a confusing checkout or a deadly UI) teaches more than a polished case.

Concrete example: the 2018 Hawaii false-missile alert — an operator picked the wrong item from a confusing dropdown that mixed "test" and "real" alerts — is a canonical HCI failure showing how a bad interface can have life-or-death consequences.

Common pitfall: hindsight storytelling — calling a success "obvious" or a failure "stupid." Good case analysis names the specific heuristic, law or process gap involved, so the lesson transfers.

Connects to → every principle in the course (heuristics, Fitts's law, error handling, accessibility) — case studies are where you see them succeed and fail in the wild.

Suggested readings

  • Case studies from HCI journals and books (selected in class). Pick a case where you can name the underlying principle — that's what turns an anecdote into analysis.
TakeawayUX is collaborative and evidence-driven; analyse real successes and failures by naming the principle behind each, so the lesson transfers.
Assignment: Analyze and present an HCI case study of your choice.

SESSION 28 · LIVE IN-PERSON

HCI Industry Case Studies (2 of 2)

Objective: present and discuss case-study analyses.

Working with cross-functional teams (cont.)Handling conflict and aligning incentives: when engineering optimises for ship-speed and product for revenue, the designer reframes the debate around shared user evidence rather than winning on authority.

Analyzing successes & failures (cont.)Student presentations and discussion — practising the evidence-based critique you'll use professionally.

Guest speakers (cont.)Practitioner Q&A on real organisational dynamics (TBD).

Core concept — evidence-based design arguments: using documented case evidence and data to justify design positions rather than personal taste — the professional alternative to "I think it should be blue." Example: citing "the Hawaii alert failure shows why destructive and benign actions must look different" wins an argument that "I don't like this dropdown" never could.
Key idea: Patterns repeat. The failure you analyse today is the mistake you'll recognise — and avoid — in your own work tomorrow.

Concrete example: Spotify's Discover Weekly is a frequently-cited success — personalisation that respects user agency — exactly the contrast case to dark-pattern personalisation from Session 25.

Common pitfall: presenting opinion dressed as analysis. Without a cited heuristic, metric or documented outcome, a case-study "analysis" is just a review.

Connects to → design rationale (Session 22) and the final exam, which rewards exactly this evidence-based reasoning.

Suggested readings

  • Case studies from HCI journals and books. Contrast a success and a failure that hinge on the same principle — the sharpest way to show you understand it.
TakeawayWin design arguments with documented evidence, not taste; the failures you dissect now are the mistakes you'll catch in your own work later.
Assignment: Analyze and present an HCI case study of your choice.

SESSION 29 · LIVE IN-PERSON

Course Wrap-Up & Exam Prep

Objective: consolidate the whole syllabus.

Review of key concepts & takeawaysRe-walk the five planes plus the cross-cutting threads — research, accessibility and ethics — and connect each named law/principle (Nielsen, Fitts, Hick, Jakob, Gestalt, POUR, Double Diamond) to where it's applied.

Prepare for the final examClarify scope and format; practise applying principles to short scenarios, since the exam rewards application and synthesis over rote recall.

Core concept — synthesis: seeing how each topic connects — strategy constrains scope, scope shapes structure, structure underlies the skeleton, the skeleton carries the surface, and research/accessibility/ethics cut across all five planes. Example: a single "add to cart" button touches Strategy (does it serve the objective?), Scope (is it a Must?), Skeleton (Fitts-sized and placed), Surface (accessible contrast) and ethics (no dark-pattern upsell) at once.
Key idea: If you can re-draw the five planes from memory and place every topic on them, you understand the course. (Try the quiz.)

Common pitfall: memorising definitions without the connections. The exam asks you to apply principles to a described interface — practise diagnosis, not flashcards.

Connects to → the glossary below (your revision checklist) and every prior module.

↗ Explore: self-test quiz ↗ Review: key-concepts glossary

Suggested readings

  • Review course materials, notes and textbooks. Use the glossary and the concept-map quiz as an active-recall revision pair.
TakeawayMaster the course by synthesis: re-draw the five planes from memory, place every topic and named law on them, and practise applying — not just reciting — them.
Assignment: Review for the final exam.

SESSION 30 · LIVE IN-PERSON

Final Exam & Course Retro

Objective: demonstrate mastery and reflect on the journey.

Final exam on course materialComprehensive, covering all modules (30% of the final grade). Expect to define vocabulary, place topics on the five planes, and apply named principles to short interface scenarios.

Course retroLook back on lessons learned and your growth as an HCI practitioner — and look forward to where these skills lead (UX, research, front-end, design systems, responsible AI).

Core concept — reflective practitioner: a professional who continually examines their own practice to improve — the final learning objective of the course and the habit that outlasts it. Example: shipping a feature and then actually checking whether users succeeded with it (not just whether it launched) is reflective practice in one sentence.
Key idea: The course ends, the practice doesn't. Good HCI practitioners keep asking "did this actually work for the user?" long after the grade is in.

Connects to → the reflective retro from the project (Session 24) and the career paths named in Learning Objective 10 — this is the bridge from course to profession.

↗ Revisit: the interactive concept map

Suggested readings

  • Review course materials, notes and textbooks. Keep the core texts (Garrett, Krug, Horton & Quesenbery) — they remain useful references in practice.
TakeawayDemonstrate mastery, then keep the habit that matters most: a reflective practitioner never stops asking "did this actually work for the user?"
Assignment: Complete the final exam; course retro.

06 Key Concepts — Glossary

The vocabulary you'll be expected to use precisely. Many map to an interactive demo on the concept map.

Human–Computer Interaction (HCI)
Interdisciplinary study and design of how people interact with computing systems, spanning CS, cognitive psychology and design.
User Experience (UX)
The whole experience a person has with a product — usefulness, usability, desirability and the feelings around it.
User Interface (UI)
The point of contact between user and system: the visual, interactive layer through which UX is delivered.
User-Centered Design (UCD)
An iterative process that places real users and their needs at the centre of every design decision.
The Five Planes
Garrett's model: Strategy → Scope → Structure → Skeleton → Surface, moving from abstract purpose to concrete visuals.
Strategy plane
User needs + product objectives. The foundation that constrains every plane above it.
Scope plane
Functional and content requirements — the negotiated specification of what gets built.
Structure plane
Interaction design + information architecture: how the parts connect and how content is organised.
Skeleton plane
Interface, navigation and information design — the concrete arrangement (wireframes) that makes content reachable.
Surface plane
The sensory layer: colour, typography, imagery, motion — ideally a coherent system of design tokens.
Persona
An evidence-based archetype of a user (goals, frustrations, context) used to build empathy and settle decisions.
Scenario
A short narrative of a persona accomplishing a task, used to test whether a design supports real goals.
MoSCoW
A prioritisation method: Must / Should / Could / Won't-have-this-time.
Information Architecture (IA)
The organisation, labelling, navigation and search structures of a shared information environment.
Card sorting
A research method where users group content items, revealing their mental model to inform IA.
Wireframe
A low-fidelity layout showing arrangement and hierarchy, deliberately stripped of visual styling.
Prototype (lo/hi-fi)
A testable model of a design; low-fi tests structure/flow, high-fi tests look, feel and micro-interactions.
Design tokens
Named design variables (colour, spacing, radius, type) that make a visual system consistent and changeable.
Nielsen's 10 heuristics
Ten rules of thumb for usability inspection (visibility of status, match to real world, user control, etc.).
Heuristic evaluation
Experts inspect an interface against recognised heuristics to find usability problems quickly.
Usability testing
Observing real users attempting real tasks to find where a design fails them.
Cognitive walkthrough
An expert method simulating a first-time user's thought process step by step through a task.
Fitts's Law
Time to acquire a target ∝ log₂(distance/size + 1): bigger, closer targets are faster to hit.
Jakob's Law
Users expect your product to work like the others they already use; honour familiar conventions.
Gestalt principles
Perceptual grouping rules (proximity, similarity, closure, continuity, figure/ground) designers exploit.
Qualitative vs. quantitative
Qual explains why (rich, small N); quant measures how much/many (generalisable, large N).
Attitudinal vs. behavioral
What users say vs. what they do — two axes of the NN/g research-methods landscape.
Accessibility
Designing so people with disabilities can perceive, operate and understand a product.
WCAG & POUR
Web Content Accessibility Guidelines, organised under Perceivable, Operable, Understandable, Robust (levels A/AA/AAA).
Curb-cut effect
Accommodations for disabled users that end up benefiting everyone.
Responsive design
Layouts that adapt fluidly across screen sizes using flexible grids, media and breakpoints.
Multimodal interaction
Interfaces combining input/output modes (touch, voice, gaze, gesture, haptics).
Dark pattern
An interface trick that manipulates users into actions against their own interest (hidden costs, forced continuity, confirm-shaming, roach motel).
Usability
The extent to which a product is effective, efficient and satisfying to use for specified users and goals (ISO 9241).
Affordance
A property suggesting how an object is used (a button looks pressable); a signifier is the cue that communicates it (Norman).
Signifier
A perceivable cue that tells the user where and how to act — the visible part of an affordance.
Mental model
The user's internal belief about how a system works; mismatches with the system model cause errors and confusion.
Conceptual model
The designer's intended model of how the product works, communicated through the interface.
Cognitive load
The mental effort a task demands; good design minimises extraneous load so attention goes to the goal.
Hick's Law
Decision time increases with the number and complexity of choices — fewer, clearer options speed users up.
Miller's Law (7±2)
Working memory holds only a handful of items; chunk information rather than overloading it.
Recognition vs. recall
Showing options (menus, icons) is easier than making users remember them — Nielsen heuristic #6.
Visibility of system status
Keep users informed about what's happening through timely feedback — Nielsen heuristic #1.
Feedback
The system's visible/audible/haptic response confirming an action was received and what it did.
Double Diamond
UK Design Council process: Discover → Define → Develop → Deliver — diverge then converge, twice (problem, then solution).
Iterative design
Repeating design → prototype → test → refine cycles, each informed by real user evidence.
Formative vs. summative
Evaluation during design to improve it vs. after to benchmark it against a target.
Severity rating
Ranking usability problems by frequency × impact × persistence (0–4) so the worst get fixed first.
SUS (System Usability Scale)
A validated 10-item questionnaire yielding a 0–100 usability score for benchmarking and comparison.
Triangulation
Combining multiple research methods/sources so each covers the others' blind spots, strengthening conclusions.
Think-aloud protocol
Asking users to verbalise their thoughts while performing tasks, exposing reasoning and points of confusion.
A/B testing
A controlled experiment comparing two variants on live users to measure which performs better on a metric.
Design system
A documented, reusable set of components, patterns and tokens that keeps a product consistent and faster to build.
Progressive disclosure
Revealing advanced options only when needed, keeping the default view simple — reduces cognitive load.
Breakpoint
A viewport width at which a responsive layout reflows; ideally chosen by content, not specific devices.
Touch target
The tappable area of a control; ~44–48px minimum for reliable, error-free use (Fitts's Law in practice).
Heuristic severity
See severity rating — applied specifically to issues found in a heuristic evaluation.
Human-centered AI
Designing intelligent systems that keep humans in control, convey uncertainty and support easy correction.
Reflective practice
Systematically examining one's own work to extract transferable lessons and improve the next project (Schön).

07 Annotated Bibliography

The course's core and supporting readings, with a note on why each matters.

The Elements of User Experience (2nd ed.)

Jesse James Garrett · New Riders, 2011

The course's backbone. Introduces the five-planes model used in Sessions 1–10. Concise and foundational — read the relevant chapter before each early session.

Rocket Surgery Made Easy

Steve Krug · New Riders, 2010

A practical, jargon-free guide to do-it-yourself usability testing. The reference for running your own tests in Module 5 without a lab or budget.

When to Use Which User-Experience Research Methods

Nielsen Norman Group (article)

Maps research methods on the attitudinal↔behavioral and qual↔quant axes — the framework behind the Research Methods Quadrant demo.

Quantitative User-Research Methodologies: An Overview

Nielsen Norman Group (article)

Companion piece focused on measurement: surveys, analytics and metrics for UX. Read alongside the article above.

Observing the User Experience: A Practitioner's Guide to User Research

Elizabeth Goodman, Mike Kuniavsky & Andrea Moed · Morgan Kaufmann

A comprehensive practitioner handbook covering the full toolkit of qualitative and quantitative research methods.

Quantitative User Experience Research

Chris Chapman & Kerry Rodden · Apress

Deeper treatment of statistical and large-scale UX research methods for data-minded students.

Measuring the User Experience

Bill Albert & Tom Tullis · Morgan Kaufmann

The reference on UX metrics — how to collect, analyse and present usability data (task success, time, satisfaction, SUS).

A Web for Everyone: Designing Accessible User Experiences

Sarah Horton & Whitney Quesenbery · Rosenfeld Media, 2014

Core accessibility reading (Chapters 1–2 for Module 6). Frames accessible, inclusive design as good design for all.

Research Methods in Human-Computer Interaction

Jonathan Lazar et al. · Ch. 16 (research participants with disabilities)

How to involve participants with disabilities ethically and effectively — the research counterpart to accessible design.

Mobile Design Pattern Gallery

Theresa Neil · O'Reilly

A catalogue of proven mobile UI patterns; the practical reference for Module 7's mobile/responsive work.

The Handbook of Multimodal-Multisensor Interfaces, Vol. 1

Foundations, User Modeling & Common Modality Combinations

Academic foundation for multimodal interaction — the theory behind touch/voice/gesture/AR-VR design.

Design of Multimodal Mobile Interfaces

(edited volume)

Focused treatment of combining input/output modalities on mobile devices.

Design Beyond Devices: Creating Multimodal, Cross-Device Experiences

Cheryl Platz · Rosenfeld Media

How to design coherent experiences that span screens, voice and ambient computing — the frontier addressed in Sessions 17–18 and 25–26.