Human Computer Interaction Lecture Notes

Human Computer Interaction Lecture Notes

1. MODULE 1 FOUNDATION OF HUMAN COMPUTER INTERACTION

2. WHAT IS HUMAN-COMPUTER INTERACTION (HCI)? Human-Computer Interaction (HCI) is the study of how people interact with computers and how to make those interactions easier and more effective. It combines ideas from different fields like computer science, psychology, and design to create user-friendly systems. Introduction

3. HCI started in the 1980s when personal computers became common in homes and offices. Over time, as technologies like the internet, mobile devices, and voice-based systems developed, HCI grew to focus on making these technologies simple and enjoyable to use. Today, HCI is all about designing interfaces that give users a better experience. In this module, we’ll learn about the key parts of an interactive system: the user, the computer, and how they work together.

4. LEARNING OUTCOMES At the end of this module, students should be able to: 1. define the what is foundation of HCI; 2. provide us with a basic overview of the capabilities and limitations that affect our ability to use computer systems. 3. understand the user at this level that we can understand what makes for successful designs and describe what human’s information processing capabilities. 4. distinguish the key components of HCI and even the goals, importance, principles and scope of HCI.

5. LESSON 1: WHAT IS HUMAN-COMPUTER INTERACTION (HCI)? Human-Computer Interaction focuses on designing and improving computer systems to make them user-friendly, efficient, and enjoyable (www.simplilearn.com). HCI specialists work on developing computer systems that meet users' needs, focusing on improving how people interact with and understand interfaces.

6. LESSON 2: THE RISE OF HCI (WWW.SIMPLILEARN.COM) Human-Computer Interaction (HCI) started in the 1980s to make computers easier to use. A big change happened in 1984 when Apple introduced the Macintosh, which used a mouse, keyboard, and icons to help people interact with computers more easily. Example: The Macintosh introduced a mouse and graphical icons that allowed users to click and navigate easily, instead of typing only commands, making it more beginner-friendly.

7. LESSON 3: IMPORTANCE OF HCI HCI is important for creating easy-to-use interfaces for people with different skills and abilities. It helps those who are not trained in using computers by making systems simpler. Good HCI design ensures that interactions are clear and easy to understand ( www.spiceworks.com ).

8. 1. Enhancing User Experience HCI helps make technology easy to use and enjoyable. When users are happy with the experience, they use it more often and effectively. Example: A smartphone with simple touch gestures makes it easier for everyone to use, even for beginners. 2. Increasing Productivity and Efficiency HCI makes tasks simpler and faster, helping people work more efficiently, especially in businesses and healthcare. Example: A well-designed app for managing tasks can help employees finish their work faster by making it easy to organize their schedule.

9. 3. Reducing Errors and Frustration Well-designed systems reduce mistakes and user frustration, which is important in fields like healthcare and aviation. Example: A GPS app with clear directions prevents drivers from getting lost and reduces frustration. 4. Enhancing Accessibility and Inclusivity HCI ensures that even people with disabilities can use technology, making it fair and inclusive for all. Example: Speech-to-text software helps people with disabilities by allowing them to type using their voice.

10. 5. Improving Decision-Making HCI shows information in simple ways, helping users understand data and make better decisions. Example: A simple bar chart helps people quickly understand sales data and make smart business decisions. 6. Enhancing Safety In systems like self-driving cars or medical devices, HCI makes sure the interface is safe to use and prevents accidents. Example: In a self-driving car, a clear display showing road conditions helps the driver understand when to take control.

11. 7. Driving Innovation HCI helps design new ways to interact with technology, like touchscreens and voice assistants, making them easy to use. Example: Voice assistants like Siri or Alexa make it easy to control your phone or home devices just by talking. 8. Adapting to Changing Technologies HCI adapts to new tools and ensures users can understand and use them easily. Example: Virtual reality (VR) headsets have simple controls so users can easily explore 3D environments.

12. 9. Ethical Considerations HCI ensures technology is designed responsibly, protecting privacy and treating everyone fairly. Example: A website with clear privacy settings allows users to control what information they share. 10. Competitive Advantage Products with user-friendly designs attract more customers, increasing profits and success. Example: Online shopping websites with easy checkout systems encourage more people to buy products.

