Lecture 2: Human Factors & Usability Goals and Principles (UI/UX Design)

HUMAN COGNITION AND INFORMATION PROCESSING

• Cognition is what is going on in our heads when we carry out everyday activities. Everything that is sensed (sight, hearing, touch, smell, taste) is information the mind processes.
• A cognitive perspective focuses on internal mental processes, including:
  • Perception (the senses: sight, hearing, touch, taste, smell)
  • Memory (sensory, short-term STM, long-term LTM)
  • Attention
  • Problem solving, planning, reasoning and decision making
  • Reasoning types: Deduction, Induction, Abduction, Analogy, Skill Acquisition
• Key cognitive concepts include:
  • Mental model: a person’s internal representation of how a system works
  • External cognition: cognitive processes that occur with external representations (texts, diagrams, tools)
  • Distributed cognition: cognition distributed across people and artifacts within a system
  • Representation: how information is depicted and used to support thinking
  • Conceptual model: the designer’s intended understanding of a system, described in user-friendly terms
  • Metaphors: mappings from familiar non-computer concepts to computer concepts to aid understanding
• Senses and information processing:
  • Perception is about turning sensory input into meaningful information
  • Memory involves sensory memory, short-term memory (STM), and long-term memory (LTM)
  • Attention acts on information to select what gets processed further
• Cognitive load considerations: our senses can be overloaded with information, affecting perception, attention, and decision making

FRAMEWORKS FOR COGNITION

• Information Processing: memory, perception, attention, and how these interact to process information
• Cognitive Modeling: constructing models of cognitive processes to explain and predict user interactions
• External Cognition: using external representations (lists, diagrams, notes) to support thinking
• Distributed Cognition: cognition distributed across a system of people and artifacts
• Mental Models: user’s internal understanding of how a system works
• Conceptual Models: designer's intended model described for users; supports alignment between user and system understanding
• Metaphors: provide familiar anchors to help users form correct mental models
• Personas and Scenarios: user archetypes and typical tasks used to guide design

INFORMATION PROCESSING: PERCEPTION, MEMORY, ATTENTION

• Perception (sight is a primary channel) and memory system organization:
  • Memory systems: short-term memory (STM) and long-term memory (LTM); sensory memory (SM) exists briefly before encoding
  • Attention selects information for further processing; overloaded attention leads to poor performance
• Memory processes include:
  • Encoding, storage, retrieval
  • Rehearsal strengthens memory traces
• Overload can occur when too much information competes for attention, reducing processing efficiency
• Reasoning types include deduction, induction, abduction, analogy, and skill acquisition

EXTENDED INFORMATION PROCESSING MODEL (BARBER, 1988)

• The basic information processing model was extended to include attention and memory interacting with processing stages
• Emphasizes dynamic interaction between attention, memory and processing rather than linear input–output

MULTI-STORE MEMORY MODEL (ATKINSON AND SHIFFRIN, 1968)

• Stages and flows:
  • Sensory input → attention → Short-Term Memory (STM)
  • STM encoding through rehearsal can lead to Long-Term Memory (LTM)
  • Information can be retrieved from LTM back into STM for use
• Memory processes include:
  • Encoding, rehearsal, retrieval
• Decay and forgetting can occur if information is not attended to or rehearsed
• Subtypes of memory mentioned: echoic memory (auditory), iconic memory (visual), haptic memory

COGNITIVE BIAS AND PATTERN SEEKING (EXAMPLE)

• A clip illustrating cognitive bias and pattern seeking is referenced as an example to understand how people look for patterns and biases in data

DESIGN IMPLICATIONS FOR ATTENTION

• Make information salient when it needs attention
• Use techniques to make things stand out: color, ordering, spacing, underlining, sequencing, animation
• Avoid interface clutter; follow examples of crisp, simple design (e.g., Google)
• Do not overwhelm users with excessive information or options

TEXT PROPERTIES (TYPOGRAPHY)

• Text properties to consider in UI design:
  • Family: e.g., Times, Helvetica, Courier, Sans serif variations
  • Size: small, medium, large
  • Style: underline, bold, italic
  • Color: black, blue, red, green
  • Weight, spacing, and borders
• Practical takeaway: typography affects readability and cognitive load; consistent, legible choices support usability

MENTAL MODELS AND CONCEPTUAL MODELS

