Human Computer Interaction The Interaction – Chapter 3

Contents Introduction Models of Interaction Ergonomics Interaction Styles Interactivity Experience, Engagement & Fun 4/21/2017 The Interaction 2

Introduction Communication What is Interaction Machine is capable of doing the job Humans need to get the job done from the system User System User must communicate his requirements to the system 4/21/2017 The Interaction 3

Contents Introduction Models of Interaction Ergonomics Interaction Styles Interactivity Experience, Engagement & Fun 4/21/2017 The Interaction 4

Models of Interaction Communication: Complex Human – Complex Systems Help Understand what is going on in the Interaction Identify the likely root of difficulties Two Models Norman’s Model (The execution-evaluation cycle) Abowd and Beale framework 4/21/2017 The Interaction 5

Some Terms of Interaction Domain The area of work under study Graphic design Graphic shapes, drawing surface, drawing utensils Tasks Operations to manipulate the concepts of a domain e.g. construction of graphic shape with certain attributes Goal What you want to achieve e.g. create a solid red triangle Domain Concepts of Domain 4/21/2017 The Interaction 6

Some Terms of Interaction Task How you go about doing it – Ultimately in terms of operations or actions e.g. … select fill tool, click over triangle Task Analysis Identification of problem space for user of an interactive system in terms of the domain, goals, intentions and task 4/21/2017 The Interaction 7

Some Terms of Interaction Task Language User’s language: Describes attributes of domain relevant to the User state Core Language System’s Language: Describes attributes of domain relevant to the System state 4/21/2017 The Interaction 8

Norman’s Model of Interaction Based on Execution – Evaluation Cycle Two major stages: Execution & Evaluation Execution Establishing the goal Forming the intention Specifying the action sequence Executing the action Evaluation Perceiving the system state Interpreting the system state Evaluating the system state with respect to the goals and intentions 4/21/2017 The Interaction 9

Execution – Evaluation Cycle system evaluation execution goal Example – Switching on the Light Evening falls while reading 4/21/2017 The Interaction 10

Execution – Evaluation Cycle Establishing the goal Forming the intention Specifying the action sequence Executing the action Perceiving the system state Interpreting the system state Evaluating the system state system evaluation execution goal You decide you need more light. Goal : Get more light Intention: Switch on the lamp Specify the Action Sequence to reach over an press the lamp switch Action executed – Perceive the results: Light is on or not Interpret – e.g. No light: Bulb has blown, Lamp not plugged in -> New Intentions Light comes out – Evaluate the new state according to your goal If the light is enough – Cycle Completes If NOT, formulate a new intention of switching on he ceiling light for example 4/21/2017 The Interaction 11

Using Norman’s Model Some Systems are harder to use than others Gulf of Execution – Difference b/w User’s formulation of actions Actions allowed by the system AIM: Reduce this gulf Gulf of Evaluation – Difference b/w Presentation of the system state User Expectation More effort required to interpret presentation: Less effective Interaction 4/21/2017 The Interaction 12

Human Error – Slips & Mistakes Understand system and goal Correct formulation of action Incorrect action Mistake May not even have right goal! Example Slip: Mistype, accidental mouse press Mistake: Magnifying glass icon – Find/Zoom 4/21/2017 The Interaction 13

Human Error – Slips & Mistakes Fixing Errors Slips Better interface design E.g. Putting more space b/w buttons Mistakes Better understanding of the system Improved training, radical redesigning 4/21/2017 The Interaction 14

Abowd & Beale Framework Interaction framework – Four parts User Input System Output Each part has its own unique language Interaction = Translation b/w languages Input + Output = Interface Interface sits b/w User and System U task S core O output I input 4/21/2017 The Interaction 15

Abowd & Beale Framework Interactive Cycle User begins with formulation of a Goal/Task Task articulated within the input language Input language is translated to core language as operations to be performed System transforms itself Performance Articulation System is in a new State 4/21/2017 The Interaction 16

