Chapter 1 Introduction to Human Computer Interaction May

Chapter 1 Introduction to Human Computer Interaction May 1, 2007 Mohamad Eid

Outline 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Human Computer Interaction: definition Why study user interface design? History Goals of HCI Five key ideas in HCI Optical Illusions Understanding users User productivity and usability Disciplines contributing to HCI engineering as a branch of software engineering User interface malfunctions Case studies in user interface malfunction Key points to review May 1, 2007 Mohamad Eid

Definition l l l The study of people and computing and the way they influence each other A set of processes, dialogues, and actions through which a human user employs and interacts with a computer A discipline concerned with the design, evaluation and implementation of interactive computing systems for human use with the study of major phenomena surrounding them May 1, 2007 Mohamad Eid

Human-Computer Interaction (HCI) l Human l l l The System Computer l l the end-user of a program the others in the organization the machine the program runs on Input Output Interaction l l the user tells the computer what they want the computer communicates results May 1, 2007 The User Mohamad Eid

Why Study User Interface Design? l 75% or more of development effort can go into the user interface l l User interface software is becoming more complex l l 40% to 70% is typical User interface specialists are needed Everybody needs to know the basics Complexity increase is faster than other aspects of systems Graphical user interfaces have provided the biggest jump in complexity Applications tend to grow to fill available computing resources There are direct financial benefits from improved user interfaces May 1, 2007 Mohamad Eid

Financial benefits & Costs of improved user interfaces l Increased user productivity l l Increased revenues from sales l l But l l The system is more intuitive Decreased maintenance cost l l The system is more attractive and customer satisfaction is higher Decreased training and support costs l l Direct financial savings The system does what user wants Much maintenance involves fixing UI problems Pay a little during development, or pay a lot after application/product release! Staff must be trained in user interface analysis and design Users must participate UI design tools are needed The benefits almost always outweigh the costs May 1, 2007 Mohamad Eid

History l Early days of computing: l l Computers cost more than people Computers had little functionality The UI was unimportant l l Early 1970 s l l l Field of ‘Man Machine Interface’ (MMI) born. Term changed gradually to ‘User Interface’ (UI) Ideas for first ‘Graphical User Interface’ (GUI) § l Dynabook at Xerox Late 1970 s and 1980 s l l l Products were called ‘user friendly’ No science in this: Just a market buzzword First real GUI’s developed § May 1, 2007 Xerox Star --> Smalltalk and Macintosh Mohamad Eid

History (Cont’d) l 1980 s l Term ‘Human-Computer Interaction’ (HCI or CHI) came into use § wider scope than UI (help, work practices etc. ) MS-Windows, X-Windows follow the Mac l Intense research into HCI 1990 s and early 2000 s l Virtual reality, speech and handwriting I/O, Soundblaster l l Good BUT also Bad UI’s continue to be developed!!! May 1, 2007 Mohamad Eid

Goals of HCI l Improve productivity and reduce costs through: l Safety: l l Functionality: l l How few resources does it take to get a task done? Usability : l l How many things can the system do? Efficiency: l l Does the system prevent danger? How easy to learn and use is the system? BUT l High functionality (many ways of doing the same thing) can actually reduce usability l May 1, 2007 By causing confusion Mohamad Eid

Five Key Ideas in HCI l Visibility l The UI should help the user always understand. . . l l l E. g. l l l The current state of the system What operations can be done When you position the cursor over a point on the screen, it should be clear what would happen if you clicked the mouse Feedback l When anything changes it should be made visible l When you delete a file, the system should not just say ‘ready’ l to be talking with somebody on the phone to have saved a file Goal l A state the user wants to reach l May 1, 2007 Mohamad Eid

Five Key Ideas in HCI (Cont’d) l Affordance l l The set of operations and procedures that can be done to an object ‘Perceived affordance’ is what typical users think can be done to an object l l l To improve visibility/feedback we need to: l l l Task l l May 1, 2007 Choose objects with good perceived affordance Design the UI to generate better perceived affordance An action the user wants to do l l Should a door be pulled or pushed? What does this icon mean? to call somebody to save the file Goals beget tasks, tasks beget goals. Mohamad Eid

