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

Human-Computer Interaction (HCI) Week 1: Introduction to HCI - Part 2 Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Recap: Outline: Week 1 Course structure and objectives. Why do we need to study design?...

Human-Computer Interaction (HCI) Week 1: Introduction to HCI - Part 2 Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi Recap: Outline: Week 1 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. Digital transformation Digital transformation is reshaping how we live, work, and interact. Businesses must adapt to stay competitive in an increasingly digital world. Individuals/organizations must embrace innovation to thrive in the future. Impact on Industries ○ Healthcare: Telemedicine, AI for diagnostics, and digital health records. ○ Retail: E-commerce, personalized shopping experiences, and smart supply chains. ○ Finance: Fintech, digital payments, and blockchain. ○ Education: E-learning, digital classrooms, and virtual campuses. ○ Manufacturing: Industry 4.0, automation, and predictive maintenance. Digital transformation Transforming Everyday Life ○ Smart Homes: IoT-driven automation and control systems. ○ Transportation: Autonomous vehicles, electric mobility, and digital ticketing. ○ Entertainment: Streaming services, virtual reality, and gaming. ○ Communication: Social media, instant messaging, and video conferencing. Challenges of Digital Transformation ○ Data Security: Protecting personal and organizational data. ○ Digital Divide: Ensuring equitable access to technology. ○ Skill Gaps: Upskilling the workforce to keep pace with technology. ○ Privacy Concerns: Addressing ethical issues related to surveillance and data collection. Activity 1: applying for a driving license Digital transformation Pros: convenience, cost savings, global reach, etc. Cons: privacy, accessibility, social impacts, etc. Online form Physical form Activity 2: ordering food and groceries Digital transformation Pros: convenience, * Image generated by Adobe Firefly cost savings, global reach, etc. Cons: privacy, accessibility, social impacts, etc. Activity 3: education Digital transformation Pros: convenience, * Image generated by Adobe Firefly cost savings, global reach, etc. Cons: privacy, Valuation drops from several billions to a few millions USD accessibility, social impacts, etc.  Activity 4: finance Digital transformation Pros: convenience, cost savings, global reach, real-time, etc. Cons: privacy, fraud, social https://www.reddit.com/r/india/comments/ 1dv3gx4/found_this_in_my_late_grandfath impacts, etc. ers_wardrobe_want/ Outline: Week 1 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. Human Computer Interaction Explores the Intersection of Technology and Human Behavior. HCI is a crucial field in today's technology-driven world With the rapid evolution of digital technology, HCI plays a vital role in creating user-friendly and efficient systems, impacting industries from education and healthcare to entertainment and e-commerce. * Image generated by Adobe Firefly “Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs What is Human-Computer Interaction Definition: “The study and design of how people interact with computers and other technologies, focusing on making these interactions effective, efficient, and enjoyable.” Brief History: HCI emerged in the 1980s, influenced by disciplines like computer science, psychology, and cognitive science. Initially focused on improving workplace computing, it now covers all digital interactions. Key Contributors: Prof. Stuart Card, Prof. Thomas Moran, Prof. Allen Newell, Prof. Donald Norman, Prof. Alan Dix, Prof. Fei-Fei Li, etc. Importance: Enhances usability, reduces errors, and creates satisfying user experiences across industries. Case study: credit card payments The study and design of how people interact with computers/ other technologies, focusing on making these interactions effective, efficient, and enjoyable. Paytm Cred Cred Payment Confirmation Cred Reward Key Components of HCI User: Central to HCI, involving understanding user behavior, expectations, and limitations. Technology: Includes hardware, software, and the technical infrastructure that facilitates interaction. Interaction: How communication occurs between the user and technology, from clicking a button to using voice commands. “Know your users, and you are halfway to success.” – Jakob Nielsen Usability & User Experience in HCI Usability: Focuses on how effectively a user can achieve their goals using a product. Efficiency: How quickly tasks can be performed. Effectiveness: Accuracy of task completion. Learnability: How easy it is for new users to begin using the system. Memorability: How easily users can return to a system after a break. Satisfaction: User’s comfort and positivity towards the system. User Experience (UX): The overall experience, emotions, and perceptions a user has when interacting with a product. “People ignore design that ignores people.” – Frank Chimero, Designer Usability & User Experience & Customer Experience Customer Experience User Experience Usability What is Interaction Design "Interaction Design (IxD) is the practice of designing interactive digital products, environments, systems, and services. It focuses on creating meaningful relationships between users and technology through engaging interfaces and seamless experiences." Key Goal: To make interactions intuitive, efficient, and enjoyable. Examples: Apple iPhone's Swipe to Unlock: A simple interaction that became iconic for its intuitive user flow. Netflix Auto-Play Feature: An interaction that anticipates user needs by auto-playing the next episode, enhancing user engagement. Google Search Suggestions: Predictive suggestions that speed up the search process, improving the user's experience. Principles of Interaction Design Affordance: Users should understand what actions are possible just by looking at the interface. Feedback: Clear feedback should be provided after user actions, e.g., a button changing color when clicked. Consistency: Design elements should be predictable and uniform throughout the interface. Visibility: Important functions should be visible and not hidden in complex menus. Error Prevention: Good design minimizes user errors and offers easy recovery if mistakes are made. “The details are not the details. They make the design.” – Charles Eames, Designer Human Centeredness in HCI The strength and tradition of HCI has been in its human-centredness and usability concerns. HCI has evolved methods, guidelines, principles and standards to ensure that systems are easy to use and easy to learn. It is very important to have the understanding of the users ○ Considering what people are good and bad at ○ Considering what might help people with the way they currently do things ○ Thinking through what might provide quality user experiences ○ Listening to what people want and getting them involved in the design User Centered Design User Research: Conducting surveys, interviews, and observations to understand user needs. Ideation: Brainstorming and sketching ideas based on user research. Prototyping: Developing mock-ups and wireframes to visualize the solution. Testing: Conducting usability testing with real users to gather feedback. Iteration: Refining designs based on user feedback and observations. “Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.” – Donald Norman, HCI Pioneer Types of Interaction Styles in HCI Command Line Interface (CLI): Efficient for technical users; relies on text commands. Graphical User Interface (GUI): Uses visual elements like icons and buttons for interaction. Voice User Interface (VUI): Uses speech recognition for interaction, e.g., Siri or Alexa. Gesture-Based Interaction: Employs physical movements for control, like swiping on a smartphone. AR & VR: Immersive interfaces that blend real and virtual environments for unique user experiences. “If you think good design is expensive, you should look at the cost of bad design.” – Ralf Speth, Former CEO of Jaguar Land Rover Emerging Trends & Technologies in HCI AI and Machine Learning: Interfaces that learn from user behavior for personalization. Augmented Reality (AR) & Virtual Reality (VR): Creating immersive experiences. Wearable Technology: Integrating technology into everyday accessories like watches or glasses. Natural User Interfaces (NUI): Interfaces relying on intuitive actions like gestures or voice. “The best interface is no interface.” – Golden Krishna, Design Strategist Designing for Accessibility Visual Accessibility: High contrast, scalable text, alternative text for images. Motor Accessibility: Simplified navigation, keyboard shortcuts, voice commands. Cognitive Accessibility: Use of simple language, consistent navigation, clear instructions. Auditory Accessibility: Captions for videos, transcripts for audio, sound alternatives. Guidelines: Reference to standards like WCAG (Web Content Accessibility Guidelines) and ARIA. “Accessibility is not a feature, it’s a social trend.” – Antonio Santos, Accessibility Advocate Evaluating Usability in HCI User Testing: Observing real users interacting with the product. Heuristic Evaluation: Experts assess the interface against usability principles. Surveys and Questionnaires: Collect quantitative data on user satisfaction. Cognitive Walkthrough: Simulating a user’s experience to identify usability issues. A/B Testing: Comparing two versions of a product to determine which performs better. “What gets measured gets managed.” – Peter Drucker, Management Consultant Real-World HCI Case Studies Successful Case Study: A well-known product that excelled in usability (e.g., Apple’s iPhone, Google Search). Failed Case Study: An example of poor design leading to failure (e.g., early versions of Windows Vista or Google Glass). Analysis: What was learned, how it impacted users, and changes made for improvement. “The ultimate inspiration is the deadline.” – Nolan Bushnell, Entrepreneur Outline: Week 1 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. Building HCI Project (Project WAYV) Students: ○ Aditya Bhandari, Manya Chaturvedi Supervisor: ○ Dr. Rajiv Ratn Shah The visually impaired students often struggle to learn Braille due to lack of interactive tools and guidance. Traditional methods are outdated and fail to engage them. Limited and insufficient teaching assets lead to decreased instructor motivation, while existing tools make tracking progress difficult and have steep learning curve. Despite government funding the PwD sector and regional language support, their implementation struggles due to a lack of user-centric tools and adequate support systems. Building HCI Project (Project WAYV) Braille alphabet developed by Louis Braille in the 19th century Braille Characters: Each Braille character consists of 6 dots arranged in a 2x3 grid (2 columns and 3 rows). Dot Representation: Dots are numbered 1 to 6, starting from the top left, proceeding across each row and column. https://fontmeme.com/braille/ Building HCI Project (Project WAYV) Week 1: Summary Good design is intuitive, user-friendly, and solves problems effectively, while bad design is confusing, inefficient, and fails to meet user needs or expectations. The goal of an interactive system is to create a seamless and efficient user experience that aligns with the user’s needs and objectives. Digital transformation is the integration of digital technologies into all areas of business, fundamentally changing how organizations operate and deliver value to customers. User-centered design is an approach that prioritizes the needs, preferences, and behaviors of users to create intuitive and effective products or solutions. Choosing project ideas from real-world problems around us ensures that solutions are relevant, impactful, and address tangible needs, creating value for society. Outline: Week 1 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. Additional Materials Tutorial ○ Topic: Good Design vs Bad Design ○ Presenter: Ritwik Bamba Sample HCI Project Demos ○ Presenters: Hardi Mihirbhai Parikh, and Sanjana Assignment 1 Further readings Good Design vs. Bad Design (HCI): ○ https://www.youtube.com/watch?v=II8TOCsoMK0 HCI Guidelines for Gender Equity and Inclusivity ○ https://www.morgan-klaus.com/gender-guidelines.html#Surveys Invisible women ○ https://99percentinvisible.org/episode/invisible-women/ HCI by Interaction Design Foundation ○ https://www.interaction-design.org/literature/topics/human-computer -interaction Thank you.