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/ fb/ponnurangam.kumaraguru, @ponguru 1
1997
2018
1994
1994
1995
1996
1996
Fundamentals of Visual Design 12
Outline Grid Systems Hierarchy of Size Grouping Small Multiples Repetition Color 13
Example Grid Amazon (1/3) 14
Visual Grouping: Proximity 15
Visual Grouping: Similarity 16
Visual Grouping: Connections 17
Visual Grouping: Ordering 18
Making Things Distinct Size Value Orientation Texture Shape Position (2D / 3D) Kevin Mullet and Darrell Sano, Designing Visual Interfaces 19
Small Multiples 20
Outline Grid Systems Hierarchy of Size Grouping Small Multiples Repetition Color 21
Repetition of design elements 22
Map #1 23
Map #2 24
25
Visual Grouping: Ordering 26
Visual Grouping: Ordering 27
Visual Grouping: Ordering 28
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
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
https://color.adobe.com/ 31
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
Fitts Law http://www.youtube.com/watch?v=ppkymec_hss
So What Went Wrong? 34
How to fix it? 35
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
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
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
Pie Menus in Practice Pie menus are example of an interaction technique 39
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
The Interface Cycle I want to add a thin black box around the title 41
The Interface Cycle Display SYSTEM Updates display 42
The Interface Cycle USER Display Evaluates and understands display SYSTEM Updates display 43
The Interface Cycle USER Display Evaluates and understands display SYSTEM Updates display Formulates goals and actions 44
The Interface Cycle USER Display Evaluates and understands display SYSTEM Updates display Formulates goals and actions Acts to produce inputs 45
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
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
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
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
Example Gulfs of Evaluation? I want to add a thin black box around the title 50
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
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
Why Does Gulf of Evaluation Happen? 53
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
Why Does Gulf of Execution Happen? 55
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
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
Outcomes of the activity? What did you learn? 58
Ponnurangam Kumaraguru ( PK ) Associate Professor Indraprastha Institute of Information Technology New Delhi 110078 pk@iiitd.ac.in precog.iiitd.edu.in