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

2 Today: Models of interaction Interaction styles Elements of WIMPS

3 Models of Interaction Terms: –goal –to be accomplished –domain –area of discourse –tasks –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

4 Norman’s Model of Interaction 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

5 Norman’s Model of Interaction Why interfaces cause problems: –gulfs of execution 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

6 Interaction Framework Framework: –four components –language for each component –input and output components form the interface –four translations –execution, state change, then evaluation SystemUser Interface

7 Interaction Framework Does the (users) task language map easily to the input language? –e.g., –turning on only a certain section of room lights –running a program whose icon is not visible

8 Interaction Framework Does the input language reach all system states? –e.g., –remote control unit with no way to access certain functions

9 Interaction Framework How to express system state with limited output devices? –e.g., –limited screen space to present the entire system state

10 Interaction Framework How effectively can the user interpret and evaluate the output? –e.g., –unmarked analog clock –misleading or no feedback –previewing facilities –advice

11 Frameworks and HCI

12 Ergonomics Ergonomics: –Human factors engineering –the study of the physical characteristics of the interaction –e.g., –physical controls –physical environment –qualities of the display

13 Ergonomics Arrangement of controls and displays: –efficiently accessible –avoid frustration –well organized

14 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

15 Ergonomics Health issues: –physical position –temperature –lighting –noise –time (exposure)

16 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

17 Command Line Example: % cat foo | tr -sc A-Za-z ‘\012’ | tr A-Z a-z | sort | uniq -c | sort -n | tail -50

18 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

19 Menus Example: Payment Details Payment methods: 1. Cash 2. Cheque 3. Credit card 4. Invoice 9. Cancel transaction Choose one: _

20 Menus 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

21 Natural Language What: –user expresses instructions in everyday language Issues: –ambiguity –“The man hit the boy with the stick” –restricted domains or vocabulary –e.g., –Train ticket buying

22 Question/Answer What: –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 –e.g., –wizards and assistants –Turbotax

23 Query Dialog What: –user constructs expressions to retrieve information from a database Issues: –query language syntax –requires experience –does result match what was intended? –e.g., –search engines

24 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

25 Spreadsheets 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

26 Interaction styles 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

27 WIMP What is a WIMP interface?

28 WIMP What: –windows, icons, menus, pointer –user in control Examples: –Microsoft Windows –Mac OS –X Windows + window manager –NeXTStep

29

30 Point and Click What: –virtually all actions take only a single mouse click Examples: –web browser –multimedia (CD ROM) programs –touchscreen information kiosks

31 3D What: –using 3D techniques, appearances, or workspaces Examples: –virtual reality –virtual worlds –shading effects on icons, buttons, etc.

32

33 3D

34 6D, n-D Interact with computer controlled, intelligent (??) machines:

35 WIMP Interface Elements Windows –overlapping, tiled –scrollbars –titlebars –move, resize, raise, lower, maximize, minimize, close, etc.

36 WIMP Interface Elements Icons

37 WIMP Interface Elements Menus: –pulldown, popup, falldown, tearoff, pinup, pie –grouping, hierarchy –keyboard accelerators –consistency –too tall?

38 WIMP Interface Elements Pointer: –click to focus, focus follows pointer –cursor shape indicates mode –tooltips, balloon help

39 WIMP Interface Elements Other: –buttons –radio buttons –check boxes –sliders –toolbars –tabs –progress indicators –palettes –dialog boxes

40 Screen Design and Layout Presenting information: –match presentation to purpose –e.g., –sort file listing by name, or by date, or … –alignment of text versus numbers

41 Screen Design and Layout Entering information: –use clear, logical layout of form fields –requires task analysis –alignment is important

42 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

43 Screen Design and Layout Knowing what to do: –style guides –platform or company standards for the design of user interfaces –e.g., Macintosh Human Interface Guidelines

44 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 –e.g., a button affords pushing

45 Screen Design and Layout Localization/internationalization: –change of language for text –alignment and layout –date formats –time formats –number formats

46 Screen Design and Layout Date/time formats:

47 Interactivity Beyond the “look” of a user interface, there is also the “feel”.

48 End What did I learn today? What questions do I still have?