Comprehensive Study Notes on User Experience Design (ITM 3131)

Course Foundations and Interaction Design Overview

  • Course Objectives (ITM 3131 User Experience Design):

    • Develop user advocacy within the engineering, design, and deployment of information technology applications and systems.

    • Foster an analytical mindset recognizing the indispensable role of end-users, environmental contexts of use, and broader organizational contexts.

    • Implement user-centered design methodologies across all development lifecycle stages: design, development, evaluation, and operational deployment.

    • Apply user and task analysis, human factors, ergonomic criteria, international accessibility standards, experience design methodologies, and cognitive psychology theories.

  • Grading and Assessment Scheme:

    • Formative assessments: 10%10\%

    • Work-integrated assessment: 20%20\%

    • Summative assessment (comprising 2 Semester Tests): 20%20\%

    • Summative assessment (comprising the comprehensive End of Semester Examination): 50%50\%

  • Defining User Experience Design (UXD):

    • UXD is an interdisciplinary field concerned with the design, systematic evaluation, and engineering implementation of interactive computing systems intended for human use, alongside the scientific study of major phenomena surrounding these systems.

    • Core contributing disciplines include:

    • Computer Science (software implementation, UI engineering, architecture)

    • Psychology (cognitive psychology, perception, memory structures, mental workload)

    • Communication (dialogue structuring, message clarity, linguistic exchange)

    • Education (learning curves, instructional scaffolding, training)

    • Anthropology (cultural contexts, ethnography, situated human activity)

    • Design (graphic presentation, industrial design, aesthetic layout)

  • Significance and Real-World Impact of UXD:

    • UXD focuses comprehensively on the human interface with information, extending beyond superficial decisions such as button dimensions or menu layout options.

    • Suboptimal design choices directly impair:

    • Effectiveness (ability of the system to fulfill intended goals)

    • Productivity (time and resource throughput of users)

    • Morale (user emotional state, satisfaction, and confidence)

    • Safety (critical failure prevention in high-risk operational domains, such as automotive controls or flight avionics)

  • Scope of Real-World Interactive Interfaces:

    • Computing interfaces are not restricted to traditional personal desktop computers. Real-world interactive applications include video cassette recorders (VCRs), wristwatches, mobile telephones, copiers, automobiles, plane cockpits, airline reservation networks, air traffic control centers, and sensorized athletic footwear.

Cockpit instrumentation demonstrating dense physical interfacesInteractive athletic footwearSmartphone interface presenting desktop-style web browsing
  • Interaction Design Goals and Usability Metrics:

    • The principal goal of Interaction Design is to suppress negative user states (such as frustration, confusion, and annoyance) while accentuating positive experiential attributes (such as enjoyment, flow, and engagement).

    • Core system requirements:

    • Enable users to carry out tasks safely, effectively, efficiently, and enjoyably.

    • Ensure systems are easy to learn, performant, and reliable.

    • Measurable dimensions of usability:

    • Ease of learning (learnability for novices)

    • High speed of user task performance (throughput for proficient operators)

    • Low user error rate (prevention and graceful recovery)

    • Subjective user satisfaction (affective rating)

    • User retention over time (recall of operational procedures following periods of disuse)

  • Improving Interactive Systems:

    • Formal education of software engineering professionals in user-centered principles.

    • Leveraging the empirical body of knowledge regarding Human-Computer Interface (HCI) design.

    • Integrating dedicated user interface design paradigms and testing protocols directly into standard software engineering lifecycles.

  • User Interface Design and Development Lifecycle:

    • Analyze the user's operational goals and underlying tasks.

    • Generate diverse conceptual and physical design alternatives.

    • Evaluate options against empirical usability criteria.

    • Implement working software prototypes.

    • Conduct iterative empirical testing.

    • Refine designs based on observed performance discrepancies.

Iterative interaction design cycle showing design, implementation, and evaluation
  • Core Axioms of User Understanding:

    • System design requires comprehensive understanding of:

    • Physical and cognitive capabilities (including sensory limits and accessibility needs)

    • Personality traits and cultural backgrounds

    • Domain knowledge and technical skillsets

    • Task motivation

    • Two fatal design errors:

    • Assuming all end-users possess uniform capabilities and mental models.

    • Assuming end-users share the perspectives, preferences, and competencies of the system designer.

