Post on 29-Nov-2014
description
joe natoli | givegoodux.com
the great software trendkill12 rules for great UI design
1
joe natoli | givegoodux.com
formfollowsfunctionor does it?
2
joe natoli | givegoodux.com
3louis sullivan thought so.
“It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.”
joe natoli | givegoodux.com
4frank lloyd wright thought so.
joe natoli | givegoodux.com
5walt gropius thought so too.
joe natoli | givegoodux.com
6nature, however, disagrees.
“form follows function” presupposes that every form in the natural world exists as it does because of functional requirements.
From atoms to enzymes to organisms, scientists and biologists across the globe will tell you that function cannot be predicted.
What really happens is that organisms find functions for the forms they have inherited. In nature every form is the outcome of specific environmental circumstances and phenomenon.
joe natoli | givegoodux.com
7if form did follow function...functionality would take priority over all other design considerations
aesthetic considerations would be secondary to functional considerations
every functional element would ultimately have one (and only one) design
one size would truly fit all!
joe natoli | givegoodux.com
8
audience needs
client desires
ethical obligations
aesthetic inclinations
material properties
cultural presuppositions
functional requirements
time
budget
resources
reality check
joe natoli | givegoodux.com
9RULE 1
every force evolves form.
joe natoli | givegoodux.com
10accelerated tech evolution
joe natoli | givegoodux.com
11accelerated UI evolution
joe natoli | givegoodux.com
12accelerated UI evolution
joe natoli | givegoodux.com
13accelerated UI evolution
joe natoli | givegoodux.com
14accelerated UI evolution
joe natoli | givegoodux.com
15accelerated UI evolution
joe natoli | givegoodux.com
16accelerated UI evolution
joe natoli | givegoodux.com
17accelerated UI evolution
joe natoli | givegoodux.com
18human cognition? unchanged.
perceive the state of the world
interpret perceptionevaluate interpretations
intend to act
determine sequence of actionsexecute sequence
goals
joe natoli | givegoodux.com
19RULE 2
technology changes.people don’t.
joe natoli | givegoodux.com
20make it pretty...
joe natoli | givegoodux.com
21which can make it useful.
joe natoli | givegoodux.com
22RULE 3
beautiful things should function better.
joe natoli | givegoodux.com
23all this and brains, too
joe natoli | givegoodux.com
24these guys...not so much.
joe natoli | givegoodux.com
25RULE 4
imitate strategy, not form.
joe natoli | givegoodux.com
26changes in the visual field
joe natoli | givegoodux.com
27RULE 5
don’t assume they’ll see it just because it’s there.
joe natoli | givegoodux.com
28the dopamine loop
joe natoli | givegoodux.com
29my reach exceeds my grasp
joe natoli | givegoodux.com
30RULE 6
less is more.
joe natoli | givegoodux.com
31conventions are your friends.
true top left
the point where meaningful information begins
people don’t look at screen edges
joe natoli | givegoodux.com
32what’s expected?
joe natoli | givegoodux.com
33tasks are stressful
joe natoli | givegoodux.com
34RULE 7
design for experience, expectation and stress.
joe natoli | givegoodux.com
35seeking relationships
joe natoli | givegoodux.com
36seeking relationships
joe natoli | givegoodux.com
37RULE 8
align EVERYTHING.
joe natoli | givegoodux.com
38accentuate the negative...
joe natoli | givegoodux.com
39...and create a positive.
joe natoli | givegoodux.com
40RULE 9
pad EVERYTHING.
joe natoli | givegoodux.com
41go easy on the eyes
Completely impact multifunctional processesand wireless supply chains. Dynamicallyengage business meta-services for market-driven data. Collaboratively restore cross-platform users before client-centeredmanufactured products.
Assertively evolve long-term high-impactportals through visionary solutions.Professionally harness standardized portalsvis-a-vis resource maximizing deliverables.Continually coordinate stand-aloneapplications rather than virtual communities.
Completely impact multifunctional processesand wireless supply chains. Dynamically
engage business meta-services for market-driven data. Collaboratively restore cross-
platform users before client-centeredmanufactured products.
Assertively evolve long-term high-impactportals through visionary solutions.
Professionally harness standardized portalsvis-a-vis resource maximizing deliverables.
Continually coordinate stand-aloneapplications rather than virtual communities.
joe natoli | givegoodux.com
42go easy on the eyes
Centered HeadlineLeft-aligned paragraph text does not combine well with centered text. Unsymmetrical line lengths of theparagraph can give the headline the appearance that it’s slightly off-center.
centered text works on buttons
joe natoli | givegoodux.com
43RULE 10
don’t center align text.
joe natoli | givegoodux.com
44RULE 10
don’t center align text.ever.
joe natoli | givegoodux.com
45RULE 10
don’t center align text.ever.unless it’s on a button.
joe natoli | givegoodux.com
46pattern recognition
joe natoli | givegoodux.com
47serif or sans? yes.
Some argue that sans serif typefaces are easier to read because they are plain; others contend that serif fonts are easier to read because the serifs draw the eye toward the letter. Research shows no difference in comprehension, reading speed or preference between serif and sans-serif fonts.
Some argue that sans serif typefaces are easier to read because they are plain; others contend that serif fonts are easier to read because the serifs draw the eye toward the letter. Research shows no difference in comprehension, reading speed or preference between serif and sans-serif fonts.
joe natoli | givegoodux.com
48...unless they’re decorative.
There are many fonts that are easy to read. Any of them are fine to use. but avoid a font that is so decorative that it starts to interfere with pattern recognition in the brain.
There are many fonts that are easy to read. Any of them are fine to use. but avoid a font that is so decorative that it starts to interfere with pattern recognition in the brain.
There are many fonts that are easy to read. Any of them
are fine to use. but avoid a font that is so decorative that
it starts to interfere with pattern recognition in the brain.
joe natoli | givegoodux.com
49meaning and comprehension
Tuck your chin into your chest, and then lift your chin upward as far as possible. 6-10 repetitions.
Lower your left ear toward your left shoulder and then your right ear toward your right shoulder. 6-10 repetitions.
Tuck your chin into your chest, and then lift your chin upward as
far as possible. 6-10 repetitions.
Lower your left ear toward your left shoulder and then your right
ear toward your right shoulder. 6-10 repetitions.
joe natoli | givegoodux.com
50RULE 11
sans or serif is fine – but don’t decorate.
joe natoli | givegoodux.com
51who’s on first?
joe natoli | givegoodux.com
52who’s on first?
primary actions
current choice highlighted
secondary action
joe natoli | givegoodux.com
53who’s on first?
secondary
tertiary
primary
joe natoli | givegoodux.com
54RULE 12
visually separate primary and secondary actions.
joe natoli | givegoodux.com
the great software trendkill12 rules for great UI design
55