23  HCI Cheatsheet

23.1 Lecture 1

23.1.1 Compare Between HCI and Interaction Design (ID)

Field Primary Focus
Human-Computer Interaction (HCI) Understanding and improving the relationship between humans and computers.
Interaction Design (ID) Designing interactive systems that are usable, useful, and provide a positive user experience.

Other definitions for interaction design are:

  • Designing interactive products to support people in their everyday and working lives
  • The design of spaces for human communication and interaction

23.1.2 What are some examples of interactive systems? Provide description to the examples.

There are 4 major types of interactive systems.

  • Consumer Electronics: devices such as smartphones, tablets, smart watches, and other wearables are designed to support personalized experiences
  • Public Terminal: Systems like ATMs, self-service kiosks, ticketing machines, and vending machines.
  • Digital Platforms: websites, web applications and social media.
  • Critical Systems: Medical devices, industrial control panels, aviation systems, and other safety-critical technologies

23.1.3 What are the goals of interaction design?

There are 3 main goals for interaction design.

  • Develop usable products (Usability means easy to learn or easy to use)
  • Provide an enjoyable experience
  • Involves users in the design process

23.1.4 What are the pillars of interaction design?

There are 3 pillars to interaction design

  • User: Who is using the system? (Who)
  • Activity: What is the user trying to accomplish? (What)
  • Context: Where and under what conditions is the interaction taking place? (Where)

23.1.5 Mention examples of design flaws along with their impact and results

There are 3 common design flaws. The table below mention them and describe their human impact and technical result.

Example of Design Flaws
Design Flaw Human Impact Technical Result
Activation Barrier Increase Cognitive Load Slower Transaction Times
Broken Convention High Error Rate User Frustration / Abandonment
Hidden Affordances Conusion Underutilization of Features

23.1.6 What are some techniques to understand user needs?

There are 4 important methods to understand the user needs.

  • Observing users in real environments
  • Conducting interviews and surveys
  • Involving users in usability testing
  • Applying established user-centered design methods

23.1.7 What is an interface?

An interface serves as a point of interaction between a user and a computer system.

Interfaces include:

  • Input Mechanisms: Devices and methods for conveying information to the system, such as keyboards, mice, touchscreens, styluses, voice commands, motion sensors, and gestures.
  • Output Mechanisms: Channels through which the system communicates back to the user, including visual displays, audio cues, haptic feedback (vibration), and notifications.
  • Interaction Styles: Patterns and frameworks that structure user interaction, such as menus, forms, direct manipulation, command lines, natural language interfaces, and gesture-based controls.

23.1.8 Mention examples of interaction design in business

There is an increasing number of interaction design consultancies. Examples of well known ones include:

  • Nielsen Norman Group: help companies enter the age of the consumer, designing human-centered products and services
  • Swim: provides a wide range of design services, in each case targeted to address the product development needs at hand
  • IDEO: creates products, services and environments for companies pioneering new ways to provide value to their customers

23.1.9 What do professionals in the ID industry do?

The ID industry employ multiple professionals, such as

  • interaction designers- people involved in the design of all the interactive aspects of a product
  • usability engineers- people who focus on evaluating products, using usability methods and principles
  • web designers- people who develop and create the visual design of websites, such as layouts
  • information architects- people who come up with ideas of how to plan and structure interactive products
  • user experience designers- people who do all the above but who may also carry out field studies to inform the design of products

23.1.10 How can you define your users and what is the impact of such analysis on the design?

You need to analyze the:

  • Demographics and Background of the users: analyze factors such as age, gender, and cultural background
  • Capabilities and Requirements of the users: analyze their technical expertise, cognitive and physical abilities, and specific accessibility requirements.

A thorough understanding of the users affects the design in two ways

  • Tailored Interfaces: You can create interfaces specifically tailored to user needs

  • Error Prevention: Comprehensive analysis helps prevent user frustration and reduces the occurrence of errors

23.1.11 What is the Interaction Design Process (The Iterative Approach)?

Goal Create systems that are effective, efficient, and satisfying
Methodology A continuous, non-linear cycle of refinement
Core Philosophy Core Philosophy: Constant evolution through understanding, designing, prototyping, and evaluating