Cognitive Aspects and Human Modalities

  • Human Input-Output Channels and Modalities:

    • Modality refers to the particular mode in which physical phenomena are experienced, establishing a bidirectional path of communication between human and computer:

    • Senses through which human users receive output from a computer.

    • Sensors or input mechanisms through which a computing system receives input from humans.

    • Visual Modality: Sight, reception of light, and display interpretation.

    • Auditory (Audition) Modality: Hearing, speech recognition, auditory cueing, and sound processing.

    • Haptic Modality: Tactile feedback, physical touch, and the perception of physical pressure.

    • Alternative Modalities: Gustation (taste), Olfaction (smell), and Thermoception (perception of heat and cold).

  • Individual Differences:

    • Long-term differences: Biological sex, permanent physical capabilities, intellectual aptitude.

    • Short-term differences: Transient physiological stress, mental exhaustion, physical fatigue.

    • Changing factors: Progressive age-related changes across the lifespan.

    • System designs must explicitly evaluate whether architectural decisions unintentionally disenfranchise or exclude specific user populations.

  • Human Multitasking Limits:

    • Multitasking capacity is bounded by cognitive resource allocation:

    • Routinized or automated tasks (e.g., experienced driving while monitoring road signs and listening to audio) allow divided attention.

    • Unfamiliar, difficult, or non-automated problem-solving tasks monopolize conscious cognitive processing.

    • Steep Slope Example: A medium-level downhill skier negotiating a steep slope for the first time cannot simultaneously spell their name backward due to severe cognitive resource competition.

  • Fundamental Cognitive Processes:

    • Attention

    • Perception and recognition

    • Memory storage and retrieval

    • Learning and skill acquisition

    • Reading, speaking, and listening

    • Problem-solving, planning, reasoning, and decision-making

  • Mechanisms of Attention:

    • Operational Definition: The conscious selection of specific stimuli from an overwhelming perceptual field to concentrate upon at a distinct point in time.

    • William James Definition: "Everyone knows what attention is. It is the taking possession of mind, in clear and vivid form, of one out of what seem several simultaneously possible objects or trains of thought… It requires withdrawal from some things in order to deal effectively with others."

    • Structured interface cues designed to capture attention:

    • Perceptual boundaries (dedicated sub-windows and dividing panels)

    • Strategic color contrast

    • Reverse video rendering

    • Spatial and temporal cues (animated changes, structured alignments)

    • Auditory alerts and warning tones

    • Dynamic flashing and strobing indicators

    • Preserving standardized interface conventions to leverage familiar visual expectation

  • Perception and Recognition Versus Recall:

    • Perception processes sensory stimuli and transforms them into meaningful experiences; requires high legibility of typography and distinct graphical icons.

    • Recognition vs. Recall Paradigm:

    • Command-line interfaces force users to perform unstructured recall of exact syntax and names from a candidate pool of hundreds of items.

    • Graphical User Interfaces (GUIs) leverage visual recognition, allowing users to browse through visible options until they identify the correct action.

    • History logs, web browser URL lists, and media player directories sustain recognition memory and dramatically suppress cognitive load.

  • Learning and Literacy Disparities:

    • Adult learners struggle with abstract manual-based rote instruction, exhibiting a distinct preference for experiential "learning by doing."

    • Interfaces must minimize required learning curves by capitalizing on intuitive consistency.

    • Modality disparities in linguistic processing:

    • Reading text often occurs faster than speech delivery or auditory listening.

    • Listening requires significantly less conscious cognitive effort than reading or speech articulation.

    • Dyslexia creates specific functional impairments in the visual parsing and decoding of written orthography, requiring accessible multi-modal alternatives.

