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 fb/ponnurangam.kumaraguru, @ponguru
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*log 2 (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 Display USER SYSTEM ● Evaluates and ● Updates display understands display 43
The Interface Cycle Display USER SYSTEM ● Evaluates and ● Updates display understands display ● Formulates goals and actions 44
The Interface Cycle Display USER SYSTEM ● Evaluates and ● Updates display understands display ● Formulates goals and actions ● Acts to produce inputs 45
The Interface Cycle Display USER SYSTEM ● Evaluates and ● Updates display understands display ● Formulates goals and actions ● Interprets input ● Acts to produce inputs events Input Devices 46
The Interface Cycle Display USER SYSTEM ● Evaluates and ● Updates display understands display ● Updates internal state ● Formulates goals and actions ● Interprets input ● Acts to produce inputs 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 to use User System 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
Recommend
More recommend
