Upload
bob-ferrante
View
388
Download
0
Embed Size (px)
Citation preview
design
how to see
overview
• cognition• design rules• visuals• animation• fonts
cognition
• gestalt• memory• motivation
gestalt
gestalt
gestalt: figure/ground
gestalt: proximity
gestalt: similarity
gestalt: closure
• We fill in the gaps
gestalt: closure
• We fill in the gaps
gestalt: continuation
gestalt: common fate
gestalt: common region
gestalt: grouping
• elements that are near each other appear related
• watch the space between unrelated elements• place headings close to their content• corollary:– aligment. people assume lined-up elements are
related. – that’s one reason why we should not center
headings
memory
memory
• humans have limited working memory• 5 items• gestalt grouping improves the quantity we can
handle
motivation
motivation
• we lose motivation as tasks take longer• lack of feedback makes us give up• answering unnecessary questions• group steps together– install program– wizards
design rules
design rules
• purpose of design rules is to:– direct the eye– make relationships clear– teach how to use color– reduce visual complexity– ensure beauty
design rules
• reduce complexity– occam’s razor– hick’s law– pareto principle– fitt’s law– fibonnaci
• use economics– feedback– mental models
• create beauty– law of thirds– the golden ratio
reduce complexity
occam’s razor
• the simplest solution is best– be ruthless about the value of each new thing– remove the unnecessary
hick’s law
• with every additional option, time it takes to choose one increases– so:– reduce number of options
pareto principle
• “80/20 rule”• most users will use 20% of your capabilities• identify which ones they do• put those up front• bury other options
fitt’s law
• time to move to a target is a function of– target size – distance to the target– so make targets bigger and easier to click
• make all the target clickable– no separate state for text on an object
• opposite as well: – give what we want to be hard to click (cancel
buttons) a smaller clickable area
feedback
• give a user clear indication something has happened, is happening, could happen– hover text (alt text)– focus()– loading bars– highlighting
use economics
mental models
• easier to understand & learn new things if based on things we already understand
• model designs off real world situations & objects
• we relate it to our understanding of real life
motion
• users love it• but never use just for “oo, aah”• always use to– emphasize– guide the eye– show change – show relationships
animation
• should show relationships• should emphasize • should guide the eye• gestalt: common fate• gestalt: grouping laws
create beauty
law of thirds
the golden ratio
fibonnaci (yes!)
• found in:– classical creative works– nature
• can be used to :– create visual patterns– create shapes– create organic figures– create grids – dictate sizing and ratios
1, 1, 2, 3, 5, 8, 13, 21, 34, 55
a quick primer on type
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
thanks