The interactive design process is an iterative cycle of the following 4 phases. You keep repeating this cycle until the system is ready.

  • Phase 1: Identify Needs & Requirements
    • Determine user goals, specific tasks, and the operational context through user research, interviews, observations, and task analysis. The outcome is a clear set of functional, usability, and experiential requirements.
  • Phase 2: Develop Alternative Designs
    • Create and explore multiple solutions through sketches, storyboards, and conceptual models. This encourages divergent thinking and creativity to explore various approaches. The goal is to compare different ideas and select the most appropriate one.
  • Phase 3: Build Interactive Prototypes
    • Create versions of the system that allow users and stakeholders to experience the design early. This can range from low-fidelity paper sketches to high-fidelity interactive simulations. The goal of this phase is to uncover usability issues and clarify functionality.
  • Phase 4: Evaluate Design Continously
    • Refine the design through user feedback

23.1.12 Define Usability and User Experience (UX) goals and compare between them. Mention specific examples for each of them.

Goal Type Primary Focus Key Question
Usability Practical & Functional “Can the user do it?”
User Experience Emotional & Psychological “How does the user feel?”

Usability goals define how effectively a system supports users in completing tasks and achieving objectives. They prioritize the practical aspect of human-computer interaction.

These goals are:

  • Effectiveness: accuracy and completeness with which users achieve their goals
  • Efficiency: Speed and effort required to perform specific tasks.
  • Safety: ability to prevent errors or mitigate their consequences
  • Utility: extent to which a system provides the necessary functions to meet user needs
  • Learnability: How easy it is for new users to accomplish tasks and become proficient
  • Memorability: How easily users can remember how to use the system after a period of non-use

UX goals focus on the emotional and psychological responses that arise during interaction with a system. They prioritize enjoyment and satisfaction.

  • Enjoyable
  • Fun
  • Motivating
  • Aesthetically Pleasing
  • Emotionally Fulfilling
  • Not just used, but valued by the user

23.1.13 What are design principles? Mention specific examples.

Design principles provide general guidelines that help interaction designers create effective, efficient, and satisfying systems. Common design principles are:

  • Visibility: Make what has to be done obvious for the user
  • Feesback: Send information back to the user about what has been done
  • Constraints: Restrict the possible actions that can be performed. There are 3 types of constraints:
    • Physical
    • Cultural
    • Logical
  • Mapping: Make a clear relationship between the controls, their movements, and their result in the world.
  • Consistency: Similar tasks should use similar elements and similar interfaces. Could be both internal and external
  • Affordance: Refers to an attribute of an object that allows people to know how to use it.

23.1.14 Mention the types of constraints and compare between them with examples.

There are three types of constraints:

  • Physical Constraints
    • Refer to the way physical objects restrict the movement of things
    • Example: only one way you can insert a key into a lock
  • Logical Constraints
    • Exploits people’s everyday common sense reasoning about the way the world works
    • Example: the logical relationship between physical layout of a device and the way it works
  • Cultural Constraints
    • Learned arbitrary conventions. They can be universal or culturally specific.
    • Example: The use of red triangle for warning

23.1.15 Compare Between Internal and External Consistency

Internal consistency refers to designing operations to behave the same within an application

External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices

23.1.16 What are Usability Principles?

They are similar to design principles, except more prescriptive. They are used mainly as the basis for evaluating systems a provide a framework for heuristic evaluation.

  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Help users recognize, diagnose and recover from errors
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help and documentation

23.2 Lecture 2

23.2.1 What is the problem space?

The Problem Space refers to the set of issues, needs, goals, and constraints that motivate the development of a system. It encompasses the context of operation, user tasks, the environment, and any technical or social limitations.

23.2.2 Compare between the problem space and the design space

While the Problem Space defines the “What” and “Why,” the Design Space explores the “How”.

  • Problem Space: Focuses on users, their tasks, goals, and existing constraints.
  • Design Space: The realm of possible solutions, interface types, and system behaviors.

23.2.3 How to move from the problem space to the design space

To move effectively into the design space, designers must balance four critical pillars:

  • Translation: Converting user goals into specific functional requirements.
  • Identification: Pinpointing technical (hardware/software) and contextual (environment/social) limitations.
  • Exploration: Researching alternative interaction techniques and interface paradigms (e.g., touch vs. voice).
  • Alignment: Ensuring the solution supports real-world tasks efficiently rather than just looking good on paper.

23.2.4 What is a conceptual model, what are its components, what is its goal, and why is it important?

The conceptual model is a high-level description of how a system is organized and operates that provides a simplified, understandable representation of complex system logic allowing users to predict outcomes of their actions before they take them.

There are 3 components of a conceptual model

  • User Actions: Defines what the user can do
  • System Responses: How the system behaves when an action is taken.
  • Interface Representation: How concepts are visualized. This helps the user form a correct mental model.

