01_What is HCI.pdf

Goals ▪ What is HCI? ▪ How did interfaces evolve? ▪ What is usability? ▪ What are the Interaction Design processes, and how does they relate with Software Engineering processes? 3 ▪ What is meant by User Centered Design?...

Goals ▪ What is HCI? ▪ How did interfaces evolve? ▪ What is usability? ▪ What are the Interaction Design processes, and how does they relate with Software Engineering processes? 3 ▪ What is meant by User Centered Design? IT 110 – Intro to Human-Computer Interaction | Slide Hall of Shame or Fame? IT 110 – Intro to Human-Computer Interaction | Slide 4 Don’t Make Me Think IT 110 – Intro to Human-Computer Interaction | Slide 5 Not Thinking IT 110 – Intro to Human-Computer Interaction | Slide 6 Thinking IT 110 – Intro to Human-Computer Interaction | Slide 7 Things that make us think All kinds of things on a Web page can make us stop and think unnecessarily. Take names, for example. Typical culprits are cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. IT 110 – Intro to Human-Computer Interaction | Slide 8 Things that make us think Another needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. As a user, I should never have to devote a millisecond of thought to whether things are clickable—or not IT 110 – Intro to Human-Computer Interaction | Slide 9 IT 110 – Intro to Human-Computer Interaction | Slide 10 ▪ The most important thing you can do is to understand the basic principle of eliminating question marks. When you do, you’ll begin to notice all the things that make you think in the sites and apps you use. And eventually you’ll learn to recognize and avoid them in the things you’re building. ▪ However, you can’t make everything self-evident. –Your goal should be for each page or screen to be self-evident, so that just by looking at it the average user will know what it is and how to use it. In other words, they’ll “get it” without having to think about it IT 110 – Intro to Human-Computer Interaction | Slide 11 Interconnected Concepts, and Evolution Interactive systems Ergonomics Human Factors Devices Performance, errors User interfaces 12 MMI HMI Man-Machine Human-Machine Interaction Interaction HCI Human Computer User-centered design Interaction IT 110 – Intro to Human-Computer Interaction | Slide 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 13 ▪ 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 IT 110 – Intro to Human-Computer Interaction | Slide What is human-computer interaction (HCI)? ▪ HCI is the study and the practice of usability. –It is about understanding and creating software and other technology that people will want to use, will be able to use, and will find effective when used. ▪ HCI is the study of how people use computer systems to perform certain tasks –HCI tries to provide us with all understanding of the computer and the person using it, so as to make the interaction between them more effective and more enjoyable. IT 110 – Intro to Human-Computer Interaction | Slide 14 Motivation: Why Care About People? ▪ Human - computer interaction (HCI) –The study of the ways that people use computers –Practice of making computers easier for people to use ▪ Is that possible? –Yes ▪ It happens when people who design computers and software keep in mind that they are designing for other people IT 110 – Intro to Human-Computer Interaction | Slide Different Design Needs ▪ Three broad categories of computer user: 1. Expert users with detailed knowledge of that particular system. 2. Occasional users who know well how to perform the tasks they need to perform frequently. 3. Novices who have never used the system before. ▪ Users may well be novices at one computer application but experts at another one, so users will belong to different categories for particular computer systems. IT 110 – Intro to Human-Computer Interaction | Slide 16 HCI is Multidisciplinary ▪ Psychology and cognitive science o User perceptual, cognitive and problem-solving To help us in applying expertise skills from many different fields: ▪ Ergonomics o User’s physical capabilities ▪ Design methods ▪ Sociology and processes o Understanding the wider context of the interaction ▪ Models ▪ Computer Science and Computer Engineering o Building the necessary artifacts (HW, SW) ▪ Heuristics 17 ▪ Business o Satisfying market needs ▪ Best practices ▪ Graphic design ▪ Conventions o Produce an effective interface presentation ▪ Technical writing ▪ Experiments and user studies o Documentation, manuals, on-screen content ▪ … IT 110 – Intro to Human-Computer Interaction | Slide The Goals of HCI Ingredients Goal ▪ The User(s) The system must support the ▪ The Computer(s) user’s task, with a focus on its ▪ The Task(s) to be usability. accomplished ▪ Useful ▪ Usable ▪ Used IT 110 – Intro to Human-Computer Interaction | Slide 18 Attributes of Usability ▪ Useful: Does it do something people need done? ▪ Learnable: Can people figure out how to use it? ▪ Memorable: Do they have to relearn it each time they use it? ▪ Effective: Does it get the job done? ▪ Efficient: Does it do it with a reasonable amount of time and effort? ▪ Desirable: Do people want it? ▪ Delightful: Is using it enjoyable, or even fun? IT 110 – Intro to Human-Computer Interaction | Slide 19 The Ingredients The Human The Computer ▪ Sensory systems ▪ Input peripherals o Visual o Keyboard, mouse o Auditory o Trackpad, trackball o Touch surfaces or screens o Haptic o Microphone ▪ Acting systems o Sensors o Hands o Card readers o … o Voice o Head, Body, … ▪ Output peripherals o Screen ▪ Cognitive processes o Audio (voice, sounds) o Perception o Haptics o Memory o VR/AR headsets o … IT 110 – Intro to Human-Computer Interaction | Slide 20 21 What Is “Interaction” (in HCI)? ▪ Interaction is… 22 Human Computer Interaction Taken from: Kasper Hornbæk & Antti Oulasvirta, What Is Interaction? In: Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems IT 110 – Intro to Human-Computer Interaction | Slide 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 23 ▪ Users, with their goals and pursuits, are the ultimate metric of interaction IT 110 – Intro to Human-Computer Interaction | Slide 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 24 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 IT 110 – Intro to Human-Computer Interaction | Slide Norman’s Model of Interaction Evaluation Output User System Input 25 Execution IT 110 – Intro to Human-Computer Interaction | Slide Norman’s Model of Interaction Evaluation Output User System Input 26 Execution 1. Establishing the goal - WHAT 2. Forming the intention - HOW 3. Specifying the action sequence 4. Executing the action IT 110 – Intro to Human-Computer Interaction | Slide 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 27 Execution 1. Establishing the goal - WHAT 2. Forming the intention - HOW 3. Specifying the action sequence 4. Executing the action IT 110 – Intro to Human-Computer Interaction | Slide 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 28 Execution 1. Establishing the goal - WHAT 2. Forming the intention - HOW 3. Specifying the action sequence 4. Executing the action IT 110 – Intro to Human-Computer Interaction | Slide Norman’s Diagrams 29 Abowd and Beale Model, with Explicit UI The gulf of evaluation Output observation presentation User System (task language) (core language) 30 articulation Input performance User Interface (UI language) The gulf of execution IT 110 – Intro to Human-Computer Interaction | Slide 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 IT 110 – Intro to Human-Computer Interaction | Slide 31 * 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 32 action (execution) o Enable users to understand the state of the system and build an appropriate model IT 110 – Intro to Human-Computer Interaction | Slide Example (articulation): find the right switch IT 110 – Intro to Human-Computer Interaction | Slide 33 Example (presentation) ▪ Which are the allowed combinations? IT 110 – Intro to Human-Computer Interaction | Slide 34 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) 35 articulation Input performance User Interface (UI language) Dialogs Ergonomics Widgets The gulf of execution IT 110 – Intro to Human-Computer Interaction | Slide 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) 36 ▪ Mobile ▪ Point and click ▪ Three-dimensional interfaces IT 110 – Intro to Human-Computer Interaction | Slide 37 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 38 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? IT 110 – Intro to Human-Computer Interaction | Slide 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 39 (keep involved, filter ideas, reward participation, work around resistances, …) o More effective with more mature and prepared user populations (less with kids, elderly, disabled, …) IT 110 – Intro to Human-Computer Interaction | Slide 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 40 ▪ Requires fast usability inspection (extreme usability, XU) ▪ Makers’ culture (only if it involves users!) IT 110 – Intro to Human-Computer Interaction | Slide 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 Human Computer Interaction 41 2. Define – state the found needs 3. Ideate – challenge assumptions and ideate 4. Prototype – create solutions 5. Test – try the solutions out IT 110 – Intro to Human-Computer Interaction | Slide 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 42 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 IT 110 – Intro to Human-Computer Interaction | Slide 43 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 44 knowledge, competencies, activities and design attributes that contribute to usability, such as usability expertise, usability engineering, usability testing, etc. IT 110 – Intro to Human-Computer Interaction | Slide Interaction Capability (ISO 25010) – A Standard to Evaluate Software Appropriateness recognizability - Degree to which users can recognize whether a product or system is appropriate for their needs. Learnability - Degree to which the functions of a product or system can be learnt to be used by specified users within a specified amount of time. Operability - Degree to which a product or system has attributes that make it easy to operate and control. User error protection. Degree to which a system prevents users against operation errors. User engagement - Degree to which a user interface presents functions and information in an inviting and motivating manner encouraging continued interaction. IT 110 – Intro to Human-Computer Interaction | Slide 45 Interaction Capability (ISO 25010) – A Standard to Evaluate Software Inclusivity - Degree to which a product or system can be used by people of various backgrounds (such as people of various ages, abilities, cultures, ethnicities, languages, genders, economic situations, etc.). User assistance - Degree to which a product can be used by people with the widest range of characteristics and capabilities to achieve specified goals in a specified context of use. Self-descriptiveness - Degree to which a product presents appropriate information, where needed by the user, to make its capabilities and use immediately obvious to the user without excessive interactions with a product or other resources (such as user documentation, help desks or other users). IT 110 – Intro to Human-Computer Interaction | Slide 46 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? 47 o Efficiency: once learned, is it fast to use? Human Computer Interaction o Visibility: is the state of the system visible? o Errors: are errors few and recoverable? o Satisfaction: is it enjoyable to use? IT 110 – Intro to Human-Computer Interaction | Slide Don’t Make Me Think IT 110 – Intro to Human-Computer Interaction | Slide 48 Human-Centered Design Process (simplified and generic) IT 110 – Intro to Human-Computer Interaction | Slide 49 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 50 o Compare current situation with expected new situation Human Computer Interaction IT 110 – Intro to Human-Computer Interaction | Slide 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, 51 organization issues IT 110 – Intro to Human-Computer Interaction | Slide 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 Human Computer Interaction 52 o Hardware and software implementation o Documentation IT 110 – Intro to Human-Computer Interaction | Slide 53 Software Engineering Processes Where / how does HCI fit in? 54 IT 110 – Intro to Human-Computer Interaction | Slide Software Engineering Processes Where / how does HCI fit in? Always a step ahead! 55 Human Computer Interaction IT 110 – Intro to Human-Computer Interaction | Slide Always a Step Ahead ▪ Before ▪ User-centered steps are cheaper than o Every design step 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 56 o Experiment with users ▪ Anticipate critical decision points later in o Evaluate alternative flows the project o Evaluate alternative layouts o … IT 110 – Intro to Human-Computer Interaction | Slide 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 57 IT 110 – Intro to Human-Computer Interaction | Slide 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 58 allow this kind of iteration o Prototypes Iterative Waterfall process IT 110 – Intro to Human-Computer Interaction | Slide 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 59 ▪ Krug: Don’t make me think Human Computer Interaction 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 IT 110 – Intro to Human-Computer Interaction | Slide 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. 60 o Human Computer Interaction 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/ IT 110 – Intro to Human-Computer Interaction | Slide 61