13. 11. User Satisfaction and Loyalty A good experience makes users happy and loyal, encouraging them to recommend the product to others. Example: A video streaming app with personalized recommendations makes users want to keep using it and recommend it to friends. 12. Cost Savings Simple, user-friendly designs reduce errors and customer support needs, saving time and money. Example: A simple online banking app reduces the need for customers to call for help, saving time and support costs.

14. LESSON 4: COMPONENTS OF HUMAN-COMPUTER INTERACTION HCI is primarily composed of four essential elements: 1. The User Focuses on the needs, goals, and interaction styles of individuals or groups. It’s important to understand how users perceive information through their senses (sight, hearing, touch) and how they learn and remember things. Cultural and national differences also affect how users interact with technology. Example: If a student uses a tablet to learn, the user is the student. The student's needs and how they use the tablet (e.g., reading or watching videos) are important to consider when designing educational apps.

15. COMPONENTS OF HUMAN-COMPUTER INTERACTION HCI is primarily composed of four essential elements: 2. The Goal-Oriented Task Every user has a specific purpose when using a computer or device. The computer helps achieve this goal by providing a digital representation of things. This could apply to any technology, like desktop computers, websites, or mobile phones. Example: A person using a mobile phone to send a text message. Their goal is to communicate with someone, and the phone helps them achieve this by providing an easy way to type and send messages.

16. COMPONENTS OF HUMAN-COMPUTER INTERACTION HCI is primarily composed of four essential elements: 3. The Interface The interface is key to improving user interaction and should consider factors like type of interaction, screen size, and color contrast. HCI focuses on making sure humans and machines interact well with each other. Balancing ideal user needs with real-world limits like budget and time is important. Example: A website with buttons, text, and images that users can click to find information. The design (like button sizes, colors, and layout) makes it easier or harder for users to interact with the site.

17. COMPONENTS OF HUMAN-COMPUTER INTERACTION HCI is primarily composed of four essential elements: 4. The Context HCI also considers the environment in which the system is used, not just the interaction itself. The context and setting play an important role in how users interact with the technology. Example: A person using a navigation app in their car. The context (driving) requires the interface to be simple and easy to use without distracting them, making it safer and more effective for the user.

18. LESSON 5: EXAMPLES OF HCI Prominent examples of HCI that have accelerated its evolution: Technological advancements have significantly influenced human-computer interaction (HCI). The Internet of Things (IoT) has revolutionized how users interact with devices, collecting data that helps businesses improve their products. One notable example is pre-touch phones, which can detect the user’s hand movements and predict actions even before the user touches the screen.

19. EXAMPLES OF HCI Prominent examples of HCI that have accelerated its evolution: Eye-tracking technology is another advancement in HCI that uses cameras to detect where a person is looking. This technology is used in various applications, such as monitoring drivers' attention for road safety. In the future, it may allow users to scroll through screens by simply moving their eyes. Speech recognition technology has made it easier to interact with devices using voice commands. Popular examples include Amazon’s Alexa, Apple’s Siri, and Google Assistant, which understand spoken language and perform tasks accordingly.

20. EXAMPLES OF HCI Augmented reality (AR) and virtual reality (VR) technologies have enhanced the user experience by immersing users in digital environments. Smart glasses, for example, allow users to interact with information hands-free, such as chefs following recipes while cooking. Additionally, VR gloves like the Dexta Haptic Gloves replicate touch sensations, allowing users to feel virtual objects. Cloud computing has transformed workplaces by enabling remote work. Employees can access data stored in the cloud from anywhere, streamlining workflows and supporting collaboration. Services like Google Drive and other cloud-based tools have made remote work more efficient and productive.

21. LESSON 6: GOALS OF HCI In Human-Computer Interaction (HCI), the main goal is to create systems that are easy, safe, and efficient for users. Developers can achieve this by: Understanding how users interact with computing systems: This helps ensure the system meets their needs. Designing tools and methods that cater to users' needs: This means designing interfaces and features that are easy for users to access and understand. Testing and refining the system: Developers must test systems to make sure users can interact with them effectively and smoothly. Prioritizing users: The needs of the users should always be the main focus during the design and development process.