The primary goal of the conceptual model is to ensure the user’s mental model matches the system reality. Leading to:

  • Predictability: If the model is clear, the user isn’t surprised by the system’s behavior.
  • Error Reduction: This reduces errors and mistakes in the system usage.
  • Increased Confidence: Users feel in control of the technology.

A good conceptual model is important because it leads to:

  • Consistency: Provides a framework so that new features feel like they “belong” to the same system.
  • Design Guidance: Helps designers choose the right interface elements (buttons, sliders, or menus) based on the underlying model.
  • Alignment: Ensures that what the user expects to happen is exactly what actually happens.
  • Crucial for Success: Especially vital when designing complex systems where technical logic may not be inherently obvious to the end-user.

23.2.5 Define System Support and provide examples

System support is providing the right functionality to the user at the right time. This includes proactive guidance and clear feedback

Example: progress bar or a confirmation sound.

23.2.6 What are interface metaphors?

Interface metaphors leverage real-world analogies to flatten the learning curve.

Examples:

  • Shopping Cart in E-Commerce Websites: Users know they can add items, remove them, and eventually “pay” at a counter .
  • The Desktop: Users understand that “files” live in “folders” on a “surface.”

23.2.7 Mention 3 interaction styles

  • Direct Manipulation: Dragging and dropping elements
  • Conversational: Natural language processing / AI chat
  • Menu-based: Structured navigation through lists

23.2.8 Compare between the activity-based conceptual models

Model User Goal Primary Benefit
Giving Instructions High-precision task execution Efficiency and Speed
Conversing Information Seeking / Support Accessibility and Familiarity
Manipulating and Navigating Spatial Reasoning / Agency Mastery and Direct Control
Exploring and Browsing Discovery / Information Gathering Flexibility and Non-Linearlity

There are 4 types of conceptual models classified based on activity

  • Giving Instructions
    • A model where the user actively tells the system what to do by issuing commands.
    • Used in word processors, CAD systems, vending machines, and consumer electronics.
    • You should use it when the user need to be the active director of the system and for tasks requiring high speed, exact results, and standardized procedures.
  • Covnersing
    • A model based on the metaphor of human-to-human conservation where users communicate with the system as if it were another person.
    • GitHub Copilot is an example of this.
    • They are highly effective for novices, technophobes, and universal access (those unfamiliar with technical interfaces).
  • Manipulating and Navigating
    • Interacting with digital representations in ways that mimic real-world physical actions.
    • It is effective and efficient for everyone from novices (rapid learning) to intermittent users (high retention) to experts (high efficiency).
    • It has limitations though including Metaphor Misinterpretation, Task Constraints, and Resource Demands
  • Exploring and Browsing
    • A model that supports open-ended exploration of information spaces.
    • Used in design tools, mobile tech, spatial data apps, 3D environments, and collaboration tools
    • Best use cases for it is when the user don’t have a fixed goal or when the objective is to gather general information.

23.2.9 Describe the conceptual models based on objects. Describe their advantages and provide examples for them

It is based on grounding digital interactions in familiar physical objects to reduce cognitive load, make complex systems feel approachable, and enable users to learn systems more quickly.

They have multiple advantages including:

  • Reduced learning effort
  • Predictable interactions
  • Enhanced satisfaction
  • Hybrid potential: Can be combined with activity based models

Examples for them include:

  • The Desktop Metaphor: Organizes digital files, folders, and applications as office materials.
  • The Spreadsheet Model (Bricklin): Based on traditional accounting ledgers.
  • The Star Interface: Organizes applications around a central hub (the “star”).

23.3 Lecture 3

23.3.1 What are the core cognitive aspects?

The core cognitive aspects include

  • Attention: Selecting things to concentrate on.
  • Perception and recognition: Perception and recognition is concerned with how information is acquired from the world and transformed into experiences
  • Memory: Involves encoding and recalling knowledge and acting appropriately.

23.3.2 What are the design implications of attention?

  • Information at the interface should be structured to capture users’ attention
  • Make information salient when it needs attending to
  • Use techniques to make things stand out like coloring, ordering, spacing, underlining, sequencing, and animation
  • Avoid cluttering the interface
  • Avoid using too much because the software allows it

23.3.3 What are the design implications of attention?

  • Design representations that are readily perceivable
    • Text should be legible
    • Icons should be easy to distinguish and read
  • Represetnations of information need to be designed to be perceptible and recognizable across different media, such as: icons, sounds, speech, and text

