LU1 Foundation of HCI PDF

Unit 1: Foundation of HCI  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces  Considerations  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces ...

Unit 1: Foundation of HCI  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces  Considerations  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces  Considerations  Ask poe.com/HCInteraction What is the definition of HCI? 5 https://image.slidesharecdn.com/hci-150531210927-lva1-app6892/95/hci-basics-2-638.jpg?cb=1433168543  Original home  HCI’s original home is computer science, and remains a principal area in CS, but HCI has expanded and diversified to include other fields.  Multidisciplinary fields of computer science, cognitive science, and human factors engineering.  Example: The advent of smart home devices like Amazon's Echo and Google Home, which allow users to interact seamlessly with their environment using voice.  Original focus  HCI’s original focus was on personal productivity applications, due to the emergence of personal computers in the early 1980s.  E.g. word processors, text editors, spreadsheets.  Current focus: HCI aspects of platforms designed for social communication and teamwork. More needs from users  HCI emerged as more people wanted convenient ways of interacting with computers.  The desire for ease led to the development of graphical user interfaces (GUIs) over command-line interactions.  Example: Apple's Macintosh in 1984, introducing a mouse-driven GUI for broader consumer accessibility. HCI then and now 11 HCI: then VS now (discuss with you partner) Aspect of HCI Past Now Interaction Devices User Interface Interaction Paradigm Input Methods Display User-Centered Design Accessibility Collaboration HCI then VS now Aspect of HCI Past Now Touchscreens, voice commands, Interaction Devices Primarily keyboard and mouse gestures User Interface Text-based interfaces Graphical user interfaces (GUIs) Interaction Command-line interfaces Natural language processing and AI Paradigm Input Methods Physical buttons and switches Virtual keyboards, touch, stylus, voice Display Monochrome, low-resolution screens High-definition, color, and touchscreens User-Centered Less emphasis on user needs and Strong emphasis on user research and Design preferences testing Inclusive design and accessibility Accessibility Minimal consideration for accessibility standards Limited support for remote Real-time collaboration and video Collaboration collaboration conferencing  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces  Considerations HCI, ID, Usability UX HCI ID UX  Today, the terms HCI, Interaction Design (ID) and User Experience (UX) are often used interchangeably, but they are NOT the same.  The difference between HCI and ID is the scope – HCI has narrower scope HCI, ID, Usability UX HCI ID UX Concerns with Concerns with the How a user  Today, the terms HCI, design, theory, research feels when Interaction Design (ID) and evaluation, and and practice of interfacing User Experience (UX) are implementation designing user with a often used interchangeably, of interactive experiences for all product. but they are NOT the same. computing manner of  The difference between HCI systems for technologies, and ID is the scope – HCI has human use. systems, and narrower scope products.  Newspapers Pleasure and Sauce bottles User experience satisfaction Reclining chairs (UX) is how a When using it, Every product Clothes user feels when looking at it, that is used by Software, interfacing with holding it, a user has UX computer a product opening/closing systems it. Smart devices IoT Usability refers to the The terms usability A usable product is product’s ease of HCI’s big focus used to and UX are sometimes easy to learn, learning and using. be on usability, but used interchangeably effective to use, and Usability replaced the has shifted to UX but they are NOT the provides an enjoyable term “user-friendly” today same – usability is a UX in the early 1990s part of UX HCI, ID, Usability and UX HCI, ID, Usability and UX  The core philosophy of HCI is to provide safe, usable and efficient computing systems to everyone.  Using HCI/ID, usable systems (products) with quality UX can be produced.  Example: Apple's VoiceOver, a screen reader that allows visually impaired users to interact with their devices through spoken feedback.  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces  Considerations 01 02 03 Poorly designed interfaces A computing product may be If a product is not usable, and interaction could lead to state-of-the-art and high end, and/or causes frustrations (or users having difficulties with but if it is not usable and any of the effects discussed), computer systems. does not provide good UX, it no person will use the is not effective and will not product by choice; as a be able to help those it is result, the product may be intended for. rejected or abandoned, and sales/downloads can be affected. The importance of HCI  Ask poe.com/HCInteraction Think of a software/mobile app that frustrate you to the point you stopped using it? User frustration and dissatisfaction  Verbally and physically abusive: swearing, shouting, being violent  Stress and frustration levels towards technology  Computer/Internet rage  Abandoning/stop using the product  Give an example of app/software that was difficult to use that it delayed your work/productivity? Effects of poorly designed UI – loss of productivity, efficiency and money  Users are less productive when they are frustrated with their computer systems.  Efficiency is compromised as more time and resources are spent in order to complete a task.  More money is spent to pay overtime, compensation, etc. Safety issue  Human or environmental safety.  Both the computer system users and general public can be affected.  Poor user interface pose danger to safety critical systems such as aircraft system, air traffic control systems, nuclear power plants, medical devices, etc. (E.g. No error recovery button/switch on the interface).  E.g.: Testa car dashboard.  Effects of poorly designed UI – small irritations  Less disastrous but still problematic  May lead to frustrations  Think of small irritations/annoyances example when using your personal computer/smartphone or a software Case study discussion 35 Discuss what is the “real” problems here? Discuss what is the “real” problems here  G1: Information Asymmetry. One of the salient HCI-related issues lies in the effective design and dissemination of real-time information.  G2: Ticketing Inefficiencies. HCI plays an essential role in the ticketing process, especially with the increasing transition to digital and automated solutions.  G3: Intermodal Connectivity. The challenge here is the HCI design that facilitates smooth transition between different modes of rail lines  G4: Safety and Emergency Information Systems. Effective dissemination of safety and emergency guidelines is an HCI concern of paramount importance  G5: Personalization and Adaptive Interfaces. As public transit systems increasingly integrate smart technologies, the potential for personalizing user experience through adaptive interfaces arises.  G6: Voice and Gesture-based Interactions. Voice and gesture-based interactions could be particularly useful for individuals who have disabilities or for scenarios where hands-free operation is essential. Gr Questions Tasks G1 How can mobile app design effectively Sketch app interfaces that incorporates real-time tracking, disseminate real-time information, such as notifications, and user-friendly navigation features that can cater to schedules, delays, and route changes, to a a wide demographic, including non-technical users. diverse user base in a metro system? G2 What HCI solutions can be employed to Design app interfaces for a mobile app that allows seamless ticket streamline the ticketing process, minimize purchasing, scanning, and digital storage. Pay attention to reducing errors, and make it universally accessible in a the number of steps and making the process intuitive. tube system? G3 How can HCI contribute to facilitating seamless Sketch app interfaces focused on offering integrated schedules, real- intermodal transitions for passengers using both time updates, and wayfinding options that make it easier for light rail and buses? passengers to switch between different modes of public transit. G4 What role can mobile app interfaces play in Design app interfaces that incorporates features such as emergency ensuring that passengers receive timely and alerts, digital signage, and quick-access buttons for emergency effective safety and emergency instructions? services, all designed with accessibility and ease-of-use in mind. G5 How can a mobile app interface be designed to Sketch app interfaces that adapts to user behavior and preferences provide personalized transit solutions without for routes, modes of transport, and time schedules, while compromising on data privacy and security? incorporating robust privacy and security features. G5 How can voice and gesture-based interactions Sketch app interfaces that includes options for voice commands and be integrated into a metro system’s mobile app gesture-based controls, keeping in mind the diverse needs of users, to enhance accessibility and hands-free including those with disabilities. operation? Debriefing Group 1:Information Asymmetry 1. Affordance Theory: Ensure that the interface elements clearly afford their functions. Icons or buttons related to real-time tracking, for example, should be intuitively designed to eliminate ambiguity. 2. Cognitive Load: Utilize Gestalt principles to present information hierarchically or through chunking, thereby reducing cognitive overload when passengers try to understand schedules or delays. 3. Feedback Loop: Implement an immediate feedback system, such as spinner icons or haptic feedback, to indicate data loading or transaction status, fulfilling Norman's principle of visibility. 4. Learnability: The app should employ universally understood icons and terminologies, in accordance with Nielsen's Usability Heuristics, to make it easy for first-time users or non-technical passengers. 5. Accessibility: Use principles from Universal Design to make sure the app caters to a diverse user base, including features like text-to-speech for visually impaired users, Group 2: Ticketing Inefficiencies 1. Fitts' Law: Position frequently used buttons like 'Purchase' or 'Scan Ticket' in easily accessible areas of the interface to minimize the effort required to complete a transaction. 2. Consistency: Ensure that the interface follows established conventions for e- commerce transactions, in line with Nielsen's principle of consistency. 3. Error Prevention and Recovery: Utilize Norman's design principles to provide clear error messages and undo options for transactions gone awry. 4. Affordances and Signifiers: Use clear signifiers for interactive elements like dropdown menus for selecting ticket types, adhering to Norman's principles. 5. Contextual Design: Understand the user workflow through field studies or ethnographic research and design the ticketing process to align with natural user behaviors. Group 3: Intermodal Connectivity 1. Information Foraging Theory: Implement features like predictive text and smart suggestions to help users find the most efficient path between modes of transport. 2. Feedback Mechanisms: Use real-time updates or push notifications to maintain a consistent feedback loop, ensuring passengers are always aware of their transit status. 3. Affordances: Clear visual cues should be provided for switching between modes of transport within the app. 4. Cognitive Maps: Employ spatial metaphors and landmarks in the UI to help users form mental models of their transit landscape, echoing Norman's concept of a conceptual model. 5. Minimalist Design: Adhere to Nielsen’s principle of simplicity to ensure that only essential information is displayed, thus reducing cognitive load during stressful intermodal transitions. Group 4: Safety and Emergency Information Systems 1. Visibility of System Status: Employ Norman's principle to give immediate feedback upon triggering safety features like emergency buttons. 2. Mapping: The emergency features should be mapped naturally to expected actions, such as a large, clearly labeled button for emergency contacts. 3. Color Psychology: Utilize colors effectively to signify urgency and importance, in line with HCI theories on emotional design. 4. Just-in-Time Information: Provide contextual help or tooltips to guide users on how to act in emergency scenarios. 5. Accessibility: Utilize Universal Design principles to make safety features accessible for everyone, including auditory cues for visually impaired users. Group 5: Personalization and Adaptive Interfaces 1. User Modeling: Utilize algorithms that adapt to user behavior over time, providing personalized suggestions or alerts based on previous activity. 2. Transparency: Clearly communicate how and why data is being used for personalization to maintain user trust, in alignment with principles of Ethical HCI. 3. Customizability: Allow users to easily adjust or disable personalization features, in accordance with Nielsen’s flexibility and efficiency of use heuristic. 4. Feedback Loop: Continuously update the personalization features based on user interaction and feedback, thereby ensuring the system is adaptive and learning. 5. Data Privacy: Apply privacy-by-design principles to ensure that personal data is encrypted and anonymized, aligning with ethical considerations in HCI. Group 6: Voice and Gesture-based Interactions 1. Natural User Interfaces (NUI): Utilize NUI principles to design voice and gesture controls that mimic natural human behavior, making the system more intuitive. 2. Affordances and Feedback: Ensure that voice and gesture controls give immediate, contextual feedback to indicate successful or failed interaction, as per Norman's principles. 3. Error Tolerance: Implement forgiving algorithms that can understand a range of accents or gestures, minimizing error rates. 4. Discoverability: Features should be easily discoverable without extensive user manuals, adhering to Nielsen’s self-descriptiveness heuristic. 5. Cultural Sensitivity: Account for cultural variations in gestures and speech patterns, in line with HCI’s focus on global user interfaces.  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces  Considerations  Ask poe.com/HCInteraction What are the various types of common user interface? Types of user interfaces The UI is the part of the It is viewed as the “bridge” There are different types of computer system with which between the user and the user interface (UI), each with a user interacts in order to system its own ways of interaction, undertake tasks and achieve for different environments, goals people, places, and activities Types of user interfaces UI that have emerged in the last 40 years Command-line interface Gesture-based systems Graphical user interface (GUI) Haptic interfaces Multimedia Multimodal interfaces Virtual reality Shareable interfaces Website Tangible interfaces Mobile devices Augmented reality Appliances Wearables Voice user interfaces Robots and drones Pen-based interfaces Brain computer interface Touchscreens Smart Graphical user interface (GUI)  Consists of the basic building blocks: Windows, icons, menus, pointing devices  WIMP Interface Paradigm:This combination is known as the WIMP (Windows, Icons, Menus, Pointing devices).  Example:Microsoft Windows 95, which popularized the Start menu, taskbar, and desktop icons, fully embracing the WIMP paradigm. Command-line interface Requires user to type in commands using keyboards   Combines different media within a single interface – graphics, text, video, sound, animation, various interactivity Multimedia interface 56 Website interface Interfaces of the pages viewed on the World Wide Web Virtual Reality Interface Interface when user is immersed in an artificial environment 60 Appliances interface  Give your examples… Voice user interface  Give your examples 62 Mobile devices interface Interfaces of handheld devices used when on the move 63 Touchscreen interface  Interface that detects user’s touch presence and location on the display  Pen-based interface Requires user to write/draw/select/move objects on an interface using stylus/light pen 65  Gesture-based systems interface Requires user to move arms and hands to communicate or provide information to the device  Haptic interface Using vibration and force to provide tactile feedback Shareable interface Designed for more than one user Tangible interface  Uses sensor-based interaction where physical objects are coupled with digital interactions MagicCubes toolkit 69 Multimodal interface Uses different modalities (touch, sight, sound, speech) to enrich user experiences 70 Brain computer interface Provides communication pathway between a person’s brain waves and another device Robots and drones interface  Robots: programmable machines to do tasks  Drones: unmanned aerial vehicle  Ask poe.com/HCInteraction What are the main HCI issues related to how we interact with Sophia? Smart interface Smart building user interface Augmented reality interface Interface with virtual representations superimposed on physical devices and objects Wearables interface  Interfaces of devices that are worn on the body Natural user interfaces  enables people to interact with computers in the same way they interact with the physical world through using their voice, hands and bodies  Xbox Kinect  Microsoft PixelSense  Perceptive Pixel  3D immersive touch  Agenda  Introduction to HCI  HCI, ID, Usability and UX  The importance of HCI  Types of user interfaces  Considerations  Any system The core designed with HCI philosophy of HCI in mind will and is to provide safe, should be usable and maximally efficient systems accessible to ALL to everyone users Considerations This includes users With different sets of abilities, With different ranges of expertise and knowledge, from marginalized groups or minorities  Inclusive design  Inclusive design takes into consideration the full range of human diversity with respect to forms of human differences  Ability, language, culture, gender, age, etc.  Inclusive design intentionally include the needs of users in the product design, to  meet user requirements  respect the needs and expectations of the diverse range of users Inclusive design The goal of inclusive design Inclusion is important to Empathy for a diverse user is to make users feel avoid negative user audience is a key included and to ensure the experiences component of inclusive product’s UX takes into design consideration a diverse group of users Avoid negative experiences e.g. barriers, denied access, discriminatory/alienation, frustration, offensive, insensitivity, stereotyping, appropriation etc. Boost image of the product and position as market leader Boost sales/downloads as the product can be used by a larger and more diverse group of users What to consider in inclusive design?  Abilities/disabilities  Computer literacy and skills  Income/economic situation  Education  Geographic location  Culture and religion  Age  Language  Gender  Access Accessible design  Focuses on the different levels of users’ abilities, and  Minimizes the barriers so that products can be accessed and used by users with disabilities  Accessible design is one of the many aspects of inclusive design  Example: Google's Live Transcribe, which automatically converts speech into text in real-time, aiding users with hearing impairments during conversations. 88 Types of disabilities  Permanent, situational, or temporary disabilities  Mental or physical disabilities  Example: Apple's "Switch Control" feature, enabling individuals with limited mobility to interact with their devices using switch-access hardware, catering to both permanent and situational disabilities. VISION (SIGHT) HEARING MOTOR/MOBILITY/ SPEECH (SPOKEN COGNITION/ LEARNING DEXTERITY WORDS) MEMORY (MOVEMENT) (THINKING) The areas of disabilities Accessible design - Example: Apple Accessibility Support  Accessibility features are built into Apple’s products – iPhone, iPad, Mac, Watch, TV, HomePod  For users with vision, hearing, mobility and learning disabilities Watch video here: https://www.apple.com/accessibility/ Accessible design  Example: Apple Accessibility Support (https://www.apple.com/accessibility/) Vision Hearing VoiceOver Live Listen – use with hearing aids Display Accommodations – filters for colour Sign language communication: FaceTime high blindness quality video and fast frame rate Magnifier (camera & Zoom) LED flash – incoming notification Upsize text Type a note to Siri Mobility Learning Switch Control SpeakScreen – read text on screen Voice control – Siri Shortcuts Typing Feedback – spoken feedback on text AssistiveTouch corrections and word suggestions Accesibility Keyboard Guided Access – limit amount of time spent on an app Safari Reader – reduces visual clutter to avoid sensory overload 92 Accessible design - Android Accessibility Suite  Screen reader: TalkBack, Select to Speak  Display: size, magnification, contrast & colour options  Interaction controls: Voice Access, Switch Access  Braille display: BrailleBack (can be used with TalkBack)  Audio & on-screen text: Captions, Live Transcribe, Sound Amplifier Cultural differences  Taking into consideration the cultures of the users include ensuring products are either:  universally accepted by people from all parts of the world OR  accepted by the target user group  Examples:  1/9/2019 vs. 9/1/2019 – does this mean the same, or not? Which should be used for international services and online forms?  1/9/2019 can be 1 September, or 9 January – depends on which part of the world you are from  Alphabet system – reading from left to right (e.g. Latin), or right to left (e.g. Arabic)  Colour or icon representations  Specific users Taking into considerations the needs of people with specific needs  Senior citizens/the elderly  Children (child computing interaction)  Children with special needs  People of specific demographics (e.g. rural vs urban users)  New/casual users vs expert/power users  Occupation  Athletes  Ask poe.com/HCInteraction What are specific HCI considerations related to Senior citizens/the elderly? List out 5 main summary points from this unit Summary Introduction to HCI, ID, The Types of user Considerations HCI Usability and importance of interfaces UX HCI Definition Relationship Why do we Available Designing for Brief history between HCI, need to design interfaces for users with ID, Usability computing the past 40 considerations and UX systems with years of their HCI attributes