Introduction to Human Computer Interaction

Transcription

1 Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 8 & 9 Visual Design, Colors, Fitts Law, Gulfs Ponnurangam Kumaraguru ( PK ) Associate Professor ACM Distinguished & TEDx Speaker Linkedin/in/ponguru/ 1

2 1997

3 2018

4 1994

5 1994

6 1995

7

8 1996

9

10 1996

11

12 Fundamentals of Visual Design 12

13 Outline Grid Systems Hierarchy of Size Grouping Small Multiples Repetition Color 13

14 Example Grid Amazon (1/3) 14

15 Visual Grouping: Proximity 15

16 Visual Grouping: Similarity 16

17 Visual Grouping: Connections 17

18 Visual Grouping: Ordering 18

19 Making Things Distinct Size Value Orientation Texture Shape Position (2D / 3D) Kevin Mullet and Darrell Sano, Designing Visual Interfaces 19

20 Small Multiples 20

21 Outline Grid Systems Hierarchy of Size Grouping Small Multiples Repetition Color 21

22 Repetition of design elements 22

23 Map #1 23

24 Map #2 24

25 25

26 Visual Grouping: Ordering 26

27 Visual Grouping: Ordering 27

28 Visual Grouping: Ordering 28

29 How to Get Color Right Design Tip Design your UIs in grayscale first Forces you to focus on intensity Can use a photocopier to help here Keep luminance (intensity) values from grayscale when moving to color Helps ensure everything remains clear 29

30 Focus Design Implication Pure (saturated) colors require more focusing than less pure (desaturated, pastels) Don t use saturated colors in UIs unless you really need something to stand out (stop sign) 30

31 31

32 Any human cognitive work that you are aware of? Cognitive Science How is your brain processing information? How does it recognize objects / words? Michael Just & Tom Mitchel s work 32

33 Fitts Law

34 So What Went Wrong? 34

35 How to fix it? 35

36 Fitts Law Model of human movement primarily used in human computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. 36

37 Fitts Law Fitts law tells us about difficulty for pointing and selection tasks Predicts time to make a movement Moving hand is a series of micro-corrections Time = A + B*log2(Dist / Size + 1) A and B are empirically derived constants Time to move the hand depends only on relative precision required 37

38 Fitts Law Example Pop-up Linear Menu Pop-up Pie Menu Today Sunday Monday Tuesday Wednesday Thursday Friday Saturday Which will be faster on average? pie menu (bigger targets & less distance) 38

39 Pie Menus in Practice Pie menus are example of an interaction technique 39

40 Pie Menus in Practice If better, why don t we see them more? Harder to implement Don t scale past a few items Unfamiliar to people E.g. ipod? 40

41 The Interface Cycle I want to add a thin black box around the title 41

42 The Interface Cycle Display SYSTEM Updates display 42

43 The Interface Cycle USER Display Evaluates and understands display SYSTEM Updates display 43

44 The Interface Cycle USER Display Evaluates and understands display SYSTEM Updates display Formulates goals and actions 44

45 The Interface Cycle USER Display Evaluates and understands display SYSTEM Updates display Formulates goals and actions Acts to produce inputs 45

46 The Interface Cycle Display USER Evaluates and understands display Formulates goals and actions Acts to produce inputs SYSTEM Updates display Interprets input events Input Devices 46

47 The Interface Cycle Display USER Evaluates and understands display Formulates goals and actions Acts to produce inputs SYSTEM Updates display Updates internal state Interprets input events Input Devices 47

48 Norman s Gulfs Norman describes two user activities bridging users and systems The Gulf of Evaluation User perceives & interprets state of system User System 48

49 Norman s Gulfs Norman describes two user activities bridging users and systems The Gulf of Evaluation User perceives and interprets state of system The Gulf of Execution User formulates inputs to achieve goals Shrinking these gulfs makes interfaces easier User System to use 49

50 Example Gulfs of Evaluation? I want to add a thin black box around the title 50

51 Example Gulfs of Evaluation? User understands & evaluates display Pretty easy to see no black box around text yet Compare editing web page in text editor 51

52 Example Gulfs of Evaluation? User understands & evaluates display Pretty easy to see no black box around text yet Compare editing web page in text editor Formulates goals and actions Add a black box Acts to produce inputs Too many buttons? Too many menus? What s dog on side for? 52

53 Why Does Gulf of Evaluation Happen? 53

54 Why Does Gulf of Evaluation Happen? Some causes of Gulf of Evaluation Poor use of colors Bad layout, poor grouping Important information looks same as unimportant Forcing people to remember lots of things Lack of feedback in response to inputs Unfamiliar display of information Design patterns, convention 54

55 Why Does Gulf of Execution Happen? 55

56 Why Does Gulf of Execution Happen? Some causes of Gulf of Execution Unfamiliar devices Unfamiliar interactions Don t know what is possible Widgets might not have meaning (solvable with experience) Interaction patterns might not have meaning (see above) Example patterns: Dialogs, Shopping Carts 56

57 Activity Find one interface that is cognizant and apply Fitt s law and one interface that is not Find two interfaces where the gulf of evaluation is high and two interfaces where the gulf of execution is high Post it to the mailing list 57

58 Outcomes of the activity? What did you learn? 58

59 Ponnurangam Kumaraguru ( PK ) Associate Professor Indraprastha Institute of Information Technology New Delhi pk@iiitd.ac.in precog.iiitd.edu.in