01-whatisHCI.pdf

What is HCI? Human Computer Interaction Luigi De Russis Academic Year 2022/2023 Goals § What is HCI? § What is usability? § What are the Interaction Design processes, and how does they relate with Software Engineering processes? § What is meant by User Centered Design?...

What is HCI? Human Computer Interaction Luigi De Russis Academic Year 2022/2023 Goals § What is HCI? § What is usability? § What are the Interaction Design processes, and how does they relate with Software Engineering processes? § What is meant by User Centered Design? 2 Human Computer Interaction Interconnected Concepts, and Evolution Interactive systems Ergonomics Human Factors Devices Performance, errors User interfaces MMI HMI Man-Machine Human-Machine Interaction Interaction HCI Human Computer User-centered design Interaction 3 Human Computer Interaction Human-Computer Interaction… In Brief § A multi-disciplinary field § Concerned with the design, evaluation, and implementation of interactive computing systems for human use o and with the study of major phenomena surrounding them § Involves two entities (the human and the computer) that determine each other behavior over time o framed in terms of humans' goals and related tasks/pursuits 4 Human Computer Interaction HCI Is Multidisciplinary § Psychology and cognitive science o User perceptual, cognitive and problem-solving skills § Ergonomics o User’s physical capabilities § Sociology o Understanding the wider context of the interaction § Computer Science and Computer Engineering o Building the necessary artifacts (HW, SW) § Business o Satisfying market needs § Graphic design o Produce an effective interface presentation § Technical writing o Documentation, manuals, on-screen content § … 5 Human Computer Interaction HCI Is Multidisciplinary § Psychology and cognitive science To help us in applying expertise o User perceptual, cognitive and problem-solving skills from many different fields: § Ergonomics o User’s physical capabilities § Design methods and § Sociology processes o Understanding the wider context of the interaction § Computer Science and Computer Engineering § Models o Building the necessary artifacts (HW, SW) § Heuristics § Business o Satisfying market needs § Best practices § Graphic design o Produce an effective interface presentation § Conventions § Technical writing o Documentation, manuals, on-screen content § Experiments and user studies § … 6 Human Computer Interaction The Goal of HCI Ingredients Goal § The User(s) § The system must support the user’s § The Computer(s) task, with a focus on its usability o Useful § The Task(s) to be accomplished o Usable o Used 7 Human Computer Interaction The Ingredients The human The computer § Sensory systems § Input peripherals o Visual o Keyboard, mouse o Trackpad, trackball o Auditory o Touch surfaces or screens o Haptic o Microphone o Spatial o Sensors § Acting systems o Card readers o … o Hands o Voice § Output peripherals o Head, Body, … o Screen o Audio (voice, sounds) § Cognitive processes o Haptics o Perception o VR/AR headsets o Memory o … 8 Human Computer Interaction Models of Interaction A general framework to understand how User and System interact 9 Human Computer Interaction What Is “Interaction” (in HCI)? § Interaction is… Taken from: Kasper Hornbæk & Antti Oulasvirta, What Is Interaction? In: Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems 10 Human Computer Interaction What Is Interaction (in HCI)? § Interaction… o is not the idea promoted and repeated in folk notions that a computer and a human are engaged o it concerns two entities – humans and computers – that determine each other’s behavior over time Their mutual determination can be of many types, including statistical, mechanical, and structural § Users, with their goals and pursuits, are the ultimate metric of interaction 11 Human Computer Interaction Assumptions § The user wants to accomplish some goals, in a specific application domain o Each domain has a specific jargon, set of possible processes and goals, artifacts and building blocks, … § Tasks are operations to manipulate the concepts of a domain o The goal is attained by performing one or more tasks § Interaction studies the relation between User and System o The system possesses a state and “speaks” a core language o The user possesses a state, that includes an understanding of the system’s state, some intention to perform a task, and “speaks” the task language 12 Human Computer Interaction Norman’s Model of Interaction Evaluation Output User System Input Execution 13 Human Computer Interaction Norman’s Model of Interaction Evaluation Output User System Input Execution 1. Establishing the goal - WHAT 2. Forming the intention - HOW 3. Specifying the action sequence 4. Executing the action 14 Human Computer Interaction Norman’s Model of Interaction 5. Perceiving the system state 6. Interpreting the system state Evaluation 7. Evaluating the system state Output User System Input Execution 1. Establishing the goal - WHAT 2. Forming the intention - HOW 3. Specifying the action sequence 4. Executing the action 15 Human Computer Interaction Norman’s Model of Interaction 5. Perceiving the system state 6. Interpreting the system state Evaluation 7. Evaluating the system state The gulf of evaluation Output User System Input The gulf of execution Execution 1. Establishing the goal - WHAT 2. Forming the intention - HOW 3. Specifying the action sequence 4. Executing the action 16 Human Computer Interaction Norman’s Diagrams 17 Human Computer Interaction Abowd and Beale Model, with Explicit UI The gulf of evaluation Output observation presentation User System (task language) (core language) articulation Input performance User Interface (UI language) The gulf of execution 18 Human Computer Interaction Human Errors* in the gulf of execution Slip Mistake § You have formulated the right § You don’t know the system well and action, but fail to execute that you may not formulate the right action correctly goal o E.g., click the wrong icon, or o E.g., click 🔎 for Zoom, but it means Search double-click too slow, … § The user’s mental model of the § May be corrected by a better system’s state is not correct interface (spacing, layout, highlights, …) § Requires more radical redesign, or additional training 19 Human Computer Interaction * About Human Errors § Human errors should never be considered as faults of the user § Rather, «they are usually a result of bad design» (Norman) § Humans tend to be imprecise, distracted, not-omniscient o System design should anticipate this human behavior o Minimize the chance of inappropriate actions (evaluation) o Maximize the possibility of discovering and repairing an inappropriate action (execution) o Enable users to understand the state of the system and build an appropriate model 20 Human Computer Interaction Example (articulation): find the right switch 21 Human Computer Interaction Example (presentation): Which are the allowed combinations? 22 Human Computer Interaction  Tools, Techniques and Environments for HCI design Screen design The gulf of evaluation Visualization UI toolkits Output observation presentation User System (task language) (core language) articulation Input performance User Interface (UI language) Dialogs Ergonomics Widgets The gulf of execution 23 Human Computer Interaction Frameworks: Major UI Styles § Command line interface § Menus § Natural language § Question/answer and query dialog § Form-fills and spreadsheets § Windows, Icons, Menus and Pointers (WIMP) § Mobile § Point and click § Three-dimensional interfaces 24 Human Computer Interaction Design Processes and Frameworks Approaches for shaping the design process 25 Human Computer Interaction User-Centered Design (UCD) § Avoid the risk of software project failure o Estimated 50% are affected by bad developeruser/client communication § UCD takes the needs, wants, and limitations of the actual end users into account during each phase of the design process o User-centered design issues are discovered during the early stages § Benefits: systems easier to learn, with faster performance, with less human errors, encourage users to discover advanced features, and avoids “building the wrong system” § Issues: how to find users? How many? How motivated? How to speak their language? How to extract user needs, business needs, organizational implications? 26 Human Computer Interaction Participatory Design § One step further than UCD, users are directly involved in the collaborative design of the things and applications they use § Engage a group of users o Discussions o Creating scenarios, sketches, dramatizations o Creating and testing lo-fi prototypes o Continuous meetings, flexible management o Highly reliant on the skills of the group moderators/leaders (keep involved, filter ideas, reward participation, work around resistances, …) o More effective with more mature and prepared user populations (less with kids, elderly, disabled, …) 27 Human Computer Interaction Agile Interaction Design § Borrows ideas from Agile development in software engineering § Key: evolutionary development o System is built incrementally in rapid release cycles o Rapid prototyping techniques (for hardware, software and physical objects) § Focus on low-cost many-iterations prototypes § Requires fast usability inspection (extreme usability, XU) § Makers’ culture (only if it involves users!) 28 Human Computer Interaction Design Thinking § “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, IDEO’s Executive Chair § A 5-stage, non-linear and iterative, process 1. Empathize – research users’ needs 2. Define – state the found needs 3. Ideate – challenge assumptions and ideate 4. Prototype – create solutions 5. Test – try the solutions out 29 Human Computer Interaction Service Design § Describe the contemporary shift from products (e.g., a car of a specific brand) to services, e.g., the car as a tool for an elderly customer that wants to take an Uber ride to visit a friend § Focus on the complete experience, including business resources and processes § Build upon five key principles, according to “This is Service Design Thinking”: 1. User-centered – focus on all users 2. Co-creative – include all relevant stakeholders 3. Sequencing – break a complex service into separate processes 4. Evidencing – envision service, not product, experiences 5. Holistic – design across networks of users and interactions 30 Human Computer Interaction Human-centered Design Process A process for designing interactive systems with a focus on usability 31 Human Computer Interaction Usability (ISO standard definition) § Usability: “extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use” o Note 1: The “specified” users, goals and context of use refer to the particular combination of users, goals and context of use for which usability is being considered o Note 2: The word “usability” is also used as a qualifier to refer to the design knowledge, competencies, activities and design attributes that contribute to usability, such as usability expertise, usability engineering, usability testing, etc. 32 Human Computer Interaction Usability § Usability: how well users can use the system’s functionality § Dimensions of usability: o Usefulness: does it do something people want? o Learnability: is it easy to learn? o Memorability: one learned, is it easy to remember? o Effectiveness: does it allow reaching the goal? o Efficiency: once learned, is it fast to use? o Visibility: is the state of the system visible? o Errors: are errors few and recoverable? o Satisfaction: is it enjoyable to use? 33 Human Computer Interaction Usability: Don’t Make Me Think 34 Human Computer Interaction Human-Centered Design Process (simplified and generic) 35 Human Computer Interaction Human-Centered Design Process – The Main Steps (1) § Needfinding – what is wanted o What exactly is needed? How are people currently accomplishing the goal? o User observation, interviews, … § Analysis o Formalize and structure the needs o Create interaction scenarios, stories, tasks o Compare current situation with expected new situation 36 Human Computer Interaction Human-Centered Design Process – The Main Steps (2) § Design o The main choices to shape the system o Rules, guidelines, design principles o Considering different types of users o Modeling and describing interaction o Visual layout o Consider all inputs from cognitive models, communications theories, organization issues 37 Human Computer Interaction Human-Centered Design Process – The Main Steps (3) § Iteration and prototyping o Design must be supported by intermediate verification o Evaluate the design in its partial forms: Prototypes Evaluation metrics o Involving users § Implementation and deployment o Hardware and software implementation o Documentation 38 Human Computer Interaction HCI in the Software Process How to include Human-centered processes in Software Engineering 39 Human Computer Interaction Software Engineering Processes Where / how does HCI fit in? 40 Human Computer Interaction Software Engineering Processes Where / how does HCI fit in? Always a step ahead! 41 Human Computer Interaction Always a Step Ahead § Before § User-centered steps are cheaper o Every design step than development o Every implementation step o User research about users’ needs o Any product iteration (or sprint) to decide what to design o … o Heuristic evaluations before testing with users § You need a user-centered step o Evaluating prototypes instead of o Evaluate usability full-fledged products o Experiment with users § Anticipate critical decision points o Evaluate alternative flows o Evaluate alternative layouts later in the project o … 42 Human Computer Interaction Always a Step Ahead § Usability, Safety, Performance, are part of Non-Functional Requirements § User-centered steps are cheaper than development o User research about users’ needs to decide what to design o Heuristic evaluations before testing with users o Evaluating prototypes instead of full-fledged products § Anticipate critical decision points later in the project 43 Human Computer Interaction Example § Each step must be o Preceded with user evaluation of the design choices and formalized requirements o Followed with user evaluation of the result § Must produce additional artifacts to allow this kind of iteration o Prototypes Iterative Waterfall process 44 Human Computer Interaction References and Thanks § Robert Miller, MIT Course “6.813/6.831: User Interface Design & Implementation” o Spring 2018 - http://web.mit.edu/6.813/www/sp18/ o Spring 2011 - https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6- 831-user-interface-design-and-implementation-spring-2011/index.htm § Dix et al: Human Computer Interaction o Chapters 3, 5 § Norman: The Design of Everyday Things o Chapter 2 § Krug: Don’t make me think o Introduction § Shneiderman: Designing the User Interface o Chapter 4 § Thanks to Fulvio Corno, past teacher of the course, for his work on this slides 45 Human Computer Interaction License § These slides are distributed under a Creative Commons license “Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)” § You are free to: o Share — copy and redistribute the material in any medium or format o Adapt — remix, transform, and build upon the material o The licensor cannot revoke these freedoms as long as you follow the license terms. § Under the following terms: o Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. o NonCommercial — You may not use the material for commercial purposes. o ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original. o No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits. § https://creativecommons.org/licenses/by-nc-sa/4.0/ 46 Human Computer Interaction