Human-Computer Interaction (HCI) Design Lecture PDF

Human-Computer Interaction (HCI) Design Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Recap: Outline Course structure and objectives. Why do we need to study design? What is HCI? Building HCI project...

Human-Computer Interaction (HCI) Design Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Recap: Outline Course structure and objectives. Why do we need to study design? What is HCI? Building HCI project. Demonstration of sample HCI projects. Tutorial on good design design vs. bad design. Weekly assignment. Recap: Through the thoughtful design of user interfaces, the creation of intuitive systems, and the inclusion of diverse needs, HCI maximizes human potential by enabling people to perform tasks more efficiently, learn more effectively, communicate and collaborate seamlessly, and access opportunities that may have been otherwise inaccessible. This not only enhances individual capabilities but also contributes to the collective advancement of society, making technology a tool for empowerment, creativity, and innovation. As digital experiences become central to our daily lives, understanding Human-Computer Interaction (HCI) is more critical than ever. “Good design is good business.” – Thomas Watson Jr., Former IBM President Outline What is design What to design Interaction design What are inclusivity, accessibility, and design principles Tutorial on inclusivity, accessibility and design principles Panel discussion on design principles Hands on experience with Canva Weekly assignment Human-Computer Interaction (HCI) Design - Part 1 Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Outline What is design What to design Interaction design What are inclusivity, accessibility, and design principles Tutorial on inclusivity, accessibility and design principles Panel discussion on design principles Hands on experience with Canva Weekly assignment What is design “...what we are working on is going to be ridden in, sat upon, looked at, talked into, activated, operated, or in some way used by people individually or en masse. If the point of contact between the product and the people become a point of friction, then the industrial designer has failed. If, on the other hand, people are made safer, more comfortable, more eager to purchase, more efficient - or just plain happier - the designer has succeeded.” Henry Dreyfuss, a renowned American industrial designer. What is design Henry Dreyfuss’s quote captures the essence of human-centered design, an approach that places the needs, comfort, and safety of users at the heart of the design process. Let's break down what he meant in detail: Interaction as Key to Success Reducing Friction Positive Outcomes for People Success Criteria for Designers Interaction as key to success Products are not isolated objects and people interacts with them in various ways; they are meant to be “ridden in, sat upon, looked at, talked into, activated, operated, or in some way used.” This makes understanding how people will physically and emotionally interact with a product crucial for its success. If the product feels uncomfortable, unintuitive, or * Image generated by Adobe Firefly frustrating, it’s failing to serve its purpose, regardless of how technically advanced it may be. Interaction as key to success Despite its technological sophistication, Google Glass failed commercially due to privacy concerns with its camera, socially awkward design, limited functionality that didn't justify its high price, and short battery life that hindered usability. https://timesofindia.indiatimes.com/ AP Photo/Godofredo A. Vásquez Reducing friction "points of friction," refers to any aspect of the product that could disrupt or hinder the user’s experience. Friction could be caused by confusing controls, uncomfortable materials, or a lack of ergonomic consideration. For example, a chair designed without proper back support would create physical discomfort for the user, failing its purpose as a * Image generated by Adobe Firefly functional object. A designer’s job is to anticipate and minimize these pain points to ensure a smooth, pleasant experience. Positive outcomes for people The mark of successful design, is whether the product makes people’s lives better. If people feel “safer, more comfortable, more eager to purchase, more efficient – or just plain happier,” then the product is effectively designed. This means that products should not only function well but also fulfill a deeper role by contributing positively to people’s lives. * Image generated by Adobe Firefly For instance, a well-designed smartphone isn’t just technologically advanced; it’s easy to hold, intuitive to use, and becomes a tool that simplifies and enhances daily activities. Success criteria for designers Outlining a framework for evaluating design success. A designer’s role goes beyond creating something aesthetically pleasing. True success is achieved when the designer’s work resonates with users on a functional and emotional level, fostering a sense of connection, usability, and satisfaction. * Image generated by Adobe Firefly Conclusion: what is design Dreyfuss’s approach to design was pioneering because he pushed for products to be user-centered in every possible way. He conducted extensive research into how people interacted with products and incorporated those insights into his designs. His work highlights the responsibility of designers to think beyond aesthetics, focusing instead on how their designs will make people feel and perform in real life. This philosophy laid the foundation for modern human-centered and user-experience (UX) design, which remain fundamental to how we approach design challenges today. Outline What is design What to design Interaction design What are inclusivity, accessibility, and design principles Tutorial on inclusivity, accessibility and design principles Panel discussion on design principles Hands on experience with Canva Weekly assignment Case study 1: remote control www.id-book.com Case study 1: remote control www.id-book.com Look around in real world and think about: Have you encountered any bad design? What problems did you face? Share your experience? Have you ever thought about solutions? Is your solution optimal? How to find the best solution? How to ensure that your solution solves the problem indeed? Is your solution perfect? Is it the end? Case study 1: remote control for smart TV Dilemma: Which is the best way to interact with a smart TV? “Technology should adapt to our needs, not the other way around.” – Donald Norman e.g., Adaptive and Predictive Typing on Smartphones, like the autocomplete and autocorrect features found in keyboards. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Dilemma: Which is the Best Way to Interact with a Smart TV? Pecking Using a Grid Keyboard via a Remote Control Swiping Across Two Alphanumeric Rows Using a Touchpad on a Remote Control Voice Control Using a Remote or Smart Speaker Gesture Control Using a Camera Sensor Mobile App as a Remote Smartwatch Control Voice and Touchpad Combination on Remote Control Augmented Reality (AR) Interface Using a Smartphone or AR Glasses Motion-Controlled Remote (Gyroscopic Sensor) Case study 1: remote control for smart TV Pecking Using a Grid Keyboard via a Remote Control: Pros: Familiar and precise for those accustomed to traditional remote interfaces. Cons: Slow and cumbersome, especially for long text input; not intuitive for modern users. www.id-book.com Case study 1: remote control for smart TV Swiping Across Two Alphanumeric Rows Using a Touchpad on a Remote Control: Pros: Faster than pecking; uses familiar gestures like swiping, more intuitive. Cons: Limited speed and accuracy; requires coordination and might be challenging for older or less tech-savvy users. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Voice Control Using a Remote or Smart Speaker: Pros: Fast, hands-free, intuitive, and ideal for quick commands like searching for shows or controlling playback. Cons: May struggle with accuracy in noisy environments or accents; requires clear speech. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Gesture Control Using a Camera Sensor: Pros: Hands-free, no need for a physical device; engaging and futuristic. Cons: Gesture detection can be inaccurate, especially in poor lighting; may have a steep learning curve for precise actions. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Mobile App as a Remote: Pros: More precise controls with touchscreen; enables text input through a smartphone keyboard Cons: Requires having a smartphone on hand; potential connectivity issues. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Smartwatch Control: Pros: Quick access to basic commands (volume, channel change) from the wrist; hands-free convenience. Cons: Limited functionality due to small screen; not suitable for complex interactions. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Voice and Touchpad Combination on Remote Control: Pros: Combines the flexibility of voice with the precision of touch; allows for a seamless switch between input modes. Cons: May be confusing for users to decide which input method to use for different tasks. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Augmented Reality (AR) Interface Using a Smartphone or AR Glasses: Pros: Can provide additional context (e.g., show details of a show when pointing at the screen); immersive and engaging. Cons: Requires additional devices like AR glasses or a smartphone; complex setup. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Motion-Controlled Remote (Gyroscopic Sensor): Pros: Allows for intuitive pointing and clicking by moving the remote; fast for navigation. Cons: Can be tiring to hold and point for extended periods; requires steady hand movements. * Image generated by Adobe Firefly Case study 1: remote control for smart TV Conclusion Best Choice: Voice Control (with a combination of other methods for flexibility). Why: ○ Voice commands offer the most natural and hands-free interaction, enhancing usability. * Image generated by Adobe Firefly ○ Combining voice with touchpad or mobile app can provide a balance of convenience and precision. ○ Advanced methods like gesture or AR are promising but currently limited in accessibility and accuracy. “The goal is not to make people interact with the technology but to make technology seamlessly integrate with their lives.” – Unknown Activity 1: best way to interact What are the possible ways to interact with a map in a car, and which is the best option among them? What are the possible ways to interact with a family member when you are in class and sitting in the first row in front of the instructor, and which is the best option among them? * Image generated by Adobe Firefly What to design Need to take into account: ○ Identify who the users are. ○ Understand the activities they are performing. ○ Determine the context in which the interaction is happening. Focus on optimizing user interactions with the product: ○ Ensure they align with the users' tasks and requirements. Interaction design Definition: “Designing interactive products to support the way people communicate and interact in their everyday and working lives.” Sharp, Rogers, and Preece (2019) “The design of spaces for human communication and interaction.” Winograd (1997) Goals: Develop usable products Usability means easy to learn, effective to use, and provides an enjoyable experience Solution: Involve users in the design process User experience Definition: How users perceive a product, such as whether a smartwatch is seen as sleek or chunky, and their emotional reaction to it, such as whether people have a positive experience when using it. (Hornbæk and Hertzum, 2017) Key: It is not enough that we build products that function, that are understandable and usable, we also need to build joy and excitement, pleasure and fun, and yes, beauty to people’s lives. www.id-book.com User experience How a product behaves and is used by people in the real world The way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it “Every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010) “All aspects of the end-user's interaction with the company, its services, and its products. (Nielsen and Norman, 2014) Cannot design a user experience−only can design for a user experience www.id-book.com Usability and user experience goals Selecting terms to convey a person’s feelings, emotions, and so forth can help designers understand the multifaceted nature of the user experience How do usability goals differ from user experience goals? Are there trade-offs between the two kinds of goals? (e.g., can a product be both fun and safe?) How easy is it to measure usability versus user experience goals? www.id-book.com Usability and user experience goals Desirable aspects Satisfying, Helpful, Fun, Enjoyable, Motivating, Provocative Engaging, Challenging, Surprising, Pleasurable, Enhancing sociability Exciting, Supporting creativity, Emotionally fulfilling, Rewarding Entertaining, Cognitively stimulating, Experiencing flow Undesirable aspects Boring, Unpleasant, Frustrating, Patronizing, Annoying, Cutesy Making one feel guilty, Making one feel stupid, Childish, Gimmicky www.id-book.com Case study 2: Tesla car launch success Why was the Tesla car user experience such a success? Quality user experience from the beginning Simple, elegant, distinct brand, pleasurable, must have thing, catchy names, environment friendly, cool… Source: Aaj Tak Many aspects of the UX that can be considered and many ways of taking them into account when designing interactive products. Of central importance are the usability, functionality, aesthetics, content, look and feel, and emotional appeal. Activity 2: iPhone 16 phone launch success Why was the iPhone 16 user experience such a success? iPhone 16 phones Activity 3: card control settings Why was the HDFC netbanking user experience such a success? Quality user experience from the beginning Simple, elegant, distinct brand, pleasurable, must have thing, catchy names, environment friendly, cool… Many aspects of the UX that can be considered and many ways of taking them into account when designing interactive products. Of central importance are the usability, functionality, aesthetics, content, Source: HDFC Bank Net Banking look and feel, and emotional appeal.