Human-Computer Interaction (HCI) - Interaction

Human-Computer Interaction (HCI) Interaction 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 pr...

Human-Computer Interaction (HCI) Interaction 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 Outline Design thinking Design process Interaction design process Tutorial on interaction design process Hands on experience with Figma Weekly assignment Human-Computer Interaction (HCI) Interaction - Part 1 Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Outline Design thinking Design process Interaction design process Tutorial on interaction design process Hands on experience with Figma. Weekly assignment. Introduction to Design Thinking What is Design Thinking? A user-centered, iterative process for problem-solving. Focuses on empathy, creativity, and experimentation. Why Design Thinking? Encourages innovation and creative solutions. Prioritizes understanding and solving the right problem. “Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.” – Tim Brown, CEO of IDEO. Introduction to Design Thinking https://www.nngroup.com/articles/design-thinking/ Design Thinking Framework: Six Key Stages Empathize: Understand the users and their needs. Define: Clearly articulate the problem. Ideate: Brainstorm potential solutions. Prototype: Build tangible solutions. Test: Evaluate solutions with users. Implement: Put the vision into effect. Iterative Nature: Stages often overlap and repeat. “Good design is a lot like clear thinking made visual.” – Edward Tufte, Statistician and Professor. Case study: Airbnb 2010 2024 Case study: Airbnb Example: The development of the Airbnb platform—used Design Thinking to empathize with users and redesign the website, leading to a huge increase in customer engagement and bookings. *When Y Combinator (YC) invested in Airbnb in early 2009, the company's valuation (or market cap) was relatively modest. Airbnb was valued at approximately $2.4 million at the time of Y Combinator's investment, where YC provided $20,000 in seed funding for a 6% stake in the company, i.e., more than $5 billion, i.e., 250000 times return in 15 years. Stage 1 - Empathize Purpose: Gain a deep understanding of the user's needs. Methods: User Interviews, Observation, Empathy Maps, Surveys. Spend time with real users, shadow them, and observe their behaviors in their natural environment. Goal: Discover user motivations, behaviors, pain points, and desires. Example: Procter & Gamble used empathy to redesign their line of Swiffer products by observing people cleaning their homes, leading to innovative cleaning solutions. Stage 2 - Define Purpose: Synthesize findings from the Empathize stage. Steps: Identify key insights and patterns from user research. Create a Problem Statement: A clear and concise definition of the problem. Use the "How Might We..." format to encourage creative solutions. “Fall in love with the problem, not the solution.” – Uri Levine, co-founder of Waze. Example: When Nike was designing the Nike+ app, they defined the problem around the motivation to exercise, focusing on social and personal encouragement. Stage 3 - Ideate Purpose: Generate a wide range of ideas and potential solutions. Methods: Brainstorming, Mind Mapping, SCAMPER, Sketching and Storyboarding. Encourage a "no idea is a bad idea" mentality to foster creativity. Use techniques like Crazy 8s, where participants sketch 8 different ideas in 8 minutes to encourage quick thinking. Example: IDEO's Shopping Cart Project: A team brainstormed hundreds of ideas, leading to innovative concepts like a safer, more convenient, and more user-friendly shopping cart. IDEO's Shopping Cart Stage 4 - Prototype Purpose: Create tangible, testable versions of ideas. Types of Prototypes: Low-Fidelity: Simple sketches, wireframes, mock-ups. Mid-Fidelity: Structured, grayscale, interactive. High-Fidelity: Detailed, interactive prototypes. Prototyping Tools: Figma, Adobe Express and XD, Sketch, Cardboard, Paper. Goal: Quickly build prototypes to explore solutions and get feedback. Example: Apple creates multiple prototypes of their devices, such as the iPhone, to test everything from screen sizes to button placement. Stage 5 - Test Purpose: Validate and refine prototypes with real users. Methods: Usability Testing, A/B Testing, User Feedback Sessions. Collect quantitative and qualitative data. Flickr Use tools like heatmaps and user recordings to see where users struggle. “The prototype is the conversation.” – Tom Wujec, Author & Design Expert. Example: Google’s Design Sprint process includes rapid testing and iteration of new product ideas in just 5 days, allowing them to test and refine concepts quickly. Stage 6 - Implement Purpose: Ensure that your solution is materialized and touches the lives of your end users. The final, critical step in Design Thinking that often gets overlooked. As Don Norman emphasizes, “We need more design doing.” Design thinking is not just about ideation—it requires action. Implementation is where creativity is tested and ideas become reality. True innovation is only achieved when the solution is successfully executed, transforming the end user’s experience. "There’s no such thing as a creative type. Creativity is a verb, a very time-consuming verb... it’s about taking an idea in your head, and transforming that idea into something real." — Milton Glaser Iterative Process in Design Thinking Iteration in Design Thinking It’s not a linear process—stages can be revisited as needed. Testing may reveal a need to redefine the problem. Continuous improvement through user feedback. Keep refining the design until the https://www.nngroup.com/articles/design-thinking/ user’s needs are fully met. Example: Netflix regularly iterates its recommendation algorithms and interface based on user feedback and testing to improve user engagement. Key Principles of Design Thinking Human-Centered: Focus on user needs and experiences. Collaboration: Encourage diverse perspectives. Ideation: Foster creative thinking and open-mindedness. Prototyping: Make ideas tangible early. Iteration: Continuous refinement based on feedback. “Good design is a lot like clear thinking made visual.” – Edward Tufte, Statistician and Professor. Benefits of Design Thinking Encourages Innovation: Promotes creative solutions. Reduces Risks: Test ideas before full-scale development. User-Centered: Results are more relevant to the audience. Fosters Collaboration: Diverse perspectives lead to holistic solutions. “If you think good design is expensive, you should look at the cost of bad design.” – Ralf Speth, CEO of Jaguar Land Rover. Case Study: Design Thinking at Work Case Study: The Stanford d.school’s approach to reimagining a patient experience Problem: Improving the experience for pediatric patients in hospitals. Empathize: Interviews with patients, parents, and hospital staff. Define: The problem was framed as reducing anxiety for children during hospital visits. Ideate: Brainstormed ideas, from interactive walls to story-based navigation. Prototype: Created prototypes for kid-friendly waiting rooms. Test: Gathered feedback from patients, parents, and healthcare professionals. Outcome: A more engaging and less stressful environment for young patients. Case Study: Design Thinking at Work Case Study: Our approach to reimagining a visually impaired person experience Problem: Improving braille learning experience for visually impaired person. Empathize: Explore challenges with traditional Braille learning for visually impaired students and instructors. Define: Identify need for a more engaging and accessible Braille learning tool. Ideate: Create interactive solutions with tactile feedback, progress tracking, and language support. Prototype: Build a mid-fidelity tool to assess functionality and usability. Test: Collect feedback from users to refine the prototype. Outcome: A user-friendly Braille learning tool that boosts engagement and simplifies teaching. Activity: Design Thinking at Work Case Study: Our approach to Reimagining a passenger’s experience for cab booking Problem: Empathize: Define: Ideate: Prototype: Test: Outcome: Challenges in Design Thinking Getting stakeholder buy-in and aligning on goals. Balancing creativity with practical constraints. Managing iterative cycles with tight deadlines. Ensuring diverse representation for inclusive solutions. Example: Heineken used Design Thinking to revamp their bottle design, involving not only designers but also stakeholders from marketing, production, and even consumers—a challenging but rewarding collaboration. Conclusion: Design Thinking Summary of Key Points Design Thinking is a flexible, user-centered approach. Empathy, creativity, and iteration are central to the process. Effective for addressing complex and ambiguous problems. Takeaways Start with the user in mind. Embrace failure as a learning opportunity. Iterate until the solution fully meets user needs. “The only way to win is to learn faster than anyone else.” – Eric Ries, Author of The Lean Startup. Outline Design thinking Design process Interaction design process Tutorial on interaction design process Hands on experience with Figma. Weekly assignment. What is the Design Process? Definition: The Design Process is a series of structured steps followed by designers to identify problems, generate ideas, create solutions, and evaluate results. Importance: Guides designers from understanding a problem to implementing a solution. Encourages creativity, structure, and iteration. Key Stages: Research → Ideation → Prototyping → Testing → Implementation Double Diamond Design Process Developed by the UK Design Council, it’s a visual representation of the design process, divided into two key phases: Discover & Define (Problem Space) Develop & Deliver (Solution Space) Source: Adapted from The Design Process: What is Goal: Balance divergent (exploring) the Double Diamond? and convergent (focusing) thinking. Phase 1 - Discover & Define Discover: Purpose: Research and understand the problem. Activities: User interviews, market analysis, competitor research, surveys. Outcome: Gather user insights and identify key challenges. Define: Purpose: Narrow down the focus to a clear, concise problem statement. Activities: Affinity mapping, problem framing, creating user personas. Outcome: Well-defined problem or design brief. Phase 1 - Discover & Define User Research Synthesis of Research Market Research User Personas Brainstorming Problem Definition Statement Contextual Inquiry Point of View (POV) Problem Framing Phase 2 - Develop & Deliver Develop: Purpose: Generate ideas and explore solutions. Activities: Brainstorming, sketching, prototyping, usability testing. Outcome: A range of possible solutions. Deliver: Purpose: Refine, test, and finalize the solution. Activities: High-fidelity prototyping, user testing, final adjustments. Outcome: A polished, user-approved product ready for launch.  Phase 2 - Develop & Deliver Rapid Refine Sketching Sketching Low-Fidelity High-Fidelity Wireframes Wireframes Paper Interactive Prototypes Prototypes Frameworks in Interaction Design Five Dimensions of Interaction Design (1D to 5D): 1D: Words (text) 2D: Visual representations (images, icons) 3D: Physical objects or space 4D: Time (animations, transitions) 5D: Behavior (how users interact) Usability Heuristics by Jakob Nielsen: Visibility of system status Match between system and real world User control and freedom Double Diamond vs. Interaction Design Frameworks Similarities: Both involve iterative processes that encourage feedback and refinement. Emphasis on user-centered design. Aim to solve real-world problems by understanding user needs. Differences: Double Diamond is a high-level design process. Interaction Design Frameworks focus more on specific details of user interaction and usability. Real-World Examples of Design Process Spotify’s Design: Applied Double Diamond for user research, defining the music streaming problem, and developing unique discovery features. Used Interaction Design principles for seamless playlist creation and intuitive navigation. Airbnb: Followed the Double Diamond to understand hosts' and travelers' needs. Employed Interaction Design Frameworks for booking interactions and clear communication between hosts and guests. Conclusion: Design Process "Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs Takeaway: A successful design process, whether through Double Diamond or Interaction Design frameworks, is about creating solutions that are not only visually appealing but also functional and user-centric. Design Thinking vs. Design Process Design Process is a structured sequence of steps followed to create a product or solution, often including stages like research, ideation, prototyping, testing, and implementation. It is a linear or iterative methodology aimed at achieving a specific design outcome. Design Thinking is a mindset and problem-solving approach that emphasizes empathy, creativity, and iteration. It is a user-centered strategy that involves understanding user needs, defining problems, ideating solutions, prototyping, and testing, often encouraging a non-linear and flexible path to innovation. Case Study: Design Thinking vs. Design Process Focus: Design Thinking involves a user-centered mindset that begins with understanding the problems people face. Airbnb Case: In its early days, Airbnb struggled to gain traction. The founders applied design thinking by staying in their own listings to empathize with users and understand their pain points. They discovered that poor-quality photos of rental spaces were a major issue. Outcome: They redefined the problem by focusing on how better visuals could increase bookings. This led to an idea: they went door-to-door in New York City, photographing hosts' homes themselves. This empathetic, iterative, and creative approach was a pivotal moment that helped Airbnb take off. Case Study: Design Thinking vs. Design Process Focus: The Design Process is a structured, step-by-step method to create a solution once the problem and user needs are defined. Airbnb Case: After understanding user needs and validating the initial idea (high-quality photos), Airbnb moved to a more structured design process. They researched their target market, designed a scalable system to support hosts, built prototypes of the platform, gathered feedback, and iteratively improved features like booking, payments, and host management in a systematic manner. Outcome: This structured approach allowed Airbnb to develop a reliable platform, scaling it into a successful, global marketplace. Case Study: Design Thinking vs. Design Process Key Difference with Example: Design Thinking drove Airbnb's initial problem discovery and innovative idea by emphasizing empathy and understanding the user’s experience. Design Process enabled Airbnb to execute and systematically build the platform, step-by-step, from the validated concept to a robust product. In summary, Design Thinking is about discovering and defining the problem creatively, while the Design Process is about systematically developing and executing the solution. Thank you.