Human-Computer Interaction (HCI): Interaction - Part 2

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

Human-Computer Interaction (HCI) Interaction - Part 2 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. Interaction design process It is a process: ▪ Focused on discovering requirements, designing to fulfil requirements, producing prototypes and evaluating them ▪ Focused on users and their goals ▪ Involves trade-offs to balance conflicting requirements Generating alternatives and choosing between them is key Four approaches: user-centered design, activity-centered design, systems design, and genius design User-centered design Definition: A design process that places the end user at the core of every stage of the design, focusing on meeting their needs, preferences, and limitations. Goal: To create products that are highly usable, accessible, and aligned with the user’s expectations. Key Principles: 1. Empathy: Understand the user’s needs, goals, and pain points. 2. Iteration: Continuously test, get feedback, and refine the product. 3. Involvement: Engage users throughout the design process. User-centered design Process: 1. Research: Conduct user interviews and surveys. 2. Design: Create wireframes and prototypes with user feedback. 3. Test: Perform usability tests to gather insights. 4. Refine: Make adjustments based on user testing. Example (Apple iPhone): Problem: Mobile phones were complex, with buttons and interfaces that weren't user-friendly. UCD Approach: Apple conducted in-depth user research to develop a touch-based interface that was intuitive, simple, and required minimal learning. Outcome: A revolutionary product that set the standard for smartphones, focusing on a seamless user experience with intuitive gestures. User-centered design Example: Apple iPhone: User-Centered Design Elements: Simplified interface, intuitive gestures (like pinch to zoom), voice assistant (Siri), and easy setup for new users. Outcome: A smartphone that’s easy to use for a wide range of users, focusing on seamless navigation and accessibility, which has contributed to the device's global popularity. Activity: User-centered design Write User-Centered Design Elements and Outcome for the following: Airbnb Dropbox Amazon Echo (Alexa) Duolingo Instagram Google Search Microsoft Teams Coursera Slack Activity-centered design It is a process: ▪ Focused on discovering requirements, designing to fulfil requirements, producing prototypes and evaluating them ▪ Focused on users and their goals ▪ Involves trade-offs to balance conflicting requirements Generating alternatives and choosing between them is key Four approaches: user-centered design, activity-centered design, systems design, and genius design Activity-centered design Definition: A design approach that focuses on the tasks and activities users perform rather than the individual users themselves. Goal: To create intuitive and efficient solutions by understanding the key activities that users engage in, ensuring the design supports those activities seamlessly. Key Principles: 1. Focus on Activities: Prioritize the tasks users need to accomplish over individual user preferences. 2. Efficiency: Streamline workflows to make completing activities easy and quick. 3. Context: Consider the context in which activities occur to design more practical solutions. Activity-centered design Process: 1. Identify Key Activities: Understand the primary tasks and actions users perform. 2. Analyze Workflow: Break down each activity to understand steps, challenges, and requirements. 3. Design Solutions: Create features that directly support and enhance these key activities. Example: Microsoft Word Focuses on core activities like writing, formatting, and editing documents. The design emphasizes quick access to key tools like font styles, layout options, and editing features to streamline the writing process. Activity-centered design Example: Google Docs Activity: Collaborative document editing. ACD Approach: The design focuses on making document creation, sharing, and editing easy and efficient, prioritizing collaborative activities like real-time editing, comments, and version history. Outcome: Users can work on the same document simultaneously with features that enhance collaborative writing and streamline the editing process. Activity: Activity-centered design Write Activity, ACD Approach, Outcome for the following: Trello Microsoft Excel Fitbit Adobe Photoshop Adobe Express Spotify Zoom Grammarly Slack Uber Driver App System design It is a process: ▪ Focused on discovering requirements, designing to fulfil requirements, producing prototypes and evaluating them ▪ Focused on users and their goals ▪ Involves trade-offs to balance conflicting requirements Generating alternatives and choosing between them is key Four approaches: user-centered design, activity-centered design, systems design, and genius design System design Def.: System Design is the process of defining the architecture, components, modules, interfaces, and data for a system to satisfy specific requirements. Goal: To create a structured and scalable solution that meets both technical and user needs efficiently. Key Components: 1. Architecture: Defines the overall structure and organization of the system. 2. Components & Modules: Breaks down the system into smaller, manageable parts. 3. Interfaces: Determines how components interact with each other and with users. 4. Data Management: Manages the flow and storage of data within the system. System design Process: 1. Requirement Analysis: Understand the needs and expectations of the stakeholders. 2. Design System Architecture: Create a high-level blueprint of the system's components and interactions. 3. Component Design: Design detailed specifications for each component. 4. Prototyping & Testing: Build prototypes and perform testing to ensure functionality. 5. Iteration & Refinement: Adjust the system design based on feedback and test results. System design Example: Ride-Sharing Application (e.g., Uber/Ola/Rapido): Architecture: Client-server architecture with real-time communication, including a front-end app, back-end server, and real-time database. Components: User accounts, driver accounts, ride booking, real-time map, payment processing, and rating system. Interfaces: Integration with map services (like Google Maps), payment gateways, and push notification systems. Data Management: Handling ride data, location tracking, user history, and payment information. Activity: System design Write Architecture, Components, Interfaces, Data Management for the following: Inventory Management System Healthcare Management System Smart Home System Content Management System (CMS) Online Banking System Social Media Platform Video Streaming Platform (e.g., Netflix, YouTube) Hotel Booking System (e.g., Booking.com, Expedia) Autonomous Vehicle System (e.g., Tesla) Financial Trading System (e.g., Zerodha, Groww) Weather Forecasting System Genius design Genius Design is an approach to user experience (UX) design where experts rely on their own knowledge, intuition, and expertise to create solutions. Instead of extensive user research, designers leverage their experience, creativity, and understanding of best practices to guide the design process. Key Features of Genius Design: Expert-Driven: Relies on the skills, intuition, and expertise of the designer. Fast Process: Often quicker than user-centered design due to minimal research and testing phases. High-Risk, High-Reward: Success depends heavily on the expertise of the designer. Efficiency: Can be efficient when time or resources are limited. Genius design Benefits of Genius Design: Faster iteration and implementation. Can lead to highly innovative solutions. Efficient when dealing with well-understood problems. Drawbacks of Genius Design: Can lead to biased decisions if designers' assumptions are incorrect. May not always align with actual user needs without validation. Risks of "designing in a vacuum" without sufficient user feedback. Genius design Example Apple's Original iPhone: Steve Jobs and his team relied on their vision and expertise to revolutionize the mobile phone market without extensive initial user testing. Aimed to create a product they knew users would love, based on deep understanding of tech and user interaction. Activity: Find more examples of genius design. Interaction design process What is involved in Interaction Design? Understanding the problem space Importance of involving users Degrees of user involvement What is a user-centered approach? Four basic activities of interaction design A simple lifecycle model for interaction design Understanding the problem space Explore What is the current user experience? Why is a change needed? How will this change improve the situation? Articulating the problem space Team effort Explore different perspectives Avoid incorrect assumptions and unsupported claims www.id-book.com Importance of involving users Expectation management Realistic expectations No surprises, no disappointments Timely training Communication, but no hype Ownership Make the users active stakeholders More likely to forgive or accept problems Can make a big difference in acceptance and success of product Degrees of user involvement Member of the design team Full time: constant input, but lose touch with users Part time: patchy input, and very stressful Short term: inconsistent across project life Long term: consistent, but lose touch with users Face-to-face group or individual activities Online contributions from thousands of users Online Feedback Exchange (OFE) systems Crowdsourcing design ideas Citizen science User involvement after product release www.id-book.com What is a user-centered approach? User-centered approach is based on: Early focus on users and tasks: directly studying cognitive, behavioral, anthropomorphic, and attitudinal characteristics Empirical measurement: users’ reactions and performance to scenarios, manuals, simulations, and prototypes are observed, recorded, and analyzed Iterative design: when problems are found in user testing, fix them and carry out more tests www.id-book.com Four basic activities of Interaction Design Discovering requirements Designing alternatives Prototyping alternative designs Evaluating product and its user experience throughout www.id-book.com A simple interaction design lifecycle model Exemplifies a user-centered design approach www.id-book.com Another lifecycle model: Google Design Sprints (Knapp et al., 2016) Source: Google Design Sprints (used courtesy of Agile Marketing) www.id-book.com Another lifecycle model: Research in the Wild (Rogers and Marshall, 2017) A framework for research in the wild studies Source: Rogers and Marshall, 2017, p6. (used courtesy of Morgan and Claypool) www.id-book.com Interaction design process Some practical issues Who are the users? What are the users’ needs? How to generate alternative designs How to choose among alternative designs How to integrate interaction design activities within other lifecycle models www.id-book.com Who are the users? Not obvious 382 distinct types of users for smartphone apps (Sha Zhao et al, 2016) Many products are intended for use by large sections of the population, so user is “everybody” More targeted products are associated with specific roles Stakeholders Larger than the group of direct users Identifying stakeholders helps identify groups to include in interaction design activities www.id-book.com What are the users’ needs? Users rarely know what is possible Instead: ▪ Explore the problem space ▪ Investigate who are the users ▪ Investigate user activities to see what can be improved ▪ Try out ideas with potential users Focus on peoples’ goals, usability, and user experience goals, rather than expect stakeholders to articulate requirements www.id-book.com How to generate alternative designs Humans tend to stick with something that works Considering alternatives helps identify better designs Where do alternative designs come from? ○ ‘Flair and creativity’: research and synthesis ○ Cross-fertilization of ideas from different perspectives ○ Users can generate different designs ○ Product evolution based on changing use ○ Seek inspiration: similar products and domain, or different products and domain Balancing constraints and trade-offs www.id-book.com How to choose among alternatives Interaction design focuses on externally-visible and measurable behavior Technical feasibility Evaluation with users or peers Prototypes not static documentation because behavior is key A/B Testing Online method to inform choice between alternatives Nontrivial to set appropriate metrics and choose user group sets Quality thresholds Different stakeholder groups have different quality thresholds Usability and user experience goals lead to relevant criteria www.id-book.com How to integrate interaction design activities within other models Integrating interaction design activities in lifecycle models from other disciplines requires careful planning Software development lifecycle models are prominent Integrating with agile software development is promising because: It incorporates tight iterations It champions early and regular feedback It handles emergent requirements It aims to strike a balance between flexibility and structure www.id-book.com Some key points Four basic activities in interaction design process Discovering requirements Designing alternatives Prototyping Evaluating User-centered design rests on three principles Early focus on users and tasks Empirical measurement using quantifiable and measurable usability criteria Iterative design www.id-book.com Summary 1. Design Thinking: Definition: A user-centric problem-solving methodology focusing on innovation and empathy. Key Stages: ○ Empathize: Understand user needs. ○ Define: Clearly frame the problem. ○ Ideate: Generate creative solutions. ○ Prototype: Build tangible solutions. ○ Test: Refine through user feedback. ○ Implement: Put the vision into effect. Goal: Foster creativity and deliver impactful solutions. Week 3: Summary 2. Design Process: Definition: A structured approach to solving design challenges, applicable across domains. Framework: ○ Double Diamond Model: Discover: Research and gather insights. Define: Narrow down and frame the problem. Develop: Explore potential solutions. Deliver: Test and implement the final solution. Goal: Create effective and practical designs through iterative development. Week 3: Summary 3. Interaction Design Process: Definition: A process for designing interactive systems focusing on user behavior and experience. Key Phases: ○ Research: Understand users and context. ○ Conceptual Design: Define tasks and interactions. ○ Prototyping: Develop interactive models. ○ Evaluation: Test usability and refine. Goal: Craft intuitive and user-friendly interactions. Additional materials Tutorial ○ Topic: Interaction Design Process ○ Presenter: Ritwik Bamba Tool Demos ○ Topic: Figma ○ Presenters: Aditi Assignment 3 Further readings Design Thinking 101 https://www.nngroup.com/articles/design-thinking/ Why Airbnb’s Design is a Masterclass in UX/UI https://medium.com/design-bootcamp/why-airbnbs-design-is-a-masterclas s-in-ux-ui-944063eec510 "Change by Design" by Tim Brown. IDEO's Design Thinking toolkit. d.school resources. Articles from Nielsen Norman Group. Case studies from design blogs and reports. Thank you.