Optical Illusions May 1, 2007 Mohamad Eid

Understanding Users l “Dual Processor" Theory: l Every interactive system is a distributed system running on two processors: l User interface design specifies/constrains both: • User behavior • System behavior May 1, 2007 Mohamad Eid

Understanding Users (Cont’d) l Users can be categorized: l By class l Determined by the pattern of use: § l l By personality type l Shy or reticent l Inarticulate l Disinterested or defensive l Intimidated l Involved designer! By ability l Physical disability § l l l --> watch out for left vs. right! Illiteracy § l --> don’t use colors as the only means of conveying information Dyslexia or other cognitive glitches § l --> innovative I/O may be needed Colorblind § May 1, 2007 e. g. , manager, salesperson, shipper, client --> icons may be needed Computer illiteracy Ignorance of domain / learner Mohamad Eid

User Productivity & Usability l User productivity = Functionality (what the computer can do) * Usability (what people can do with the computer) l If either of these is zero, the system is useless l Factors Influencing User Productivity l l l May 1, 2007 Kind and number of tasks Characteristics of users (ability, experience etc. ) Work environment (distractions etc. ) Training and documentation Functionality and usability of available software and hardware Mohamad Eid

A Model of Usability Factors May 1, 2007 Mohamad Eid

Disciplines Contributing to HCI l Cognitive psychology l l Ergonomics l l l Syntax and semantics of commands Speech I/O Artificial intelligence l l Speech I/O Intelligent ‘guessing’ what the user wants to do Knowledge representations of users and tasks Sociology and social psychology l l l Hardware and software efficiency of use and safety Linguistics l l Capabilities and limitations of human senses and thought processes Assisting people to work in groups with software Ensuring software works in different cultures Engineering and industrial design l l l May 1, 2007 Disciplined measurement-based approaches Esthetics Storyboarding etc. Mohamad Eid

Human Cognitive system l Perception and representation l l Some displays can be hard to interpret l Blue foreground l Optical illusions l Contrast in color but not brightness l Too many colors There are two ways to use graphics: l For modeling § l For coding § May 1, 2007 direct images of concepts representing underlying ideas, e. g. , displaying quantitative data Mohamad Eid

Bad User Interface May 1, 2007 Mohamad Eid

Human Cognitive system (Cont’d) l Attention limitations l People can be readily distracted l l Provide cues about what to focus on People get lost in complexity l Structure information so it is easy to browse through § § § l People multitask l l not too many items not too few items grouped logically Make the ‘state’ clear so users can jump backwards and forwards Some mental processes are automatic, or become so (contrasted with controlled processes) l May 1, 2007 These processes are very hard to unlearn Mohamad Eid

Human Cognitive system (Cont’d) l Memory limitations l Short term memory can contain 7± 2 ‘chunks’ l l l The more meaningful, the more easily remembered (familiarity, imagery and consistency contribute to meaningfulness) l l l Avoid situations where users have to remember more than this Logically group things so users can chunk them Use effective names and icons (even) animated ones Combine icons with words Icons can be analogies, examples or abstract, but not arbitrary Watch out for cultural differences (e. g. washroom symbols) People can more easily recognize than recall l May 1, 2007 Use menus, icons, quick lookup Mohamad Eid

A five level conceptual model of the UI l At each level: l Design must be done Problems can occur 1. Task Level l l 2. Conceptual Level l 3. l Command-driven, menu-driven, direct manipulation, hypermedia Design elements that are repeated throughout the system Interaction Element Level l 5. User’s intended mental model of the system Interaction Style Level l 4. What is to be done by the user Specific windows, dialogs, commands, menus Physical Element Level l May 1, 2007 Bitmaps, characters, data structures, callbacks Mohamad Eid

Evolution from plain SW- to usability Eng. l Normal software development (involving the UI) l l l Focuses on physical and interaction elements Waterfall model dominates (sequential), Spiral model Evaluation by functional spec reviews and testing User interface development l l l l Focuses on users and tasks Star model dominates (iterative) Evaluation by continuous user involvement Driven by heuristics and guidelines Integrates psychology etc. Influence on functionality Usability engineering l l May 1, 2007 Driven by engineering objectives Integrates rigorous engineering discipline Drives functionality Mohamad Eid