22. TO ACHIEVE THESE GOALS, DEVELOPERS FOCUS ON TWO KEY AREAS: USABILITY AND USER Usability is essential in HCI because it makes systems easier for users to learn and use. A usable system should have these characteristics: Easy to learn: A good system is simple to understand and remember. For example, an operating system with a simple, user-friendly interface is easier to use than one with a command-line interface like DOS. Usability

23. TO ACHIEVE THESE GOALS, DEVELOPERS FOCUS ON TWO KEY AREAS: USABILITY AND USER Safe: A safe system prevents users from making harmful mistakes that could lead to negative outcomes. For example, a system could prevent users from pressing dangerous buttons by accident. It could also have recovery options to help users fix mistakes, encouraging them to explore the system without fear. Efficient: An efficient system helps users complete tasks quickly and accurately. It should support users in achieving their goals without unnecessary steps.

24. TO ACHIEVE THESE GOALS, DEVELOPERS FOCUS ON TWO KEY AREAS: USABILITY AND USER Effective: An effective system performs well and allows users to achieve the desired results. Utility: Utility refers to the features and tools the system provides to help users complete their tasks. For example, an integrated development environment (IDE) that offers helpful suggestions for programmers is useful. Enjoyable: A system is enjoyable to use if it is not complicated and is fun to interact with. Users should feel comfortable and happy using it.

25. TO ACHIEVE THESE GOALS, DEVELOPERS FOCUS ON TWO KEY AREAS: USABILITY AND USER EXPERIENCE User experience (UX) is how users feel when interacting with a system. It is subjective and varies from person to person. Developers focus on creating positive experiences for users by studying how they feel during interactions. In HCI, user interactions are classified into two categories based on feelings: Desirable traits: These include feelings like satisfaction, enjoyment, motivation, or surprise. These are the positive emotions developers aim to evoke in users. Undesirable traits: These include feelings like frustration, unpleasantness, or annoyance. Developers try to avoid these negative feelings by improving system design and interaction patterns. User Experience

26. LESSON 7: PRINCIPLES OF HCI Researchers and designers in the field of human-computer interaction have established numerous concepts. These regulations range from general norms and design guidelines to abstract design principles. Let's look at the most crucial HCI guidelines. • Design for familiarity and learnability • Make the elements readable and approachable. • Tolerance for errors • Flexibility

27. LESSON 8: FUTURE SCOPE OF HCI The most recent prototypes being created by businesses around the globe employing HCI theories include the following: • Dexta haptic gloves • Pre-touch sensing • PaperID

28. ANY QUESTIONS?

29. THANK YOU FOR LISTENING!

30. ACTIVITY #1

31. QUIZ #1 Next Meeting via iLearnU Face to face

32. ASSESSMENT #1 via iLearnU

33. HUMAN COMPUTER INTERACTION 2

34. MODULE 2 WHAT IS INTERACTION DESIGN?

35. WHAT IS INTERACTION DESIGN? Mistakes can still happen with "user-friendly" systems because designers often fail to fully test them in real-world scenarios or assume users won’t make errors. Examples like the difficulty of programming VCRs or adjusting car radios while driving show that many devices are not designed with the user’s actual needs in mind. Designers must focus on how users interact with systems, ensuring they are intuitive, support tasks smoothly, and allow for recovery from errors. Introduction

36. The study of Human-Computer Interaction (HCI) is essential because creating consistent and user-friendly interfaces is not as simple or natural as it seems. Interfaces should be developed as part of the system design from the beginning, not added later. They must be more than visually appealing—they should help users accomplish tasks effectively and handle mistakes. Moreover, designing usable systems is a legal obligation in many cases. National health and safety standards require systems to be not only safe but also easy to use, emphasizing the importance of HCI in creating systems that meet both user needs and legal requirements.

37. LEARNING OUTCOMES At the end of this lesson, the student should be able to: 1. Explain the difference between good and poor interaction design. 2. Describe what interaction design is and how it relates to human-computer interaction and other fields. 3. Explain the relationship between the user experience and usability. 4. Introduce what is meant by accessibility and inclusiveness in relation to human- computer interaction. 5. Describe what and who is involved in the process of interaction design. 6. Outline the different forms of guidance used in interaction design. 7. Enable you to evaluate an interactive product and explain what is good and bad about it in terms of the goals and core principles of interaction design.

