Today: CMPUT 301: Lecture 14 The Interaction

Transcription

1 Today: CMPUT 301: Lecture 14 The Interaction Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by Ken Wong, Eleni Stroulia Zach Dodds, Martin Jagersand Models of interaction Interaction styles Elements of WIMPS 2 Models of Interaction Norman s Model of Interaction Terms: goal to be accomplished domain tasks area of discourse operations to manipulate domain concepts intention specific action required to meet goal core language computational attributes of the domain relevant to the system task language psychological attributes of the domain relevant to the user Execution-evaluation cycle: 1. establishing the goal 2. forming the intention 3. specifying the action sequence 4. executing the action 5. perceiving the system state 6. interpreting the system state 7. evaluating the system state with respect to goals and intentions 3 4 1

2 Norman s Model of Interaction Interaction Framework Why interfaces cause problems: Framework: gulfs of execution four components difference between 1. the user s formulation of the actions needed to reach the goal and 2. actions allowed by the system gulfs of evaluation distance between 1. the presentation of the system state and 2. the expectation of the user language for each component input and output components form the interface four translations execution, state change, then evaluation System Interface User 5 6 Interaction Framework Does the (users) task language map easily to the input language? turning on only a certain section of room lights running a program whose icon is not visible Interaction Framework Does the input language reach all system states? remote control unit with no way to access certain functions 7 8 2

3 Interaction Framework How to express system state with limited output devices? limited screen space to present the entire system state Interaction Framework How effectively can the user interpret and evaluate the output? unmarked analog clock misleading or no feedback previewing facilities advice 9 10 Frameworks and HCI Ergonomics Ergonomics: Human factors engineering the study of the physical characteristics of the interaction physical controls physical environment qualities of the display

4 Ergonomics Arrangement of controls and displays: efficiently accessible avoid frustration well organized Ergonomics Organizing controls and displays: functional group by function sequential arrange to reflect order of use in a task frequency most commonly used controls are most accessible Ergonomics Health issues: physical position temperature lighting noise time (exposure) Interaction Styles Common interfaces: command line menus natural language question/answer and query dialog forms and spreadsheets Direct/Indirect manipulation WIMP point and click 3D

5 Command Line Example: % cat foo tr -sc A-Za-z \012 tr A-Z a-z sort uniq -c sort -n tail -50 Command Line Advantages flexible and powerful useful for repetitive tasks Easy to define macros Disdvantages more difficult to use and learn need to recall commands (no cues) commands may vary across systems Menus Menus Example: Payment Details Payment methods: 1. Cash 2. Cheque 3. Credit card 4. Invoice 9. Cancel transaction Choose one: _ Advantages recognize options instead of recalling Structures learning (logical grouping and meaningful naming) Disadvantages Dangers of too many menus Can consume lots screen space Consider country selection

6 Natural Language What: user expresses instructions in everyday language Issues: ambiguity The man hit the boy with the stick restricted domains or vocabulary Train ticket buying What: Question/Answer user replies to a series of questions with yes/no or multiple choice answers Issues: easy to learn and use limited in flexibility and power wizards and assistants Turbotax What: Query Dialog user constructs expressions to retrieve information from a database Issues: query language syntax requires experience does result match what was intended? search engines Forms User is presented with a display resembling a paper form and enters data into fields Advantages: Simplifies data entry Requires modest training Issues: movement around the form input validation and correction

7 Spreadsheets Interaction styles like forms, with a grid of cells containing values and formulas Issues: another programming paradigm dependencies among cells Designed for: what-if analyses In practice used for: lists Indirect interface 1. User has to visualize in his/her mind 2. No direct feedback on state change 3. Dissociation between users command and system response Direct manipulation 1. Visually presents task concepts 2. Immediate reaction 3. Easy learning 4. Encourages exploration 5. Affords high subject satisfaction WIMP What is a WIMP interface? WIMP What: windows, icons, menus, pointer user in control Examples: Microsoft Windows Mac OS X Windows + window manager NeXTStep

8 Point and Click What: virtually all actions take only a single mouse click Examples: web browser multimedia (CD ROM) programs touchscreen information kiosks D What: using 3D techniques, appearances, or workspaces Examples: virtual reality virtual worlds shading effects on icons, buttons, etc

9 3D 6D, n-d Interact with computer controlled, intelligent (??) machines: WIMP Interface Elements WIMP Interface Elements Windows overlapping, tiled scrollbars titlebars move, resize, raise, lower, maximize, minimize, close, etc. Icons

10 WIMP Interface Elements Menus: pulldown, popup, falldown, tearoff, pinup, pie grouping, hierarchy keyboard accelerators consistency too tall? WIMP Interface Elements Pointer: click to focus, focus follows pointer cursor shape indicates mode tooltips, balloon help Other: buttons radio buttons check boxes sliders toolbars tabs progress indicators palettes dialog boxes WIMP Interface Elements Screen Design and Layout Presenting information: match presentation to purpose sort file listing by name, or by date, or alignment of text versus numbers

11 Screen Design and Layout Entering information: use clear, logical layout of form fields requires task analysis alignment is important Screen Design and Layout Aesthetics and utility: beauty versus utility a pretty interface is not necessarily a good interface still, good graphic design can increase user satisfaction Screen Design and Layout Knowing what to do: style guides platform or company standards for the design of user interfaces Macintosh Human Interface Guidelines Screen Design and Layout Knowing what to do: affordances where do I click? elements should suggest, by their shape and other attributes, what you can do with them a button affords pushing

12 Screen Design and Layout Localization/internationalization: change of language for text alignment and layout date formats time formats number formats Date/time formats: Screen Design and Layout Interactivity Beyond the look of a user interface, there is also the feel. What did I learn today? End What questions do I still have?