A conceptual model of user interface system architecture l Why layers? l l All layers: l l l Simplifies software development and maintenance Are developed in parallel Influence each other Included in complete system specifications Evaluated together Evolution of layers: l l Functional layer should need to change less often during iterative tuning of the interface All layers may need to change when business functions change but hopefully interaction styles should remain similar Controller Model May 1, 2007 View Mohamad Eid

Characteristics of Products and Applications l Each kind of application puts different demands on the UI designer l l Application for internal use vs. product for sale Generic utility vs. task-specific tool Walk-up-and-use vs. skilled usage Some design challenges: l l May 1, 2007 Customizing a generic utility product so that it becomes a task-specific tool for internal use and vice versa Converting an application requiring skilled usage to make it a walk-up-and-use application Mohamad Eid

User Interface Malfunctions l l Key idea: “There are no good user interfaces. . . just user interfaces that fit” l l l A truly bad user interface never fits But among the ‘good’ ones, some will suit one task/user; some will suit another To maximize fitness, we must minimize the occurrence of ‘malfunctions’ in the context of the expected use of the system May 1, 2007 Mohamad Eid

Definitions of malfunction l “A mismatch between what the user wants, needs or expects and what the system provides” l l l “A breakdown in usability” “An obstacle to performing a desired task” You should know that: l l Occasional malfunctions are normal Systematic or frequent malfunctions need to be fixed May 1, 2007 Mohamad Eid

Related ideas to ‘malfunction’ l l l Error: Identifiable mistake on the part of the designer Defect: A deviation from what the user needs A malfunction is a usability defect l l A defect in the smooth functioning of the user/computer system! Users may not be aware of many malfunctions l the malfunctions may only be located through careful analysis l May 1, 2007 they may be subtle Mohamad Eid

Malfunction Analysis l A disciplined approach to analyzing malfunctions l 1. 2. Provides feedback into the redesign process Play protocol, searching for malfunctions Answer four distinct questions: l Q 1. How is the malfunction manifested? l l Q 2. At what stage in the interaction is it occurring? l l May 1, 2007 Physical element level to task level Q 4. Why is it occurring? l 3. Goal forming, action decision, action execution, interpretation of results Q 3. At what level of the user interface is it occurring? l l What do you notice and who noticed it? What is its root cause List and prioritize possible cures Mohamad Eid

How is the malfunction manifested? a) Malfunctions detected by the system (easiest to detect) l omission of an argument l incorrect date format Cure: l Better prompts, consistency, visible examples, more forgiving of alternatives b) Malfunctions detected by the user during operation l taking wrong path in menu hierarchy l not finding required help l not being able to perform a certain action l not being able to tell which state system is in Cure: l Improve functionality, feedback, clarity, simplicity May 1, 2007 Mohamad Eid

How is the malfunction manifested? c) Malfunctions undetected (until later) l output produced is wrong due to wrong inputs l unnecessary work performed Cure: l Improve feedback indicating consequences of input; simplify d) Inefficiencies l excessive response time l excessive think time l unnecessarily long command sequences l unnecessary repetitions l complex operations that require use of reference Cure: l Simplify, speed system up May 1, 2007 Mohamad Eid

What Stage in the Interaction the Malfunction Occur? a) When the user decides on next goal (Forms an intent to do inappropriate thing) l l Cure: l decides to empty a field because user thinks it is unimportant (when it is important) decides to charge default exchange rate (when should obtain current exchange rate) Lead user through task better; better feedback; better training b) When the user specifies the action (Action does not match the goal) l deletes the record instead of emptying a field charge reciprocal of exchange rate l Improve clarity, feedback, prompts, conceptual model l Cure: May 1, 2007 Mohamad Eid

What Stage in the Interaction the Malfunction Occur? c) When the system executes the action l Defects in functionality Cure: l Fix functionality in normal way d) When the user interprets the resulting system state l thinks bank account has been debited when it has not l thinks system has ‘hung’ when it has not l thinks some data must be entered when it is the default l cannot understand resulting error message Cure: l Better feedback, better conceptual model May 1, 2007 Mohamad Eid