38. LESSON 1: GOOD AND POOR DESIGN Interaction design aims to create products that are easy, effective, and enjoyable to use. Usability is understood by comparing poorly and well-designed products, such as hotel voice-mail systems and remote controls.

39. IMPORTANCE OF INTERACTION DESIGN Goal: Design usable interactive products. Usable Product Characteristics: Easy to learn. Effective to use. Enjoyable user experience. Approach: Compare poorly-designed and well-designed products to identify what works.

40. EXAMPLE 1 – VOICE-MAIL SYSTEM (POOR DESIGN) (Hotel Voice-Mail): You see a blinking red light on the phone, indicating a message. Instructions: Touch 41 – System says: “Enter the room number to leave a message.” *Touch , room number, and # – System says: “Enter your password.” Confusing system: Users don’t know the password (e.g., phone extension).

41. Features: Marbles indicate the number of messages (visual cue). Easy one-step actions: Move a marble to play or respond to a message. Aesthetic and enjoyable. Example: Picking up a marble is intuitive, like everyday actions. Limitations: Not practical in hotels: Marbles could get lost or stolen. No user security (anyone can listen to messages). EXAMPLE 1 – MARBLE ANSWERING MACHINE (GOOD DESIGN)

42. EXAMPLE 2 – REMOTE CONTROL (POOR DESIGN) Generic Remote Issues: Overloaded with buttons (“buttonitis”). Buttons have small text and unclear labels. Arbitrary button placement adds confusion. Example Problem: Struggling to find the "pause" button or main menu. Users need reading glasses to navigate controls.

43. Features: Large, clearly labeled buttons logically arranged. Peanut-shaped design fits comfortably in the hand. Colorful, cartoon-like icons make buttons easy to identify. Menu options for secondary functions reduce button clutter. User-Centered Design Process: Feedback from users guided the design. Avoided unnecessary buttons and ensured usability. Result: A highly usable, award-winning design. EXAMPLE 2 – TIVO REMOTE CONTROL (GOOD DESIGN)

44. KEY TAKEAWAYS FROM BOTH EXAMPLES User-Centered Design Matters: Consider users’ needs and contexts (e.g., home vs. hotel use). Get user feedback early in the design process. Simplicity and Clarity: Avoid overloading users with too many steps or buttons. Provide clear instructions and intuitive actions. Example: TiVo limited buttons and simplified controls. Context is Key: Example: Marble answering machine works for homes, not hotels.

45. LESSON 2: WHAT TO DESIGN? Purpose of Interaction Design: Design products that are usable, effective, and pleasurable, tailored to users’ needs and activities. Key Considerations: Who will use it, how, and where. Interface Options: Multitouch, speech systems, wearables, etc. Technological Trends: IoT: Smart home systems, parking apps, and more. Digital Interaction: Self-checkouts and consumer electronics

46. LESSON 2: WHAT TO DESIGN? Design Goals: Optimize systems for user needs and activities. Use user-centered techniques: Understand user strengths and weaknesses. Identify needs and involve users in design. Question: How can we support users’ activities effectively and enjoyably?

47. LESSON 3: WHAT IS INTERACTION DESIGN? (SHARP, 2019) Designing interactive products to support how people communicate and interact. Focus: Enhancing everyday and working lives.

48. DEFINITIONS OF INTERACTION DESIGN What is Interaction Design? "Designing spaces for human communication and interaction" - Terry Winograd, 1997 "Why and how of daily interactions using computers" - John Thackara, 2001 "Art of facilitating human interactions through products/services" - Dan Saffer, 2010 2. Synonyms or Related Terms User Interface (UI), User Experience (UX), Software Design, Product Design, etc. UX often used in industry for interaction design roles.

49. COMPONENTS OF INTERACTION DESIGN Core Areas of Interaction Design: Cognitive Ergonomics Human-Computer Interaction (HCI) Information Systems (e.g., business, health, education applications) Ubiquitous Computing (IoT and pervasive technologies) Example: IoT enables smart homes (e.g., control heating or lighting from your phone). HCI improves usability in self-checkouts at stores.

