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