23.3.4 What are the design implications of memory?

  • Don’t overlap users’ memories with complicated procedures for carrying out tasks.
  • Design interfaces that promote recognition rather than recall by using menus, icons, etc.
  • Provide a user with a variety of ways of encoding information (files, emails, image) to help them to remember where they stored them.

23.3.5 What is filtering?

A filtering process is used to decide what information gets further processed and memorized.

23.3.6 What are mental models?

The mental model is the user’s knowledge of how to use the system and how it works. A successful system is one where the conceptual model matches the mental model.

23.3.7 What is external cognition?

External cognition is concerned with explaining how we interact with external representations, the cognitive benefits and processes involved, and how they extend our cognition. Their benfits include:

  • Reminding us that we need to do something
  • Reminding us of what to do
  • Reminding us when to do something

23.3.8 Describe computational offloading and provide examples.

Computatinal offloading is when a tool is used in conjunction with an external representation to carry out a computation. Two types of computational offloading are

  • Annotation: involves modifying existing representation through making marks (e.g., crossing off, ticking, underlining).
  • Cognitive Tracing: involves externally manipulating items into different orders or structures (e.g, playing scrabble, playing cards).

23.4 Lecture 4

23.4.1 What are the various mechanisms and rules followed in conversations?

  • Mutual Greetings
    • Hi there, hi
  • Turn-taking to coordinate conversation
  • Back-channeling to signal to continue and following
    • Uh-uh, umm, ah
  • Farewell Rituals
    • Bye then, see you
  • Implicit and explicit cues
    • looking at watch, fidgeting with coat and bags -> implicit
    • explicitly saying “oh dear, must go, look at the time, I’m late” -> explicit

23.4.2 Compare between synchronous and asynchronous communication. Provide examples for each and discuss their beneifts and problems.

Synchronous conversations are supported in real-time through voice and/or typing. Examples include video conferencing and chatrooms.

Synchronous Communication Benefits:

  • Can keep more informed of what is going on
  • Video conferencing allows everyone to see each other providing some support for non-verbal communication
  • Chatrooms can provide a forum for shy people to talk more

Synchronous Communication Problems:

  • Video lacks bandwidth so judders and lots of shadows
  • Difficult to establish eye contact with images of others
  • People can behave badly when behind the mask of an avatar

Asynchronous cmmunication takes place remotely at different times. Examples include email, newsgroups, and computer conferencing.

Asynchronous cmmunication Benefits:

  • Read any place any time
  • Flexible as to how to deal with it
  • Powerful, can send to many people
  • Can make saying things easier

Asynchronous cmmunication Problems:

  • Flaming
  • Spamming
  • Message Overload
  • False expectations as to when people will reply

23.4.3 Define Flaming, Message Overload, and False Expectations

Flaming is when a user writes incensed angry email expressed in uninhibited language that is much stronger than normally used when interacting with same person face-to-face. It includes the used of impolite statements, swearing, exclamation marks, and capitalized sentences or words. They can lead to misunderstandings and bad feelings among recipients.

Message Overload Many people experience message overload, receiving over 30 emails or other messages a day and find it difficult to cope and may overlook important messages. Filtering, threading, and the use of signaling to indicate the level of importance of a message (via the sender or recipient), through color coding, bold, font, or exclamation marks, are all techniques that have been developed to help people manage their emails.

False Expectations Many people assume that others read their messages several times a day and reply to them there and then. However, many people now reply to emails when they have time to do so.

23.4.4 Mention some of the new communication technologies

  • Virtual Environment (VE): A computer-generated simulation which allows the user to interact with it and with each other in real time.
  • Collaborative Virtual Environments (CVE): The rooftop garden in BowieWorld is a CVE. Users take place by “dressing up” as avatars.
  • VideoWindow: VideoWindow is a shared space that allowed people 50 miles apart to carry on conversation as if in same room drinking coffee together. 3 x 8 ft ‘picture-window’ between two sites with video and audio.
  • Hypermirror: Hypermirror allows people to feel as if they are in the same virtual place even though in physically different spaces. People in different places are superimposed on the same screen to make them appear as if in the same space.
  • Clearboard: Clearboard is a transparent board that shows other person’s facial expressions on your board as you draw.
  • Portholes: Regularly updated digitized images of people in their offices appeared on everyone’s desktop machines throughout day and night.

23.4.5 Define notification systems and mention examples for them

When using notification systems, users notify others as opposed to being constantly monitored. It provides information about shared objects and progress of collaborative tasks. Examples include:

  • Tickertape: Tickertape is a scrolling one-line window going from left to right including group name, sender’s name, and text message.
  • Babble: Circles with marbles represents people taking part in a conversation in a chatroom.