HCI Flashcards
With regards to the model of working memory, what is a “chunk” and what is the difference in a “chunk” between experts in an area and novices?
A chunk is a meaningful unit of information stored in working memory. It can be a single item or a group of related items that are processed as a single entity.
How do chunks differ between experts and novices?
Experts: Have larger, more complex chunks due to prior knowledge and experience, allowing them to process information more efficiently.
Novices: Have smaller, less structured chunks, meaning they rely more on raw data rather than patterns and prior experience.
With regards to interaction design, what is a “forcing function”? Provide three examples.
A forcing function is a design constraint that prevents errors by forcing users to take a specific action before proceeding. It helps improve usability and safety by ensuring users cannot easily make mistakes.
Seatbelt Reminder in Cars
A car beeping continuously until the driver fastens their seatbelt.
Save Confirmation in Software
A pop-up asking, “Are you sure you want to delete this file?” to prevent accidental deletions.
Two-Factor Authentication (2FA)
Requiring a code sent to your phone before logging in to prevent unauthorised access.
Purpose: Forcing functions help reduce user errors and enhance safety and efficiency in system interactions.
What is a persona? Why might it be a useful design tool?
A persona is a fictional but research-based representation of a typical user that designers create to better understand the target audience. It includes details such as:
Name & Background (e.g., age, occupation)
Goals & Needs
Pain Points & Frustrations
Behavioural Patterns
User-Centred Design – Helps keep real users in mind when making design decisions.
Empathy Building – Encourages designers to think from the user’s perspective.
Consistency – Ensures all team members have a shared understanding of the target audience.
Feature Prioritisation – Helps teams focus on features that provide real value to users.
Example: A travel booking app might create a persona like “Emily, a 28-year-old solo traveler who wants quick and budget-friendly flight options.”
What is the difference between an icon and a symbol? Provide one example of each.
Icon – A visual representation that resembles the object or concept it represents.
Example: A trash bin icon on a computer, which visually suggests deleting files.
Symbol – A conventional or abstract representation that does not necessarily resemble what it represents but is understood through cultural or learned meaning.
Example: A red circle with a line through it, symbolising “No” or “Prohibited.”
Key Difference: Icons rely on visual similarity, while symbols rely on conventional meaning.
(a) Within design there are three main colour profiles utilised: RGB, HSV, CMYK.
(i) Provide the full definitions for each of these profiles and the
environment which they are primarily used in.
(ii) Why does it tend to be a bad idea to use Red text on a Blue
background?
(iii) When deciding what colours to use as part of an interface design, there are several considerations which need to be made to improve accessibility. Provide one example of an instance where a consideration would need to be made and what the consideration would be.
RGB
Definition: An additive colour model where colours are created by mixing red, green, and blue light.
Used in: Digital screens (monitors, TVs, phone displays).
HSV (Hue, Saturation, Value)
Definition: A model representing colour in terms of hue (colour type), saturation (intensity), and value (brightness).
Used in: Image editing, colour picking in design software, and user interface design.
CMYK
Definition: A subtractive colour model used for printing, where colours are formed by subtracting light using ink.
Used in: Printing (magazines, brochures, packaging).
Why is Red Text on a Blue Background a Bad Idea?
The human eye struggles to focus on red and blue simultaneously due to differences in wavelengths.
This creates visual discomfort, making text harder to read.
It can cause chromatic aberration, making the text appear blurry or vibrating.
Accessibility Consideration in Colour Choices
Example: Colour Blindness Consideration
Issue: Red-green colour blindness (most common type) makes it difficult to distinguish between red and green elements.
Solution: Use high contrast colours, patterns, or labels instead of relying only on colour (e.g., red error messages should also have an exclamation icon ).
(b) When discussing inclusive design, it tends to be discussed in terms of Accessibility, Usability and Inclusivity.
(i) Provide a definition of each of these terms.
(ii) Provide an element of inclusive design which would promote each of these aspects of inclusivity.
Accessibility
Definition: Designing systems so that people with disabilities can perceive, understand, navigate, and interact with them.
Example: Screen reader compatibility for visually impaired users.
Usability
Definition: The ease with which all users, regardless of ability, can efficiently and effectively use a system.
Example: Clear, intuitive navigation and large, clickable buttons.
Inclusivity
Definition: Ensuring the design accommodates users from diverse backgrounds, abilities, and needs.
Example: Language options for non-native speakers in a web app.
(ii) Elements of Inclusive Design for Each Aspect
Accessibility: High-contrast text for users with low vision.
Usability: Simple and consistent interface layouts.
Inclusivity: Gender-neutral language in forms and applications.
When defining the usability of an interface, what are the 5 quality aspects which the interface needs to encompass and how are they measured?
Learnability
Definition: How easy is it for new users to accomplish basic tasks?
Measurement: Time taken to complete tasks for the first time.
Efficiency
Definition: How quickly can users perform tasks once they are familiar with the system?
Measurement: Number of actions or time required for an experienced user to complete tasks.
Memorability
Definition: How easily can returning users re-learn the system after a period of inactivity?
Measurement: Time needed to reacquaint with the interface after not using it for a while.
Error Handling
Definition: How well does the system prevent, detect, and recover from errors?
Measurement: Number of errors made, error severity, and ease of recovery.
Satisfaction
Definition: How enjoyable and pleasant is the system to use?
Measurement: User feedback, surveys, and overall user ratings.
You have been brought on as a design accessibility consultant by
Throckmorton Inc. who are developing a new suite of online learning tools.
This will include a series of taught lectures in video format and interactive quizzes & tests.
For each of the following user profiles provide a possible accessibility issue which may need to be overcome and a design solution for that issue.
(i) Users with visual impairments.
(ii) Users with hearing impairments.
(iii) Users with motor impairments.
BASICALLY THINK LIKE A SNOWFLAKE
(i) Users with Visual Impairments
Issue: Difficulty reading text and understanding visual content in videos.
Solution:
- Provide screen reader compatibility with alt text for images.
- Offer high-contrast mode and adjustable text size.
- Include audio descriptions for video content.
(ii) Users with Hearing Impairments
Issue: Inability to hear lecture audio or spoken instructions in quizzes.
Solution:
- Implement closed captions and transcripts for all video lectures.
- Use visual indicators instead of sound-based notifications.
- Offer sign language interpretation where possible.
(iii) Users with Motor Impairments
Issue: Difficulty using a mouse or keyboard for navigation and answering quizzes.
Solution:
- Ensure keyboard-only navigation and support for assistive devices.
- Implement voice control and alternative input methods (e.g., eye-tracking).
- Use large, clickable UI elements with sufficient spacing to reduce misclicks.
What is a micro-interaction? Name any two of the four components of a micro-interaction. Give one example of a micro-interaction in an interface.
A micro-interaction is a small, subtle interaction in an interface that enhances the user experience by providing feedback, guiding actions, or adding delight. These interactions often involve small animations or responses to user input.
Two Components of a Micro-Interaction
Trigger – The event that initiates the micro-interaction (e.g., a button click, hovering over an element).
Feedback – The response the user receives (e.g., a visual change, sound, or vibration).
Examples
- Typing Indicator in a Chat App – When a user is typing, a small animation (e.g., three dots) appears to indicate activity, providing real-time feedback.
- Fun animation whilst an application is loading etc
What is the difference between menu depth and menu breadth? Which is better to use to present menu choices to users, and why?
Menu Depth – The number of levels or layers a menu has. A deep menu requires users to navigate through multiple submenus to reach their desired option.
Example: Settings > Display > Advanced > Colour Profile
Menu Breadth – The number of options available at each level of the menu. A broad menu has more choices displayed at once, reducing the need for deep navigation.
Example: Settings menu with all major categories listed on one screen
Which Is Better?
Menu breadth is generally better because:
- It reduces the number of steps needed to find an option.
- It improves efficiency and minimises cognitive load.
- Users can quickly scan and select choices without getting lost in deep menu structures.
However, excessive breadth can be overwhelming. The best approach is a balance—using moderate breadth while keeping depth minimal.
With regard to human memory, what is a retrieval cue? Give two examples of retrieval cues used in interface design.
A retrieval cue is a stimulus that helps users recall information stored in their memory. In interface design, retrieval cues assist users in remembering actions, locations, or content by providing familiar triggers.
Examples of Retrieval Cues in Interface Design:
Icons – Recognisable symbols (e.g., a magnifying glass for search or a trash bin for delete) help users quickly recall functions.
Breadcrumb Navigation – A visual trail (e.g., Home > Settings > Display) helps users remember their navigation path and return to previous pages.
One method of preventing errors in design is to use a forcing function.
Forcing functions can be especially useful in safety-critical systems.
In interface design, we distinguish between three types of forcing functions.
For each of the following scenarios, identify and name the type of forcing function being used.
(i) Dialog window appears asking if you want to save your work before
closing a document with unsaved changes.
(ii) ATM forces you to take your card first before releasing your money.
(iii) When paying for an item purchased online, you cannot complete the payment until you’ve entered the one-time security code.
(i) Dialog window appears asking if you want to save your work before closing a document with unsaved changes.
Type: Interlock
Reason: An interlock prevents the user from proceeding until a required action is performed, ensuring important steps (like saving work) are not skipped.
(ii) ATM forces you to take your card first before releasing your money.
Type: Lock-in
Reason: A lock-in ensures a specific sequence of actions to prevent mistakes, like forgetting the card in the machine.
(iii) When paying for an item purchased online, you cannot complete the payment until you’ve entered the one-time security code.
Type: Lock-out
Reason: A lock-out prevents users from proceeding until they fulfil a requirement (e.g., verifying identity with a security code), adding an extra layer of protection.
We distinguish between two types of user errors: slips and mistakes. Slips are unconscious errors – right intention, but wrong action.
In no more than one sentence, identify which type of user is more prone to “slips”, and why.
Experienced users are more prone to slips because they perform tasks automatically and may act out of habit without consciously checking their actions.
Your team has been given the task of re-designing a website for users to book flights. The first screen allows the user to select their departure and arrival city, and their travel dates before searching for available flights.
(i) Identify two ways your team can design this first screen that will prevent the user from making “slips” when specifying their flight requirements.
(ii) One of the phases of human-centred design is prototyping. Your team would like to make use of the lo-fi prototyping technique. Give three advantages of using lo-fi prototyping.
Auto-complete and validation for city selection – Implement an auto-complete dropdown for departure and arrival cities to prevent typos and invalid inputs. Additionally, prevent selecting the same city for both fields.
Date constraints and calendar picker – Use a date picker that disables past dates and automatically adjusts the return date if the user selects a departure date after it, preventing illogical selections.
Quick and Cost-Effective – Lo-fi prototyping allows for rapid iteration and feedback without the need for expensive tools or extensive development time.
Encourages User and Stakeholder Feedback – Since lo-fi prototypes are simple and rough, users and stakeholders feel more comfortable providing constructive feedback, leading to better usability improvements.
Focuses on Functionality Over Aesthetics – By avoiding distractions from visual design details, lo-fi prototypes help teams concentrate on core functionality, user flow, and interaction design.
List Jakob Nielsen’s Heuristics
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 of use
Aesthetic and minimalist design
Help and documentation
List fundamental UX principles
User-Centred Design (UCD) – Design based on user needs and behaviours.
Accessibility – Ensure all users, including those with disabilities, can use the product.
Affordance and Signifiers – Make interactive elements clear and intuitive.
Feedback and Response Time – Provide immediate responses to user actions.
Hierarchy and Scanning Patterns – Arrange content for easy reading (e.g., F-pattern, Z-pattern).
Progressive Disclosure – Show only necessary information to avoid overload.
Delightful and Engaging Design – Create enjoyable interactions.
List interaction design principles
Mental Models – Align design with how users think.
Error Handling and Tolerance – Allow graceful error recovery.
Mapping and Consistency – Ensure intuitive relationships between controls and effects.
Define the keystroke language model (KLM-GOMS)
The Keystroke-Level Model (KLM) is a predictive model in human-computer interaction (HCI) that estimates the time it takes for an experienced user to complete a task by breaking it down into basic actions. It is part of the GOMS (Goals, Operators, Methods, and Selection rules) model and focuses on low-level interactions such as typing, pointing, and thinking.
What are the time estimates for KLM?
K (keystroke) 0.2s
P (pointing with mouse) 1.1s
H (homing between inputs) 0.4s
D (drawing/dragging with mouse) 1.35s
M (mental preparation) 1.35s
R (system response delay) can be varied
Once you determine the operators, you need to apply the following rules for mental operations before calculating the time.
* Rule 0: Add Ms in front of all Ks and all Ps that point to commands.
* Rule 1: Change PMK to PK to remove fully anticipated Ms.
* Rule 2: Eliminate any Ms in the middle of strings that are part of a
cognitive unit (a contiguous sequence of typed characters).
* Rule 3: Delete Ms before consecutive terminators.
* Rule 4: Delete Ms that are terminators of commands.
* Rule 5: Delete overlapped Ms, i.e., overlaps an R (a delay).
(i) Using KLM-GOMS, list out the necessary actions and identify the operators that will be used to calculate the time required to take a skilled user to change their preferred country using the interface shown in figure 1 Assume that the currently displayed country is the “United Kingdom”, and the user needs to select “United States” from the country/region dropdown and choose “Español” from the language dropdown. Assume no scrolling is involved in either dropdown control.
Clicking the “Go to site” button at the end will apply the change.
Step 1: Identifying the User Actions
The user needs to:
- Click the Country/Region dropdown.
- Select United States from the list.
- Click the Language dropdown.
- Select Español from the list.
- Click the Go to Site button.
Step 2: Map to the corresponding KLM operator:
Move cursor to Country dropdown P 1.1
Click Country dropdown K 0.2
Mentally locate “United States” M 1.35
Move cursor to “United States” option P 1.1
Click “United States” K 0.2
Move cursor to Language dropdown P 1.1
Click Language dropdown K 0.2
Mentally locate “Español” M 1.35
Move cursor to “Español” option P 1.1
Click “Español” K 0.2
Move cursor to “Go to Site” button P 1.1
Click “Go to Site” button K 0.2
Step 3: Applying KLM-GOMS Mental Rules
Before applying rules:
MPK MK MPK MK MPK MK PK
Applying Rule 1: Remove fully anticipated M’s before PK sequences.
PK PK PK PK PK PK
Final Sequence & Total Time Calculation
Operator Occurrences Time per action (s) Total Time (s)
P (Pointing) 6 1.1 6.6
K (Keystroke/Click). 6 0.2 1.2
Define the HCD process
Empathise, Define, Ideate, Prototype, Test
In HCD, there are many design concepts. For each of the following scenario, give the appropriate name of the design concept. Briefly (in no more than one sentence each), explain how the design concept can be used in HCI.
(i) Scenario 1: Although not required, mouse has a clicking sound when pressed.
(ii) Scenario 2: Facebook shows random friends’ updates.
(iii) Scenario 3: When designing a mobile application, wireframing tool is used to limit the size of the screen to simulate different sizes of mobile phones available on the market.
(iv) Scenario 4: Unhealthy food and drinks are placed to the bottom of a shelf in a supermarket to encourage people consume more healthy food.
(v) Scenario 5: Speak to a group of elderly people to decide the font size
for a mobile application designed for these people.
(i) Scenario 1: Although not required, the mouse has a clicking sound when pressed.
Concept: Affordance & Feedback
Explanation: The clicking sound provides auditory feedback, reassuring the user that an action (click) has been successfully registered.
(ii) Scenario 2: Facebook shows random friends’ updates.
Concept: Personalisation & Serendipity
Explanation: Randomised updates create serendipitous discovery, keeping users engaged by surfacing unexpected but relevant content.
(iii) Scenario 3: When designing a mobile application, a wire framing tool is used to limit the size of the screen to simulate different sizes of mobile phones available on the market.
Concept: Responsive Design & Constraints
Explanation: Wire framing with size constraints ensures the interface adapts to different screen sizes, improving usability across devices.
(iv) Scenario 4: Unhealthy food and drinks are placed at the bottom of a shelf in a supermarket to encourage people to consume healthier food.
Concept: Choice Architecture & Persuasive Design
Explanation: This uses nudging, a persuasion technique in UX that influences user behaviour towards healthier choices without restricting options.
(v) Scenario 5: Speak to a group of elderly people to design an application suited to their needs.
Concept: User-Centred Design (UCD) & Inclusive Design
Explanation: Involving elderly users in the design process ensures the product meets their specific needs, improving accessibility and usability.
