HCI Final Exam Notes

HCI - Design, prototyping, implementation & evaluation of user interfaces

User Interface - Refers to the physical substrate that facilitates communication (input/output) between the user and the computer

Interaction - An exchange that occurs at a user interface; includes negotiating the technical, visual, cultural, and social design variables

Action Cycle - Don Norman (UCSD) Cognitive Scientist

• Gulf of Execution - The gap between the user’s goals or intentions and the actions they need to take | Plan, Specify, Perform | “What can I do and how can I do it?

• Gulf of Evaluation - The gap between the system’s output and the user’s understanding or interpretation of the state | Perceive, Interpret, Compare | How do you know it worked?

Mental Model - The conceptual framework or set of beliefs and expectations that a user brings to their interaction with a computer system or digital interface. (How a user believes a system to work) | Made by experience → user

Conceptual Model - Provides users with a mental framework that aligns with the actual workings of the system. It helps users from accurate expectations about how to interact with the system | Made by engineers → users

Intellectual Access - When the conceptual model matches the mental model of the user

Prototyping

Prototyping Theory - Principles and practices of creating prototypes during the design and development of interactive systems. Involves building systems to explore, test, and refine design ideas before committing to full-scale development

Low-Fidelity - Just enough details to communicate the idea. Many low-level design decisions are unsolved | Focuses on the solution/idea not the visuals | Done quickly and in high amounts

Medium-Fidelity - Iterating on the low-fidelity, focusing on how the idea could be implemented. Incorporates basic visuals such as color (not many), typography and graphics

High-Fidelity - Feature polished design that emulates the look and feel of the final product | Used for demonstrating to stakeholder, usability testing, gathering feedback on designs and interactions

Data-Ink Principle - Minimize the amount of ‘ink’ needed to communicate the idea

Hierarchies of Saliency - Levels of ‘attention’ (saliency = attention). Things like color, thickness, size, tone, etc., can play a role in drawing more attention to certain design aspects | Controlling the information processing by mapping ideas to appropriate saliency cues

Role Prototype - Focuses on everything surrounding the idea itself. Looks at the benefits the user will experience, how the concept would function in the user’s life and the context it exists in (slice of life) | Includes: Storyboarding, journey mapping, concept videos

Look & Feel Prototype - Defines the sensory experience of interacting with the idea (the sensory experience) | Includes: Wireframing, moodboards, interactive demos

Implementation Prototype - How the idea will be produced and delivered as a solution. Focuses on the logistics of making the idea real (nuts and bolts) | Low fidelity: pseudocode, state machine diagram, flowcharts | Medium fidelity: test cases, benchmarks

Integration Prototype - Built to represent the complete user experience. Bringing together role, look and feel, and implementation

Errors

Slips - Occur when the goal is correct, but the required actions are not done properly (occurs during gulf of execution) | task understood, bad execution

Mistakes - Occur when the goal or plan is wrong (occurs during gulf of evaluation | task misunderstood

Errors - Occurs in the system or machine

Metaphors/Personas/Maps

Metaphors - Used to map an existing mental model to the actions and feedback of a target interaction

Personas - A description of a user group (not a single user) that is used to mitigate egocentric fallacy (designing for yourself) | Helps us empathize with what its like to be a user

Journey Maps - A visual representation that illustrates the user’s experience throughout their interaction with a product

Typography

Serif - A small decorative flourish on the end of the strokes that make up letters and symbols | Use when legibility matters, high-res displays and paragraphs

Sans Serif - No flourishes at the end of strokes | Use when readability matters, low-res displays, headings and titles

Monospaced - Characters each occupy the same amount of horizontal space | Alignment matters (code editors)

Hue - Represents the pure color

Saturation - Represents the intensity of the color

Value - Represents the brightness or lightness. Determine how light or dark a color appears

Cognition

Cognitive Load Theory - A theory on how the human brain is able to process information | Describes a memory architecture that has many overlaps with how computer scientist work with memory (RAM)

Heuristic Analysis

1) Visibility of System Status

2) Match between system and real world

3) User control and freedom

4) Consistency and Standards

5) Error

6) Recognition rather than recall

7) Flexibility and efficiency of use

8) Aesthetic and minimalist design

9 ) Recognize, diagnose, and recover from mistakes

10) Help and Documentation

Medium is the Message

Medium is the Message - The nature of the medium (where or how the content is presented) can be just as or even more influential than the actual message itself. The medium is more important the the content | The idea is only as good as it is presented within the medium.

Media Props - Conventions used to communicate information unique to a particular medium (Computer has undo, copy/paste props)

Murray’s Affordances

Affordances - Perceived (on initial glance) signifiers that communicate the actions available to the user | Text is not an affordance since it needs to be read | Simple icons are

Encyclopedic Affordances - How information is organized | Typology (Categories without hierarchical structure) SET - Lists, Filters | Taxonomy (Categories with a hierarchical structure) TREE - Tree, Breadcrumbs, nested | Ontology (Subset of taxonomy, labeled edges describes relations beyond “is_child_of”) GRAPHS - Hyperlinks, traversing graphs| Schema (Any of above + motivated by a theory or model)

