IT-HCI01 Human-Computer Interaction Lesson 1 PDF

IT-HCI01 HUMAN-COMPUTER INTERACTION LESSON 1: INTERACTION DESIGN WHAT IS INTERACTION DESIGN?  Interaction Design is the process of designing interactive products to support people in their everyday and working lives (Sharp, Rogers, and Preece, 2002).  The design of spaces for human communi...

IT-HCI01 HUMAN-COMPUTER INTERACTION LESSON 1: INTERACTION DESIGN WHAT IS INTERACTION DESIGN?  Interaction Design is the process of designing interactive products to support people in their everyday and working lives (Sharp, Rogers, and Preece, 2002).  The design of spaces for human communication and interaction (Winograd, 1997). REAL LIFE EXAMPLES  Smartphone Apps  Website Navigation  ATM Machines  Smart Home Devices  E-Commerce Checkout Process  Online Banking GOALS OF INTERACTION DESIGN  Develop usable products – usability means easy to learn, effective to use, and provide an enjoyable experience.  Involve users in the design process. GOOD OR BAD DESIGN? WHAT TO DESIGN?  Neet to take into account:  Who the users are  What activities are being carried out  Where the interaction is taking place  Need to optimize the interactions users have with a product such that they match the users' activities and needs. UNDERSTANDING USERS’ NEEDS  Neet to take into account what people are good and bad at  Consider what might help people in the way they currently do things  Listen to what people want and get them involved  User tried and tested user-based methods. 7 WAYS YOU CAN IMPROVE COLOR ACCESSIBILITY FOR COLOR BLIND USERS 1. USE PATTERS AND TEXTURES 2. UTILIZE COLORS AND SYMBOLS 3. USE TEXT LABELS 4. UNDERLINE LINKS 5. COLOR COMBINATIONS TO AVOID GREEN & RED GREEN & BLUE GREEN & BROWN GREEN & BLACK GREEN & GREY BLUE & GREY LIGHT GREEN & YELLOW BLUE & PURPLE 6. MAKE PRIMARY BUTTONS STANDOUT 7. MARK REQUIRED FORM FIELDS WHAT IS AN INTERFACE?  It refers to the point of interaction between different system components, allowing them to communicate and work together effectively.  It defines how users interact with the software (user interface) or how different software components or systems exchange information (application programming interface or API). EVOLUTION OF HCI INTERFACES EVOLUTION OF HCI “INTERFACES”  1950s – Hardware-Level Interface (Engineers) - Interfaces were primarily physical, such as switch panels and punch cards, used by engineers to interact with early computing machines. EVOLUTION OF HCI “INTERFACES”  1960s–1970s – Programming-Level Interface - The focus shifted to programming languages like COBOL and FORTRAN, allowing developers to interact with computers through structured commands and logic. EVOLUTION OF HCI “INTERFACES”  1970s–1990s – Terminal-Level Interface - Command-line interfaces (CLI) became prevalent, enabling users to communicate with computers via textual commands, requiring knowledge of command languages. EVOLUTION OF HCI “INTERFACES”  1980s – Interaction Dialogue-Level Interface - The introduction of graphical user interfaces (GUIs) and multimedia elements revolutionized user interaction, making computers more accessible through visual elements such as windows, icons, and menus. EVOLUTION OF HCI “INTERFACES”  1990s – Work Setting-Level Interface - With the rise of networked systems and groupware, interfaces evolved to support collaboration and connectivity in workplace environments, fostering team-based workflows. EVOLUTION OF HCI “INTERFACES”  2000s – Pervasive Interfaces - Interfaces became ubiquitous with advancements in technologies such as RFID tags, Bluetooth, mobile devices, consumer electronics, interactive touch screens, and embedded systems, enabling seamless connectivity and interaction across various environments. HCI AND ID HUMAN-COMPUTER INTERACTION  Human-computer interaction (HCI) is “concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” (ACM SIGCHI, 1992, p.6)  Human-computer interaction (HCI) is the study and design of how people interact with computers and technology, focusing on creating effective and user-friendly systems. INTERACTION DESIGN  Interaction design (ID) is “the design of spaces for human communication and interaction” Winograd (1997)  Interaction design (ID) is the process of designing how people interact with technology. RELATIONSHIP BETWEEN ID, HCI, AND OTHER FIELDS RELATIONSHIP BETWEEN ID, HCI, AND OTHER FIELDS Academic disciplines Design practices (e.g. computer (e.g. graphic design) science, psychology) Interaction Design Interdisciplinary fields (e.g HCI, CSCW) INTERACTION DESIGN (ID) AND HUMAN-COMPUTER INTERACTION (HCI)  ID focuses on designing user-centered interfaces that enhance user experience and usability.  HCI provides the theoretical foundation for ID by studying how users interact with technology and how to optimize that interaction.  Both fields share common goals of improving accessibility, efficiency, and user satisfaction. ID, HCI, AND COMPUTER SCIENCE/IT  Computer Science/IT provides the technical foundation for implementing interaction designs.  Topics such as software development, algorithms, and data structures influence how interactive systems are built.  HCI relies on computing principles to develop responsive and adaptive user interfaces. ID, HCI, AND PSYCHOLOGY  Psychology helps in understanding human behavior, cognition, perception, and decision-making, which are crucial for designing intuitive interfaces.  Concepts like cognitive load, memory retention, and attention directly impact HCI and ID practices.  User experience (UX) design heavily incorporates psychological theories to create engaging interactions. ID, HCI, AND ERGONOMICS  Ergonomics focuses on optimizing systems for human physical capabilities and limitations.  HCI applies ergonomic principles to create interfaces that are comfortable and reduce strain on users.  ID integrates ergonomic considerations when designing physical and digital interactions. ID, HCI, AND SOCIOLOGY  Sociology examines how technology affects social interactions and group behavior.  HCI uses sociological insights to design collaborative and inclusive digital environments.  ID considers cultural and social norms when creating products for diverse user groups. ID, HCI, AND DESIGN DISCIPLINES (GRAPHIC DESIGN, INDUSTRIAL DESIGN)  Graphic design contributes to the visual appeal and aesthetics of interfaces, influencing user engagement.  Industrial design focuses on the physical aspects of interaction, such as device form and ergonomics.  ID blends both to create holistic and seamless user experiences. ID, HCI, AND ARTIFICIAL INTELLIGENCE (AI)  AI enhances interactive systems by providing personalized and adaptive experiences.  HCI leverages AI technologies such as machine learning and natural language processing to improve user interactions.  ID incorporates AI-driven interfaces like voice assistants and recommendation systems. ID, HCI, AND BUSINESS/MARKETING  Business principles guide the development of user- centered products that meet market demands.  HCI and ID contribute to product strategy by focusing on usability and customer satisfaction.  User research and feedback loops play a crucial role in aligning design with business goals. ID, HCI, AND EDUCATION  HCI research supports the development of educational tools and e-learning platforms.  ID ensures that learning interfaces are intuitive and enhance the educational experience.  Both fields contribute to accessibility and inclusivity in educational technologies. ROLES IN INTERACTION DESIGN TO INDUSTRY ROLES IN INTERACTION DESIGN INDUSTRY  interaction designers - people involved in the design of all the interactive aspects of a product  usability engineers - people who focus on evaluating products, using usability methods and principles  web designers - people who develop and create the visual design of websites, such as layouts ROLES IN INTERACTION DESIGN INDUSTRY  information architects - people who come up with ideas of how to plan and structure interactive products  user experience designers - people who do all the above but who may also carry out field studies to inform the design of products THE PROCESS OF INTERACTION DESIGN Identifying Needs and Establishing Requirements - Understand user goals, behaviors, and pain points through research methods such as interviews, surveys, and observations. - Define functional and non-functional requirements that align with user expectations and business objectives. - Consider accessibility, usability, and contextual factors to ensure inclusivity and effectiveness. THE PROCESS OF INTERACTION DESIGN Developing Alternative Designs - Explore multiple design concepts and approaches to address identified needs creatively. - Use brainstorming sessions, sketches, wireframes, and storyboards to visualize different solutions. - Involve stakeholders and users in the ideation process to gather diverse perspectives and feedback. THE PROCESS OF INTERACTION DESIGN THE PROCESS OF INTERACTION DESIGN Building Interactive Prototypes - Create tangible representations of design ideas, ranging from low-fidelity paper prototypes to high-fidelity digital prototypes. - Ensure prototypes effectively demonstrate key interactions and workflows. - Use prototypes to facilitate communication with stakeholders and test design concepts early in development. THE PROCESS OF INTERACTION DESIGN Evaluating the Design Throughout the Process - Continuously assess the design using usability testing, heuristic evaluations, and user feedback. - Identify areas for improvement based on user interactions and performance metrics. - Iterate on the design by refining elements based on insights gained from evaluation to ensure an optimal user experience. CORE CHARACTERISTICS OF INTERACTION DESIGN 1. User Involvement throughout the Development 2. Clearly Defined Usability and UX Goals 3. Iterative Design Process USABILITY GOALS 1. Effective to use 2. Efficient to use 3. Sate to use 4. Have good utility 5. Easy to learn 6. Easy to remember how to use ACTIVITY ON USABILITY INSTRUCTIONS 1. Think of an application, system, or device you would love to create (e.g., a futuristic mobile app, smart home device, or educational tool). Consider its purpose and how users will interact with it. 2. Use pencil and paper to draw the interface, including essential elements like buttons, menus, icons, and screens. Focus on usability and how users will navigate your design. 3. Annotate your drawing to explain the functions of different interface elements. Use arrows or indicators to show user interactions and navigation flow. 4. Incorporate a unique or futuristic feature that could improve user experience and set your design apart. 5. Write a brief description (3-5 sentences) explaining your concept, target users, and key features. USER EXPERIENCE GOALS AND USABILITY GOALS USER EXPERIENCE GOALS USABILITY GOALS VS USER EXPERIENCE GOALS Usability Goals User Experience Goals Definition Focus on the effectiveness, Focus on the overall emotional and efficiency, and ease of use of a experiential impact of using a system, system or interface. including satisfaction and engagement. Objectives Aim to ensure that users can Aim to create a positive, enjoyable, and complete tasks accurately and meaningful interaction for the user. efficiently with minimal effort. Focus Area Concerned with functionality, Emphasize aesthetics, emotional learnability, memorability, and connection, and user engagement. error prevention. USABILITY GOALS VS USER EXPERIENCE GOALS Usability Goals User Experience Goals Evaluation Measured through task Measured through user satisfaction, Metrics completion rates, error rates, perceived enjoyment, trust, and response times, and user emotional responses. efficiency. User Perception Ensure the system is easy to Ensure the system provides a use and meets practical pleasurable and meaningful needs. experience beyond functionality Design Involve logical layouts, clear Involve visual appeal, storytelling, Considerations navigation, and intuitive and personalization. controls. USABILITY GOALS VS USER EXPERIENCE GOALS Usability Goals User Experience Goals Importance in Crucial for achieving Crucial for building long-term user Development efficiency and effectiveness in loyalty and emotional connection. system interaction. Examples Users should complete a Users should feel excited and registration form within 3 motivated when using the app. minutes. DESIGN PRINCIPLES DESIGN PRINCIPLES Generalizable Abstractions for Design - Develop flexible frameworks that help address various aspects of interaction design across different contexts and systems. These abstractions guide designers in creating versatile and scalable solutions. DESIGN PRINCIPLES The Do's and Don'ts of Interaction Design - Follow best practices for effective design, such as ensuring clarity, simplicity, and consistency. Avoid clutter, confusion, and overwhelming users with unnecessary options or complexity. DESIGN PRINCIPLES What to Include and Exclude in the Interface - Focus on providing essential features that enhance user experience and meet user needs. Exclude unnecessary elements that could distract, confuse, or complicate interactions. DESIGN PRINCIPLES A Blend of Theory, Experience, and Common Sense - Build on theoretical principles, real-world experience, and intuitive judgment to make informed design decisions that align with user needs and expectations. CONSTRAINTS CONSTRAINTS  In Human-Computer Interaction (HCI), constraints refer to the limitations or restrictions placed on the design of an interface or system to guide user behavior, ensure usability, and prevent errors.  Constraints are used to help users interact with a system more efficiently by limiting the range of actions that can be taken or guiding them toward correct usage. TYPES OF CONSTRAINTS  Physical Constraints - Limitations based on the physical properties of the interface, such as the size and shape of buttons, screen size, or device inputs. - Example: A smartphone screen that can only accommodate a limited number of touchable elements at a time. TYPES OF CONSTRAINTS  Cognitive Constraints - Limitations based on the user's cognitive abilities or mental model, such as how users understand and process information. - Example: Presenting too many options in a menu can overwhelm the user’s decision-making process. TYPES OF CONSTRAINTS  Cultural Constraints - Constraints that arise from the cultural norms or expectations of the user. - Example: Icons or symbols that are culturally recognized and understood, like using a red color for "stop" in many regions. TYPES OF CONSTRAINTS  Logical Constraints - Limitations that arise from the logical relationships between interface elements or tasks. - Example: A calendar application that only allows users to select dates that are within a valid range (e.g., no past dates for a future event). TYPES OF CONSTRAINTS  Semantic Constraints - Constraints based on the meaning of the actions the user can take. - Example: A form field that only accepts numerical values, thus preventing the user from entering text. TYPES OF CONSTRAINTS  User-Interface Constraints - Restrictions or guidelines that help users understand what they can and cannot do within an interface. - Example: Disabled buttons or menu options that cannot be selected unless certain conditions are met. PURPOSES OF CONSTRAINTS  Prevent Errors - Help users avoid mistakes by limiting possible actions.  Improve Usability - Make interfaces more intuitive by guiding user behavior.  Enhance Efficiency - Ensure that tasks are performed in the most direct and effective way possible.  Provide Feedback - Indicate what users can and cannot do, enhancing the overall experience. USABILITY PRINCIPLES USABILITY PRINCIPLES  Usability Principles are guidelines that aim to enhance the effectiveness, efficiency, and satisfaction of users when interacting with a system. These principles are designed to ensure that systems are user-friendly, accessible, and intuitive. KEY USABILITY PRINCIPLES IN HCI  Effectiveness is the degree to which users can achieve their goals using the system accurately and completely.  Example: A website where users can easily find the information they are looking for without errors. KEY USABILITY PRINCIPLES IN HCI  Efficiency refers to how quickly users can complete their tasks once they have learned how to use the system.  Example: A user being able to complete an online checkout in a few simple steps. KEY USABILITY PRINCIPLES IN HCI  Efficiency refers to how quickly users can complete their tasks once they have learned how to use the system.  Example: A user being able to complete an online checkout in a few simple steps. KEY USABILITY PRINCIPLES IN HCI  Learnability is the ease with which new users can learn to operate the system or interface.  Example: An intuitive mobile app that users can pick up and use with minimal instruction. KEY USABILITY PRINCIPLES IN HCI  Memorability refers to how easily users can remember how to use the system after a period of not using it.  Example: A system with a simple, consistent layout so users can quickly recall how to navigate it after returning. KEY USABILITY PRINCIPLES IN HCI  Error Prevention is the ability of a system to prevent users from making mistakes or to provide clear recovery options if errors occur.  Example: A form that automatically checks for incorrect inputs (e.g., an email address) and highlights errors before submission. KEY USABILITY PRINCIPLES IN HCI  Satisfaction refers to the degree to which users find the system pleasant to use and feel that their needs are met.  Example: A user-friendly interface that is visually appealing and provides smooth, enjoyable interactions. KEY USABILITY PRINCIPLES IN HCI  Consistency refers to uniformity in design elements, terminology, and interactions across the system.  Example: Buttons, icons, and menus in the system that follow similar conventions across different pages. KEY USABILITY PRINCIPLES IN HCI  Feedback refers to providing users with clear, informative feedback about their actions, such as confirmations, progress indicators, or error messages.  Example: A progress bar showing the user how much longer a file is going to take to upload. KEY USABILITY PRINCIPLES IN HCI  Flexibility and Efficiency of Use refers to the idea that system should provide ways for both novice and expert users to interact efficiently, including offering shortcuts for advanced users.  Example: A keyboard shortcut for experienced users that speeds up a repetitive task. KEY USABILITY PRINCIPLES IN HCI  Accessibility refers to the notion that design should accommodate users with different abilities, ensuring that the system can be used by people with disabilities.  Example: A website that provides alternative text for images, voice commands, and high-contrast modes for users with visual impairments. THAT’S IT!  END OF THE LESSON NA MAY QUIZ NA