• MENTAL MODELS
  • Mental representations of how an object/system operates
  • Help users predict outcomes of actions
  • Developed via experience, training, and feedback
  • Interaction should help users develop accurate mental models of how the system works
• CONCEPTUAL MODEL
  • Description of the proposed system in terms of integrated ideas and concepts
  • Understandable by users in the intended way
  • Relationship: Conceptual Model is what designers present; Mental Model is what users form; alignment between the two improves usability
• MODEL RELATIONSHIPS
  • User Model: what the user believes about the system
  • Designer/Developer Model (Designer Model): how the designer envisions the system
  • Manifest Model: what is actually presented to the user; the designer exerts control here
• CHALLENGE FOR DESIGNERS
  • Determine the user’s Mental Model while recognizing that users are not like the designer
  • Two user representations matter: fragmented vs complete but potentially incorrect mental models
• CONCEPTUAL MODEL FLOW
  • Conceptual Model → User Interface → Mental Model
  • Synthesis of research informs the mental model users form when interacting with the interface
• FURTHER NOTES
  • Introduction to Conceptual Models is linked to Don Norman’s work on design of everyday things
  • Conceptual models can be activity-based (instructing, conversing, manipulating, navigating, exploring) or object-based or mix-based

METAPHORS

• Metaphor is the process of using familiar non-computer domain objects/events to represent software system concepts
• Purposes of metaphors:
  • Represent a system object as if it were a familiar object (e.g., desktop, file folders)
  • Leverage prior knowledge to understand abstract concepts
• Types:
  • Definition metaphor: how something should work conceptually
  • Problem metaphor: can reflect naive or inaccurate mental models and may mislead
• EXAMPLES OF METAPHORS IN PRACTICE
  • Desktop metaphor, notecards for notes, file folders, publishing metaphors with cut-and-paste
  • Spreadsheets as table-like representations
• COMMON PITFALLS
  • Metaphors that are overly literal or create mismatches with user tasks can hinder usability

REPRESENTATIONS

• Representations are different ways of presenting the same data
• WHY MULTIPLE REPRESENTATIONS MATTER: different cognitive tasks benefit from different representations
• WHAT MAKES A REPRESENTATION GOOD?
  • Capture important features
  • Remove irrelevant details
  • Provide external memory
  • Replace computation with perception when possible
  • Be appropriate to the task
• EXAMPLES OF REPRESENTATIONS IN PRACTICE
  • Tables, charts, graphs, maps, lists, and other ERs (external representations)
• REPRESENTATIONS BREAKDOWN
  • The same information can be represented in many ways, each with strengths and weaknesses depending on task and user

CONCEPTUAL MODEL / MENTAL MODEL VISUAL

• Conceptual Model diagram shows the relationship among: Conceptual Model, Mental Model, User, Designer
• The plan for the design (Designer) vs the user’s understanding (User) are aligned via the Conceptual Model

DISTRIBUTED COGNITION

• Edwin Hutchins’ concept: cognition distributed across people and artifacts, not just an individual
• Starting point: traditional information processing is extended to consider a system-level view
• Goals: identify tools, resources, and social relations that people draw on to carry out work; extend the scope beyond a single person to a distributed system
• How cognition is distributed:
  • Between internal and external representations
  • Across members of a social group
  • Through time (earlier events influence later events)
• Examples and considerations:
  • Where is the cognitive system located?
  • Who else is in the space? What resources (desks, maps, telephones, etc.) support the task?
  • How would a couple navigate to an unfamiliar location illustrate distributed cognition in action?

EXTERNAL COGNITION

• External cognition concerns cognitive processing when interacting with external representations (Scaife & Rogers, 1996)
• Benefits of external representations include:
  • Externalizing to reduce memory load
  • Computational offloading: performing computations externally rather than in working memory
  • Annotating and cognitive tracing to track thought processes and decisions
• EXTERNALIZING TO REDUCE MEMORY LOAD
  • Use of paper, notes, checklists, reminders to remember tasks or steps
• COMPUTATIONAL OFFLOADING
  • Offloading mental arithmetic to paper or a calculator rather than doing it in head
• ANNOTATING AND COGNITIVE TRACING
  • Keeping lists, shopping lists, or annotated documents to support memory and task performance
• REPRESENTATIONS AND NOTES
  • Examples show lists, grocery plans, and other annotated structures to support cognitive tasks

REPRESENTATIONS (REVISITED)