Human Sensory Systems, Physical Ergonomics, and Memory Architectures

  • The Visual System and Optical Processing:

    • Two discrete stages of visual processing:

    • Physical reception of light stimuli by retinal receptors, converting light into electrical neural impulses.

    • Processing, cortical filtering, and cognitive interpretation of the stimulus.

    • Visual Angle and Acuity:

    • Visual angle defines the proportion of the visual field occupied by an object, determined as a function of the object's physical dimensions and distance from the viewer.

    • Visual acuity represents the capacity to discriminate fine visual detail, expanding as the visual angle increases.

    • Size constancy: Familiar real-world objects are perceived as possessing uniform physical size despite significant variations in the subtended visual angle caused by distance changes.

    • Luminance, Contrast, and Brightness:

    • Luminance: Absolute objective measurement of physical light energy emitted by an object.

    • Brightness: Subjective human sensory reaction to light intensity, governed by Just Noticeable Difference (JND) thresholds.

    • Contrast: Ratio of luminance between an object and its immediate visual background; visual acuity improves directly with increased luminance contrast.

    • Color Vision Physiology:

    • Visual cortex and retinal anatomy: Rods mediate low-light achromatic vision (black and white); cones localized in the fovea mediate chromatic vision.

    • Cones contain photoreceptors tuned to specific spectral wavelengths: short wavelengths (blue), medium wavelengths (green), and long wavelengths (red).

    • Human visual acuity for short-wavelength blue light is notably inferior to green and red.

    • Color blindness prevalence: Affects approximately 8%8\% of human males and 1%1\% of human females, predominantly manifesting as an inability to distinguish green from red.

  • The Four Commandments of Color Design:

    • 1. Color Palette Limits: Utilize a maximum of 5±25 \pm 2 colors within a single visual display, ideally using no more than four distinct hues simultaneously. This conforms directly to human short-term memory constraints, which can maintain five words or geometric shapes, six alphanumeric letters, seven discrete colors, and eight numerical digits. Apply traditional spectral order (red, orange, yellow, green, blue, indigo, violet).

    • 2. Retinal Distribution Optimization: Position foveal and peripheral colors properly. Avoid small blue fonts or thin blue lines for critical details due to minimal foveal blue sensitivity; reserve blue for large background panels and screens. Employ red and green prominently to capture immediate focal attention.

    • 3. Functional Grouping: Apply identical colors systematically to group semantically and functionally related interface elements.

    • 4. Saturation and Demographic Tailoring: Use high-value, highly saturated hues to demand instant user focus. Implement brighter, higher-luminance palettes when designing interfaces for older demographic cohorts.

  • Typography and Reading Mechanics:

    • Reading stages: Visual pattern registration, followed by lexical decoding using internal models of syntactic grammar, semantics, and pragmatics.

    • Saccades and Regressions: Eye gaze jumps across text lines, interspersed with backward corrective movements called regressions; syntactic ambiguity and structural complexity rapidly inflate regressions.

    • Optimal typographic parameters:

    • Type size: 99 to 12 points12\,\text{points}

    • Line length: 2.32.3 to 5.2 inches5.2\,\text{inches}

    • Negative visual contrast (dark glyphs presented upon light backgrounds) yields superior visual acuity over positive contrast.

  • Auditory Perception Mechanics:

    • Auditory anatomy:

    • Outer ear: Collects, protects, and acoustically amplifies pressure waves.

    • Middle ear: Vibrates the tympanic membrane and ossicles, transmitting sound waves mechanically to the cochlea.

    • Inner ear: Fluid vibrations trigger stereocilia on hair cells, releasing chemical neuro-transmitters that generate electrical impulses within the auditory nerve.

    • Perceptual dimensions: Pitch correlates to acoustic frequency (20 Hz20\,\text{Hz} to 15 kHz15\,\text{kHz} in healthy humans; high-frequency discrimination is less accurate than low-frequency discrimination), Loudness correlates to wave amplitude, and Timbre correlates to wave composition and acoustic quality.

    • Cocktail Party Phenomenon: The auditory cortex can filter out background acoustic noise to attend selectively to a single conversational stream.

  • Somatosensory and Motor Channels:

    • Cutaneous skin receptors:

    • Thermoreceptors (thermal variance: heat and cold)

    • Nociceptors (tissue damage and pain)

    • Mechanoreceptors (physical pressure, displacement, and mechanical vibration; foundational to haptic computing)

    • Human motor movement latency:     Total Response Time=Reaction Time+Movement Time\text{Total Response Time} = \text{Reaction Time} + \text{Movement Time}

    • Visual stimulus reaction latency: approximately 200 ms200\,\text{ms}

    • Auditory stimulus reaction latency: approximately 150 ms150\,\text{ms}

    • Pain stimulus reaction latency: approximately 700 ms700\,\text{ms}

    • Movement time varies as a function of age, physical fatigue, and physical fitness.

  • Tripartite Model of Human Memory Architecture:

    • Sensory Storage (Sensory Memory):

    • Acts as an automatic buffer for incoming physical stimuli: iconic memory stores visual stimuli, and echoic memory stores auditory stimuli.

    • Information is held for fractions of a second; data must be attended to immediately to enter working memory or it is irrevocably lost.

    • Short-Term Memory (STM) / Working Memory:

    • Serves as an active cognitive scratch-pad for transient recall.

    • Rapid access latency: approximately 70 ms70\,\text{ms}.

    • Rapid decay latency: approximately 200 ms200\,\text{ms}.

    • Operational span: Unrehearsed information decays completely within 20 seconds20\,\text{seconds}.

    • Capacity: Bounded by Miller's Law at 7±2 chunks7 \pm 2\,\text{chunks} of information.

    • Chunking: Process of organizing discrete data fragments into cohesive semantic units; overall chunk capacity limits govern operational working memory performance.

    • Long-Term Memory (LTM):

    • Infinite capacity permanent repository for procedural, experiential, and factual knowledge.

    • Slow access latency: approximately 110 second\frac{1}{10}\,\text{second}.

    • Information loss occurs through progressive decay (very slow attenuation) and competitive interference:

      • Retroactive interference: Newly acquired data actively displaces or obscures older stored data.

      • Proactive interference: Previously consolidated data intrudes upon and hinders retention of new information.

    • Emotional suppression: Subconscious psychological forgetting of traumatic or adverse experiences.

    • LTM Subsystems:

      • Episodic Memory: Serial, autobiographical storage of chronological events and personal life experiences.

      • Semantic Memory: Structured storage of factual assertions, abstract concepts, linguistic rules, and operational skills, derived abstractly from generalized episodic records.

  • Structured Representational Models of Long-Term Memory:

    • Semantic Networks:

    • Hierarchical graph networks where nodes denote concepts and directed edges specify relations.

    • Properties feature inheritance: Subordinate child nodes automatically inherit all semantic attributes assigned to superordinate parent nodes.

Semantic network diagram illustrating conceptual relationships for a dog
  • Frames:

    • Data-structure containers organizing information through discrete attribute slots.

    • Slots contain fixed conditions, default expectations, and variable values, expressing structural type-subtype taxonomies.

Frame representation of default and variable attributes for a dogFrame representation of fixed, default, and variable attributes for a collie
  • Scripts:

    • Procedural representations capturing stereotypical sequence expectations needed to interpret recurring situational contexts.

    • Comprises entry conditions, resulting states, props, structural roles, chronological scenes, and diverging outcome tracks.

Script model capturing stereotypical roles, scenes, and tracks for visiting a vet
  • Production Rules:

    • Procedural representations composed of explicit condition-action pairs: IF [condition] THEN [action].

Production rules showing condition-action logic

Cognitive Thinking, Problem Solving, and Mental Models

  • Forms of Human Reasoning:

    • Deductive Reasoning: Deriving logically necessary conclusions from given premises.

    • Premises: If it is Friday, then she will go to work. It is Friday.

    • Deductive Deduction: Therefore, she will go to work.

    • Caveat: Logical validity does not guarantee empirical truth if real-world contingencies intervene (e.g., unexpected illness).

    • Inductive Reasoning: Generalizing from observed historical cases to unobserved universal scenarios (e.g., All elephants observed possess trunks; therefore, all elephants possess trunks); vulnerable to counter-example falsification.

    • Abductive Reasoning: Inferring causal explanations from observed evidential events (e.g., Sam drives at high speed when intoxicated; Sam is observed driving fast; therefore, Sam is intoxicated); fundamentally unreliable as it introduces logical fallacies.

  • Problem-Solving Frameworks:

    • American Heritage Dictionary definition: The process of devising and implementing a strategy for finding a solution or for transforming a less desirable condition into a more desirable one.

    • Step-by-step cognitive procedure:

    • 1. Establish precise goals.

    • 2. Formulate an actionable sequence plan.

    • 3. Execute actions.

    • 4. Evaluate whether action states satisfy established goals.

    • 5. Alter execution strategies dynamically when discrepancies persist.

    • Gestalt Theory: Distinguishes between reproductive problem solving (mechanically retrieving past experiences and established knowledge) and productive problem solving (achieving conceptual insight through structural restructuring of the problem space).

    • Problem Space Theory: Defines problem solving as navigating a space composed of an initial state and a target goal state using valid operators; utilizes heuristics like means-ends analysis to incrementally reduce the distance between current and goal states.

  • Norman's Problem Solving Cycle:

