HCI History and Evolution

Module 1: Historical Evolution of HCI

• HCI is important for IT professionals and software engineers
• Understanding the history and evolution of HCI is crucial
• Key technologies and milestones can be identified in HCI development
• The Early Computers (ENIAC, 1946) were initially used for batch processing and required complex human intervention
• Visual Display Units were introduced in the 1950s with the SAGE system using early screen displays
• Sketchpad (1962), developed by Ivan Sutherland, was the first graphical interface that proved computers could be used beyond data processing
• The Mouse & Word Processor (1968) was introduced by Douglas Engelbart with the NLS (oNLine System), laying the foundation for modern GUIs
• Personal Computers in the 1970s: Xerox PARC developed Smalltalk and the Dynabook concept, leading to the evolution of personal computing
• Windows and WIMP Interfaces: Early GUIs allowed users to interact visually using windows, icons, menus, and pointers
• Direct Manipulation (1982): Ben Shneiderman introduced a model where users directly interact with on-screen elements, reducing errors
• Hypertext (1945): Vannevar Bush proposed non-linear text structures, a precursor to the modern web
• Tim Berners-Lee developed the World Wide Web (1989), featuring the first web browser (Mosaic, 1993), revolutionizing information access
• Ubiquitous Computing: The latest trend in HCI, focusing on context-aware and sensor-based computing

Module 2: Don Norman's Interactive Design Principles

• Use both knowledge in the world & in the head: Users rely on memory and external cues for interaction
• Simplify task structures: Break tasks into smaller, manageable steps to enhance usability
• Make things visible: Ensure key actions and results are easily seen by users
• Get the mapping right: User mental models should align with system conceptual models for intuitive use
• Convert constraints into advantages: Physical, cultural, and technical constraints should guide user interactions
• Design for error: Anticipate mistakes and provide recovery options
• When all else fails - standardize: Consistency across systems enhances usability and user experience

Module 2: Heuristic Evaluation (Nielsen's Ten Principles)

• Usability evaluation method where experts check interfaces against usability heuristics to identify design flaws
• Visibility of system status: Keep users informed about system operations through timely feedback
• Match between system and real world: Use familiar concepts and natural language
• User control and freedom: Provide clear exit options and undo/redo functionality
• Consistency and standards: Follow platform and industry conventions
• Error prevention: Design systems to prevent user mistakes
• Recognition rather than recall: Reduce memory load by displaying key options and information
• Flexibility and efficiency of use: Support expert users with shortcuts and adaptable workflows
• Aesthetic and minimalist design: Keep interfaces free of unnecessary elements
• Help users diagnose and recover from errors: Provide clear, constructive error messages
• Help and documentation: Offer accessible, concise help resources

Module 2: Shneiderman's Eight Golden Rules of Interface Design

• Strive for consistency: Maintain uniform design elements
• Enable frequent users to use shortcuts, like keyboard shortcuts
• Offer informative feedback: Ensure system responses to user actions are clear
• Design dialogs to yield closure by organizing tasks with a clear beginning, middle, and end
• Offer simple error handling and prevent and guide users through errors
• Permit easy reversal of actions by allowing undo and redo features
• Support internal locus of control, so users should feel in control of system actions
• Reduce short-term memory load and minimize cognitive effort required for tasks

Module 3: Interactive System Design

• Usability Engineering: Focuses on creating efficient, effective, and satisfying products
• Usability Testing: Measures how well users can accomplish tasks using the system
• Acceptance Testing: Final user validation before deployment
• Software Tools includes interface building, prototyping, and evaluation tools
• UI/UX Testing Methods include Heuristic evaluations, user testing, and task analysis
• Waterfall Model: A stepwise approach to software development
• Interaction Design Process involves user research, analysis, designing solutions, prototyping, and implementation
• User-Centered Design (UCD) is an iterative process integrating user feedback for improvements

Module 3: What is a Design System?

• Definition: A structured collection of design elements ensuring consistency across digital products
• Design System: Central framework for visual and interaction guidelines
• Component & Pattern Libraries: Standardized interface elements and reusable UI patterns
• Foundational Elements includes color, typography, accessibility, and branding guidelines
• Benefits include enhanced efficiency, consistency, and collaboration in UI/UX development
• Brief history: Evolved from print design to modern digital frameworks like Google's Material Design

Module 4: Task Analysis

• Definition: The study of how users complete tasks, tools they use, and knowledge required
• Task Decomposition: Breaks down tasks into smaller steps
• Knowledge-Based Techniques examines what users need to know to complete tasks
• Entity-Relationship Analysis: Focuses on interactions between objects and actions
• Hierarchical Task Analysis (HTA): A structured approach to organizing tasks
• Applications: Used in interface design, system documentation, and training materials

Layout Grids in HCI

• Purpose: Helps align objects within a frame, ensuring structured, logical design
• Uniform Grid: Creates equal-sized squares for precise alignment
• Column & Row Grids: Supports adaptable, responsive design
• Grid Properties includes count (number of columns/rows), gutter (spacing), margin (distance from edge), and offset (positioning)
• Fixed vs. Stretchy Grids: Fixed grids have set dimensions; stretchy grids adapt dynamically
• 8-Point Grid System: Uses multiples of 8 for uniform UI spacing and layout