• Representations can be used to present data in multiple ways for different cognitive tasks
• The same data can be transformed into different representations (e.g., numbers, graphs, narratives) to aid understanding and decision making
• Visualizations help reduce memory load and support quick comprehension

CONCEPTUAL MODEL (DEEP DIVE)

• Conceptual models describe how a system should work from a high-level perspective
• They bridge user needs and system capabilities by providing a coherent mental picture for users
• The designer’s task is to craft a representation that maps well to users’ mental models
• The mismatch between user mental models and system conceptual models can lead to usability problems
• Two core perspectives:
  • User model (how the user thinks the system works)
  • Designer model (how the designer envisions the system works)
• The quality of the interaction depends on how well the manifested interface communicates the intended conceptual model to the user

METAPHORS (DETAILED)

• Metaphors map familiar physical actions to digital actions:
  • Clicking corresponds to selecting or activating
  • Pointing corresponds to aiming at a target
  • Selecting corresponds to choosing an item
  • Dragging corresponds to moving an object
• A good metaphor aligns with real-world experience to reduce cognitive load
• Example mappings in software: desktop, folders, notecards, travel guides, etc.

USABILITY AND USER EXPERIENCE GOALS

• Usability goals (Preece, Rogers, & Sharp):
  • Effective to use (effectiveness)
  • Efficient to use (efficiency)
  • Safe to use (safety)
  • Have good utility (utility)
  • Easy to learn (learnability)
  • Easy to remember how to use (memorability)
• User Experience goals focus on the broader experience: satisfying, enjoyable, fun, entertaining, helpful, motivating, aesthetically pleasing, supportive of creativity, rewarding, and emotionally fulfilling
• Relationship and trade-offs:
  • Usability goals are about task performance and safety; UX goals about user feelings and long-term satisfaction
  • There can be tensions (e.g., a highly safe design might be less thrilling). Designers must balance trade-offs and evaluate how to measure both types of goals

USABILITY GOALS AND METRICS

• EFFECTIVENESS (Effective to use)
  • Task effectiveness: proportion of the task completed correctly
  • Task completion: proportion of tasks completed
  • Error frequency: rate of errors during use
• EFFICIENCY (Efficient to use)
  • Task time: duration to complete a task
  • Waiting time: proportion of time waiting for system responses
  • Task efficiency formula (definition):
    $\text{Task efficiency} = \frac{\text{Minimum information needed to complete the task}}{\text{Information provided by the user}}$
  • Economic productivity, productive proportion, relative user productivity, help frequency
• SAFETY (Safe to use)
  • User health and safety incidents
  • Safety of people affected by use
  • Economic damage and software damage incidences
• UTILITY (Have good utility)
  • Availability of needed functions; reducing unnecessary features (creeping featurism)
  • Distinction between commonly used features vs. expert features
• LEARNABILITY (Easy to learn)
  • Ease of learning a function and completing a task
  • Help accessibility and quality of documentation/help systems
• MEMORABILITY (Easy to remember how to use)
  • Locating information and recalling how to perform tasks after long periods
  • Recalling interface structure and commands over time

USER EXPERIENCE GOALS

• Satisfying, Enjoyable, Fun, Entertaining, Helpful, Motivating, Aesthetically pleasing, Supportive of creativity, Rewarding, Emotionally fulfilling
• Relationship to usability: UX goals extend usability to broader user experience outcomes and affect ongoing engagement and satisfaction

TEN USABILITY PRINCIPLES (JAKOB NIELSEN)

• Visibility of system status; match between system and 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, diagnose, and recover from errors; help and documentation
• These heuristics are rules of thumb for evaluating user interfaces rather than exhaustive guidelines

DESIGN PRINCIPLES (NORMAN, 1988)

• Visiblity, Feedback, Constraints, Physical, Logical, Cultural, Mapping, Consistency, Affordance
• Key idea: design should make the system state visible, provide feedback, respect constraints, provide intuitive mappings, and present consistent cues

SHNEIDERMAN: HCI DESIGN PRINCIPLES (I, II, III)

• Eight Golden Rules of Interface Design (high-level):
  • Rule 1: Strive for Consistency
  • Rule 2: Provide Shortcuts
  • Rule 3: Provide Informative Feedback
  • Rule 4: Design Dialogs to yield Closure
  • Rule 5: Provide Error Prevention and Error Handling
  • Rule 6: Allow Easy Reversal of Actions
  • Rule 7: Support Internal Focus of Control
  • Rule 8: Reduce Short-Term Memory Load
