Human-Computer Interaction

1. Human-Computer Interaction Lecture 3 – the science of usability

3. Some lessons from history

4. Control panels • scientific instruments • physically reconfigured • look at lamps & CRTs • simple human factors apply existing design guidance

5. DIMENSION A(11) READ A 2 DO 3,8,11 J=1,11 3 I=11-J Y=SQRT(ABS(A(I+1)))+5*A(I+1)**3 IF (400>=Y) 8,4 4 PRINT I,999. GOTO 2 8 PRINT I,Y 11 STOP Algebraic languages • work at your desk • translate formulae user’s own context and language

6. Data files • since 1890 census • ‘key-punch’ typists • file with rubber bands and paperclips paper procedures are useful

7. Command lines • teletypes since 1925 • still Unix ‘TTY’ • user sends command, waits for response • interaction dialogue tasks are structured in time OBEY YES SIR

8. Line editors – command and response • User must: • define command context • remember internal state • request reminders 10p quick brown foz .s/foz/fox/ + ? 9p ggggg .d

9. Menus • what commands can I perform? • why not list them for user to choose? :afb21$ ex Entering Ex mode. Type "visual" to get out. :help "help.txt" [readonly] 1185 lines, 55790 characters : recognition is easier than recall

10. WhatYouSeeIsWhatYouGet • “glass teletypes” • ‘scroll’ up the screen • ‘full-screen’ editor • user can see context let users see what interests them

11. Modeless interaction • Early full-screen editors built on line editors (e.g. vi) • request preview of file contents • command line area at bottom of screen • the same key sometimes enters text and sometimes triggers a command depending where you are • User studies explored confusion and complaints • Modal interaction is unpredictable • In modeless editors (e.g. emacs) • Given keystroke has the same effect in any context no modes!

12. Pointing devices • define text position • select from menu • light pen • joystick • mouse

16. Graphical displays • toggle between • text (control) mode • graphic (output) mode.

17. Icons and windows • bitmapped displays • contextual modes separated by frames. • pictures represent abstract entities.

19. WindowIconMenuPointer first UI that was both acceptable and affordable little change since 1984

20. Direct manipulation • Described by Shneiderman: • objects of interest continuously visible • operations by physical actions, not commands • actions rapid, incremental, reversible • effect of actions immediately visible • basic commands for novices, more for experts • Still not true of all GUIs

21. Graphics without directness • Object of analysis isn’t visible • Effect of controls isn’t immediate • All functions are presented to novices

22. Even less direct! remember direct manipulation

23. Models of the user – system black boxes

24. output input output input From research into visual perception Computer User From research into physical motion

25. The User longtermmemory workingmemory vision vision input problem solving motion control output

26. How to see (Marr) retinal image primal sketch 2 1/2D sketch 3D model Pivot - handle - cylinder - hinge - screw - … - … - …

27. How to see in 2.5D A whole lot of rubbish which is not at all important apart from needing to show that a window can have contents. It would be better if it actually said something of value, or even better if it happened to include some graphics, controls (such as menu bars or other realistic items) but that would have the disadvantage of managing and copying multiple items (or single large items in the case of windows grabbed from the screen - they could be down-sampled, but then they wouldn’t be legible anyway). So on the whole it is best to stick with this. Sorry. A whole lot of rubbish which is not at all important apart from needing to show that a window can have contents. It would be better if it actually said something of value, or even better if it happened to include some graphics, controls (such as menu bars or other realistic items) but that would have the disadvantage of managing and copying multiple items (or single large items in the case of windows grabbed from the screen - they could be down-sampled, but then they wouldn’t be legible anyway). So on the whole it is best to stick with this. Sorry. A whole lot of rubbish which is not at all important apart from needing to show that a window can have contents. It would be better if it actually said something of value, or even better if it happened to include some graphics, controls (such as menu bars or other realistic items) but that would have the disadvantage of managing and copying multiple items (or single large items in the case of windows grabbed from the screen - they could be down-sampled, but then they wouldn’t be legible anyway). So on the whole it is best to stick with this. Sorry.

28. How to see (1920’s ‘Gestalt laws’)

29. How to see (Palm Beach Florida, 2000)

30. How to see in 3D

31. How to see one thing quickly

32. The User longtermmemory workingmemory vision input problem solving motion control output

33. How to move (Fitts’ Law) • Make big targets • Make them close < <

34. The User workingmemory longtermmemory vision input problem solving motion control output

35. How to remember (Miller 1956) • The magic number 7+/-2 • ksnehfifmwbtdoanebgocnesj • fruitapplegrapeguavalemon

36. The User longtermmemory workingmemory vision input problem solving motion control output

37. How to learn (by association)

38. keyboard banana absence speed pencil notebook withhold telephone category rucksack concern camel classic correct bicycle transfer function armchair Learn these

39. Write them down!

40. keyboard camel rucksack bicycle armchair banana notebook telephone pencil concern speed absence withhold category classic correct transfer function How to learn (Paivio 1972)

42. The User longtermmemory workingmemory vision input problem solving motion control output

43. How to think (Ernst & Newell 1969) • Reduce difference between current and goal state • Decompose new goal into sub-goals (recursively) buy pizza get money go to shop buy it findjob …

44. Comparing designs before implementation Predicting human performance quantitatively

45. GOMS and the Model Human Processor • Goals: what is the user trying to do? • Operators: what actions must they take? • Home hands on keyboard or mouse • Key press & release (tapping keyboard or mouse button) • Point using mouse/lightpen etc • Methods: what have they learned in the past? • Selection: how will they choose what to do? • Mental preparation

46. Quantitative prediction from a model human • Which is faster? Make a word bold using a) Keys only b) Font dialog

47. Keys-only method <shift> +   +   + + +  <ctrl> + b

48. Mental preparation: M Home on keyboard: H Mental preparation: M Hold down shift: K Press : K Press : K Press : K Press : K Press : K Press : K Press : K Release shift: K Mental preparation: M Hold down control: K Press b: K Release control: K Keys-only method

49. 1 occurrence of H 3 occurrences of M 12 occurrences of K 0.40 1.35 * 3 0.28 * 12 7.81 seconds Keys-only method

50. Font dialog method click,drag move, click release, move move, click release click, move