English
A user interface is a theory of the user. Every decision about what buttons appear where, what terminology labels what action, what feedback is given when, what errors look like — each embeds assumptions about what the user knows, what they want, how they read, how they make errors, and what will confuse them. These assumptions are usually implicit and are usually wrong in ways the designer does not notice, because designers are not typical users. HCI is the discipline of making these assumptions explicit, testing them empirically, and replacing them with things that actually work.
The intellectual content is not primarily aesthetic, though visual design is part of it. The foundations are cognitive: human working memory is limited; perception relies on pattern recognition that can be exploited or frustrated by design choices; attention is selective and can be misdirected; mental models form around the structures interfaces present and diverge from actual system behavior in predictable ways. Good interface design aligns with how human cognition actually works; bad interface design fights it. The discipline developed methods — user research, usability testing, heuristic evaluation, accessibility review — for discovering the misalignments before users discover them in production.
HCI sits at the applied end of multiple axes. From the systems axis, it is concerned with the interfaces that software systems present to users. From the intelligence axis, it is being reshaped by AI — conversational interfaces, AI-augmented applications, and tools that act on the user’s behalf rather than merely responding to explicit commands. From outside computer science, it draws heavily on cognitive psychology, graphic design, and anthropology. The field’s heterodox character — technical and humanistic, empirical and creative — is constitutive rather than accidental.
Prerequisites: Programming (§2.1) for implementation. The rest of the prerequisites are from outside CS: basic cognitive psychology, visual design fundamentals, and the disposition to study users rather than to guess at them.
From Batch Processing to Designing for Billions
The history of HCI is the history of computing becoming legible to people who did not spend years learning to use it.
In the early 1950s, computing was a batch process: you submitted a job, returned hours or days later, received output. There was no interaction — the user had left the room before the computer ran their program. The entire question of how a human and a computer interact was a moot point, because they were never in the room at the same time. Time-sharing systems in the late 1950s and early 1960s changed this by allocating slices of CPU time to multiple users simultaneously, enabling interactive use through terminals. For the first time, a person’s action produced an immediate response. The interaction design problem existed.
Doug Engelbart demonstrated what interactive computing could become in his 1968 “Mother of All Demos” — a single ninety-minute presentation showing videoconferencing, collaborative editing, hypertext links, word processing, and, most lastingly, the mouse. Engelbart had been developing the NLS (oNLine System) at Stanford Research Institute since 1963, motivated by an explicit philosophy: computers should augment human intellect. The demo showed the difference between computing as batch processing and computing as an extension of human capability. The mouse — designed to let a pointer be moved to any point on the screen with hand movement — solved a fundamental problem of how to express position on a two-dimensional display with a one-dimensional input device (the keyboard).
Xerox PARC developed the full graphical user interface concept in the early 1970s. The Alto workstation, never sold commercially, had overlapping windows, a mouse, icons, menus, and a WYSIWYG word processor. Larry Tesler, who later joined Apple, distilled these ideas with the observation that interfaces should be modeless — a user should be able to perform any action at any time, without being in a specific “mode” that restricts available commands. The Xerox PARC work established the vocabulary of desktop interaction that persists today: windows, icons, menus, pointing devices — the WIMP paradigm.
Apple brought these ideas to a commercial audience. The Lisa (1983) and Macintosh (1984) were the first commercial computers with GUIs, designed around the principle that the computer should feel familiar enough that a person could learn to use it in an afternoon. The Macintosh user guide fit in a spiral notebook; the Apple II user guide did not. The design decision that made this possible was consistency: every application used the same menu structure, the same keyboard shortcuts, the same behaviors for standard operations. A user who learned to copy text in the word processor could copy text in the spreadsheet, because the metaphor was the same. Consistency as a design principle — and its corresponding value, standards that developers were required to follow — became a defining feature of Apple’s approach.
The academic discipline of HCI consolidated in the same period. Card, Moran, and Newell’s 1983 book The Psychology of Human-Computer Interaction brought cognitive psychology to bear on interface design, formalizing the GOMS (Goals, Operators, Methods, Selection rules) model for predicting how long it would take a user to perform tasks. Ben Shneiderman articulated eight golden rules of interface design in 1987, covering consistency, feedback, closure, error prevention, and reversibility — design heuristics still cited and taught. The ACM SIGCHI community was founded in 1982 and the CHI conference became the primary venue for HCI research.
Jakob Nielsen’s 1993 Usability Engineering established the methodology of usability testing — systematic user testing with small samples, which Nielsen demonstrated could identify the majority of interface problems with as few as five participants. His ten usability heuristics became the standard rubric for heuristic evaluation: visibility of system status, match between system and the real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency, aesthetic and minimalist design, help users recognize and recover from errors, help and documentation. The simplicity of the framework — ten principles, evaluable by any practitioner — made usability evaluation a practical activity rather than a research enterprise. Nielsen’s work, especially through his NNGroup articles, has shaped HCI practice more broadly than any academic result.
Donald Norman’s The Design of Everyday Things, published in 1988 as The Psychology of Everyday Things and revised in 2013, introduced the design vocabulary that crosses discipline boundaries. Norman described affordances — the properties of an object that suggest how it should be used; signifiers — elements that communicate how to interact; mappings — the relationship between controls and their effects; feedback — information about what has happened; and conceptual models — the user’s understanding of how the system works. A door with a flat plate affords pushing; a door with a handle affords pulling. When affordances and mappings are inconsistent with conceptual models, errors occur and users blame themselves, when they should blame the design. The book’s central argument — that poor design, not user stupidity, causes most usage errors — remains the most important single idea in HCI.
The World Wide Web created an entirely new interaction context. Web pages were initially static documents; over the course of the 1990s and 2000s, they became interactive applications. Web design emerged as a discipline distinct from print design, with different constraints: different rendering environments, different user behaviors (scanning rather than reading), different navigation models. Nielsen’s web usability research documented systematically how users actually read web pages (they don’t — they scan, using F-shaped patterns that skip most content). Information architecture — how content is organized and navigation is structured — became a distinct specialty as websites grew to thousands and millions of pages.
The iPhone (2007) reset the design problem. Touch interfaces eliminated the mouse and keyboard; screens were smaller; applications ran in full screen; context was mobile and interrupted. Apple’s mobile design guidelines specified a target touch size (44 × 44 points), a simplified navigation model (back-button stacks), and a content focus that replaced the desktop metaphor entirely. Google’s Material Design and Apple’s Human Interface Guidelines became the dominant design systems for mobile, establishing the patterns — cards, bottom navigation, swipe gestures, modal sheets — that billions of people use daily. Responsive web design, introduced by Ethan Marcotte in 2010, addressed the corollary problem of serving the same content across screen sizes from phone to desktop.
The current era is being reshaped by AI. Conversational interfaces — chatbots, voice assistants, AI tools that write and act on the user’s behalf — have introduced interaction paradigms that the established WIMP vocabulary does not address. The design challenges are new: how do users calibrate trust in a system that can be wrong? how do you communicate uncertainty? how do you give users meaningful control over a system that acts autonomously? how do you design for the failure mode where the system confidently produces a wrong answer? These questions do not have established answers, and the field is actively developing them.
Cognition, Evaluation, and Designing for Diversity
How Human Cognition Shapes Interface Requirements
Interfaces interact with human cognitive systems that did not evolve for computing and that have specific properties — strengths and limitations — that design must accommodate.
Working memory is limited. Miller’s 1956 paper “The Magical Number Seven, Plus or Minus Two” established that humans can hold only about seven items in working memory simultaneously; more recent estimates place the number lower, around four chunks. Interface designs that require users to remember information between steps, hold many choices in mind simultaneously, or track complex state — violate this constraint. The design response is recognition over recall: surface relevant information when it is needed rather than requiring users to remember it. Menus show available commands; autocomplete shows valid completions; confirmation dialogs show the consequences of an action. The difference between a command-line interface (recall) and a graphical menu (recognition) is partly about this cognitive constraint.
Mental models are the user’s understanding of how the system works. Users interact with systems based on their mental model, which is necessarily incomplete and often wrong. Norman’s key insight was that good design makes the conceptual model of the system visible — through affordances, mappings, and feedback — so that the user’s mental model converges on an accurate understanding of the system. Bad design forces users to construct mental models from insufficient information, producing models that are wrong in ways that cause errors. The test for design success: could a new user accurately predict what would happen if they did X? If not, the conceptual model is not being communicated.
Cognitive load theory, developed by John Sweller in the late 1980s, distinguishes between intrinsic load (the inherent complexity of the task), extraneous load (complexity added by poor design), and germane load (cognitive effort directed at learning). Interface design should minimize extraneous load — the cognitive cost of navigating the interface rather than accomplishing the task. Every interface element that the user must notice, decode, and act on adds to extraneous load. The design direction is economy: every element on the screen should earn its place by reducing task complexity rather than adding interface complexity.
Affordances and signifiers structure what users perceive as possible. A button looks like something you can click; a text field looks like something you can type in. These visual conventions create expectations. When conventions are violated — a flat, label-only UI element that is actually clickable, indistinguishable from non-interactive text — users fail to discover interactions, not because they are inattentive but because the visual language they rely on does not signal the interaction. Consistent use of visual conventions reduces the perceptual work users must do to understand what is interactive.
Error-tolerant design accounts for the inevitability of user errors. Slips are execution errors: the user knows what to do but does the wrong thing — clicks the wrong button, types the wrong shortcut. Mistakes are knowledge errors: the user does not know the right action and chooses incorrectly. Good design prevents the most common errors by design (one-way rather than two-way confirmations for destructive actions), makes errors recoverable (undo), and provides clear error messages that explain what went wrong and how to recover.
Empirical Evaluation Methods
Interface design is testable. This distinguishes HCI from purely aesthetic design: the claim that a design is usable is an empirical claim, and there are methods for testing it.
Usability testing exposes a representative user to the interface and asks them to complete specific tasks while speaking their thoughts aloud (the think-aloud protocol). The moderator observes what the user does, where they hesitate, what errors they make, and what they say — gathering data about the interface’s usability rather than about the user’s competence. Nielsen’s insight that five participants reveal 85% of usability problems (later qualified by researchers noting this assumes a well-defined problem space) made usability testing practical: a small, inexpensive study could identify the most significant issues.
Heuristic evaluation asks experts to review the interface against a set of usability heuristics — Nielsen’s ten are standard — identifying violations. The method is faster than user testing and does not require participants; it is less accurate (experts predict problems that don’t occur and miss problems that do) but is useful for early-stage designs where full user testing would be premature. A set of three to five evaluators catches significantly more problems than a single evaluator.
Analytics and behavioral data measure what users actually do in deployed systems: where they click, what they abandon, where they return from. This tells you what is happening but not why. Qualitative methods — interviews, contextual inquiry (observing users in their actual work context), diary studies — provide the why. Serious UX research combines both: analytics to identify problems, qualitative methods to explain them.
A/B testing compares two versions of an interface by showing each to a randomly assigned user population and measuring outcomes. This produces causal evidence about which design performs better on a specific metric. Its limitations: it only compares alternatives that are already designed; it requires sufficient traffic to detect differences; it can optimize for metrics that do not capture what matters (conversion rate can be improved by making the cancel button harder to find — an improvement on the metric, not on the user).
Designing for Diversity: Accessibility and Inclusion
Accessibility is the design requirement that the interface is usable by people with disabilities. The Web Content Accessibility Guidelines (WCAG), published by the W3C, define three levels of accessibility conformance and specify requirements for visual, auditory, motor, and cognitive accessibility. WCAG 2.1 Level AA is the standard required by most accessibility legislation and the target for most production systems.
The four principles of WCAG summarize the accessibility requirements: Perceivable (content can be perceived by all users), Operable (the interface can be operated by all users), Understandable (content and operation are understandable), and Robust (content can be reliably interpreted by assistive technologies). The practical requirements include: sufficient color contrast for visual impairment; keyboard navigability for users who cannot use a pointing device; screen reader compatibility for blind users (semantic HTML, ARIA attributes, alternative text for images); captions for video; and text alternatives for non-text content.
Accessibility is not primarily a feature for a small population of disabled users — it benefits everyone. High-contrast design is better in bright sunlight. Captions benefit viewers in noisy environments. Large touch targets benefit users with tremor and users with cold hands. This is the curb-cut effect: accessibility features designed for disabled users consistently improve the experience for all users.
Inclusive design extends beyond disability to design for the full range of human diversity. This includes cultural and linguistic diversity (text direction, number formats, date formats, culturally variable iconography), device diversity (small screens, slow connections, older hardware), cognitive diversity (design that does not assume high educational attainment or technical fluency), and economic diversity (design that works under usage-based data costs, in intermittent connectivity, on shared devices). The practitioner who has internalized inclusive design starts from the assumption that users are not like the designer and designs accordingly.
What Studying This Changes
HCI changes how practitioners see the software they build and the users who use it.
The first change is the disposition to think about users as real people with real limitations. Practitioners who have studied HCI instinctively ask: who is this for? what do they know? what will confuse them? where will they make errors? what happens when they make errors? These questions are not about users being incompetent; they are about designing for how human cognition actually works rather than for an idealized user who reads documentation and never misclicks.
The second change is the habit of empirical validation. Design intuitions are unreliable. The practitioner who has seen usability tests repeatedly reveal that confident design decisions produce user confusion has internalized that testing is not an optional step. This does not mean every design decision requires a formal study; it means that claims about usability are treated as hypotheses to be tested rather than truths to be asserted.
The third change is accessibility as a first-class requirement. Practitioners who have studied accessibility and who have seen a screen reader navigate a poorly structured page will never again design without thinking about semantic HTML, color contrast, and keyboard navigation. The legal requirements help, but the internalized commitment to designing for the full range of users is what actually produces accessible interfaces.
The fourth change is fluency with design communication. HCI provides the vocabulary for discussing interface decisions in terms of underlying principles — affordances, cognitive load, error prevention, information hierarchy — rather than in terms of aesthetic preference. This vocabulary makes design discussions productive rather than battles of preference.
Resources
Books and Texts
Norman’s The Design of Everyday Things (revised ed., 2013) is the entry point. It establishes the vocabulary and philosophy — affordances, signifiers, conceptual models, feedback — that makes subsequent HCI reading legible. It is short, readable, and entirely foundational. Every practitioner who builds software that anyone else will use should read it.
Rogers, Sharp, and Preece’s Interaction Design: Beyond Human-Computer Interaction (6th ed., 2023) is the academic foundational text — more systematic and comprehensive than Norman, less accessible. It covers user-centered design processes, research methods, conceptual frameworks, evaluation methods, and the major interaction types. The scope matches a graduate-level HCI course.
Krug’s Don’t Make Me Think (3rd ed., 2014) is the most accessible entry to web usability. It articulates, in 200 readable pages, the key principles of usable web design and how to evaluate whether a site follows them. Required reading before designing any web interface.
Nielsen’s Usability Engineering (1993) — despite being thirty years old — is still the best systematic treatment of usability testing and evaluation methodology. The heuristics and methods it introduces remain the standard.
Cooper, Reimann, Cronin, and Noessel’s About Face: The Essentials of Interaction Design (4th ed., 2014) provides the most thorough coverage of interaction design patterns and principles for desktop and web applications. The Goal-Directed Design methodology it introduces is the closest thing to a systematic design process in HCI.
For visual design, Lupton’s Thinking with Type (3rd ed., 2022) is the standard typography reference for digital designers. Typography — type choice, hierarchy, spacing, alignment — is the primary tool of visual communication in most interfaces.
For accessibility, the WCAG documentation (free at <www.w3.org/TR/WCAG21>) is the authoritative reference. Pickering’s Inclusive Components (free at inclusive-components.design) provides component-level patterns for building accessible interfaces.
For cognitive foundations, Wickens et al.’s Engineering Psychology and Human Performance provides the scientific grounding for HCI’s cognitive claims more rigorously than the design-oriented texts.
| Book | Role | Type |
|---|---|---|
| Norman, The Design of Everyday Things (revised ed.) | Foundational vocabulary and philosophy | Entry |
| Rogers, Sharp & Preece, Interaction Design (6th ed.) | Academic foundational text | Entry |
| Krug, Don’t Make Me Think (3rd ed.) | Web usability; accessible entry | Entry |
| Nielsen, Usability Engineering | Usability testing and evaluation | Depth |
| Cooper et al., About Face (4th ed.) | Interaction design depth | Depth |
| Lupton, Thinking with Type (3rd ed.) | Typography for designers | Depth |
| Wickens et al., Engineering Psychology and Human Performance | Cognitive science foundations | Depth |
| Pickering, Inclusive Components (free) | Accessible component patterns | Entry |
| Microsoft Inclusive Design Toolkit (free) | Inclusive design framework and design exercises | Auxiliary |
| Tidwell, Brewer & Valencia, Designing Interfaces (3rd ed.) | Interaction patterns reference | Reference |
| Brignull, Deceptive Patterns (free at deceptive.design) | Dark patterns documentation | Reference |
Courses and Lectures
Stanford CS147 (Introduction to Human-Computer Interaction Design, materials freely available) is the canonical university HCI course, covering the design process, user research, prototyping, and evaluation with project-based learning.
The Interaction Design Foundation (IDF, subscription, ixdf.org) provides the most comprehensive online curriculum in HCI and UX design — courses on user research, interaction design, UX writing, accessibility, and more. The depth exceeds most university courses and the material is regularly updated.
Nielsen Norman Group UX Training (nngroup.com, subscription and free articles) provides practitioner-level training from the researchers who established the field. The free articles alone constitute years of reading.
Google’s UX Design Certificate (Coursera, free to audit) provides a structured introduction to the UX design process — research, wireframing, prototyping, testing — oriented toward practical skills.
| Course | Platform | Type |
|---|---|---|
| Stanford CS147 HCI Design (free) | Stanford course site | Entry |
| Interaction Design Foundation courses | ixdf.org | Entry |
| Nielsen Norman Group articles (free) | nngroup.com | Reference |
| Google UX Design Certificate (free to audit; certificate paid) | Coursera | Entry |
| Baymard Institute UX research and training (free articles; subscription paid) | baymard.com | Reference |
Practice, Tools, and Current Sources
Figma (free tier) is the dominant interface design and prototyping tool. Learning Figma is learning the standard tool of the field — for wireframing, high-fidelity design, prototyping, and design systems. The official Figma tutorials cover the tool; the broader value comes from designing actual interfaces and testing them with real users.
Screen readers — VoiceOver (macOS, free), NVDA (Windows, free), TalkBack (Android, free) — are the primary assistive technology for visually impaired users. Running a screen reader through an interface you have built and attempting to use it without seeing the screen is the most direct way to understand what accessibility means in practice. The experience is invariably humbling and productive.
The axe DevTools browser extension (free) and WAVE (free) are automated accessibility checking tools. Running them on any interface reveals the most common accessibility violations. They do not catch everything — automated tools catch about 30% of accessibility issues — but they catch the easy ones before user testing.
UserTesting.com and Maze (both have free tiers) provide remote usability testing infrastructure. Running five-participant unmoderated usability tests on a prototype takes hours and consistently reveals significant design issues.
Hotjar (free tier) provides heatmaps, session recordings, and survey tools for understanding user behavior on deployed web interfaces — the quantitative complement to qualitative usability testing.
| Resource | Platform | Type |
|---|---|---|
| Figma (free tier) | figma.com | Practice |
| VoiceOver / NVDA / TalkBack (free) | macOS / Windows / Android | Practice |
| axe DevTools / WAVE (free) | Browser extension | Practice |
| Apple Human Interface Guidelines (free) | developer.apple.com/design | Reference |
| Material Design 3 (free) | m3.material.io | Reference |
| GOV.UK Design System (free) | design-system.service.gov.uk | Reference |
| WCAG 2.2 documentation (free) | w3.org | Reference |
| Nielsen’s 10 Usability Heuristics (free) | nngroup.com | Reference |
| CHI proceedings (free after delay) | dl.acm.org | Reference |
Traps
| Trap | Why it misleads | Better response |
|---|---|---|
| Treating design as aesthetics | Visual appeal matters and is not the substance of HCI. An interface can be beautiful and systematically fail to match users’ mental models, require excessive memory, obscure available actions, and provide inadequate error recovery. The discipline is about designing for cognitive reality, not for visual preference. | Study Norman before studying visual design. Understanding conceptual models, affordances, and error-tolerant design sets the foundation that visual design must serve. Measure usability (can users complete tasks?) separately from aesthetics (does it look good?) — they are different evaluations measuring different things. |
| Designing for yourself | Designers are unrepresentative users: technically fluent, familiar with the design conventions they are implementing, aware of the system model. What is obvious to the designer is routinely non-obvious to users who lack this background. Nielsen’s research established this with user testing; it holds reliably across every study. | Conduct user testing with actual representative users before concluding a design is usable. If you have not watched someone try to use your interface and discovered where they got stuck, you have not evaluated usability. Recruit participants who are not you and observe them without helping. |
| Adding accessibility after the fact | Accessibility retrofitting is far more expensive than designing for accessibility from the start, and retrofits are typically less complete. An interface built on semantic, well-structured HTML with proper ARIA attributes and sufficient color contrast is accessible by default; an interface built without this scaffolding requires substantial rework to become accessible. | Integrate accessibility into the design process. Include accessibility criteria in design reviews. Check color contrast during visual design, not after. Test with a screen reader during development, not before launch. Accessibility is a design constraint, not a feature to add later. |
| Optimizing for metrics that don’t reflect user success | Conversion rate, time-on-site, clicks, and engagement are proxies for user goals that can be manipulated in ways harmful to users. A checkout flow optimized purely for conversion rate will likely use dark patterns — hidden fees revealed at the last step, pre-checked consent boxes, friction in the cancellation path. The interface “works” by the metric while failing the user. | Define success in terms of user goals, not business metrics alone. Include a user-facing measure — task completion rate, satisfaction, error rate — in every interface evaluation. Brignull’s deceptive.design taxonomy is the essential reading for recognizing when “optimizing for the metric” has crossed into designing against the user. |
| Confusing responsive design with mobile design | A desktop interface that scales to fit a small screen is not a mobile interface. Mobile users have different contexts (interrupted, outdoors, one-handed), different interaction capabilities (touch rather than mouse, no hover state, imprecise pointing), and different goals (often task-specific rather than exploratory). Responsive design addresses layout; mobile design addresses the fundamentally different interaction context. | Study the platform-specific design guidelines: Apple’s Human Interface Guidelines and Google’s Material Design document the interaction patterns, touch target sizes, navigation models, and gesture conventions that mobile design requires. Observe how users actually hold and use phones, which is typically one-handed with the thumb, constraining the reachable area of the screen. |
| Using AI to skip user research | AI tools can generate wireframes, write copy, suggest design patterns, and even synthesize user research. What they cannot replace is the insight from watching a specific user encounter a specific interface — the moment you see the cursor hesitate over the button whose label you thought was obvious, the recovery attempt after the error message that you thought was clear, the shortcut the user tried that you hadn’t designed. | Use AI to accelerate synthesis and to generate starting points, not to replace direct engagement with users. Let AI produce candidate designs to evaluate; let AI summarize research patterns across many studies. But do the user testing yourself — prototype, observe, discover where the mental model breaks. The insight comes from direct observation, not from AI-mediated description of what users are like. |
中文
用户界面是一种关于用户的理论。每一个关于按钮出现在什么位置、什么术语标记什么行动、什么时候给出什么反馈、错误信息应该长什么样的决定，都嵌入了对用户的假设：他们知道什么，想要什么，如何阅读，如何犯错，以及什么会让他们困惑。这些假设通常是隐性的，也通常会以设计者没有察觉的方式出错，因为设计者并不是典型用户。HCI 就是把这些假设显性化、用经验方法测试它们，并用真正有效的东西替换它们的学科。
它的智识内容并不主要是审美性的，尽管视觉设计也是其中一部分。它的基础是认知性的：人的工作记忆有限；感知依赖模式识别，而设计选择既可以利用这种能力，也可以挫败这种能力；注意力是选择性的，也可能被误导；心智模型会围绕界面呈现出的结构形成，并且会以可预测的方式偏离系统真实行为。好的界面设计符合人类认知实际运行的方式；坏的界面设计则与之对抗。这门学科发展出了一套方法——用户研究、可用性测试、启发式评估、无障碍审查——用来在用户在生产环境中发现错位之前，先发现这些错位。
HCI 位于多个轴线的应用端。从系统轴来看，它关心的是软件系统呈现给用户的界面。从智能轴来看，它正在被 AI 重塑——对话式界面、AI 增强应用，以及代表用户行动而不只是响应显式命令的工具。从计算机科学之外来看，它大量吸收认知心理学、平面设计和人类学。这个领域的异质性——技术与人文并存，经验与创造并存——不是偶然的，而是构成性的。
前置知识：编程（§2.1）——用于实现。其余前置知识来自 CS 之外：基础认知心理学、视觉设计基础，以及愿意研究用户而不是猜测用户的态度。
从批处理到为数十亿人设计
HCI 的历史，就是计算逐渐变得可以被那些没有花多年时间学习如何使用它的人理解的历史。
在 1950 年代早期，计算是一种批处理过程：你提交一个任务，几个小时或几天后回来，拿到输出。没有交互——用户在计算机运行程序之前就已经离开了房间。人与计算机如何互动这个问题根本不存在，因为他们从来没有同时出现在同一个房间里。1950 年代末到 1960 年代初的分时系统改变了这一点：它把 CPU 时间切片同时分配给多个用户，使用户可以通过终端进行交互式使用。第一次，一个人的行动能够立刻产生回应。交互设计问题出现了。
Doug Engelbart 在 1968 年的 “Mother of All Demos” 中展示了交互式计算可能变成什么样子——一场九十分钟的演示，同时展示了视频会议、协作编辑、超文本链接、文字处理，以及最持久地留下来的鼠标。Engelbart 自 1963 年起就在 Stanford Research Institute 开发 NLS（oNLine System），其动机来自一个明确的哲学：计算机应当增强人的智力。这场演示展示了计算作为批处理，与计算作为人类能力延伸之间的差别。鼠标——通过手部运动让指针移动到屏幕任意位置的设备——解决了一个根本问题：如何用一维输入设备（键盘）之外的方式，在二维显示器上表达位置。
Xerox PARC 在 1970 年代早期发展出完整的图形用户界面概念。Alto 工作站从未商业销售，但它拥有重叠窗口、鼠标、图标、菜单，以及所见即所得文字处理器。后来加入 Apple 的 Larry Tesler 把这些思想提炼为一个观察：界面应当是无模式的（modeless）——用户应当能够在任何时候执行任何行动，而不必处在某个限制可用命令的特定“模式”中。Xerox PARC 的工作建立了至今仍在延续的桌面交互词汇：窗口、图标、菜单、指点设备——也就是 WIMP 范式。
Apple 把这些思想带给了商业用户。Lisa（1983）和 Macintosh（1984）是第一批采用 GUI 的商业计算机，其设计原则是：计算机应当足够熟悉，让一个人在一个下午内学会使用。Macintosh 用户指南可以装进一本螺旋装订笔记本；Apple II 的用户指南则做不到。使这一点成为可能的设计决策是“一致性”：每个应用使用同样的菜单结构、同样的键盘快捷键、同样的标准操作行为。一个用户如果在文字处理器中学会了复制文本，他也能在电子表格中复制文本，因为隐喻是相同的。一致性作为设计原则，以及与之相应的、要求开发者遵守的标准，成为 Apple 方法的定义性特征。
HCI 作为学术学科，也在同一时期巩固起来。Card、Moran 和 Newell 1983 年的 The Psychology of Human-Computer Interaction 把认知心理学引入界面设计，并形式化了 GOMS（Goals, Operators, Methods, Selection rules）模型，用来预测用户完成任务需要多长时间。Ben Shneiderman 于 1987 年提出界面设计八条黄金法则，覆盖一致性、反馈、闭合、错误预防和可逆性——这些设计启发式原则至今仍被引用和教学。ACM SIGCHI 共同体成立于 1982 年，CHI 会议则成为 HCI 研究的主要场所。
Jakob Nielsen 1993 年的 Usability Engineering 建立了可用性测试的方法论——用小样本进行系统用户测试；Nielsen 证明，只需要五名参与者，就可以识别出大多数界面问题。他的十条可用性启发式原则成为启发式评估的标准量表：系统状态可见性、系统与真实世界匹配、用户控制与自由、一致性与标准、错误预防、识别而非回忆、灵活性与效率、审美与极简设计、帮助用户识别并从错误中恢复，以及帮助和文档。这个框架的简单性——十条原则，任何实践者都可以评估——使可用性评估从研究活动变成了实践活动。Nielsen 的工作，尤其是通过 NNGroup 文章传播的工作，比任何学术结果都更广泛地塑造了 HCI 实践。
Donald Norman 的 The Design of Everyday Things 最初于 1988 年以 The Psychology of Everyday Things 之名出版，并于 2013 年修订，它引入了跨越学科边界的设计词汇。Norman 描述了 affordances（可供性）——物体暗示其如何被使用的属性；signifiers（示能符）——传达如何交互的元素；mappings（映射）——控制与其效果之间的关系；feedback（反馈）——关于发生了什么的信息；以及 conceptual models（概念模型）——用户对系统如何工作的理解。一扇带平板的门暗示推；一扇带把手的门暗示拉。当可供性和映射与概念模型不一致时，错误就会发生，而用户会责怪自己，尽管他们真正应该责怪的是设计。这本书的核心论点——大多数使用错误源于糟糕设计，而不是用户愚蠢——仍然是 HCI 中最重要的单一思想。
World Wide Web 创造了一个全新的交互语境。网页最初是静态文档；在 1990 年代和 2000 年代，它们逐渐变成交互式应用。Web 设计作为一种不同于印刷设计的学科出现，因为它面对不同约束：不同渲染环境、不同用户行为（扫描而不是阅读）、不同导航模型。Nielsen 的 Web 可用性研究系统记录了用户实际上如何阅读网页（他们并不真正阅读——他们扫描，使用 F 形模式跳过大部分内容）。随着网站增长到成千上万乃至数百万页面，信息架构——内容如何组织，导航如何结构化——成为一个独立专业。
iPhone（2007）重置了设计问题。触摸界面消除了鼠标和键盘；屏幕变得更小；应用全屏运行；使用语境变成移动的、被打断的。Apple 的移动设计指南规定了目标触控尺寸（44 × 44 points）、简化的导航模型（返回按钮栈），以及取代桌面隐喻的内容中心。Google 的 Material Design 和 Apple 的 Human Interface Guidelines 成为移动端的主导设计系统，确立了每天被数十亿人使用的模式——卡片、底部导航、滑动手势、模态面板。Ethan Marcotte 于 2010 年提出的响应式 Web 设计，处理了一个随之而来的问题：如何在从手机到桌面的各种屏幕尺寸上提供同一内容。
当前时代正在被 AI 重塑。对话式界面——聊天机器人、语音助手、能够代表用户写作和行动的 AI 工具——引入了既有 WIMP 词汇无法处理的交互范式。设计挑战是新的：用户如何校准对一个可能出错系统的信任？如何传达不确定性？当一个系统会自主行动时，如何给予用户有意义的控制？当系统自信地产生错误答案时，如何为这种失败模式设计？这些问题尚无成熟答案，这个领域正在积极发展它们。
认知、评估，以及为多样性设计
人类认知如何塑造界面要求
界面与人类认知系统交互，而人类认知系统并不是为计算而演化出来的；它有特定属性——优势和限制——设计必须适应这些属性。
工作记忆是有限的。Miller 1956 年的论文 “The Magical Number Seven, Plus or Minus Two” 确立了人类一次只能在工作记忆中保持大约七个项目；更新的估计则认为这个数字更低，大约是四个组块。要求用户在步骤之间记住信息、同时在脑中保持许多选项，或追踪复杂状态的界面设计，都违反了这一约束。设计回应是识别优于回忆：在需要时呈现相关信息，而不是要求用户记住它。菜单显示可用命令；自动补全显示有效补全；确认对话框显示某个行动的后果。命令行界面（回忆）和图形菜单（识别）之间的差别，部分就在于这个认知约束。
心智模型是用户对系统如何工作的理解。用户根据自己的心智模型与系统互动，而这个模型必然不完整，并且经常是错的。Norman 的关键洞见是，好的设计会通过可供性、映射和反馈，把系统的概念模型显现出来，使用户的心智模型逐渐接近对系统的准确理解。坏设计则迫使用户从不足的信息中建构心智模型，产生那些会导致错误的错误模型。设计成功的测试是：一个新用户是否能准确预测如果自己做 X 会发生什么？如果不能，说明概念模型没有被传达出来。
John Sweller 于 1980 年代末发展出的认知负荷理论，区分了内在负荷（任务固有复杂性）、外在负荷（糟糕设计额外增加的复杂性）和相关负荷（用于学习的认知努力）。界面设计应当最小化外在负荷——也就是导航界面而不是完成任务所产生的认知成本。屏幕上每个需要用户注意、解码和行动的界面元素，都会增加外在负荷。设计方向是节制：屏幕上的每一个元素都必须通过降低任务复杂度，而不是增加界面复杂度，来证明自己值得存在。
可供性和示能符会塑造用户感知到什么是可能的。按钮看起来像可以点击的东西；文本框看起来像可以输入的东西。这些视觉约定会创造预期。当约定被违反时——例如一个扁平的、只有标签的 UI 元素实际上可以点击，却与不可交互文本无法区分——用户发现不了交互，并不是因为他们不专心，而是因为他们依赖的视觉语言没有发出交互信号。稳定使用视觉约定，可以减少用户理解什么可交互所需的感知工作。
容错设计承认用户错误不可避免。滑误（slips）是执行错误：用户知道该做什么，却做错了动作——点错按钮，输错快捷键。错误（mistakes）是知识错误：用户不知道正确行动，因此做出错误选择。好的设计会通过设计预防最常见错误（对破坏性操作使用单向而非双向确认），使错误可以恢复（撤销），并提供清楚错误信息，解释哪里出错以及如何恢复。
经验评估方法
界面设计是可测试的。这使 HCI 不同于纯审美设计：一个设计“可用”这一主张是经验主张，并且有方法可以测试它。
可用性测试会让具有代表性的用户接触界面，并要求他们完成特定任务，同时说出自己的想法（think-aloud protocol）。主持人观察用户做了什么、在哪里犹豫、犯了什么错误、说了什么——收集的是界面可用性数据，而不是用户能力数据。Nielsen 关于五名参与者可以揭示 85% 可用性问题的洞见（后来研究者补充说，这假设问题空间已经被明确定义）使可用性测试变得实际可行：一次小型、低成本研究就可以识别最重要的问题。
启发式评估要求专家根据一组可用性启发式原则审查界面——Nielsen 十条原则是标准——并识别违反之处。这种方法比用户测试更快，也不需要参与者；它没有用户测试准确（专家会预测一些实际不会发生的问题，也会漏掉实际会发生的问题），但在早期设计阶段有用，因为此时完整用户测试可能还太早。三到五名评估者可以比单个评估者发现明显更多问题。
分析数据和行为数据衡量用户在已部署系统中实际做什么：他们点击哪里，在哪里放弃，又从哪里返回。这告诉你发生了什么，但不告诉你为什么。定性方法——访谈、情境访查（在用户真实工作语境中观察他们）、日记研究——提供为什么。严肃的 UX 研究会结合二者：用分析数据识别问题，用定性方法解释问题。
A/B 测试通过把两个界面版本分别展示给随机分配的用户群体，并衡量结果，来比较二者。这会产生关于哪种设计在特定指标上表现更好的因果证据。它的限制是：它只能比较已经被设计出来的备选方案；它需要足够流量才能检测差异；它可能优化那些并不代表真正重要事项的指标（例如通过让取消按钮更难找到来提高转化率——这是指标上的改进，不是用户体验上的改进）。
为多样性设计：无障碍与包容性
无障碍是这样一种设计要求：界面应当能被残障人士使用。由 W3C 发布的 Web Content Accessibility Guidelines（WCAG）定义了三级无障碍符合性等级，并规定了视觉、听觉、运动和认知无障碍要求。WCAG 2.1 Level AA 是多数无障碍相关法规所要求的标准，也是多数生产系统的目标。
WCAG 的四项原则概括了无障碍要求：Perceivable（内容能被所有用户感知）、Operable（界面能被所有用户操作）、Understandable（内容和操作可以被理解）以及 Robust（内容能被辅助技术可靠解释）。实际要求包括：为视觉障碍提供足够色彩对比度；为无法使用指点设备的用户提供键盘可导航性；为盲人用户提供屏幕阅读器兼容性（语义化 HTML、ARIA 属性、图片替代文本）；为视频提供字幕；为非文本内容提供文本替代。
无障碍并不主要是为少数残障用户提供的功能——它惠及每个人。高对比度设计在强日光下更好用。字幕能帮助身处嘈杂环境的观看者。大触控目标既帮助有震颤的用户，也帮助手冷的用户。这就是路缘坡效应（curb-cut effect）：为残障用户设计的无障碍功能，往往会持续改善所有用户的体验。
包容性设计超越残障，面向完整的人类多样性。这包括文化和语言多样性（文本方向、数字格式、日期格式、文化差异影响下的图标含义）、设备多样性（小屏幕、慢连接、旧硬件）、认知多样性（不假设用户有高教育水平或技术流利度的设计），以及经济多样性（在按流量计费、间歇性连接、共享设备上也能工作的设计）。真正内化包容性设计的实践者，会从“用户不像设计者”这一假设出发进行设计。
学习这一部分会改变什么
HCI 会改变实践者看待自己构建的软件，以及使用这些软件的用户的方式。
第一个变化，是倾向于把用户看作具有真实限制的真实人。学过 HCI 的实践者会本能地问：这是给谁用的？他们知道什么？什么会让他们困惑？他们会在哪里犯错？他们犯错后会发生什么？这些问题并不是在说用户无能；它们是在要求设计符合人类认知实际运行的方式，而不是面向一个会读文档、永远不会误点的理想化用户。
第二个变化，是经验验证的习惯。设计直觉并不可靠。一个看过可用性测试反复揭示“自信的设计决策会制造用户困惑”的实践者，会真正内化这样一点：测试不是可选步骤。这并不意味着每个设计决策都需要一次正式研究；它意味着关于可用性的主张应当被当作需要测试的假设，而不是可以直接宣称的真理。
第三个变化，是把无障碍当作一等要求。学过无障碍、亲眼看过屏幕阅读器如何浏览结构糟糕页面的实践者，再也不会在设计时不考虑语义化 HTML、色彩对比度和键盘导航。法律要求当然有帮助，但真正产生无障碍界面的，是那种为完整用户范围设计的内化承诺。
第四个变化，是具备设计沟通的流利度。HCI 提供了一套词汇，让人可以根据底层原则讨论界面决策——可供性、认知负荷、错误预防、信息层级——而不是只用审美偏好讨论。这样的词汇使设计讨论变得有生产力，而不是变成偏好之争。
资源
书籍与文本
Norman 的 The Design of Everyday Things（修订版，2013）是入口。它建立了之后阅读 HCI 所需的词汇和哲学——可供性、示能符、概念模型、反馈。它短小、易读，并且完全基础。任何构建他人会使用的软件的实践者都应该读它。
Rogers、Sharp 和 Preece 的 Interaction Design: Beyond Human-Computer Interaction（第 6 版，2023）是学术基础文本——比 Norman 更系统、更全面，但也更不易读。它覆盖以用户为中心的设计流程、研究方法、概念框架、评估方法和主要交互类型。其范围对应研究生层级的 HCI 课程。
Krug 的 Don’t Make Me Think（第 3 版，2014）是 Web 可用性最易读的入口。它用 200 页可读文字说明了可用 Web 设计的关键原则，以及如何评估一个网站是否遵循这些原则。在设计任何 Web 界面之前，它都属于必读。
Nielsen 的 Usability Engineering（1993）尽管已有三十年历史，仍然是对可用性测试和评估方法论最好的系统处理。它引入的启发式原则和方法至今仍是标准。
Cooper、Reimann、Cronin 和 Noessel 的 About Face: The Essentials of Interaction Design（第 4 版，2014）对桌面和 Web 应用的交互设计模式与原则提供了最完整覆盖。它提出的 Goal-Directed Design 方法，是 HCI 中最接近系统设计流程的东西。
对于视觉设计，Lupton 的 Thinking with Type（第 3 版，2022）是数字设计师的标准字体排印参考。字体排印——字体选择、层级、间距、对齐——是多数界面中视觉沟通的主要工具。
对于无障碍，WCAG 文档（可在 <www.w3.org/TR/WCAG21> 免费获取）是权威参考。Pickering 的 Inclusive Components（可在 inclusive-components.design 免费获取）提供了构建无障碍界面的组件级模式。
对于认知基础，Wickens 等人的 Engineering Psychology and Human Performance 比设计导向文本更严格地提供了 HCI 认知主张背后的科学基础。
| 书籍 | 作用 | 类型 |
|---|---|---|
| Norman, The Design of Everyday Things（修订版） | 基础词汇与哲学 | 入门 |
| Rogers, Sharp & Preece, Interaction Design（第 6 版） | 学术基础文本 | 入门 |
| Krug, Don’t Make Me Think（第 3 版） | Web 可用性；易读入口 | 入门 |
| Nielsen, Usability Engineering | 可用性测试与评估 | 深入 |
| Cooper et al., About Face（第 4 版） | 交互设计深度 | 深入 |
| Lupton, Thinking with Type（第 3 版） | 面向设计师的字体排印 | 深入 |
| Wickens et al., Engineering Psychology and Human Performance | 认知科学基础 | 深入 |
| Pickering, Inclusive Components（免费） | 无障碍组件模式 | 入门 |
| Microsoft Inclusive Design Toolkit（免费） | 包容性设计框架与设计练习 | 辅助 |
| Tidwell, Brewer & Valencia, Designing Interfaces（第 3 版） | 交互模式参考 | 参考 |
| Brignull, Deceptive Patterns（可在 deceptive.design 免费获取） | 黑暗模式记录 | 参考 |
课程与讲座
Stanford CS147（Introduction to Human-Computer Interaction Design，材料免费开放）是经典大学 HCI 课程，覆盖设计流程、用户研究、原型制作和评估，并采用项目式学习。
Interaction Design Foundation（IDF，订阅制，ixdf.org）提供最完整的 HCI 和 UX 设计在线课程体系——包括用户研究、交互设计、UX 写作、无障碍等。其深度超过多数大学课程，并且材料定期更新。
Nielsen Norman Group UX Training（nngroup.com，订阅制，也有免费文章）提供由该领域奠基研究者建立的实践者级训练。仅免费文章就已经构成多年阅读量。
Google UX Design Certificate（Coursera，可免费旁听）提供 UX 设计流程的结构化入门——研究、线框图、原型、测试——面向实践技能。
| 课程 | 平台 | 类型 |
|---|---|---|
| Stanford CS147 HCI Design（免费） | Stanford course site | 入门 |
| Interaction Design Foundation courses | ixdf.org | 入门 |
| Nielsen Norman Group articles（免费） | nngroup.com | 参考 |
| Google UX Design Certificate（可免费旁听；证书付费） | Coursera | 入门 |
| Baymard Institute UX research and training（免费文章；订阅付费） | baymard.com | 参考 |
实践、工具与当前资料
Figma（免费层）是主导性的界面设计和原型工具。学习 Figma 就是在学习这个领域的标准工具——用于线框图、高保真设计、原型和设计系统。官方 Figma 教程覆盖工具本身；更大的价值来自真正设计界面，并用真实用户测试它们。
屏幕阅读器——VoiceOver（macOS，免费）、NVDA（Windows，免费）、TalkBack（Android，免费）——是视觉障碍用户的主要辅助技术。让屏幕阅读器运行在你构建的界面上，并尝试在不看屏幕的情况下使用它，是理解无障碍实践含义的最直接方式。这种体验通常会令人谦卑，也很有生产力。
axe DevTools 浏览器扩展（免费）和 WAVE（免费）是自动无障碍检查工具。用它们检查任何界面，都会揭示最常见的无障碍违规。它们不能发现所有问题——自动工具大约只能捕捉 30% 的无障碍问题——但它们可以在用户测试之前先抓住容易发现的问题。
UserTesting.com 和 Maze（二者都有免费层）提供远程可用性测试基础设施。对一个原型进行五人非主持式可用性测试只需要数小时，并且会稳定揭示重要设计问题。
Hotjar（免费层）提供热力图、会话录制和调查工具，用于理解已部署 Web 界面上的用户行为——它是定性可用性测试的量化补充。
| 资源 | 平台 | 类型 |
|---|---|---|
| Figma（免费层） | figma.com | 实践 |
| VoiceOver / NVDA / TalkBack（免费） | macOS / Windows / Android | 实践 |
| axe DevTools / WAVE（免费） | Browser extension | 实践 |
| Apple Human Interface Guidelines（免费） | developer.apple.com/design | 参考 |
| Material Design 3（免费） | m3.material.io | 参考 |
| GOV.UK Design System（免费） | design-system.service.gov.uk | 参考 |
| WCAG 2.2 documentation（免费） | w3.org | 参考 |
| Nielsen’s 10 Usability Heuristics（免费） | nngroup.com | 参考 |
| CHI proceedings（延迟后免费） | dl.acm.org | 参考 |
陷阱
| 陷阱 | 为什么会误导 | 更好的回应 |
|---|---|---|
| 把设计当成审美 | 视觉吸引力很重要，但它不是 HCI 的实质。一个界面可以很美，却系统性地不符合用户心智模型、要求过多记忆、隐藏可用行动，并提供不足的错误恢复。这门学科关心的是为认知现实设计，而不是为视觉偏好设计。 | 在学习视觉设计之前，先读 Norman。理解概念模型、可供性和容错设计，会建立视觉设计必须服务的基础。分别衡量可用性（用户能否完成任务？）和审美（它是否好看？）——它们是不同评估，测量不同东西。 |
| 为自己设计 | 设计者并不是有代表性的用户：他们技术流利，熟悉自己正在实现的设计约定，也知道系统模型。对设计者显而易见的东西，对缺乏这些背景的用户常常并不显而易见。Nielsen 的用户测试研究已经证明了这一点；它在每一项研究中都可靠成立。 | 在断定设计可用之前，先用真实的代表性用户进行用户测试。如果你还没有看过某个人尝试使用你的界面，并发现他们在哪里卡住，你就还没有评估可用性。招募不是你自己的参与者，并在不提供帮助的情况下观察他们。 |
| 事后补做无障碍 | 事后修补无障碍远比一开始就为无障碍设计更昂贵，而且修补通常不完整。一个建立在语义化、结构良好的 HTML、正确 ARIA 属性和足够色彩对比度上的界面，默认就更无障碍；一个没有这些脚手架的界面，要变得无障碍，就需要大量返工。 | 把无障碍整合进设计流程。在设计审查中包含无障碍标准。在视觉设计阶段检查色彩对比，而不是之后再检查。在开发期间用屏幕阅读器测试，而不是上线前才测。无障碍是设计约束，不是后来添加的功能。 |
| 优化不反映用户成功的指标 | 转化率、停留时间、点击量和参与度都是用户目标的代理指标，但它们可以被以伤害用户的方式操纵。一个纯粹优化转化率的结账流程，很可能会使用黑暗模式——在最后一步才显示隐藏费用、默认勾选同意框、增加取消路径摩擦。这个界面在指标上“有效”，却辜负了用户。 | 用用户目标，而不只是商业指标，定义成功。每次界面评估中都包含一个面向用户的指标——任务完成率、满意度、错误率。Brignull 的 deceptive.design 分类法是识别“优化指标”何时越界成“对抗用户设计”的必读材料。 |
| 把响应式设计混同于移动设计 | 一个缩放到小屏幕上的桌面界面，并不是移动界面。移动用户有不同语境（被打断、在户外、单手使用）、不同交互能力（触摸而不是鼠标、没有 hover 状态、指向不精确），以及不同目标（通常是任务特定，而不是探索式）。响应式设计处理布局；移动设计处理根本不同的交互语境。 | 学习平台特定设计指南：Apple Human Interface Guidelines 和 Google Material Design 记录了移动设计所需的交互模式、触控目标尺寸、导航模型和手势约定。观察用户实际如何握持和使用手机——通常是单手拇指操作，这会限制屏幕可触达区域。 |
| 用 AI 跳过用户研究 | AI 工具可以生成线框图、撰写文案、建议设计模式，甚至综合用户研究。它们无法替代的是看见某个具体用户遇到某个具体界面时产生的洞见——当你看到光标在那个你以为标签很明显的按钮上犹豫，看到用户在你以为很清楚的错误信息后尝试恢复，看到用户尝试了一个你没有设计的快捷方式。 | 用 AI 加速综合、生成起点，而不是替代与用户直接接触。让 AI 生成候选设计以供评估；让 AI 总结许多研究中的模式。但用户测试要自己做——做原型，观察，发现心智模型在哪里断裂。洞见来自直接观察，而不是来自 AI 中介过的“用户是什么样”的描述。 |