• These rules guide practical design decisions to improve usability across interfaces

INTERFACE DESIGN RULES (DETAILS FROM SHNEIDERMAN)

• Rule 1: Consistency
  • Maintain consistency of functionality, layout, terminology, color schemes, font choices, text casing
• Rule 2: Shortcuts
  • Provide shortcuts/macros to improve workflow; appropriate for experienced users
• Rule 3: Feedback
  • Every user action should trigger appropriate feedback (visual, audio, or both)
• Rule 4: Closure
  • Dialogs should have a clear beginning, middle, and end; provide clear end-state confirmation
• Rule 5: Error Prevention and Handling
  • Design to prevent errors; provide precise instructions for error handling
• Rule 6: Reversal of Actions
  • Allow easy reversal to reduce anxiety and support exploration
• Rule 7: Internal Locus of Control
  • Users should feel in control of actions and system responses
• Rule 8: Memory Load
  • Minimize reliance on short-term memory; design displays to be simple and self-contained

ADDITIONAL DESIGN PRINCIPLES (NORMAN, CONTEXT)

• Universal vs. culturally-specific considerations in design
• Mapping relates device controls to expected world actions; proper mapping improves usability
• Physical affordances: intuitive cues from physical controls (buttons, knobs, switches) that suggest their use
• Virtual affordances: interface cues that help users infer possible actions on screen

EXAMPLES OF GOOD AND BAD DESIGN

• Elevator controls: consistent labeling and distinct appearance improves safety and accuracy
• Bad designs: ambiguous controls and labels can lead to user errors; good design aligns controls with expected actions

INTERACTIVE HEURISTIC EVALUATION TOOLKIT

• Heuristic evaluation: evaluating a UI by examining it against a set of heuristics or guidelines
• Useful for detecting usability issues early, before user testing
• Common heuristics include visibility, consistency, error handling, feedback, etc.

RESEARCH AND PRACTICAL APPLICATIONS

• Interactions and user testing considerations:
  • User needs analysis: uncover goals, capabilities expected from tech, target audience, typical tasks, constraints
  • Methods: observational techniques, interviews, surveys, artifact analysis, domain expert consultation
  • Results inform UI objectives, system requirements, and feature requirements
• Process for user needs analysis:
  • User consulting: sample users, questions about service quality and problem resolution, unmet needs
  • Use findings to modify development and testing plans
  • Testing and flagships in test suites; iteratively identify additional tests based on user problems
  • User training considerations; user documentation needs; feedback loops for improving documentation
• Usability inspection as a class of evaluation techniques (non-user-based) and usage in GPS usability video example

METHODS AND ACTIVITIES

• Activity: Locate prices and perform data-based tasks to illustrate practical usability and cognitive considerations
• Activity: Evaluate two screens (e.g., Tullis (1987) study) showing how spacing and grouping into vertical categories improves search speed and user performance
• Activity: Analyzing and designing conceptual models and interfaces that align with users’ mental models to improve usability

SUMMARY OF KEY TERMS AND LINKS

• Cognition; Information Processing; Perception; Memory (SM, STM, LTM); Attention; Mental Models; Conceptual Models; External Cognition; Distributed Cognition; Representation; Metaphors
• Design principles: Nielsen’s heuristics; Norman’s principles; Shneiderman’s eight golden rules
• Metaphors and representations: physical vs. virtual affordances; mapping; good vs. poor representations
• Usability vs. User Experience goals; associated metrics and trade-offs
• User needs analysis and usability inspection methods
• Conceptual vs. mental modeling; manifest model; designer vs. user perspectives
• Real-world relevance: aligning design with human cognitive processes to enhance usability, safety, efficiency, and satisfaction

EQUATIONS AND QUANTITATIVE NOTES

• Task efficiency (usability metric):
  $\text{Task efficiency} = \frac{\text{Minimum information needed to complete the task}}{\text{Information provided by the user}}$
• Memory processes involve encoding, rehearsal, and retrieval; the Multi-Store Model describes transitions among Sensory Memory (SM), Short-Term Memory (STM), and Long-Term Memory (LTM) with rehearsal and encoding leading to LTM storage and retrieval back to STM when needed
• The Eight Golden Rules (heuristics) are applied as design constraints rather than numeric formulas, but can be evaluated for quantitative impact via task success rate, time to complete tasks, and error rates