Abowd & Beale Framework Interactive Cycle (Contd…) System attribute values rendered to Output User observes the output and asses the result of interaction w.r.t the Goal Presentation Observation Performance Articulation Problems in interaction = Problems in translation 4/21/2017 The Interaction 17

Abowd & Beale Framework Example: Video Recording using a remote control Ineffective Interaction: User not sure VCR is set to record properly Articulation: User pressed the keys on the remote in the wrong order Performance: VCR may record any channel but remote control lacks the channel selection Presentation: VCR display does not indicate the setting of program Observation: User does not interpret the feedback properly 4/21/2017 The Interaction 18

Contents Introduction Models of Interaction Ergonomics Interaction Styles Interactivity Experience, Engagement & Fun 4/21/2017 The Interaction 19

Ergonomics Physical Aspects of Interaction 4/21/2017 The Interaction

Ergonomics Ergonomics is the science of designing the job, equipment, and workplace to fit the worker Ergonomics involves arranging the environment to ‘fit’ the person in it Ergonomic Design/Products Easy to use and comfortable Reduce fatigue, strain Enhance productivity 4/21/2017 The Interaction 21

Ergonomics Examples Arrangement of Controls & Displays Grouped according to: Function, Sequence, Frequency Surrounding Environment Design of work Environment Where will the system be used? Who will use it? For how long will it be used? Seated users: Comfort, Back support etc. 4/21/2017 The Interaction 22

Ergonomics Examples Health Issues Lighting, Noise, Temperature, Time Spent etc. Lighting Ergonomics 4/21/2017 The Interaction 23

Ergonomics Examples Use of Colour An indicator – Not the only Cue Color use – Coherent with common conventions Red for Warning etc. 4/21/2017 The Interaction 24

Contents Introduction Models of Interaction Ergonomics Interaction Styles Interactivity Experience, Engagement & Fun 4/21/2017 The Interaction 25

Interaction Styles 4/21/2017 The Interaction 26

Common Interaction Styles Command line interface Menus Natural language Question/answer and query dialogue Form-fills and spreadsheets WIMP Point and click Three–dimensional interfaces 4/21/2017 The Interaction 27

Command Line Interface Way of expressing instructions to the computer directly Function keys, single characters, short abbreviations, whole words, or a combination Powerful – Offers direct access to system functionality Better for expert users than novices Command names/abbreviations should be meaningful! 4/21/2017 The Interaction 28

Menus Set of options displayed on the screen Options visible Rely on recognition rather than recall Easier to use Names should be meaningful Selection by: numbers, letters, alphabets, arrow keys, mouse Menus Purely Text May have a Graphical Component Restricted form of full WIMP system 4/21/2017 The Interaction 29

Menus 4/21/2017 The Interaction 30

Natural Language Familiar to user Speech recognition or typed natural language Problems Ambiguity at Phrase Level The boy hit the dog with the stick Ambiguity of Individual words Synonyms, Pronouns General natural language interface – Unlikely Restricted domain – Known Vocabulary 4/21/2017 The Interaction 31

Query Interfaces Question/answer interfaces Query languages (e.g. SQL) User led through interaction via series of questions Query languages (e.g. SQL) Used to retrieve information from database Natural-language-style queries SELECT Name FROM Students WHERE GPA > 3.0 Requires understanding of database structure and language syntax, hence requires some expertise 4/21/2017 The Interaction 32

Form-Fills Primarily for data entry or data retrieval Screen like paper form Easy to Use Generally allow Blank Fields Correction Facilities 4/21/2017 The Interaction 33

Spread Sheets Sophisticated variation of form-filling Grid of cells contain a value or a formula Formula can involve values of other cells E.g. sum of all cells in this column User can enter and alter data - spreadsheet maintains consistency MS Excel – Most common spread sheet today 4/21/2017 The Interaction 34

WIMP Interface Windows, Icons, Menu, Pointers Or Windows, Icons, Mice, and Pull-down menus Default style for majority of interactive computer systems, especially PCs and desktop machines Windows, MAC 4/21/2017 The Interaction 35

