intelligent design 101
TRANSCRIPT
![Page 1: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/1.jpg)
Intelligent Design Michael Morozov
![Page 2: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/2.jpg)
Michael Morozov
Writing software since 1988
MCSD.NET, MSTS, MCPD, MCP Sql Server
Masters Degree in applied mathematics
Masters Degree in software engineering
![Page 3: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/3.jpg)
Designed by Developer
![Page 4: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/4.jpg)
Developer Designer
D e v i g n e r
+
![Page 5: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/5.jpg)
Conceptual model
1. Designer creates a model to satisfy requirements or solve a problem
2. Designer model is communicated to the end user via the system image
3. User forms his own model on how the system should function
Designer
Model
User Model
System Image
![Page 6: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/6.jpg)
Conceptual model
• Fragmented information
• Only what can be seen
• Conventional knowledge
• In-depth knowledge
• More than meets the eye
• Innovative paradigms
![Page 7: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/7.jpg)
Playing Charades
Designer is communicating purpose using only visuals
Designer
![Page 8: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/8.jpg)
Forming the User Model
Evaluation
Execution Feedback
![Page 9: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/9.jpg)
Wrong user model
Will a room warm up faster if the thermostat is turned all the way to the maximum setting?
• temperature theory - thermostat controls the temperature of the expelled air
• volume theory - thermostat controls the volume of hot air coming out of the device
BOTH THEORIES ARE WRONG
![Page 10: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/10.jpg)
Thermostat explained
• Thermostat is an on/off switch. Fully on or fully off - no in between.
• The knob sets the desired temperature at which the heater shuts off
• It will take exactly the same time to reach target temperature regardless of how far the knob is turned.
• Design gives no hint to the actual model
![Page 11: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/11.jpg)
Lost in Design Model
• Where are we and how do we navigate this? • What is the difference between DSC and DTC? • What is “PDC” and “Comfort EDC”? • Why “Auto P” and “Auto P MFL” are so far apart? • Why “Comfort EDC” and “Auto P MFL” are indented?
![Page 12: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/12.jpg)
Assisting with Evaluation
• Exploit known presentation patterns
• Organize content visually
• Make things discoverable
• Reduce visual noise
• Control volume of information
![Page 13: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/13.jpg)
Evaluation of information
When we are looking at a
• web page
• application interface
• front panel of an electronics device
• dashboard of the new car
• any other unfamiliar object or control panel
WE ARE NOT READING, WE ARE SCANNING
![Page 14: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/14.jpg)
Visual organization of information
When displaying information or controls designers need to visually convey:
• Information structure
• Relation between elements
• Importance and relevance of elements
![Page 15: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/15.jpg)
![Page 16: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/16.jpg)
![Page 17: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/17.jpg)
Whitespace
• Defines spatial relationship between elements
• Balances elements on the page or panel
• Reduces informational overload, confusion
• Provides brains with visual breathing room
• Integral part of a design, not just a background
• Not necessarily white
![Page 18: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/18.jpg)
Distance has a meaning
A group of friends Teacher and students
![Page 19: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/19.jpg)
Spacing and Relation
Small distance is a sign of relation
Wrong Right
![Page 20: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/20.jpg)
Too close!
![Page 21: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/21.jpg)
Micro whitespace
• Character spacing
• Line and paragraph spacing
• Spacing around images
• Cell padding in a table
![Page 22: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/22.jpg)
Macro whitespace
• Spacing between major elements in the composition
• Page and column margins
![Page 23: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/23.jpg)
Active and Passive whitespace
![Page 24: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/24.jpg)
Alignment • Elements of the user interface should align
• Human eye is tracing along straight lines or centers of gravity
• Good alignment is not noticed, misalignment is
![Page 25: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/25.jpg)
Visual alignment
• Special case: visual (optical) alignment
![Page 26: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/26.jpg)
Grids
• Create order from chaos
• Help align elements
• Enforce consistency
![Page 27: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/27.jpg)
Grids and layouts
![Page 28: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/28.jpg)
Designing the invisible (whitespace, alignment, grid structure) is as important as providing the visual content and controls.
![Page 29: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/29.jpg)
Contrast and Relevance
Contrast conveys relevance of information
and draws attention to important elements
![Page 30: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/30.jpg)
Where is my shampoo?
![Page 31: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/31.jpg)
The word shampoo is arguably the most
important information on the bottle.
• It has the least contrast
• It is buried in a block of text
• The font is too small
![Page 32: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/32.jpg)
Contrast fits information relevance
![Page 33: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/33.jpg)
Contrast
Contrast can be achieved by changing
• Size (Weight)
• Form (Structure)
• Color (Brightness)
• Orientation (Direction)
![Page 34: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/34.jpg)
Size
![Page 35: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/35.jpg)
Brightness
Items that change are of higher importance than static elements
![Page 36: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/36.jpg)
Structure
Grid is less important than data values
![Page 37: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/37.jpg)
Color
![Page 38: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/38.jpg)
We Repair Everything But Broken
![Page 39: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/39.jpg)
Large Size + Low Contrast
• Attracts the eye and lets it move on
• Does not capture attention unless looked for
![Page 40: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/40.jpg)
Small Size + Orientation Change
![Page 41: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/41.jpg)
Smallest Effective Difference
Contrast should be clear enough to draw
attention to an element without being so
overwhelming that it draws attention to itself.
![Page 42: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/42.jpg)
Contrast should fit information relevance. It should also adhere to the principle of the Smallest Effective Difference.
![Page 43: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/43.jpg)
Information in series • Evaluated over time
• New info is connected with memory of old
• Difficult to remember full history of changes
![Page 44: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/44.jpg)
Information in parallel • Evaluated instantly, can be aggregated
• Viewer controls the pace
• No need to remember older information
![Page 45: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/45.jpg)
Visual Noise
![Page 46: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/46.jpg)
Visual Noise
• Obscures important details
• Overwhelms perception
• Erodes productivity
• Contributes to information overload
![Page 47: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/47.jpg)
Blocking Out Irrelevant Detail
![Page 48: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/48.jpg)
Information overload
![Page 49: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/49.jpg)
![Page 50: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/50.jpg)
Functional overload
![Page 51: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/51.jpg)
Functional overload
![Page 52: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/52.jpg)
Visual grouping
A display containing more than four perceptual units of information cannot be understood at a glance
![Page 53: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/53.jpg)
Visual grouping
A display containing more than four perceptual units of information cannot be understood at a glance
![Page 54: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/54.jpg)
Perception of numbers
• 2721654230 or 2,721,654,230
• Phone: (858) 353-2311
• SSN: 737-12-4498
![Page 55: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/55.jpg)
Clarity of information
• Consistent information delivery strategy
• No visual noise
• No informational or functional overload
• No ambiguity
![Page 56: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/56.jpg)
![Page 57: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/57.jpg)
![Page 58: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/58.jpg)
Order
![Page 59: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/59.jpg)
Alpha-numeric order
• Search direction should be obvious
• Putting 1-dimensional list in multi-dimensional space can be confusing
![Page 60: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/60.jpg)
Undesired Associations
An unintended aberration of meaning caused by
a specific context or association with a known
object.
• Taxi or Police?
![Page 61: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/61.jpg)
iSlate
![Page 62: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/62.jpg)
islate.com reads “is late”
![Page 63: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/63.jpg)
Euro Coins
Old Design New Design
![Page 64: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/64.jpg)
![Page 65: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/65.jpg)
Present information with clarity by choosing proper information delivery strategy, reducing visual noise and controlling volume of information.
![Page 66: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/66.jpg)
Assisting with Execution
• Quantity and choice
• Affordances
• Constraints
• Mappings
![Page 67: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/67.jpg)
Quantity and Choice
Human brain, when scanning for something:
• Never searches for or compares all options
• Prefers smaller sets of options (4 or less)
• Picks the first option that looks good enough
• Prefers shorter option to a longer option
• Always a compromise between speed and accuracy
![Page 68: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/68.jpg)
How many?
![Page 69: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/69.jpg)
How many?
![Page 70: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/70.jpg)
Counting vs. Subitizing
• Subitizing An accurate, rapid and confident quantitative evaluation of small sets without explicit counting.
• Counting
Sequential or mathematical enumeration of larger sets of objects (5 or more)
![Page 71: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/71.jpg)
Visual Short-Term Memory
• VSTM has capacity for 4 items
• Exceeding the capacity increases uncertainty
• It is difficult to compare more than 4 items
• Adding elements in excess of 4 increases reaction time by 250-350 milliseconds per each additional object.
![Page 72: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/72.jpg)
Grouping by function Blocks of 4 or less menu items are easier
for the brain to consume
![Page 73: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/73.jpg)
4 icons in a row
![Page 74: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/74.jpg)
Affordances
• Perceived and actual properties of things that determine how it could possibly be used.
• Affordances are parts of a system that allow (or afford) us to interact with the system.
• Anything we can interact with is (has) an affordance
![Page 75: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/75.jpg)
Examples of affordances
• When we see a door, we immediately know that we can open it and go through it
• Link has an affordance of clickability
• Buttons can be pressed
• Knobs can be turned
• Scrollbar moves the document in the window
![Page 76: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/76.jpg)
Explicit Affordance
Something other than a button or a link can be clickable. A piece of text can be clickable (i.e. have the affordance of clickability), but the user wouldn’t know about it by just looking.
In good design affordances are explicit.
![Page 77: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/77.jpg)
Software Affordances
• Floppy disk is for saving (when was the last time you saw one?)
• Dot-matrix printer from 1980 is for printing
• Not just the picture, but size and position too. Put a save button in the bottom right corner and nobody will find it.
![Page 78: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/78.jpg)
Ribbon UI
• Same affordances
• Better discoverability
![Page 79: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/79.jpg)
Where affordances come from?
• Cultural stereotypes
– Progress bar moving left-to-right or right-to-left
– Light switch up or down
• General metaphors
– Red means danger, green means safe
• Industry-specific conventions
– Picture of a floppy probably means nothing outside of computer world
![Page 80: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/80.jpg)
Transfer Effects
People transfer their knowledge and experience of similar objects to new situations
• Positive transfer
– Prior knowledge applies to the new objects
– Example: typewriter QWERTY keyboard
• Negative transfer
– Prior knowledge conflicts with the new situation
– Example: flick direction is opposite to scroll direction
![Page 81: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/81.jpg)
Expected behavior of scrollbar
• Moving the scroll handle down makes the document scroll up
– this is what we are used to
– reversing this behavior would lead to severe usability issues
![Page 82: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/82.jpg)
Expected behavior of checkbox
![Page 83: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/83.jpg)
iDrive interface from BMW
![Page 84: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/84.jpg)
Mappings
![Page 85: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/85.jpg)
Constraints
• Limitations that constrain possible actions
– Physical
– Semantic
– Cultural
– Logical
![Page 86: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/86.jpg)
Physical Constraints
• Physical limitations on possible actions
– Mouse cursor doesn’t move beyond screen boundary
– Scrollbar limits how far a page can be scrolled
– The car doesn’t start unless put in Park mode
![Page 87: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/87.jpg)
Semantic Constraints
• When the meaning of situation controls the possible action
– Modal dialog box requires attention
– Print preview window suggests printing
– Why are you sitting where you are?
– Why are you facing forward?
![Page 88: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/88.jpg)
Cultural Constraints
• Cultural conventions define possible action
– What does red mean (stop, danger, alert)
– How does a trashcan look in your culture?
• Cultural constrains may fail
![Page 89: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/89.jpg)
Logical Constraints
• Sequence
– Performing steps in obvious order (1, 2, 3…)
– Wizard-type workflows (Back, Forward)
• Completeness
– Filling all parts of the form
– Answering all questions
![Page 90: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/90.jpg)
Reducing mouse travel
Position UI elements closer to mouse cursor
![Page 91: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/91.jpg)
Reducing mouse travel
When the clicked control moves – move the cursor
Find dialog moves if it obscures the text
![Page 92: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/92.jpg)
Affordances must be explicit and unambiguous. Mappings – natural. Implement constraints and think about subitizing limits.
![Page 93: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/93.jpg)
Feedback
• Feedback helps evaluate state of the system after execution of tasks
• Feedback is expected
• Interpretation of feedback may vary
Evaluation
Execution Feedback
![Page 94: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/94.jpg)
Understanding Feedback
![Page 95: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/95.jpg)
Causality
• The thing that happens right after an action is assumed by people to be caused by that action
• When user makes an action, it expects that something will happen.
• Watch out for false causality • Incorrect effect • Invisible effect
after this therefore because of this Logical Fallacy known as “Coincidental Correlation”
![Page 96: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/96.jpg)
Is it OK to Cancel?
![Page 97: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/97.jpg)
Feedback via animation
• Reporting progress on lengthy operations
• Background processing indicators
• Showing progress on AJAX requests
• Animation of appearing/disappearing controls
![Page 98: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/98.jpg)
Fade-in or slide-in?
• Slide in
– Visual Studio panels
– Browser warning bar
– Windows Phone 7 “Toast” notification
• Fade-in
– Adobe Lightroom panels
– Outlook “New Mail” tray notification
![Page 99: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/99.jpg)
Acceleration vs. Deceleration
Unnatural
• Constant speed, robotic movement
Natural
• Acceleration followed by deceleration
![Page 100: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/100.jpg)
Perceived vs Actual speed
Progress bar appears to go FASTER • Linear motion
• Acceleration towards the end
Progress bar appears to go SLOWER • Pauses
• Deceleration
• Non-linear motion
![Page 101: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/101.jpg)
Click only once
![Page 102: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/102.jpg)
Comfort of Learning
• Technology is intimidating. People are afraid to break the system or lose the data.
– Encourage experimentation, increase comfort
– Support incremental reversible actions (Undo)
– Don’t use dialogs to report normalcy
– If it’s worth asking the user, it’s worth the program remembering the answer
![Page 103: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/103.jpg)
Steve Krug
Don’t make me think
Tom Stafford, Matt Webb
Mind Hacks
Don Norman
Design of everyday things
Edward Tufte Visual Explanations
![Page 104: Intelligent design 101](https://reader033.vdocuments.site/reader033/viewer/2022052507/55867a6cd8b42a333d8b477e/html5/thumbnails/104.jpg)
Questions
?