Spatial Affordances - How can I make the space more navigable? - How to make spaces memorable (place making) | Map making (taxonomy, ontology, typology, schema, containers, maps, and landscapes, hierarchies of saliency/chunking | Repetition (Power Law of Practice)/(Flow), Sound, Storytelling / Emotional Arousal / Embodied Interactions | Amygdala (emotion center of brain) encodes memories at a deeper level when event is emotionally arousing (bypasses the cognitive processor)

Participatory Affordances - Not about what the computer can do for the user, it keeps the human in the loop. How to turn someone from a content-consumer to a content-producer | Social Mirrors (seeing themselves in the application, others can see the user in the application) | Limits (content limits, time limits, access limits) | Path of least resistance (small actions, high rewards - Defaults & Templates) | Mystery & Curiosity | Sustaining Interaction

Procedural Affordances - The goal is to increase human ability to think coherently, especially in complex situations | By encoding information into computational representations that allow for users to manipulate information | EXAMPLES: Version control, State Machines, Interfaces, Objects | STEPS: Gather (possible ways it can be represented), Props (what media props are presents (biases or affordances)) Expose (how to expose media props in interface and mitigate biases) Evaluate & Iterate

Participatory Models

Machine - Computer is treated as a distinct object/entity | Action Cycle | Design values (visibility: consistency and standards, match between real world, recognition rather than recall - agency: (can they accomplish goals) user control and freedom, flexibility and efficiency of use, trust: (does your machine have your back) help, error, recognize, diagnose, recover from errors, appliances: do a few things well)

Tool - Computer is an extension of the body | Transparency: Feels like a part of your body. Incorporate more of the body (wearables) | Efficiency: Alter capabilities of the body | Learnability: Make actions needed intuitive by leveraging what the body already knows (muscle memory) | Expressivity & Virtuosity: Make it capable of more

Companion - The computer can have some agency in the interaction: Synchronization: Making lags bearable in the interaction | Responsive anticipation: First impression matters, communicate what to expect from first minute | Pass turing test: incorporate humor, empathy, politeness | Don’t be annoying: Don’t get in the way, keep responses short

Game - Computer is the environment. User is in the environment | Game mechanics - rules | Sandbox behaviors | design for: playfulness, immersion

Model Human Processor

Long-term Memory - A part of our memory system responsible for storage and retrieval of information over long periods of time

Short-term Memory - Responsible for temporarily storing and managing information required for completing complex tasks.

Working-Memory - A part of short-term memory responsible for temporary storage | Capacity: 7 ± 2 chunks

Visual Image Store - Visual half-life: 200ms

Auditory Image Store - Audio half-life: 1500ms

Perceptual Processor - Information goes through here first then to working memory

Cognitive Processor - Information from working memory goes to here where the information is then processed cognitively - interpretation

Motor Processor - example: decision to type, click, etc…

Chunking - Decompose complex information into chunks, making it easier for working memory and cognitive process | 3 chunks (sweet spot)

Pre-attentive Cues - Visual Stimulus that can be perceived and processed in the sensory memory without requiring conscious attention (detected automatically, often within 200-250 milliseconds) | Use pre-attentive cue to reduce the cognitive load on the user

• FEATURES: Color, Orientation, Curve, Shape, Size, Number, Length/Width

Laws

KLM - A variation of the model-human processor that simplifies the use of MHP for evaluating interactions | K - Keystroke - 80ms(best)/200ms(avg)/750ms(bad) | P - Pointing - 1100ms | H - Homing - 40ms | M - Mental Prep - 1350ms | Typing (‘hello world’) = M (mental prep) + 11K (keys)

Hicks’ Law - The time to make a decision increases with the number of choices given | RT - reaction time | a - empirical constant, device dependent | b - empirical constant, user dependent | n - number of choices | + 1 = null decision (choice of not acting)

Fitts’ Law - Movement time calculation for moving mouse to target | MT - Average Movement Time | a - empirical constant, device specific | b - empirical constant, device specific (smaller b = faster input) | D - distance from starting point to the center of the target | W - width of the target measured along the axis of motion (error tolerance)

Fitts’ Law (Touch) - D = distance from default finger resting location to target center | W = Constant | No hover | Touch-targer error | Gestures

Accessibility

WCAG - Web Content Accessibility Guidelines

Principle 1 - Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

Principle 2 - Operable - User interface components and navigation must be operable.

Principle 3 - Understandable - Information and the operation of the user interface must be understandable.

Principle 4 - Robust - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

React

useState - A React Hook that allows you to add state to functional components in order to manage and update dynamic data within the component. | const [plants, setPlants] = useState([‘Rose’, ‘Lily’]);

useEffect - A React Hook that allows you to perform side effects in functional components | useEffect(() = > {

if (wateringtime) {

log(watering)

}

else {

log(stopped watering)

}

}, [wateringtime]);

flexbox - A CSS Layout model that is direction-agnostic. (can layout items horizontal/vertical) | display: flex | flex-direction: horizontal | align-items: flex-start

Likert Scale

Neutral statements, not questions | Odd number of choices | Measures agreement with the statement | Avoid any logical loops (not, unless, if, then, while, and) | Avoid adverbs (very, slightly, extremely) and use unmodified adjectives