At Which Level Does the Malfunction Occur? a) Task level (Task and goals not supported) l What the user wants to do cannot be done by the system Functionality is not provided l Add functionality l Cure: b) Conceptual level (User has wrong mental model; does not understand intended conceptual model) l thinks that money is being deducted from bank account when it is being charged to a credit card thinks that dragging a file to the desktop means they are no longer on the disk thinks that dragging a disk to the trash can icon deletes disk contents l make conceptual model clearer; improve metaphors l l Cure: May 1, 2007 Mohamad Eid

At Which Level Does the Malfunction Occur? c) Interaction style level (system wide problem) l does not know how to pull down a menu l scrolls a page instead of a line l goes to next screen instead of scrolling l retypes command after an error instead of editing it Cure: l make operation of the interface more intuitive and consistent d) Interaction element level (specific detail inappropriate) l selects wrong button because label is misinterpreted l specifies invalid command syntax l specifies wrong code for option Cure: l More attention to details of the interface, simplification May 1, 2007 Mohamad Eid

At Which Level Does the Malfunction Occur? e) Physical element level (Physical execution incorrect) l l presses wrong key accidentally clicks on wrong pixel in image out-types machine (actions lost) types ahead when system is computing; keystrokes later applied to wrong action Cure: l Defenses to protect user from consequences; better hardware design; fix bugs in code May 1, 2007 Mohamad Eid

Why Does the Malfunction Occur? a) Lack of (on the part of the user): l Motivation: l l Attention: l l No feedback provided to tell user what is going on or cues provided by the system are not recognized or cues are misinterpreted Cures: Clearer, more consistent feedback Discrimination: l l l May 1, 2007 User is pre-occupied with other things. Input information processing: l l Poor job satisfaction user is unable to tell certain things apart e. g. red/green color discrimination e. g. two icons that are similar Cures: Improved expression of information Mohamad Eid

Why Does the Malfunction Occur? l l l Physical coordination: l e. g. wrong item selected because of difficulty positioning cursor with mouse. Cures: Alternate interaction mechanisms, better feedback Recall: l User did not remember command , syntax etc. Cures: Better mnemonics, online help, quick lookup mechanisms, command completion Knowledge / lack of learning: l User does not have business or software knowledge to make right choice. May 1, 2007 Mohamad Eid

Why Does the Malfunction Occur? b) Learning difficulties that cause malfunctions: l Learning is difficult l l l Learners make ad-hoc interpretations l l they assume computers work like manual methods they assume consistency Learners have trouble following directions l l May 1, 2007 they may not recognize their problem they may falsely think they have a problem Learners generalize from what they know l l users get frustrated learning takes time; can be hard to apply they often ignore them even if they see them they do not easily understand them Mohamad Eid

Why Does the Malfunction Occur? b) Learning difficulties that cause malfunctions: l Problems and features interact l l l Prerequisites and side-effects confuse learners Help facilities do not always help l l l they do not know what to ask for too much detail is often provided Other causes of malfunctions: l l l May 1, 2007 they do not see that one problem can cause another Excessive resource demands External events (e. g. noise) Misleading or inadequate training Unrealistic task definitions Intrinsic human variability Mohamad Eid

Summary l Goals of HCI: Improve l l l Visibility and feedback Affordance and perceived affordance Goal = state; task = action Human/computer as system running on 2 processors Types, classes and abilities of users Productivity = functionality * usability Usability factors l l safety functionality efficiency usability e. g. learnability, fit, acceptability Contributing disciplines l May 1, 2007 e. g. linguistics, Artificial Intelligence Mohamad Eid

Summary (Cont’d) l Human cognitive system - Limitations on: l l l Task analysis vs. functional analysis Star model with evaluation at centre UI levels l l l l perception attention memory task conceptual model interaction style interaction element physical element Usability engineering Layered approach = Model View Controller Software Design Pattern Malfunction as a kind of defect (of usability) May 1, 2007 Mohamad Eid