The execution-evaluation problem solving cycle bridging goals and the world
  • Mental Models Architecture:

    • Mental models are dynamic internal representations constructed in the human mind depicting real, hypothetical, or imaginary external systems (formalized by Kenneth Craik, 1943).

    • Humans build small-scale internal simulations of reality to predict external events, anticipate system behaviors, and deduce recovery pathways in unfamiliar environments.

    • Models vary in depth: Deep models comprehend causal mechanics, internal structures, and fundamental physical laws; Shallow models comprise basic operational knowledge of controls (e.g., knowing how to drive an automobile versus understanding the mechanical workings of an internal combustion engine).

  • Typology of Human Error:

    • Slips:

    • Occur when the user forms the correct goal and intention, but executes the physical action incorrectly.

    • Etiology: Deficient physical motor precision, attention lapses, environmental distractions, or disruption of highly learned, automated behavior.

    • Common expressions: Typing errors (typos), overshooting menu options with a mouse pointer.

    • Slips represent the most frequent human error category in interactive software use.

    • Mistakes:

    • Occur when the user forms an incorrect intention and executes actions based on an erroneous decision.

    • Etiology: Flawed mental models, incorrect mental mappings, or complete misunderstanding of system functionality.

Computer Architecture, Input-Output Systems, and Interaction Levels

  • Constituent Dimensions of Computing Systems:

    • A complete computing system comprises Hardware, Software, Users, and Data.

Components of a computer system including hardware, software, users, and data
  • Evolution of Interaction Levels:

    • Batch Processing Era:

    • Users dumped decks of punched cards into mechanical card readers, initiated processing, and retrieved physical printouts hours or days later.

    • Interactive cycle: Measured across hours and days; eliminated conversational feedback.

    • Desktop Computing Era:

    • Real-time manipulation enabled by personal workstations; latency dropped to seconds or fractions of a second, fostering the emergence of Human-Computer Interaction as a discipline.

    • Ubiquitous Computing (Internet of Everything):

    • Pervasive interaction occurring across all environments and times through embedded appliances, internet-connected refrigerators, pressure-sensitive floor mats, ambient video capture, and mobile handheld devices.

Ubiquitous computing interaction environment featuring interconnected household and mobile devices
  • Text Entry and Input Devices:

    • Alphanumeric Keyboards: Standardized layout known as QWERTY (named after the initial six characters of the top alphabetic row); alternative layouts include 26-key alphabetic keyboards, chord keyboards (which register character inputs through simultaneous finger key combinations), and numeric phone pads.

    • Pointing and Positioning Devices: Mice, touchpads, trackballs, graphic tablets, and direct touchscreens; foundational for positioning, drawing, and selecting visual interface objects in Computer-Aided Design (CAD).

    • Emerging Interaction Devices: Speech recognition engines (translating spoken acoustic phrases into text, though challenged by unbounded lexicons) and computer vision gesture recognition (tracking spatial hand configurations to replace mechanical input devices).

  • System Response Latency and Performance Architecture:

    • Total response time encompasses operational processing time, network transit latency, and queue wait times:     Response Time=Service Time+Wait Time+Transmission Time\text{Response Time} = \text{Service Time} + \text{Wait Time} + \text{Transmission Time}

    • Excessive concurrent application processes degrade responsiveness by inflating request wait queues.

  • Comparative Analysis of Computer Memory Architectures:

    • Volatile primary storage mirrors human Short-Term Memory (small, extremely fast access), while non-volatile secondary storage mirrors human Long-Term Memory (massive capacity, slower mechanical access).

Comparison of short-term memory (RAM) and long-term memory (Hard disk)
  • Technical metric comparison:

    • RAM (STM): Media = Semiconductor RAM; Capacity = 256 Mbytes256\,\text{Mbytes}; Access Time = 10 ns10\,\text{ns}; Transfer Rate = 100 Mbyte/s100\,\text{Mbyte/s}.

    • Hard Disk (LTM): Media = Magnetic Hard Disk; Capacity = 100 Gbytes100\,\text{Gbytes}; Access Time = 7 ms7\,\text{ms}; Transfer Rate = 30 Mbyte/s30\,\text{Mbyte/s}.

