Human Computer Interaction � � El-Lamona Lecture 1 Sheet Questions = 1 | P a g e 1 Human-Computer Interaction is the design and study of interactive computing systems for human use. Switching to Digital Many traditional activities transitioned to digital platforms (e.g., ticket machines, parking meters). 10 Benefits • Enhances tasks' efficiency, speed, and convenience. • Enables storing personal details for future use. • Eliminates waiting in line for physical tickets. • Convenient use of QR codes for entrance through ticket barriers. 11 Disadvantages: • Not everyone has a modern smartphone or can use one. • Older phone users may encounter compatibility issues with apps. • Some individuals are hesitant to share personal information online. • Some prefer human interaction for purchases. 2 Interaction Design “Designing interactive products to support the way people communicate and interact in their everyday and working lives.” 12 Goals of Interaction Design QUUUP • Quality experiences • Usability • User involvement • User-centered design • Privacy protection Types of Design Interaction design is the umbrella term for all disciplines involved in designing computer-based systems for people. • User interface design (UI) • Product design • User experience design (UX). • Software design • User-centered design • Web design 13 Process of Interaction Design • Establishing Requirements • Designing Alternatives • Prototyping • Evaluating 3 Human computer Interaction VS Interaction Design HCI is the study of human-computer interaction, while interaction design is the design of interactive products and spaces. HCI is part of Interaction Design. Human Computer Interaction � � El-Lamona Lecture 1 Sheet Questions = 2 | P a g e User Experience ------------------------------------------------------------------------------------------------- 4 User Experience (UX): Concerned with how a product behaves and is used in the real world. Emotional Reaction in UX: Users' positive � � � � � � or negative � � � � experiences with a product. Attention to details such as � � � switch rotation, � � � click sound, � � � � � button touch, � � � � � color selection, � � � � � � � � weight. 14 Factors of UX U-FACE • Usability • Functionality • Aesthetics/Look and Feel • Content • Emotional Appeal 5,6 UX Vs Usability User experience (UX) - is about how a user feels when interacting with a product. Usability - is about how easy the product is to use Functionality - the range and capabilities of features that a product offers to users 7,15,16 Usability Goals: • Effectiveness Achieve goals accurately and efficiently. • Efficiency Maintain high productivity after learning. • Safety Protect users from harm. • Utility Provide right functionality to accomplish tasks. • Learnability Easy to learn how to use. • Memorability Easy to remember how to use once learned. 8 Design principles FC-MAC-V are generalizable abstractions that help designers think about several aspects of their designs . Some important design principles include: • Feedback Provides feedback to the user. • Constraints Prevents errors. • Mapping Clear and consistent relationship between actions and responses. • Affordance Clear how to interact with it. • Consistency Consistent design and behavior. • Visibility Clear and easy to understand. Human Computer Interaction � � El-Lamona Lecture 2 Sheet Questions = 1 | P a g e 5 Interaction design is a human-centered process of designing interactive products and services that meet the needs of users and their goals. It focuses on: • Discovering requirements • Designing requirements • Producing prototypes • Evaluating prototypes 4 Four Approaches for Design USAGe • User-centered design focuses on the needs and wants of users. • Systems design focuses on the overall system that is being designed. • Activity-centered design focuses on the activities that users perform. • Genius design relies on the creativity of a single designer or a small team of designers. The Double Diamond of Design • Discover the problem by talking to affected individuals. • Define the design challenge based on gained insights. • Develop different responses to the challenge, co-designing with various people. • Deliver test solutions at a small scale, rejecting or evolving them. 1,7 Who to Involve in Interaction Design LEDU Individuals or groups who influence or are influenced by the success or failure of the project. • Legislators • Executives • Developers • Users 2 Importance of Involving Users: Expectation Management Realistic expectations, timely training, communication without hype Ownership Make users active stakeholders, improving product acceptance 9 People-Centered Approach An approach in interaction design that prioritizes the needs, preferences, and behaviors of users throughout the design process Three Principles for "Useful & Easy-to-Use" Products: • Early Focus on Users and Tasks Prioritize understanding user needs and tasks from the beginning. • Empirical Measurement Base design decisions on empirical data and measurements. • Iterative Design Continuously refine and improve designs through iterations. 6 Basic Activities of Interaction Design • Discovering requirements Identifying the needs and goals of the users. • Designing requirements Creating a blueprint for the product or service • Producing prototypes Creating working models of the product or service • Evaluating prototypes Collecting feedback from users on the prototypes and making changes. Human Computer Interaction � � El-Lamona Lecture 2 Sheet Questions = 2 | P a g e Practical Issues in Interaction Design------------------------------------------------------------------------ What do people need? is to explore the problem space and investigate potential users and activities. Focus on people's goals and usability. What to design? explore the current user experience and the reasons for change. Discuss the problem space with team and avoid assumptions. 8 Generate alternative designs? Alternatives to the current design can come from flair and creativity, research and synthesis, users, seeking inspiration, and different perspectives. Choose among alternatives. focus on externally visible and measurable behavior, technical feasibility, and user evaluation. Integrate ID activities. emphasize tight iterations, early and regular feedback, handling emergent requirements, and balancing structure. Human Computer Interaction � � El-Lamona Lecture 3 Sheet Questions = 1 | P a g e 1 Conceptualizing Design Conceptualize what the proposed product will do. 2 Useful because it inspects vague ideas and assumptions about the feasibility, realism, desirability, and usefulness of the proposed product. Some of the interaction methods are: 4 Interaction Types • Instructing Users issue instructions to a system (e.g., typing commands, selecting menus, speaking commands). • Conversing Users have a dialog with a system (e.g., speaking or typing questions and the system replies via text or speech output). • Manipulating Users interact with objects in a virtual or physical space by controlling them (e.g., opening, holding, closing, placing). • Exploring Users move through a virtual environment or a physical space (e.g., virtual environments, 3D worlds). 5,6 Assumptions and claims Assumptions is taking something for granted when it needs further investigation. Claim is stating something to be true when it is still open to question. Assumptions and claims should be clearly articulated and defended, and iteratively refined to improve design ideas. 7 Benefits of Conceptualizing Orientation Enables design teams to ask specific questions about how the conceptual model will be understood. Open-Minded Prevents design teams from becoming narrowly focused early on. Common Ground Allows design teams to establish a set of commonly agreed terms. Conceptual Model A high-level description of how a system is organized and operates. Its purpose is to help designers straighten out their thinking and develop a working strategy before designing the user interface. Components • Metaphors and Analogies Help users understand the product's purpose and how to use it. • Task Domain Objects Concepts exposed through the product, including objects, attributes, and operations. • Relationships and Mappings Define relationships and mappings between concepts. Characteristics of Best Conceptual Models: • Obvious and simple. • Intuitive operations that are easy to use 8 Interface Metaphors Interface designed to be like a physical entity but also has its properties. Examples of Interface Metaphors: • Conceptualizing User Actions Surfing the web • Instantiating a Conceptual Model at the Interface Desktop metaphor. • Visualizing an operation Icon of a shopping cart for placing items 3 • Multi-touch • GUI • Head-up display • Augmented reality • Speech • Text based UI • Gesture-based • Virtual reality Human Computer Interaction � � El-Lamona Lecture 4 Sheet Questions = 1 | P a g e 1 Design and Evaluate Interface • Topic Choice Identify a general topic for the project. e.g. ( Smart home UI.) • Understanding the Problem Describe tasks, users, and environment. e.g. ( Tasks: Control lights and temperature) • Design Alternatives Describe multiple designs and alternatives. e.g. ( Voice, touchscreen) • Prototype Develop a detailed prototype (semi-working). e.g. ( Develop voice prototype) • Evaluation Conduct a formal evaluation with example users. e.g. ( Measure task completion time) 2 Interaction Design Approaches • User-centered design focuses on the needs and wants of users. • Systems design focuses on the overall system that is being designed. • Activity-centered design focuses on the activities that users perform. • Genius design relies on the creativity of a single designer or a small team of designers. User Intervention Involving Users in Design Prototype development involves iterative user feedback. Expectation Management Realistic expectations, timely training, communication without hype Ownership Make users active stakeholders, improving product acceptance 3 User-Centered Design • Early Focus on Users and Tasks Prioritize understanding user needs and tasks from the beginning. • Empirical Measurement Base design decisions on empirical data and measurements. • Iterative Design Continuously refine and improve designs through iterations. 4 UCD Approach The structured UCD approach ensures a user-focused, iterative, and well-informed design process. UCD structure steps: 1. Define the Context identify the type of uses and applications. 2. Describe the User detailed physical attributes, work environments, personality traits, and cultural diversity. 3. Task Analysis observes users performing tasks. break tasks into steps and abstract into standard tasks. 4. Function Allocation allocates tasks based on system capabilities, user abilities, and constraints. 5. System Layout / Basic Design summarize components and their basic design. 6. Prototypes rapidly create and iterate user interface prototypes. 7. Usability Testing has real or representative users interacting with prototypes. 8. Iterative Test & Redesign repeat testing and redesign cycles. 9. Updates & Maintenance design the product or experience to be easy to fix or update. Human Computer Interaction � � El-Lamona Lecture 4 Sheet Questions = 2 | P a g e 5 Human Modeling � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � Card, Moran, and Newell, 1983 Model Human Processor model comprises three subsystems: Perceptual System translates sensory input into visually appealing interfaces. Motor System controls actions. Cognitive System provides the processing needed to connect the two. Human Eye: The human eye has 120 million rods for dim light vision and 6 million cones for color vision, with blue-sensitive cones concentrated in the fovea for optimal color perception. Cones Rods Light Sensitivity Bright light (photopic vision) Dim light (scotopic vision) Location in Retina Center Periphery Function Color vision Luminosity vision (black, white, shades of gray) Absence Color blindness Night blindness Hue, Intensity/Value, Saturation: • Hue Spectral wavelength of light • Intensity/Value Brightness of color • Saturation Amount of whiteness in color Human Computer Interaction � � El-Lamona Lecture 5 Sheet Questions = 1 | P a g e 1 Task Analysis learning about, analyzing, and describing how people perform their jobs or work. Input & Output 1. Input Gather data about users' needs and tasks. 2. Output Represent data for interpretation and use in design decisions. Data to be Gathered UR-GUTTER To understand how users will interact with an interface, gather the following data: 3 Data Gathering Techniques FP-DIODES To gather data about users and their needs, consider using the following techniques: • Focus Groups Gathers qualitative data from a small group of users. • Product Review Evaluates existing products. • Documentation Mining Extracts information from existing documentation. • Interviews Engages users to understand their needs and preferences. • Observation Identifies task-relevant user behaviors. • Data Logging Tracks user actions to identify patterns. • Ethnography Gathers deep relative data about users. • Surveys Collects quantitative data from many users. Technique Pros Cons Focus Groups Different opinions Can be biased Product Review See what works and doesn't Not always relevant Documentation Mining How things should be done Not always accurate Interviews A lot of information Takes time and money Observation Real-time behavior Can't see what people are thinking Data Logging A lot of information Can be expensive Ethnography Deep understanding Takes time and money Surveys Fast and easy Not much information 4 Task Representation Methods • Task Outlines Break tasks down into steps. • Narratives Describe tasks in sentences. • Hierarchies & Network Diagrams Visualize task relationships. • Flow Charts Show the sequence of steps. 5 Task Analysis Purpose The purpose of task analysis in HCI is to better understand users' tasks and needs in order to design interfaces that are more effective and efficient for users. 2 • Users Information • Environment Description • Goals • User Preferences • Tasks & Subtasks • Task Execution • Results • Requirements