Point and Click Interfaces Commonly Used in .. Multimedia Web browsers Hypertext Just click something! Icons, text links or location on map Minimal typing Web is a typical point and click interface Closely related to WIMP 4/21/2017 The Interaction 36

Three Dimensional Interfaces Virtual Reality Interfaces Ordinary WIMP elements: 3D Appearance Shading Sculptured flat buttons … click me! … or sculptured 4/21/2017 The Interaction 37

Elements of the WIMP Interface Windows, icons, menus, pointers Buttons, toolbars, palettes, dialog boxes 4/21/2017 The Interaction 38

Windows Areas of the screen that behave as if they were independent Can contain text or graphics Can be moved or resized Can overlap and obscure each other, or can be laid out next to one another (tiled) Scrollbars Allow the user to move the contents of the window up and down or from side to side Title bars Describe the name of the window 4/21/2017 The Interaction 39

Windows Menu Bar Title Bar Scroll Bar 4/21/2017 The Interaction 40

Icons Small picture or image Represents some object in the interface Often a window or action Icons can take many forms Highly stylized Realistic representations 4/21/2017 The Interaction 41

Pointers Important component WIMP style relies on pointing and selecting things Uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts Wide variety of Pointer Cursors Cursor Hot-spot The location to which it points 4/21/2017 The Interaction 42

Pointers 4/21/2017 The Interaction 43

Menus Choice of operations or services offered on the screen Required option selected with pointer 4/21/2017 The Interaction 44

Menus Menu Bar at top of screen (normally), menu drags down Pull-down menu -Drags down on mouse click Fall-down menus - Mouse just moves over bar 4/21/2017 The Interaction 45

Menus Pin-up menus – ‘Pinned’ to the screen, hides when asked Pop-up menus Contextual menu Hidden – Pops up on request 4/21/2017 The Interaction 46

Menus Pie menus Arranged in a circle Easier to select item (larger target area) Quicker (same distance to any option) Take up more screen space – Not widely used! 4/21/2017 The Interaction 47

Menus Cascading menus Hierarchical menu structure Menu selection opens new menu 4/21/2017 The Interaction 48

Menus Keyboard accelerators Key combinations - same effect as menu item Two types Active when menu open – usually first letter Active when menu closed – usually Ctrl + letter 4/21/2017 The Interaction 49

Menu Design Issues Which kind of menu to use? What to include in menus at all? How to group items? Order Frequency and importance Opposite functionalities Choice of keyboard accelerators 4/21/2017 The Interaction 50

Buttons Individual and isolated regions within a display that can be selected to invoke an action Resemble ‘push buttons’ Toggle buttons Radio buttons – set of mutually exclusive choices Check boxes – set of non-exclusive choices 4/21/2017 The Interaction 51

Toolbars Long lines of icons Fast access to common actions Often customizable Choose which toolbars to see Choose what options are on it 4/21/2017 The Interaction 52

Palettes Little windows of actions – Shown/hidden e.g. available shapes in drawing package Menu ‘tears off’ to become palette 4/21/2017 The Interaction 53

Dialog Boxes Information windows that pop up to inform of an important event or request information. E.g. Save file Dialog box Specify the filename and location Disappears once the file is saved 4/21/2017 The Interaction 54

Interaction Styles - Usability An installation program 4/21/2017 The Interaction 55

Interaction Styles - Usability Change of interaction style Text Based Menu This program will install COCOS software in directory C:\COCOS. Type: 1 - to install COCOS 2 - to change directory 3 - to exit without installation Your choice: __ Is it clear what and how to do? 4/21/2017 The Interaction 56

Interaction Styles - Usability Usability is affected by Directness - Can users perform all operations they need? Can they perform them in a concise, natural way? Flexibility - Can users easily perform any reasonable operation at any time? Visibility - Can users see the actions they can perform? Is it clear which operations will be done by each action? Consistency - Can users predict application's behavior, based on uniform screen design, similar representation of the similar operations, etc.? 4/21/2017 The Interaction 57