Usability Principles, Design Rules, and Golden Standards

  • Classification Dimensions of Usability Rules:

    • Authority: Measures whether a rule is mandatory (strictly enforced standards) or advisory (suggested guidelines).

    • Generality: Measures whether a rule applies broadly across diverse interaction domains or targets narrow application niches.

  • Three Tripartite Classes of Usability Principles:

    • Learnability Principles (enabling new users to initiate interaction and maximize performance):

    • Predictability: Users can determine future system states based purely on past interaction history.

    • Synthesizability: Users can evaluate the consequences of past operations on the current internal state.

    • Familiarity: Users can apply real-world knowledge and prior computing experience to novel system interactions.

    • Generalizability: Users can extend operational knowledge gained in one application context to analogous scenarios.

    • Consistency: Uniformity in input-output behavioral mappings across identical task objectives.

    • Flexibility Principles (multiplicity of interaction pathways between user and system):

    • Dialog Initiative: Freedom from system-imposed interaction constraints (preemptiveness vs. user initiative).

    • Multi-threading: System capacity to support concurrent user activity across multiple tasks simultaneously.

    • Task Migratability: Seamless transfer of task execution control between the human user and the system.

    • Substitutivity: Allowing equivalent input and output expressions to be freely interchanged.

    • Customizability: Interface modifiability by the user (adaptability) or the system (adaptivity).

    • Robustness Principles (supporting the successful achievement and evaluation of goals):

    • Observability: Users can evaluate the internal system state directly through perceivable visual representations.

    • Recoverability: Users can execute corrective actions upon recognizing an operational error.

    • Responsiveness: Perceived rate of communication and feedback delivery from the system.

    • Task Conformance: The degree to which system capabilities match all intended user tasks.

  • Hardware and Software Standards:

    • Established by organizations like the British Standards Institution (BSI) and the International Organization for Standardization (ISO).

    • Hardware standards reflect immutable physiological and ergonomic constraints, remaining stable over time.

    • Software standards rely on psychological and cognitive models, making them harder to formalize rigidly.

    • ISO/BSI core criteria:

    • Usability: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments.

    • Effectiveness: Accuracy and completeness of goal achievement.

    • Efficiency: Resources expended relative to accuracy and completeness.

    • Satisfaction: Comfort and acceptability of the work system to users.

  • Smith and Mosier (1986) Guidelines Framework:

    • Six functional guideline classes: Data Entry, Data Display, Sequence Control, User Guidance, Data Transmission, and Data Protection.

    • Example Section 1.1-1 Distinctive Cursor: Visual displays must provide movable cursors with distinctive visual characteristics (shape, blink frequency). If cursors change to denote functional state transitions (e.g., text entry vs. character deletion), each state requires visually distinct glyphs.

  • Shneiderman's Eight Golden Rules of Interface Design:

    • 1. Strive for consistency: Uniform action sequences, screen layouts, terminology, and command syntax.

    • 2. Enable frequent users to use shortcuts: Abbreviations, special key combinations, and macros to accelerate interaction.

    • 3. Offer informative feedback: Provide feedback for every user action commensurate with the action's significance.

    • 4. Design dialogs to yield closure: Organize action sequences into groups with distinct beginnings, middles, and ends.

    • 5. Offer error prevention and simple error handling: Design interfaces to prevent error states; provide clear instructions for error recovery.

    • 6. Permit easy reversal of actions: Encourage exploratory learning by ensuring actions are reversible (undo).

    • 7. Support internal locus of control: Design the system to make users feel in control of operations.

    • 8. Reduce short-term memory load: Minimize cognitive load through simple displays, consolidated layouts, and adequate learning time.

  • Norman's Seven Principles for Transforming Difficult Tasks:

    • 1. Use both knowledge in the world and knowledge in the head.

    • 2. Simplify the structure of tasks (provide mental aids, automate sub-tasks, restructure procedures).

    • 3. Make things visible: Bridge the Gulfs of Execution and Evaluation.

    • 4. Get the mappings right: Map intentions to actions, and system states to visible representations.

    • 5. Exploit the power of constraints (physical, semantic, cultural, and logical boundaries).

    • 6. Design for error: Plan for human error and incorporate accessible recovery paths.

    • 7. When all else fails, standardize arbitrary mappings to establish universal conventions.

  • User Experience Design Patterns:

    • Architectural design patterns capture, abstract, and reuse proven solutions across interactive design problems (e.g., Tidwell's "Go back to a safe place" pattern).

    • Core characteristics: Grounded in practical success, define what to build and why, address multiple abstraction levels, embed human-centered values, form generative pattern languages, and support interdisciplinary communication.

Interactive System Design Lifecycles, Usability Engineering, and Software Tools

  • Usability Engineering Lifecycle:

    • A structured discipline that integrates user feedback throughout software development to guarantee measurable system effectiveness.

    • Core operational goals: Functional effectiveness, operational efficiency, error-free safety, user-friendly simplicity, and enjoyable user experiences.

    • Empirical evaluation methods: Methodical usability studies, structured usability testing, and formal User Acceptance Testing (UAT).

  • Software Engineering Models Versus Interactive System Design:

    • The traditional Waterfall Model follows a strict, unidirectional progression through Requirements Specification, Architectural Design, Detailed Design, Coding and Unit Testing, Integration and Testing, and Operation and Maintenance.

Traditional linear waterfall development lifecycle
  • In contrast, Interactive System Design relies on bidirectional dependency, continuous iteration, and ongoing evaluation cycles to adapt to evolving user requirements.

Interactive system design lifecycle showing interdependent, iterative stages
  • Prototyping Fidelity Spectrum:

    • Low-Fidelity Prototypes: Inexpensive, manual artifacts (such as paper sketches and storyboards) used to test early conceptual alternatives.

    • Medium-Fidelity Prototypes: Partial implementations demonstrating core interface workflows without full backend functionality.

    • High-Fidelity Prototypes: Fully interactive software simulations incorporating complete visual assets, realistic system response times, and near-production functionality.

Comparison of a low-fidelity hand-drawn interface sketch and a proposed system interface
  • User-Centered Design (UCD) and ISLC:

    • User-Centered Design (UCD) gathers continuous user feedback to drive interface refinements.

    • Known drawbacks: Passive user participation, misaligned user expectations, and poorly structured user questioning by engineering teams.

    • Interactive System Design Life Cycle (ISLC) operates as a continuous loop: Identify Need, Analyze Data, Propose Design, Develop Prototype, Evaluate, and cycle back to data analysis until usability metrics are achieved.

Interactive system design life cycle flowchart
  • HCI Roles and the Film Director Analogy:

    • An HCI/UXD practitioner orchestrates cross-functional aspects of system design, balancing technical implementation with human factors, akin to a film director managing scriptwriting, acting, cinematography, and editing.

Conceptual analogy comparing the roles of a film director and an HCI practitioner
  • UXD Software Implementation Tools:

    • Specification Methods: Descriptive textual and visual representations of interface components.

    • Interface Grammars: Formal syntactical rules defining valid sequences of input-output exchanges.

    • Transition Diagrams: Graph networks depicting interface state transitions.

    • Statecharts: Visual notations handling concurrency and state hierarchies.

    • Interface Mockup Tools: Rapid wireframing suites (e.g., Microsoft Visio, Visual Studio .NET).

    • Evaluation Tools: Diagnostic software frameworks assessing functional completeness and usability performance.

Task Analysis and Engineering Models

  • Task Analysis Foundations:

    • Analyzes the structures of human activity, isolating how users decompose high-level objectives into sequential interface tasks.

    • Definition of a Task: Purposeful human actions directed toward achieving an operational objective using a computing system; task analysis focuses entirely on user activity rather than internal system computations.

Requirement analysis breakdown highlighting user task analysis
  • Techniques for Task Analysis:

    • Task Decomposition: Hierarchical splitting of high-level tasks into discrete operational sub-tasks.

    • Knowledge-Based Techniques: Documenting the domain knowledge, rules, and taxonomies users require to perform tasks.

    • Ethnography: Direct observational study of users within their naturalistic operational environments.

    • Protocol Analysis: Capturing user cognitive processes via concurrent think-aloud protocols during task execution.

  • Hierarchical Task Analysis (HTA):

    • Breaks down tasks into hierarchies of subtasks, specifying the precise logical sequences and conditions required for their execution.

    • Represents tasks through numbered structural hierarchies, identifying prerequisites and operational sequences.

  • Engineering Task Models and ConcurTaskTrees (CTT):

    • Engineering task models provide flexible, formalized notations that support automated tool checking throughout development.

    • ConcurTaskTrees (CTT):

    • An engineering modeling methodology utilizing graphical tree structures and temporal operators to specify activity sequences.

    • Core characteristics:

      • Focus on user activities rather than low-level system implementations.

      • Intuitive hierarchical decomposition supporting structural reuse.

      • Rich graphical syntax depicting logical workflows.

      • Formal concurrent notations expressing temporal relationships between tasks.

    • Four task allocation categories:

      • User Tasks: Internal cognitive actions (e.g., selecting an analytical strategy).

      • Application Tasks: Purely automated system processes (e.g., database query execution).

      • Interaction Tasks: User actions receiving immediate system feedback (e.g., editing a vector line).

      • Abstract Tasks: High-level tasks encompassing combinations of different subtask classes.

    • Domain Objects: Tasks manipulate specific User Interface Objects and Application Domain Objects.

ConcurTaskTrees diagram showing cooperative roles between customer and salesman

Interaction Frameworks and Ergonomics

  • Norman's Execution-Evaluation Cycle and the Gulfs:

    • Seven functional stages of user activity:

    • 1. Establishing the operational goal.

    • 2. Forming the intention to act.

    • 3. Specifying the sequence of actions.

    • 4. Executing actions via input controls.

    • 5. Perceiving the resulting system state.

    • 6. Interpreting perceived output states.

    • 7. Evaluating the system state against the original goals and intentions.

    • The Gulf of Execution:

    • The distance between the user's intended actions and the action sequences permitted by the interface.

    • Effective interface design minimizes this gulf by aligning controls with user intentions.

    • The Gulf of Evaluation:

    • The distance between the system's physical state presentation and the user's expectations.

    • Effective interface design minimizes this gulf by clearly communicating system state changes.

  • The Extended Interaction Framework:

    • Breaks down interactive systems into four interconnected components: System (SS), User (UU), Input (II), and Output (OO).

    • The user articulates tasks using an input language, which is translated into the system's core language, altering its state; the resulting state is then translated into output expressions for user evaluation.

The interaction framework encompassing system, user, input, output, ergonomics, and dialogue
  • Ergonomics of Controls and Visual Displays:

    • Structural arrangement strategies:

    • Functional Organization: Grouping controls by shared operational purpose.

    • Sequential Organization: Aligning controls to mirror the chronological order of task execution.

    • Frequency Organization: Placing the most commonly accessed controls in primary, easily reachable positions.

    • Physical layout considerations: Ensure all controls are accessible without excessive posture displacement, position critical visual displays at eye level, eliminate screen glare, and provide adequate physical spacing between controls.

  • Environmental Health Factors:

    • Posture: Provide dynamic back support and ergonomic arm rests during prolonged data-entry tasks.

    • Thermal conditions: Temperature extremes impair concentration and degrade task performance.

    • Illumination: Balance ambient lighting to prevent eye fatigue and screen glare.

    • Acoustic noise: Maintain comfortable ambient sound levels to avoid cognitive stress and auditory injury.

    • Display exposure time: Monitor continuous display usage to mitigate ocular strain.

  • Cultural Conventions of Color:

    • Western cultures associate red with danger, alarms, and emergency stops; green with safety and normal operations; and yellow with standby states.

    • Cultural variations: Red signifies happiness and prosperity in China; mourning is represented by black in certain societies and white in others.

Interaction Styles and the WIMP Paradigm

  • Typology of Interaction Styles:

    • Command Line Interface (CLI)

    • Menu-Driven Interfaces

    • Natural Language Interfaces

    • Question/Answer and Query Dialogues

    • Form-Fills and Spreadsheets

    • Windows, Icons, Menus, and Pointers (WIMP)

    • Point-and-Click Interfaces

    • Three-Dimensional (3D) Interfaces

  • Command Line Interfaces (CLI):

    • Enables direct execution of operational instructions via character strings, abbreviations, or dedicated function keys.

    • Offers high flexibility, rapid execution for expert users, and scriptable parameter control, but suffers from steep learning curves and heavy recall demands.

Command line interface showing Java compiler execution
  • Menu-Driven Interfaces and Linguistic Ambiguity:

    • Replaces recall with visual recognition by presenting selectable lists of commands.

    • Natural language interfaces offer intuitive communication but are hindered by linguistic ambiguity:

    • Syntactic Ambiguity Example: "The boy hit the dog with the stick" (fails to clarify whether the stick was the instrument used to strike or an object held by the dog).

  • The WIMP Paradigm and Core Widgets:

    • Common window management policies: Overlapping windows, tiled windows (non-overlapping adjacent panels), and cascading windows (offset diagonal stacking).

Dropdown menu interface demonstrating options selection
  • Core WIMP components:

    • Windows: Independent display areas containing text or graphics, capable of being resized, moved, iconified, or closed.

    • Icons: Compact graphical symbols representing closed windows, system tools, files, or background applications.

    • Pointers: Screen cursors controlled by pointing devices (e.g., mice, trackballs) to select interface objects; cursor glyphs indicate system states (e.g., hourglass for background processing).

    • Menus: Structured lists of available operations highlighted via cursor hovering; cascading menus organize deep hierarchies.

    • Buttons: Isolated selectable regions resembling physical controls, including push buttons, toggle buttons, mutually exclusive radio buttons, and independent check boxes.

    • Dialog Boxes: Dedicated pop-up windows used to display urgent system warnings or capture parameters for specific sub-tasks (e.g., file saving).

Formal Dialog Design and Mathematical State Models

  • Linguistic Levels of Interactive Dialogues:

    • Lexical Level: Primitive interface bindings (e.g., physical keypresses, icon shapes, mouse button clicks).

    • Syntactic Level: Temporal sequencing of inputs and outputs during interaction.

    • Semantic Level: Functional effects of interactions on the underlying data and application state.

  • State Transition Networks (STN):

    • Models dialogues as state machines where circles represent discrete system states and directed arcs represent user actions triggering state transitions.

State transition network representing a graphic drawing application dialogue
  • StateCharts Notation:

    • Extends Finite State Machines (FSM) by introducing state hierarchies, concurrency, and memory history.

    • State types: Active states (current operational state), Basic states (atomic leaf states), Super states (composite states containing sub-states; classified as XOR/OR states where only one sub-state is active, or AND states where sub-states operate concurrently).

    • The 'H' symbol denotes history mechanisms, restoring a super-state's most recent active sub-state upon re-entry.

StateChart model detailing states and transitions for a vending machine
  • Classical Petri Nets:

    • A mathematical modeling formalism for distributed, concurrent systems comprising four primitive elements:

    • Places (PP): Passive conditions, depicted graphically as circles.

    • Transitions (tt): Active events, depicted graphically as solid rectangular bars.

    • Arcs: Directed arrows representing causal dependencies between places and transitions.

    • Tokens: Markings held within places, depicted as solid black dots, representing the dynamic state of the system.

    • Execution rules: A transition is enabled when all input places contain tokens equal to or greater than the associated input arc weights; firing consumes tokens from input places and deposits them into output places according to output arc weights.

Petri net model showing initial token distribution before transition firingPetri net model showing token state after transition firing

Direct Manipulation, Visual Thinking, and Interface Design

  • Visual Thinking Theories:

    • Visual Immediacy: The cognitive efficiency with which a visual presentation communicates intended information.

    • Visual Impetus: Visual features designed to increase user engagement with contextual elements of the representation.

    • Visual Impedance: Visual obstacles or design flaws that hinder cognitive processing and slow comprehension.

    • Conceptual mechanisms: Visual metaphors, analogies, and conceptual blending assist users in understanding novel computing tasks using familiar concepts.

  • Direct Manipulation Paradigm:

    • A style of human-computer interaction characterized by continuous representations of objects of interest, reversible and incremental actions, and immediate visual feedback (e.g., resizing graphical elements by dragging bounding box handles with a mouse).

    • Core advantages: Reduces mental translation effort through direct engagement, minimizes the Gulfs of Execution and Evaluation, and supports rapid task learning.

    • Operational limitations: Inefficient for repetitive batch operations (which are better suited to scripting languages), struggles with abstract variable definitions, and reliant on human motor precision.

  • Menu and Form-Fill Guidelines:

    • Menus should prefer broad-and-shallow hierarchies over deep-and-narrow structures, sequence items logically (alphabetical, numerical, or frequency-based), provide keyboard shortcuts, and allow direct navigation to parent menus.

    • Form fill-in guidelines: Group related data fields logically, provide clear field labels, supply explicit error-recovery tools, clearly denote optional fields, and provide visible completion signals.

Information Search, Visualization, and Evaluation Methodologies

  • Database Querying and the Five-Phase Search Framework:

    • Structured Query Language (SQL) serves as the primary formal syntax for relational database search.

Structured query language interface for database retrieval
  • The Five-Phase Framework for textual search:

    • 1. Formulation: Defining the search parameters and scope.

    • 2. Initiation of Action: Executing the query.

    • 3. Review of Results: Scanning returned message sets and outcomes.

    • 4. Refinement: Formulating subsequent search filters based on initial results.

    • 5. Use: Compiling, extracting, and disseminating the retrieved findings.

    • Multimedia Document Search Paradigms:

  • Image Search: Content-based image retrieval utilizing sketch templates or specialized pattern matching (e.g., biometric fingerprint indexing).

  • Map Search: Geospatial data retrieval combining longitude/latitude coordinates with layered geographical information.

  • Sound and Video Search: Acoustic phrase matching, spoken word indexing, and video frame segmentation (e.g., the Infomedia project).

  • Information Visualization: Interactive visual representations of abstract data designed to reinforce human cognitive sense-making and pattern discovery.

  • Hypertext and Hypermedia: Information systems of interlinked nodes, where text (hypertext) or multimedia assets (hypermedia) are connected via navigable hyperlinks.

    • Four Classes of Evaluation Techniques:

  • Empirical: Direct usability testing with representative end-users.

  • Formal: Applying cognitive architectures and mathematical formulas to calculate interface performance metrics.

  • Automated: Utilizing software analytics and simulations to evaluate low-level usability measures.

  • Critique: Expert-driven reviews applying established heuristic frameworks.

    • Cognitive Walkthrough Methodology:

  • Evaluators step through the exact sequence of interface actions required to complete representative tasks to evaluate learnability for new users.

  • Required inputs: Detailed interface specification or prototype, concrete task descriptions, complete written action lists, and detailed target user profiles.

  • Four central evaluative questions for every action step:

    • 1. Is the effect of the action identical to the user's operational goal at that point?

    • 2. Will the user see that the required action is visibly available?

    • 3. Once found, will the user recognize that the control provides the exact action they need?

    • 4. Following execution, will the user correctly interpret the feedback provided to confirm goal completion?

    • Heuristic Evaluation (Nielsen and Molich):

  • A discount usability method where independent evaluators inspect an interface against established design principles.

  • Evaluator sizing: Employing 3 to 5 independent evaluators uncovers approximately 75%75\% of all usability problems.

  • Severity rating scale (00 to 44):

    • 00: Not agreed to be a usability problem.

    • 11: Cosmetic problem only; fix only if extra project time permits.

    • 22: Minor usability problem; low repair priority.

    • 33: Major usability problem; high repair priority.

    • 44: Usability catastrophe; must be resolved before product release.

    • Nielsen's Ten Usability Heuristics:

  • 1. Visibility of system status: Keep users informed of system states through timely feedback.

  • 2. Match between system and the real world: Speak the user's language using familiar words, phrases, and concepts.

  • 3. User control and freedom: Provide clearly marked emergency exits to escape unwanted states (undo and redo).

  • 4. Consistency and standards: Adhere to platform conventions and consistent interface language.

  • 5. Error prevention: Design interfaces to eliminate error-prone conditions before they occur.

  • 6. Recognition rather than recall: Keep objects, actions, and options visible to reduce working memory load.

  • 7. Flexibility and efficiency of use: Provide accelerators and keyboard shortcuts to cater to both novice and expert users.

  • 8. Aesthetic and minimalist design: Eliminate irrelevant or rarely needed information from visual displays.

  • 9. Help users recognize, diagnose, and recover from errors: Write error messages in plain language specifying problems and solutions clearly.


  1. Help and documentation: Provide concrete, task-focused, searchable documentation to support problem resolution.

  • Factors Distinguishing Usability Evaluation Techniques:

  • Lifecycle stage (early design phase vs. post-release)

  • Evaluation style (laboratory testing vs. naturalistic field studies)

  • Level of subjectivity or objectivity

  • Types of metrics provided (qualitative descriptions vs. quantitative task times)

  • Granularity of diagnostic information

  • Immediacy of feedback

  • Level of interference with natural user activity

  • Required resources, hardware equipment, and expertise

Logic evaluation puzzle depicting balance scales with animals
  • Formal Derivation of Animal Mass Puzzle:

    • Let cc represent the mass of the cat, rr the mass of the rabbit, and dd the mass of the dog:

    • From scale 1:     c+r=10 kgc + r = 10\,\text{kg}

    • From scale 2:     d+r=20 kgd + r = 20\,\text{kg}

    • From scale 3:     d+c=24 kgd + c = 24\,\text{kg}

    • Summing all three balance equations:     (c+r)+(d+r)+(d+c)=10+20+24(c + r) + (d + r) + (d + c) = 10 + 20 + 24     2d+2c+2r=54 kg2d + 2c + 2r = 54\,\text{kg}     2(d+c+r)=54 kg2(d + c + r) = 54\,\text{kg}     d+c+r=542=27 kgd + c + r = \frac{54}{2} = 27\,\text{kg}

    • The combined mass of the dog, cat, and rabbit on scale 4 equals 27 kg27\,\text{kg}.

    • Individual masses derived by substitution:

    • Rabbit mass: r=(d+c+r)−(d+c)=27−24=3 kgr = (d + c + r) - (d + c) = 27 - 24 = 3\,\text{kg}

    • Cat mass: c=(c+r)−r=10−3=7 kgc = (c + r) - r = 10 - 3 = 7\,\text{kg}

    • Dog mass: d=(d+r)−r=20−3=17 kgd = (d + r) - r = 20 - 3 = 17\,\text{kg}