SYDE 542: Interface Design
Christine Murad
Estimated study time: 17 minutes
Table of contents
Sources and References
- Norman, D. A. The Design of Everyday Things. Revised and expanded edition. Basic Books.
- Cooper, A., Reimann, R., Cronin, D., and Noessel, C. About Face: The Essentials of Interaction Design. Wiley.
- Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., and Diakopoulos, N. Designing the User Interface: Strategies for Effective Human-Computer Interaction. Pearson.
- Nielsen, J. Usability Engineering. Morgan Kaufmann / Academic Press.
- Tufte, E. R. The Visual Display of Quantitative Information. Graphics Press.
- Rogers, Y., Sharp, H., and Preece, J. Interaction Design: Beyond Human-Computer Interaction. Wiley.
- Buxton, B. Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufmann.
- Greenberg, S., Carpendale, S., Marquardt, N., and Buxton, B. Sketching User Experiences: The Workbook. Morgan Kaufmann.
- Stanford d.school. Design thinking process resources and bootcamp bootleg.
- MIT Media Lab. Publications on tangible and responsive interfaces.
- Carnegie Mellon University Human-Computer Interaction Institute. Research publications on interaction and usability.
Chapter 1: Foundations of Human-Technology Interaction
Interface design sits at the intersection of engineering, cognitive science, and visual communication. Its central question is deceptively simple: how do we build computational systems that people can actually use, enjoy, and trust? The crucial reframing is that an interface is not a surface layer painted onto a finished product. It is the mediating structure through which all capability, intent, and meaning flow between a human and a machine. A well-designed interface makes a complex system feel inevitable; a poorly designed one makes even a trivial task feel like an interrogation.
Norman’s foundational argument in The Design of Everyday Things is that most usability failures are not user failures. They are design failures, and they can be diagnosed by examining the gulf between a user’s goals and the system’s state. He describes two gulfs in particular: the gulf of execution, which is the distance between what a user wants to do and the actions the system permits, and the gulf of evaluation, which is the distance between the system’s current state and the user’s ability to interpret it. Every design decision either narrows or widens these gulfs. An icon that clearly affords clicking narrows the gulf of execution; a status indicator that clearly reports success narrows the gulf of evaluation.
This chapter also introduces the broader premise that technology not only supports individual tasks but also mediates human-to-human communication. A messaging client, a collaborative document, a video conferencing system, and a shared whiteboard are all interfaces for communication as much as for computation. Rogers, Sharp, and Preece argue that designing such systems requires thinking about social, emotional, and organizational context alongside mechanical usability. The designer must ask not only “can a user complete this task” but also “what relationships does this system enable, distort, or foreclose.”
Chapter 2: Design Principles and Conceptual Models
The second unit of the course translates these foundations into concrete principles. Norman’s vocabulary has become canonical: affordances, signifiers, mappings, feedback, constraints, and conceptual models. An affordance is a relationship between the physical or virtual properties of an object and the capabilities of an agent; a signifier is a perceivable cue that tells the user an affordance exists. A door handle that is shaped to be pulled is an affordance; a small label or arrow instructing the user to pull is a signifier. Designers who conflate these two ideas tend to layer explanatory signage on top of surfaces that ought to have been designed to communicate without labels.
Mappings describe the correspondence between controls and their effects. A range-top stove whose knobs are laid out in the same spatial pattern as the burners uses natural mapping; one whose knobs are arranged in a row regardless of burner position forces the user to memorize arbitrary pairings. Feedback is the timely, informative response to a user action; it should be specific enough that the user can distinguish between a command that succeeded, a command that is still processing, and a command that failed. Constraints narrow the space of possible actions, either physically, logically, semantically, or culturally, so that the system steers the user away from errors without having to scold them.
A conceptual model is the mental representation a user builds of how a system works. Good design ensures that the model implied by the interface matches the actual behavior of the system closely enough that the user’s predictions remain reliable. When these diverge, the user experiences surprise, mistakes compound, and trust erodes. Cooper, Reimann, and Cronin in About Face stress that interface design should begin by explicitly articulating the intended conceptual model and then testing whether users are actually constructing it.
Shneiderman’s Eight Golden Rules complement Norman’s vocabulary with an action-oriented checklist: strive for consistency, seek universal usability, offer informative feedback, design dialogs to yield closure, prevent errors, permit easy reversal of actions, support internal locus of control, and reduce short-term memory load. These rules have survived decades of interface evolution because they express invariants of human cognition rather than fashions of visual style.
Chapter 3: Problem Identification and User Research
Before prototyping anything, a designer must understand the problem space. This unit emphasizes that the problem a user describes is rarely the problem that actually needs to be solved. Techniques for surfacing the real problem include direct observation, contextual inquiry, surveys, interviews, diary studies, and task analysis. Each method trades off cost, depth, ecological validity, and participant burden in different ways.
Direct observation, sometimes called ethnographic or field research, places the designer in the environment where the work actually happens. Watching a nurse chart vital signs in a noisy ward is radically more informative than asking the same nurse in a quiet office what charting is like. Observation captures tacit knowledge that participants cannot verbalize, reveals workarounds that have become invisible through repetition, and grounds later design decisions in the constraints of real settings. Contextual inquiry, as developed in the tradition of Beyer and Holtzblatt, combines observation with brief on-the-spot interviews.
Interviews and surveys reach larger populations at lower cost but rely on self-report. They are most useful for eliciting attitudes, preferences, and reported frequencies, and least reliable for capturing actual behavior, especially for tasks that users have automated or rationalized. A skilled interviewer uses open-ended questions, avoids leading phrasings, and probes for specific examples rather than abstract generalizations. Survey design requires similar discipline: unambiguous wording, balanced response scales, careful avoidance of double-barreled items, and pilot testing before deployment.
Task analysis decomposes a user’s goal into the sequence of subtasks, decisions, and information needs required to accomplish it. Hierarchical task analysis and cognitive task analysis in particular are widely used in safety-critical domains to map the full cognitive load of an activity. The output is not merely a list of steps but a structured description of what the user must know, perceive, decide, and remember at each moment.
Chapter 4: Requirements, Personas, and Use Cases
The raw material gathered through research must be distilled into design-ready artifacts. Personas are fictional yet grounded archetypes of users, each describing goals, constraints, prior experience, and behavioral tendencies. Cooper popularized personas as a disciplined counterweight to the temptation to design for an imaginary average user. A persona forces the team to commit to a specific point of view and to ask, at every decision, whether the proposed design would actually serve that person. Good personas are built from evidence, not imagination; each attribute should trace back to observations or interviews.
Use cases and user stories describe concrete interactions between a persona and the system in pursuit of a goal. A use case typically enumerates a primary success scenario and a set of alternative flows for edge cases and errors. User stories compress this into short narrative statements of the form “as a persona, I want to action so that outcome.” Together, personas and use cases turn research findings into a shared vocabulary that designers, engineers, and stakeholders can reason about.
Requirements synthesis also produces design recommendations: prioritized statements of what the system must, should, or could do. These are not implementation specifications but behavioral commitments. They constrain the later prototyping phase without dictating visual or structural choices. A common failure mode is to collapse the distinction between a requirement and a feature, which prematurely forecloses creative solutions.
Chapter 5: Further Research Methods and Structure
Additional research methods extend the designer’s toolkit beyond interviews and observation. Card sorting asks participants to group content items in ways that feel natural to them, surfacing the mental categories they use. Open card sorts let participants invent their own group labels; closed sorts give predefined categories. The results inform information architecture decisions such as navigation labels and menu groupings. Affinity diagramming organizes large numbers of raw observations, quotes, or ideas by clustering related items on a wall until themes emerge bottom-up. Both techniques are valuable because they prevent the designer from imposing a category scheme that looks clean on paper but does not match how users actually think.
Storyboarding and user journey mapping bring time and narrative into the analysis. A storyboard is a comic-strip-style sequence depicting a user moving through a situation with a system. It forces the designer to commit to a specific context, to show the emotional beats of the interaction, and to expose moments that might otherwise be handwaved. A journey map is a more analytical cousin that tracks a user’s actions, thoughts, feelings, and pain points across the stages of an experience, often including touchpoints that fall outside the digital product itself. These artifacts are especially useful for communicating with non-designers because they tell a story rather than presenting abstract data.
Chapter 6: Designing Interfaces and the Ethics of Design
Once requirements and research artifacts are in hand, the designer turns to the interface itself. Design at this stage is less about pixels and more about structure: what objects exist in the system, what the user can do with them, how they connect, and how the user moves between them. Cooper’s goal-directed design argues that every interaction should serve a user goal rather than a feature checklist, and that goals are best understood at the level of motivations rather than tasks.
Ethics enters the conversation here with unavoidable force. Interface designers shape attention, emotion, and decision-making at scale. Patterns that nudge users toward choices they would not make on reflection, sometimes called dark patterns or deceptive design, include confirmshaming, disguised ads, forced continuity, roach motels, and preselected opt-ins for data sharing. The ethical designer treats the user as a principal whose interests the system serves, not a target whose behavior the system extracts. The Carnegie Mellon HCI Institute and similar research communities have increasingly framed these issues in terms of value-sensitive design, which asks explicitly which stakeholders’ values a system advances or compromises.
Privacy, accessibility, inclusion, and autonomy are not optional concerns layered on top of a design. They are structural constraints that, if ignored early, become prohibitively expensive to retrofit. Designing for accessibility from the start, for example, typically produces interfaces that are also clearer and more robust for users without disabilities, a phenomenon sometimes called the curb-cut effect.
Chapter 7: Wireframing, Prototyping, and AI-Assisted Tools
Wireframes and prototypes externalize design ideas so they can be tested, critiqued, and revised cheaply. A wireframe is a low-fidelity schematic that shows layout, hierarchy, and navigation without committing to visual style. A prototype adds interactivity so that users can click through flows and experience the system in something closer to its intended form. Buxton’s framing in Sketching User Experiences is that sketches explore the right design while prototypes refine the design right; both are necessary, and confusing them leads to premature polish on the wrong ideas.
Fidelity should match the question being asked. Very low-fidelity sketches on paper are ideal for exploring alternatives because they invite criticism and require no commitment. Medium-fidelity wireframes in digital tools are appropriate for settling structural questions. High-fidelity prototypes that mimic the final look and feel are appropriate for usability testing and stakeholder buy-in, but they discourage major structural changes precisely because they look finished.
Modern design tools have compressed the distance between sketch and prototype, and generative AI has begun to reshape the early stages of design work. AI tools can produce layout variations, generate placeholder content, draft copy, suggest icons, and mock up alternative visual treatments in seconds. Used thoughtfully, they expand the space of alternatives the designer can consider. Used carelessly, they encourage a kind of averaged aesthetic that papers over unresolved conceptual problems. The critical skill is to stay rooted in research-driven goals and to treat AI outputs as disposable exploratory material rather than finished artifacts.
Chapter 8: Visual Design, Navigation, and Information Structure
Visual design communicates hierarchy, grouping, and meaning without words. The Gestalt principles, including proximity, similarity, common fate, continuity, closure, and figure-ground relationships, describe how the perceptual system spontaneously organizes visual elements into wholes. A designer who understands these principles can arrange a screen so that the user sees its structure at a glance rather than having to parse it element by element. Tufte’s work on the visual display of quantitative information extends these ideas to data: maximize the data-ink ratio, eliminate chartjunk, use small multiples to reveal patterns across conditions, and always integrate annotation with the data it describes.
Typography, color, and spacing form a system rather than a set of independent choices. Type establishes reading rhythm and tone; color encodes categories, states, and emphasis; spacing creates grouping and breathing room. Consistency across these dimensions produces coherence, and deliberate violations of consistency draw attention to what matters. Accessibility constraints, such as sufficient contrast ratios and minimum touch target sizes, are not aesthetic compromises but boundary conditions within which good design operates.
Navigation and information structure determine whether users can find what they need and understand where they are. Menus, breadcrumbs, tabs, search, filters, and links are the vocabulary of wayfinding. Information architecture organizes content so that the underlying structure matches the user’s expectations, as revealed by card sorting and task analysis. A well-structured system communicates its shape through the first few screens a user encounters, so that exploration feels like following a map rather than wandering a maze.
Chapter 9: Evaluating User Interfaces
Evaluation closes the loop between design intention and user experience. Nielsen’s Usability Engineering popularized heuristic evaluation as a fast, inexpensive inspection method in which a small number of evaluators independently review an interface against a checklist of usability principles. Nielsen’s ten heuristics include visibility of system status, match between the system and the real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency of use, aesthetic and minimalist design, help users recognize and recover from errors, and help and documentation. Studies show that three to five evaluators typically find the majority of findable problems, making the method especially valuable early in development.
Cognitive walkthroughs are a complementary inspection method that simulates a new user attempting a task. For each step, the evaluator asks whether the user will know what to do, whether they will see the control, whether they will understand that the control produces the intended effect, and whether they will get appropriate feedback. The answers expose gaps between the designer’s assumptions and a realistic user’s knowledge.
Empirical usability testing brings actual participants into contact with the system. Classic protocols use think-aloud methods, in which participants verbalize their thoughts as they work through tasks, while the facilitator observes and notes moments of confusion, error, and success. Measures typically include task completion rate, time on task, error frequency, and subjective satisfaction. Small samples of five to eight users per iteration are usually sufficient to surface most usability issues in early-stage designs, while statistical comparisons between alternatives require larger samples. Quantitative instruments such as the System Usability Scale offer a compact standardized measure of perceived usability that is easy to administer and interpret.
Chapter 10: Usability Testing Studios and Iteration
The final phase of the course brings everything together in usability testing studios where teams run their own sessions, analyze the results, and iterate. A good session is planned in advance: the facilitator writes a script, defines tasks that are representative without being leading, prepares a consent process, and decides what data to collect. During the session, the facilitator avoids teaching or rescuing, because every rescue hides a problem the design needs to address. After the session, the team reviews notes and recordings, tags observations by severity and theme, and prioritizes issues for the next iteration.
Iteration is the heartbeat of interface design. No first design is correct, and no testing session surfaces every problem. The discipline is to plan for multiple short cycles, each of which poses a specific question, runs a lightweight evaluation, and produces a concrete revision. Buxton’s sketch-and-prototype philosophy, Nielsen’s discount usability engineering, and the Stanford d.school’s design thinking process all converge on the same practical advice: fail early, fail cheaply, and learn from each failure.
The final project synthesizes the entire arc of the course. A team identifies a real problem, conducts primary research, develops personas and requirements, storyboards and wireframes alternatives, builds a prototype at appropriate fidelity, evaluates it through heuristic review and user testing, and iterates toward a defensible final design. The portfolio that results is not just a collection of deliverables but evidence of a systematic process in which each decision can be traced back to research and forward to evaluation. The lasting takeaway is that interface design is less a matter of taste than of disciplined inquiry: every screen is a hypothesis, every user session is an experiment, and every iteration is a chance to narrow the gulfs between what people want and what systems can finally, gracefully, deliver.