Contents Introduction Models of Interaction Ergonomics Interaction Styles Interactivity Experience, Engagement & Fun 4/21/2017 The Interaction 58

Interactivity Defining feature of interactive system Speech driven interfaces Rapidly improving Still inaccurate Speech based: Input is Difficult, Interaction is Easier Yes/No Response – Reliable System reflects back its understanding E.g. Air line reservation “you want a ticket from New York to Boston?” 4/21/2017 The Interaction 59

Interactivity Error and Repair Can’t always avoid errors … Make it easy to detect errors …And then repair them Sys: Hello, this is the Go Faster booking system. What would you like? User: I want to fly from New York to London Sys: You want a ticket from New York to Boston User: no Sys: Sorry, please confirm one at a time Sys: Do you want to fly from New York User: yes … … … 4/21/2017 The Interaction 60

Contents Introduction Models of Interaction Ergonomics Interaction Styles Interactivity Experience, Engagement & Fun 4/21/2017 The Interaction 61

4/21/2017 The Interaction 62

What is important in HCI Usability Effectiveness Efficiency Satisfaction People are going to work better if they enjoy what they are doing 4/21/2017 The Interaction 63

User Experience Example – Shopping Internet stores Going to shops, feeling the clothes, being with friends Go shopping without spending Shopping Not an efficient financial transaction It’s an experience 4/21/2017 The Interaction 64

Psychology of Experience Flow – Total Engagement Doing something you know how to do? Edge of your abilities - beyond your limits Example: Rock Climbing Education Zone of proximal development Things you can do with some support (teacher, book etc.) Learning at its best in this zone 4/21/2017 The Interaction 65

Designing Experience (Simulation) Real Christmas crackers Cheap and cheerful! Joke, plastic toy, paper hat Pull and bang 4/21/2017 The Interaction 66

Designing Experience (Simulation) Virtual crackers Cheap and cheerful! Joke, web toy, cut-out mask Click and bang 4/21/2017 The Interaction 67

Designing Experience (Simulation) Virtual crackers Cheap and cheerful! Joke, web toy, cut-out mask Click and bang 4/21/2017 The Interaction 68

How crackers work sender recipient sender fill in web form To: wxv From: .. receive email recipient closed cracker page open message recipient clicks cracker opens ... very slowly sender watches progress joke links open cracker page web toy mask 4/21/2017 The Interaction 69

The cracker experience Real cracker Virtual cracker Surface elements Design Cheap and cheerful Simple page/graphics Play Plastic toy and joke Web toy and joke Dressing up Paper hat Mask to cut out Experienced effects Shared Offered to another Sent by email message Co-experience Pulled together Sender can't see content until opened by recipient Excitement Cultural connotations Recruited expectation Hiddenness Contents inside First page - no contents Suspense Pulling cracker Slow ... page change Surprise Bang (when it works) WAV file (when it works) 4/21/2017 The Interaction 70

Physical Design Design constraints Ergonomic – minimum button size Physical – high-voltage switches are big Safety – high cooker controls Context and environment – easy to clean Aesthetic – must look good Economic – … and not cost too much! Constraints may be self contradicting Front Vs Back control for a cooking range 4/21/2017 The Interaction 71

Managing Value If you want people to use your device/application Understand their value People use something ONLY IF it has perceived value AND value exceeds cost 4/21/2017 The Interaction 72

Managing Value Value Cost Helps me get my work done Faster Enjoyment (may not be calculated) Cost Download time Money £, $, € Learning effort 4/21/2017 The Interaction 73

General Lesson If you want someone to do something … Make it easy for them! Understand their values 4/21/2017 The Interaction 74

References Chapter 3 - Human Computer Interaction by Dix et al. User Interface Hall of Fame/Shame 4/21/2017 The Interaction 75