50. WHO IS INVOLVED IN INTERACTION DESIGN? Multidisciplinary Teams: Designers, engineers, programmers, sociologists, artists, marketing experts, etc. Collaboration leads to creative and original designs. Challenges: Misunderstanding due to different professional terms or perspectives. Example: "Representation" means different things to a graphic designer vs. a computer scientist.

51. CONSIDERATIONS FOR DESIGNERS Understand: How people act/react to events. Emotional aspects (aesthetics, desirability, narrative). Business, technical, manufacturing, and marketing aspects. Questions: Why is teamwork crucial in interaction design? How can different perspectives improve designs?

52. INTERACTION DESIGN IN PRACTICE Benefits of Teamwork: More ideas, new methods, and creative designs. Downside: Communication challenges in diverse teams. Example: A toy designer, a marketer, and a programmer may all view "interaction" differently, causing potential miscommunication. Discussion Point: What strategies can improve communication in multidisciplinary teams?

53. LESSON 4: THE USER EXPERIENCE (SHARP, 2019) User experience (UX) refers to how a product behaves and is used by people in the real world. Quote: "Every product that is used by someone has a user experience." — Jesse Garrett (2010) Focus: Emotional appeal, satisfaction, and the sensual effect of interacting with a product.

54. ASPECTS OF USER EXPERIENCE Sensual Experience: Touch, sound, and visual appeal (e.g., how a smartphone feels in hand). Types of Experiences: Quick (e.g., taking a photo), leisurely (e.g., interactive toys), and integrated (e.g., visiting a museum). Quality of Experience: Joy, excitement, and overall satisfaction.

55. DESIGNING FOR USER EXPERIENCE 1. Designing for UX, not designing UX itself: UX is shaped by design features (e.g., smooth edges on a smartphone) that evoke feelings. 2. UXD (User Experience Design): Emphasizes quality of experience over methods. 3. Designing for Joy: Creating products that are not only usable but also delightful and elegant.

56. USER EXPERIENCE VS. USABILITY UX vs UI: The overall user experience goes beyond just the user interface. Usability Definition: A quality of the UI that focuses on efficiency, learnability, and safety. Example: A perfect UI doesn’t ensure a good UX if the underlying content doesn't meet the user's needs.

57. FACTORS AFFECTING USER EXPERIENCE Key Aspects: Usability Functionality Aesthetics Emotional appeal Additional Considerations (Jack Carroll, 2004): Fun, health, social capital, cultural identity.

58. UNDERSTANDING USERS Context Matters: Different users have different needs (e.g., scientists vs. furniture store sales agents). Individual Differences: Age, gender, occupation, and abilities shape user expectations. Example: Children vs. adults in learning or playing contexts.

59. CULTURAL AND AGE CONSIDERATIONS Cultural Sensitivities: Different countries may have varying expectations and needs. Age Sensitivities: Not all older adults prefer larger fonts or simplified designs. Some may enjoy smaller, more compact interfaces. Design Challenges: Consider global use and local preferences.

60. ACCESSIBILITY AND INCLUSIVENESS Accessibility: Ensures products can be used by people with disabilities. Inclusiveness: Ensures products are open to all, regardless of age, income, or ability. Example: Google and Apple’s tools for accessibility (e.g., VoiceOver, screen readers).

61. TYPES OF IMPAIRMENTS Categories of Impairments: Sensory: Hearing or vision loss. Physical: Mobility impairments. Cognitive: Learning disabilities, aging-related conditions. Assistive Technologies: Examples include screen readers for the visually impaired and hearing aid compatibility.

62. DESIGNING FOR DIFFERENT ABILITIES Impairments: Permanent, temporary, and situational. Design Approach: Use inclusive design for a broad range of users; assistive technology for specific needs. Usability and User Experience Goals Usability Goals: Effectiveness, efficiency, safety, utility, learnability, and memorability. User Experience Goals: Aesthetic and emotional appeal. Goal: Design products that meet usability standards while also offering a pleasant and meaningful experience.

63. The concept of User Experience (UX) goals, contrasting them with usability goals, which are more objective. UX goals deal with how users feel when interacting with a system, while usability goals focus on how useful or productive a system is. The terms used to describe UX goals reflect a broad range of emotions and experiences that vary based on the activity, technology, and place. For instance, the experience of listening to music changes depending on where it's happening (e.g., in the shower vs. in the car) and how it’s being experienced (e.g., through a high-end sound system vs. a smartphone with shuffle mode).

