Intelligent Design Michael Morozov
Michael Morozov
Writing software since 1988
MCSD.NET, MSTS, MCPD, MCP Sql Server
Masters Degree in applied mathematics
Masters Degree in software engineering
Designed by Developer
Developer Designer
D e v i g n e r
+
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
Conceptual model
• Fragmented information
• Only what can be seen
• Conventional knowledge
• In-depth knowledge
• More than meets the eye
• Innovative paradigms
Playing Charades
Designer is communicating purpose using only visuals
Designer
Forming the User Model
Evaluation
Execution Feedback
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
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
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?
Assisting with Evaluation
• Exploit known presentation patterns
• Organize content visually
• Make things discoverable
• Reduce visual noise
• Control volume of information
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
Visual organization of information
When displaying information or controls designers need to visually convey:
• Information structure
• Relation between elements
• Importance and relevance of elements
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
Distance has a meaning
A group of friends Teacher and students
Spacing and Relation
Small distance is a sign of relation
Wrong Right
Too close!
Micro whitespace
• Character spacing
• Line and paragraph spacing
• Spacing around images
• Cell padding in a table
Macro whitespace
• Spacing between major elements in the composition
• Page and column margins
Active and Passive whitespace
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
Visual alignment
• Special case: visual (optical) alignment
Grids
• Create order from chaos
• Help align elements
• Enforce consistency
Grids and layouts
Designing the invisible (whitespace, alignment, grid structure) is as important as providing the visual content and controls.
Contrast and Relevance
Contrast conveys relevance of information
and draws attention to important elements
Where is my shampoo?
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
Contrast fits information relevance
Contrast
Contrast can be achieved by changing
• Size (Weight)
• Form (Structure)
• Color (Brightness)
• Orientation (Direction)
Size
Brightness
Items that change are of higher importance than static elements
Structure
Grid is less important than data values
Color
We Repair Everything But Broken
Large Size + Low Contrast
• Attracts the eye and lets it move on
• Does not capture attention unless looked for
Small Size + Orientation Change
Smallest Effective Difference
Contrast should be clear enough to draw
attention to an element without being so
overwhelming that it draws attention to itself.
Contrast should fit information relevance. It should also adhere to the principle of the Smallest Effective Difference.
Information in series • Evaluated over time
• New info is connected with memory of old
• Difficult to remember full history of changes
Information in parallel • Evaluated instantly, can be aggregated
• Viewer controls the pace
• No need to remember older information
Visual Noise
Visual Noise
• Obscures important details
• Overwhelms perception
• Erodes productivity
• Contributes to information overload
Blocking Out Irrelevant Detail
Information overload
Functional overload
Functional overload
Visual grouping
A display containing more than four perceptual units of information cannot be understood at a glance
Visual grouping
A display containing more than four perceptual units of information cannot be understood at a glance
Perception of numbers
• 2721654230 or 2,721,654,230
• Phone: (858) 353-2311
• SSN: 737-12-4498
Clarity of information
• Consistent information delivery strategy
• No visual noise
• No informational or functional overload
• No ambiguity
Order
Alpha-numeric order
• Search direction should be obvious
• Putting 1-dimensional list in multi-dimensional space can be confusing
Undesired Associations
An unintended aberration of meaning caused by
a specific context or association with a known
object.
• Taxi or Police?
iSlate
islate.com reads “is late”
Euro Coins
Old Design New Design
Present information with clarity by choosing proper information delivery strategy, reducing visual noise and controlling volume of information.
Assisting with Execution
• Quantity and choice
• Affordances
• Constraints
• Mappings
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
How many?
How many?
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)
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.
Grouping by function Blocks of 4 or less menu items are easier
for the brain to consume
4 icons in a row
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
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
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.
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.
Ribbon UI
• Same affordances
• Better discoverability
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
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
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
Expected behavior of checkbox
iDrive interface from BMW
Mappings
Constraints
• Limitations that constrain possible actions
– Physical
– Semantic
– Cultural
– Logical
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
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?
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
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
Reducing mouse travel
Position UI elements closer to mouse cursor
Reducing mouse travel
When the clicked control moves – move the cursor
Find dialog moves if it obscures the text
Affordances must be explicit and unambiguous. Mappings – natural. Implement constraints and think about subitizing limits.
Feedback
• Feedback helps evaluate state of the system after execution of tasks
• Feedback is expected
• Interpretation of feedback may vary
Evaluation
Execution Feedback
Understanding Feedback
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”
Is it OK to Cancel?
Feedback via animation
• Reporting progress on lengthy operations
• Background processing indicators
• Showing progress on AJAX requests
• Animation of appearing/disappearing controls
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
Acceleration vs. Deceleration
Unnatural
• Constant speed, robotic movement
Natural
• Acceleration followed by deceleration
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
Click only once
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
Steve Krug
Don’t make me think
Tom Stafford, Matt Webb
Mind Hacks
Don Norman
Design of everyday things
Edward Tufte Visual Explanations
Questions
?