Human-Computer Interaction: Design (HCI) Week 2

Human-Computer Interaction (HCI) Week 2: Design - Part 2 Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Outline: Week 2 What is design What to design Interaction design What are inclusivity, accessibi...

Human-Computer Interaction (HCI) Week 2: Design - Part 2 Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Outline: Week 2 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 User experience in interaction design In Interaction Design, UX focuses on creating products that are not only functional but also intuitive and delightful, ensuring they meet the users' needs and expectations. This involves understanding the users' behaviors, motivations, and challenges to design interfaces and interactions that provide a seamless and meaningful https://www.interaction-design.org/ experience. Which kind of design? Several terms are often used to highlight specific aspects of what is being designed, such as: User interface design Software design User-centered design Product design Web design Experience design (UX) Interaction design serves as an umbrella term that encompasses all these areas. It is a core concept for all disciplines, fields, and methods focused on the research and design of computer-based systems intended for people. www.id-book.com Interaction design www.id-book.com Working in multidisciplinary teams Many people from different backgrounds involved Different perspectives and ways of seeing and talking about things Benefits More ideas and designs generated Disadvantages Difficult to communicate and progress forward the designs being create Many ID companies www.id-book.com Working in multidisciplinary teams: running app www.id-book.com Case study 3: human-centered running app In practice, the design team in a large organization is typically extensive, comprising various types of designers. The makeup of the team depends on the specific interactive product being developed. Imagine you are the brains behind a new running app. List different types of designers and specialists you would have in your design team and why? Case study 3: human-centered running app User Experience (UX) & Interaction Design UX Designer: Focuses on the overall user journey, usability testing, and creating a seamless user experience. Interaction Designer: Designs how users interact with the app through gestures, transitions, and interface elements. Information Architect: Organizes the app’s structure, content hierarchy, and navigation to enhance findability and ease of use. Service Designer: Designs the end-to-end user experience, considering all user touchpoints and the holistic service model. Behavioral Designer: Focuses on influencing user habits and behaviors through the app’s design and features. Case study 3: human-centered running app User Interface (UI) & Visual Design UI Designer: Designs the visual layout, interface elements, color schemes, typography, and aesthetic components. Visual Designer / Graphic Designer: Develops visual assets, illustrations, icons, and branding elements. Motion Designer: Creates animations and transitions for UI elements, guiding user interactions and enhancing visual appeal. Augmented Reality (AR) Designer: Designs AR elements, creating interactive overlays or features for the app. Data Visualization Designer: Visualizes complex data (like performance metrics) using graphs, charts, and infographics. Case study 3: human-centered running app Accessible & Inclusive Design Accessibility Designer: Focuses on designing for users with disabilities, ensuring compatibility with screen readers, voice commands, and other accessibility features. Voice Interface Designer: Specializes in voice interaction, designing commands and dialogues for hands-free navigation. Localization Designer: Adapts the app’s content for various languages, regions, and cultural contexts to be inclusive of diverse audiences. Ethical Designer: Ensures design decisions respect user privacy, data ethics, and inclusivity. Case study 3: human-centered running app Specialized Design for Content & Communication Content Designer / UX Writer: Crafts the app’s text, including instructions, prompts, error messages, and engaging content. Brand Designer: Focuses on the visual identity and branding, including logos, style guidelines, and maintaining consistency across platforms. Social Media Designer: Designs content and visuals for social media platforms, integrating app content with social sharing features. Product & Physical Design Industrial Designer: Designs any associated physical hardware, like wearables or sensors, focusing on ergonomics and aesthetics. Case study 3: human-centered running app Gamification & User Engagement Game Designer (For Gamification Features): Develops gamified elements like challenges, leaderboards, and rewards to enhance engagement and motivation. Health & Wellness Design Dietician / Nutrition Consultant: Provides expert advice on diet, nutrition, and hydration, contributing to features like meal plans and nutrition guides. Sports Doctor / Medical Consultant: Ensures safe practices, focusing on injury prevention, recovery, and personalized health recommendations. Case study 3: human-centered running app Development & Technical Implementation Front-End Developer (with Design Skills): Bridges design and development, implementing the visual and interactive aspects of the app, ensuring functionality and performance. Additional Roles Augmented Reality (AR) Designer: Responsible for designing immersive AR features. Ethical Designer: Ensures that the design respects ethical guidelines, particularly around data privacy and user welfare. This breakdown allows the team to cover every aspect of the user journey, design, health, and technology involved in creating a high-quality, user-centered running app. Activity 4: list designers and specialists for elderly care & support app Purpose: Provide support for elderly individuals and their caregivers. Features: Medication reminders, health tracking, emergency contacts, social connection features, and cognitive exercises. * Image generated by Adobe Firefly Human-Centered Elements: Large, high-contrast text, simple interface, voice commands for those with limited dexterity, and features for caregivers to manage and monitor. Activity 5: list designers and specialists for accessible fitness & workout app Accessible Fitness & Workout App Purpose: Offer fitness guidance and workout routines that cater to users with different abilities and backgrounds. Features: Adaptive workout plans, exercises for users with * Image generated by Adobe Firefly limited mobility, progress tracking, and virtual trainer feedback. Human-Centered Elements: Accessibility for people with physical disabilities (e.g., chair workouts, adaptive training), focus on inclusivity in fitness goals, and simple user interface design for all ages. Activity 6: list designers and specialists for mental wellness & mindfulness app Mental Wellness & Mindfulness App Purpose: Focus on mental health, stress reduction, mindfulness practices, and guided meditation. Features: Personalized meditation sessions, mood tracking, * Image generated by Adobe Firefly relaxation techniques, sleep guides, and breathing exercises. Human-Centered Elements: Accessible content for users with visual or auditory impairments (e.g., text-to-speech, ASL guides), personalization based on mood history, and cultural inclusivity for diverse mindfulness practic Activity 7: list sesigners and specialists for diet and meal planning app Diet and Meal Planning App Purpose: Provide tailored meal plans, nutritional advice, and diet tracking. Features: Recipe suggestions, grocery lists, personalized * Image generated by Adobe Firefly dietary plans, and allergy alerts. Human-Centered Elements: Consider dietary restrictions, cultural food preferences, and inclusive design for various eating habits. Focus on clear instructions and affordable meal plans. Activity 8: do the following activities List Designers & Specialists, Purpose, Features, and Human-Centered Elements for the following tasks: Chronic Illness Management App Language Learning App Smart Home Management App Time Management & Productivity App Community Volunteering & Social Good App Personal Finance & Budgeting App Sustainable Living & Carbon Footprint Tracker App Parenting & Child Development App Job Search & Career Coaching App Public Transport & Accessibility App Interaction design Core characteristics Users should be involved throughout the development of the project Specific usability and user experience goals need to be identified, clearly documented, and agreed to at the beginning of the project Iteration is needed through the core activities It help designers: Understand how to design interactive products that fit with what people want, need, and may desire Appreciate that one size does not fit all (for example, teenagers are very different to grown-ups) Identify any incorrect assumptions they may have about particular user groups. (for example, not all old people want or need big fonts) Be aware of both people’s sensitivities and their capabilities Outline: Week 2 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 Inclusivity, accessibility, and design principles Inclusivity: Designing products that consider the diverse needs of all potential users, regardless of background, ability, or experience. Accessibility: Making products usable by people of all abilities and disabilities. Design Principles: Guidelines that ensure products are intuitive, usable, and effective for the widest range of users. “Good design is accessible design.” – Unknown Why inclusivity matters Embraces diversity in race, gender, age, culture, and abilities. Creates technology that reflects the needs of a global audience. Increases market reach and customer satisfaction by catering to different demographics. Enhances creativity and innovation through diverse perspectives. “Design for the real world, and not just for the ideal * Image generated by Adobe Firefly user.” – Donald Norman What is accessibility in design? Designing technology to be usable by people with disabilities (visual, auditory, physical, cognitive, and neurological). Ensures equal access to information, services, and opportunities. Addresses common accessibility features: screen readers, closed captioning, color contrast adjustments, keyboard navigation, etc. “Accessibility is not a feature, it’s a social trend.” – * Image generated by Adobe Firefly Antonio Santos Guidelines for accessibility WCAG (Web Content Accessibility Guidelines): Global standard for digital accessibility. ARIA (Accessible Rich Internet Applications): Enhances accessibility of web content and applications. Section 508 (US): Standards for electronic and information technology accessibility. Universal Design Principles: Design that’s usable by all without need for adaptation. “Inclusion is not bringing people into what already exists; it is making a new space, a better space for everyone.” – George Dei Core design principles for inclusivity and accessibility Simplicity: Design should be clear and intuitive, minimizing complexity. Consistency: Use consistent layouts, controls, and navigation patterns. Flexibility: Accommodate diverse abilities with adaptable interfaces. Feedback: Provide clear feedback for user actions (e.g., visual, auditory, haptic). Error Prevention and Recovery: Minimize potential for errors and offer easy solutions. “Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs Practical tips for accessible design Use alt text for images to assist screen readers. Provide keyboard shortcuts and navigation options. Ensure sufficient color contrast for readability. Include closed captions or transcripts for multimedia content. Design for scalability, allowing users to adjust font size or zoom. “Accessible design is good design—it benefits everyone.” – Whitney Quesenbery Why design for everyone? Increases usability for everyone, not just people with disabilities. Improves SEO and digital visibility (search engines favor accessible sites). Builds brand loyalty and reputation as socially responsible. Minimizes risk of legal issues related to accessibility non-compliance. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential https://blog.prototypr.io/inclusive-desig n-and-accessibility-50718a3ac768 aspect.” – Tim Berners-Lee Inclusivity and accessibility Inclusiveness: making products and services that accommodate the widest possible number of people Inclusive design is a methodology that enables and draws on the full range of human diversity. For example, smartphones designed for all and made available to everyone regardless of their disability, education, age, or income Accessibility: the extent to which an interactive product is accessible by as many people as possible Accessibility is qualities that make an experience open to all. Focus is on people with disabilities; for instance, those using android OS or apple voiceover Inclusive design is a process. Accessibility is an outcome. Disabilities Disabilities can be classified as: Sensory impairment (such as loss of vision or hearing) Physical impairment (having loss of functions to one or more parts of the body after a stroke or spinal cord injury) Cognitive (including learning impairment or loss of memory/cognitive function due to old age) Each type can be further defined in terms of capability: For example, someone might have only peripheral vision, be color blind, or have no light perception Impairment can be categorized: Situational (for example, a noisy environment means that a person can’t hear) Permanent (for instance, long-term wheelchair user) Temporary (that is, after an accident or illness) Being cool about disabilities Disabilities Prosthetics can be designed to move beyond being functional (and often ugly) to being desirable and fashionable People now refer to “wearing their wheels,” rather than “using a wheelchair” Oscar Pistorius South African sprinter Cultural differences in design Understand the culture of your target audience before designing. ○ Colors hold different meanings across cultures. What is positive in one culture may be negative in another. Western: White is for purity; Red is for passion. Eastern: White can symbolize mourning; Red can be a sign of luck. Incorporate cultural sensitivity to avoid misinterpretation. ○ Thumbs up is positive in the West but offensive in parts of the Middle East. Localize not only language but visuals, symbols, and interaction patterns. “Design should be adapted to the diversity of users, not the other way around.” — Donald Norman, Author of The Design of Everyday Things Successful examples of inclusivity and accessibility Microsoft’s Inclusive Design: Developing products with diverse user input to create accessible tech like adaptive controllers. Apple’s Accessibility Features: VoiceOver for the visually impaired, AssistiveTouch, and customizable gestures. GOV.UK: A government website that follows WCAG guidelines, providing a clear and simple interface for all users. “If you design for everyone, everyone benefits.” – Frank Chimero, Designer Common challenges and how to overcome them Balancing aesthetics and accessibility. Addressing the needs of a diverse user base without making compromises. Keeping up with evolving standards and technology. Budget constraints for implementing accessibility features. “Nothing about us without us.” – Disability Rights Movement Slogan * Image generated by Adobe Firefly What’s next for inclusivity and accessibility? AI-Powered Accessibility: Use of machine learning to automate accessibility checks and create adaptive interfaces. Augmented Reality (AR) and Virtual Reality (VR) for accessible experiences. Voice Interfaces and Natural User Interfaces (NUI) for inclusive tech. Cross-Cultural Design: Designing for global diversity with localized solutions. * Image generated by Adobe Firefly “The best way to predict the future is to invent it.” – Alan Kay Designing a better world for everyone Inclusivity and accessibility are essential to reaching a broader audience. Good design improves usability, satisfaction, and overall user experience. Follow design principles to ensure clarity, consistency, and accessibility. Keep evolving with new trends to meet the needs of all users. “We are all designers, creating our world, creating the experience in which we live.” – Richard Farson Design principles Generalizable abstractions for thinking about different aspects of design The do’s and don'ts of interaction design What to provide and what not to provide at the interface Derived from a mix of theory-based knowledge, experience, and common-sense Key principles: Visibility (findability), Feedback, Constraints (navigability), Consistency, Affordance Design principles are used by interaction designers to aid their thinking when designing for the user experience. Visibility (findability) Definition: Ensure that the most important options, features, and actions are easily visible and accessible to the user. Why It Matters: Users should not have to search for essential functions. Clear visibility enhances usability and reduces cognitive load. Key Tips: Place crucial functions where users expect them. Use clear labels and icons for easy recognition. Make navigation paths straightforward and intuitive. “The best way to find something is to make it visible.” — Steve Krug, Don’t Make Me Think Visibility (findability) Feedback Definition: Feedback provides users with immediate responses or updates on their actions, informing them of the result. Why It Matters: Timely feedback builds trust and guides users on what to do next. It helps avoid confusion and reduces user errors. Key Tips: Use visual, auditory, or haptic feedback. Provide loading indicators for longer processes. Display confirmation messages for completed actions. Image: Gal Shir “Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs Constraints (navigability) Definition: Constraints limit the user’s options to guide correct usage and prevent errors, aiding smooth navigation. Why It Matters: Constraints make the user interface simpler to navigate, reducing the chance of errors and confusion. Key Tips: Gray out or hide unavailable options. Use clear labels and disable buttons when actions aren't possible. Keep navigation paths clear and straightforward. “Design is the conscious effort to impose a meaningful order.” — Victor Papanek Consistency Definition: Keeping design, navigation, and interaction patterns uniform across the interface for predictability. Why It Matters: Consistency helps users understand the system quickly, making it easier to learn and use without errors. Key Tips: Maintain consistent use of colors, fonts, icons, and layouts. Stick to established conventions for common elements like buttons and menus. Provide a unified look and feel throughout the product. “Consistency is the key to understanding.” — Donald Norman Affordance Definition: Affordances are cues that indicate how an object or element should be used, making interactions intuitive. Why It Matters: Good affordances make interfaces self-explanatory and prevent errors by suggesting the appropriate actions. Key Tips: www.id-book.com ○ Buttons should look clickable, sliders draggable. ○ Use visual cues to guide user interactions (e.g., shadows, shapes, and sizes). ○ Keep functionality clear and intuitive without instructions. https://publicdomainvectors.org/ “Affordances provide strong clues to the operations of things.” — Donald Norman, The Design of Everyday Things Summary Interaction design is concerned with designing interactive products to support how people communicate and interact in their everyday lives It is concerned with how to create quality user experiences for services, devices, and interactive products Optimizing the interaction between users and interactive products requires consideration of a number of interdependent factors, including context of use, types of activity, UX goals, accessibility, cultural diff., and user groups. Design principles, such as feedback and simplicity, are useful heuristics for informing, analyzing, and evaluating aspects of an interactive product. When inclusivity, accessibility, and solid design principles are applied together, they create products that are not only usable and functional but also welcoming and empowering for everyone. 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. Additional materials Tutorial ○ Topic: Inclusivity, Accessibility and Design Principles ○ Presenter: Ritwik Bamba Tool Demos ○ Topic: Canva ○ Presenters: Tony Thomas Panel Discussion ○ Topic: Design Principles ○ Participants: Ritwik Bamba, Syed Yasser Ali, and Rahul Goel Assignment 2 Further readings Universal Design Principles ○ https://dac.berkeley.edu/services/campus-building-accessibility/unive rsal-design-principles Section 508 (US) ○ https://www.section508.gov/ Accessible Rich Internet Applications ○ https://www.w3.org/WAI/standards-guidelines/aria/ WCAG (Web Content Accessibility Guidelines) ○ https://www.w3.org/TR/WCAG21/ Thank you.