1 (1).pdf

Prepared by: Ma. Mercedes M. Sunio  Define what is Human-Computer Interaction?  Identify the Importance of Human Computer Interaction  Have a knowledge on the Evolution of Human Computer Interaction  Understand What are the Human Computer Interaction principles  identify Principles of Go...

Prepared by: Ma. Mercedes M. Sunio  Define what is Human-Computer Interaction?  Identify the Importance of Human Computer Interaction  Have a knowledge on the Evolution of Human Computer Interaction  Understand What are the Human Computer Interaction principles  identify Principles of Good and Bad design  Understand the Human Centered design Philosophy 2  DEFINITION OF HUMAN-COMPUTER INTERACTION  IMPORTANCE OF HUMAN COMPUTER INTERACTION  EVOLUTION OF HUMAN COMPUTER INTERACTION  HUMAN COMPUTER INTERACTION PRINCIPLES  PRINCIPLES OF GOOD AND BAD DESIGN  HUMAN CENTERED DESIGN PHILOSOPHY 3 is a field that focuses on the design, evaluation, and implementation of interactive computing systems that facilitate effective communication between humans and computers. 4 5 The "human" component refers to the users who interact with technology. HUMAN FACTORS:  C OG N I T I VE A B I LI TIE S  P E R C E PTUAL A B I LI TI ES  P H YS I C A L A B I LITI E S  E MOT I ON AL A N D P S YC H OLOG I C AL F A C TORS 6 The "computer" component refers to the technology or system with which users interact. F A C T OR S :  U S E R I N T E R FAC ES  F E E D BAC K ME C H AN I S MS  A D A PTABI LITY  D A T A P R OC E S S I N G 7 The "interaction" component represents the ways in which humans and computers communicate and engage with each other. FACTORS:  I N P U T ME T H OD S  F E E D BAC K LOOP  T A S K F LOW  E R R OR H A N D LI N G 8  E N H A N C ED U S E R E X P E R IE N CE  U S A B I LITY A N D E F F I CI E NC Y  R E D U C E D E R R OR S A N D F R U S TRATION  A C C E S SI BI LITY A N D I N C LU S I V ITY  BUSINESS SUCCESS  I N N OV ATI ON  E T H I C AL C ON S I D E R ATION S  I N T E R D I SC I PLI NAR Y C OLLA B ORATI ON  A D A PTATI ON T O C H A N G I NG C ON T E XTS  C ON T I N U OU S I MP R OVE ME NT H U MAN CO MPU T ER INT ER ACT IO N 9  ENHANCE USER EXPERIENCE HCI aims to create technology that is intuitive, efficient, and enjoyable for users. USABILITY AND EFFICIENCY HCI principles improve the usability of software and hardware systems. REDUCED ERRORS AND FRUSTRATION Well-designed interfaces minimize errors and frustration by guiding users through tasks and providing feedback. H U MAN CO MPU T ER INT ER ACT IO N 10  ACCESSIBILITY AND INCLUSIVITY HCI emphasizes creating technology that is accessible to a wide range of users, including those with disabilities. BUSINESS SUCCESS Products and systems that prioritize HCI often experience higher adoption rates and customer loyalty. INNOVATION Understanding human needs and behaviors drives innovation in HUMAN COMPUT E R INTERACT I O N technology design. 11  ETHICAL CONSIDERATIONS HCI acknowledges the ethical responsibility of designers to create technology that respects user privacy, autonomy, and well-being. INTERDISCIPLINARY COLLABORATION HCI bridges disciplines such as psychology, design, engineering, H U M A N COMPUT ER INTERACT I ON and social sciences. 12  A D A PTATI ON T O C H A N G I NG C ON T E X TS As technology evolves, HCI remains relevant by adapting its principles to new interfaces, emerging, and changing user behaviors. C ON T I N U OU S I MP R OVE ME NT HCI promotes iterative design cycles that involve user HUMAN COMPUTER feedback and testing. INTERACTION 13 H U MAN CO MPU T ER INT ER ACT IO N  (1940 – 1960)  The earliest computers were massive machines that used punch cards and switches for input. Interaction with these machines was limited to programming and data entry.  Researchers like Vannevar Bush envisioned interactive systems with his "Memex" concept, which proposed a device for organizing and accessing information. ENIAC UNIVAC H U MAN CO MPU T ER INT ER ACT IO N 15 COLOSSUS ( 1 9 6 0 s - 1 9 70 s )  In the 1960s, time-sharing systems emerged, allowing multiple users to interact with a computer simultaneously through text-based interfaces.  Douglas Engelbart's "Mother of All Demos" in 1968 showcased revolutionary concepts such as the mouse, hypertext, and collaborative editing. Command line UNIX Text Editors H U MAN CO MPU T ER INT ER ACT IO N 16  (1970s - 1980s)  Xerox Palo Alto Research Center (PARC) played a pivotal role with innovations like the Alto computer, featuring GUI elements like windows, icons, and menus.  Xerox's Star system introduced the first commercial GUI with mouse input in 1981.  Apple's Macintosh, released in 1984, popularized the GUI and mouse interaction for a broader Xerox Star Bitmap Apple Lisa H U MAN CO MPU T ER INT ER ACT IO N 17 (1980s - 1990s):  The WIMP (Windows, Icons, Menus, Pointing) paradigm became the foundation for GUI design.  GUI designers explored various interaction techniques, including drag-and- drop, keyboard shortcuts, and contextual menus. WIMP HUMAN COMPUT E R INTERACT I O N 18 (1990s - 2000s):  Research in touch-sensitive displays and stylus input paved the way for early touchscreens.  The Palm Pilot, released in 1996, popularized personal digital assistants (PDAs) with stylus-based interaction.  Apple's iPhone, introduced in 2007, revolutionized mobile interfaces with multi-touch gestures and a responsive touch interface. Virtual Keyboards Smartphone Revolution H U MAN CO MPU T ER INT ER ACT IO N PDAs 19  (2000s - 2010s)  Microsoft's Kinect (2010) demonstrated the potential of gesture-based interaction, allowing users to control computers using body movements.  Natural User Interfaces (NUIs) gained traction, focusing on intuitive interactions like voice commands, gestures, and touch. AR and VR Nintendo Wii H U MAN CO MPU T ER INT ER ACT IO N Microsoft Kinect 20 (2010s - Present):  The resurgence of VR and the emergence of AR introduced new HCI challenges and opportunities.  Devices like the Oculus Rift and HTC Vive brought immersive VR experiences, while AR platforms like Microsoft's HoloLens blended digital content with the physical world. H U MAN CO MPU T ER INT ER ACT IO N 21  Known for the Produced Pioneered multi- invention of the groundbreaking touch technology mouse and the work in GUI and interaction "Mother of All design and techniques. Demos." interaction DOUGLAS XEROX PARC ENGELBART techniques. JEFF HAN ALAN KAY DON NORMAN STEVE JOBS Developed the Dynabook Promoted user-centered Led the development of concept, influencing the design and coined the term user-friendly interfaces in development of GUIs. "user experience" (UX). Apple products. H U MAN CO MPU T ER INT ER ACT IO N H U MAN CO MPU T ER INT ER ACT IO N 23  Users need to receive Design should be driven feedback to confirm that their Systems should be easy for by the needs and goals actions have been registered new users to learn. of the users. and to understand the outcome of those actions. Once users have learned the system, it should allow Users should be able to see Consistency in design and them to perform tasks and understand the state of interaction patterns helps quickly and with minimal the system and the users develop a mental model effort. available options at any of how the system works, given time. which makes it easier for them to learn and use. 24 HUMAN COMPUT E R INTERACT I O N  Keep designs as simple as Design should anticipate and possible without sacrificing Users should be able to minimize errors. functionality. Avoid intuitively understand how to unnecessary complexity. interact with objects or elements in the interface based on their visual or Users have different needs Interfaces should be physical properties and preferences. System designed to be usable by should allow for people with disabilities. customization to This includes accommodate these considerations of visual, variations. auditory, motor and cognitive impairments. 25 H U MAN CO MPU T ER INT ER ACT IO N Reduce the mental effort Continuously gather user feedback and conduct required to use the system. Aesthetics matter in user usability testing to identify This includes clear experience. Clean and issues and make organization, logical grouping visually appealing designs improvements throughout the of information, and efficient can enhance user design and development workflows. satisfaction. process. Once users have learned the system, it should allow them to perform tasks quickly and HUMAN COMPUT E R INTERACT I O N with minimal effort. 26 27   USABILITY  USER-CENTERED  CLARITY  CONSISTENCY  FEEDBACK  EFFICIENCY  ACCESSIBILITY  LEARNABILITY  ERROR TOLERANCE  FLEXIBILITY HUMAN COMPUTER  MINIMAL COGNITIVE INTERACTION LOAD 28  Usability: Good design prioritizes usability. It should be easy for users to accomplish their tasks efficiently and effectively. User-Centered: User needs and preferences are at the forefront of good design. Designers understand and prioritize the users' goals and abilities. Clarity: Good design is clear and straightforward. Users should immediately understand how to interact with the interface and what each element represents. Consistency: Consistency in design elements and interaction patterns creates a sense of familiarity, making it easier for users to navigate and learn the system. 29 HUMAN COMPUTER INTERACTION  Feedback: Providing feedback to users about the outcome of their actions helps them understand the system's response and confirms that their actions have been registered. Efficiency: Good design aims to make interactions as efficient as possible, minimizing unnecessary steps or clicks required to achieve a task. Accessibility: Interfaces are designed to be inclusive, accommodating users with disabilities and providing alternative means of interaction. Learnability: Interfaces are designed to be easy for new users to learn, with clear onboarding processes and intuitive design. 30 HUMAN COMPUTER INTERACTION  Error Tolerance: Good design anticipates and handles errors gracefully, offering clear error messages and recovery options. Flexibility: Interfaces are flexible and customizable to cater to diverse user needs and preferences. Minimal Cognitive Load: Interfaces are designed to reduce the cognitive effort required to use the system, promoting efficient and enjoyable user experiences. 31 HUMAN COMPUTER INTERACTION   POOR USABILITY  IGNORING USER NEEDS  COMPLEXITY  INCONSISTENCY  LACK OF FEEDBACK  INEFFICIENCY  INACCESSIBILITY  POOR LEARNABILITY  INADEQUATE ERROR HANDLING  RIGIDITY  HIGH COGNITIVE LOAD HUMAN COMPUTER  VISUAL CLUTTER INTERACTION 32  Poor Usability: Bad design often results in poor usability, making it difficult for users to achieve their goals efficiently. Ignoring User Needs: Ignoring or misunderstanding user needs and preferences can lead to frustration and dissatisfaction. Complexity: Unnecessarily complex interfaces confuse users and make tasks more challenging than they need to be. Inconsistency: Inconsistent design elements and interaction patterns can confuse users and hinder their ability to navigate the system. Lack of Feedback: Failing to provide feedback on user actions leaves users uncertain about whether their actions were 33 successful. HUMAN COMPUTER INTERACTION  Inefficiency: Inefficient interfaces require users to perform unnecessary actions, wasting time and effort. Inaccessibility: Bad design often overlooks accessibility considerations, excluding users with disabilities. Ignoring User Needs: Ignoring or misunderstanding user needs and preferences can lead to frustration and dissatisfaction. Poor Learnability: Interfaces that are difficult to learn deter new users and may result in high abandonment rates. Inconsistency: Inconsistent design elements and interaction patterns can confuse users and hinder their ability to navigate the system. 34 HUMAN COMPUTER INTERACTION  Inadequate Error Handling: Interfaces that do not handle errors well can frustrate users and lead to further mistakes. Rigidity: Interfaces that lack flexibility and customization options may not meet the diverse needs of users. High Cognitive Load: Interfaces that overwhelm users with information or require excessive mental effort can lead to user frustration and errors. Visual Clutter: Cluttered and disorganized interfaces make it challenging for users to focus on relevant information and tasks. 35 HUMAN COMPUTER INTERACTION H U MAN CO MPU T ER INT ER ACT IO N 36  EMPATHIZE:  The first stage of HCD involves gaining a deep understanding of the users and their needs. This often includes conducting user research through methods like interviews, surveys, observations, and usability testing.  Designers aim to empathize with users, putting themselves in the users' shoes to understand their pain HUMAN COMPUT E R INTERACT I O N points, challenges, and aspirations. 37  DEFINE:  After gathering insights from the empathize stage, designers define the specific problems or opportunities that need to be addressed.  Creating a clear and concise problem statement is crucial in this stage. It sets the direction for the design process and ensures that designers focus on solving the HUMAN COMPUTER INTERACTION right problems. 38  IDEATE:  Ideation involves generating a wide range of creative solutions to the defined problems. This is a brainstorming phase where designers explore various concepts, ideas, and approaches.  Collaborative workshops, design thinking sessions, and sketching are common techniques used in this stage to encourage creativity and innovation. HUMAN COMPUTER INTERACTION 39  PROTOTYPE:  Prototyping is the process of creating low-fidelity or high- fidelity representations of the proposed solutions. These prototypes can be physical or digital.  Prototypes help designers and users visualize and interact with the design concepts, providing HUMAN COMPUTER valuable feedback and insights. INTERACTION 40  TEST:  The testing phase involves gathering user feedback by allowing users to interact with the prototypes. It's essential to observe how users engage with the design and collect their feedback.  Iterative testing and refinement are key aspects of HCD. Designers use the feedback to make improvements and refine the prototypes. HUMAN COMPUTER INTERACTION 41 42  USER RESEARCH  Conduct interviews, surveys, observations, and contextual inquiries to gather qualitative and quantitative data about user behaviors, goals, and pain points.  PERSONAS  Create user personas, which are fictional representations of typical users. Personas help designers empathize with and design for specific user groups. 43  USER JOURNEYS  Map out user journeys to understand the entire user experience, from initial interaction to achieving their goals.  USABILITY TESTING  Observe users as they interact with prototypes or existing products to identify usability issues and gather feedback. 44 DIVERSITY:  Recognize that users come from diverse backgrounds, cultures, and experiences. Design for inclusivity by considering a wide range of user characteristics and preferences HUMAN COMPUTER INTERACTION 45 INCLUSIVITY:  Ensure that the design accommodates users with different abilities, including those with disabilities. This may involve following accessibility guidelines and conducting usability testing with diverse user groups. HUMAN COMPUTER INTERACTION 46 ACCESSIBILITY:  Design interfaces and interactions that are accessible to all users, including those with visual, auditory, motor, or cognitive impairments. This includes providing alternative text for images, keyboard navigation options, and other accessibility features. H U MAN CO MPU T ER INT ERACT IO N 47 48