64. Concepts in UX Goals: Desirable vs. Undesirable Experiences: These qualities reflect subjective feelings and vary widely, depending on personal perspectives and the context of use. Flow: A central concept in UX, flow refers to a state of deep emotional engagement where users lose track of time because they are so absorbed in an activity. Designers aim to design experiences that lead users into this flow state, such as guiding visitors through unexpected yet captivating experiences on websites. Micro-Interactions: These are small, often repetitive actions that bring enjoyment, such as turning a perfectly resistant knob or swiping on a smartphone screen to reveal a new menu. Though minor, these actions can significantly impact how users feel about the product.

65. LESSON 5: DESIGN PRINCIPLES (SHARP, 2019) Design principles guide interaction designers in creating effective user experiences. They help designers think about aspects like feedback (informing users of actions taken), findability (ease of locating objects), and navigability (clarity in interface navigation). These principles, based on theory, experience, and common sense, suggest what should and shouldn't be included in designs but don't specify how to create specific interface elements. Key principles include:

66. 1. VISIBILITY The principle of visibility suggests that the more visible functions are, the more likely users will know what actions to take. Example: In cars, the clear visibility of controls like the horn, headlights, and hazard warning lights makes them easy to operate. In contrast, invisible or poorly designed controls (like automated faucets) can cause confusion and frustration.

67. 2. FEEDBACK Feedback is crucial to informing users about the effects of their actions. Without feedback, users would struggle to know whether their actions are successful (e.g., trying to play a guitar without hearing the sound). It can take various forms: audio, tactile, verbal, or visual, depending on the context.

68. 3. CONSTRAINTS Constraints restrict the possible actions a user can take at any given time. Example: Grayed-out menu options in graphical user interfaces prevent users from selecting unavailable actions. Physical design constraints, like specific slots for cables in a computer, also guide correct use.

69. 4. CONSISTENCY A consistent interface uses similar operations and elements for similar tasks, making it easier for users to learn and use. For example, always using the same mouse button to select objects creates a predictable environment for users. However, as interfaces become more complex, consistency can be challenging to maintain.

70. 5. AFFORDANCE Affordance refers to an object's design that intuitively suggests how to interact with it. Example: A door handle invites pulling, a cup handle suggests grasping, and a mouse button encourages clicking. For screen-based interfaces, affordances are more about perceived cues that indicate how a user should interact with buttons, icons, and links.

71. LESSON 6: APPLYING DESIGN PRINCIPLES IN PRACTICE 1. Trade-offs in Design Principles: Visibility vs. Constraints: Striving to constrain an interface can sometimes result in less visible information, making it harder for users to find what they need. Affordance vs. Clutter : Trying to design an interface to closely resemble physical objects for intuitive affordances can lead to a cluttered and confusing layout. Aesthetic vs. Usability: Focusing too much on aesthetic appeal can compromise the usability of an interface. Consistency vs. Flexibility: Consistency is a desirable design principle, but attempting to enforce it too strictly can sometimes lead to inconsistencies elsewhere, reducing overall functionality.

72. LESSON 6: APPLYING DESIGN PRINCIPLES IN PRACTICE 2. The Knife Analogy: Jonathan Grudin’s example of knife storage is used to explain the balance between consistency and flexibility in design. While storing knives consistently in one place might seem intuitive, certain knives (e.g., carving knives or special occasion knives) need to be placed in different locations for practical reasons. This introduces inconsistency but makes the system more functional and user-friendly in the context of their use. 3. Design Inconsistency in Practice: Sometimes, introducing inconsistency in design makes it easier for users to locate and use elements, similar to how knives are stored in different locations depending on their usage context. Though the inconsistency might make learning the system harder initially, it could enhance usability in the long term.

73. ANY QUESTIONS?

74. THANK YOU FOR LISTENING!

75. QUIZ #2 Next Meeting via iLearnU Face to face

76. ASSESSMENT #2 via iLearnU

77. HUMAN COMPUTER INTERACTION 2