The Great Software Trendkill: 12 Rules for Great UI Design

joe natoli | givegoodux.com

the great software trendkill12 rules for great UI design

1


formfollowsfunctionor does it?

2


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.”


4frank lloyd wright thought so.


5walt gropius thought so too.


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.


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!


8

audience needs

client desires

ethical obligations

aesthetic inclinations

material properties

cultural presuppositions

functional requirements

time

budget

resources

reality check


9RULE 1

every force evolves form.


10accelerated tech evolution


11accelerated UI evolution


18human cognition? unchanged.

perceive the state of the world

interpret perceptionevaluate interpretations

intend to act

determine sequence of actionsexecute sequence

goals


19RULE 2

technology changes.people don’t.


20make it pretty...


21which can make it useful.


22RULE 3

beautiful things should function better.


23all this and brains, too


24these guys...not so much.


25RULE 4

imitate strategy, not form.


26changes in the visual field


27RULE 5

don’t assume they’ll see it just because it’s there.


28the dopamine loop


29my reach exceeds my grasp


30RULE 6

less is more.


31conventions are your friends.

true top left

the point where meaningful information begins

people don’t look at screen edges


32what’s expected?


33tasks are stressful


34RULE 7

design for experience, expectation and stress.


35seeking relationships


36seeking relationships


37RULE 8

align EVERYTHING.


38accentuate the negative...


39...and create a positive.


40RULE 9

pad EVERYTHING.


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.


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


43RULE 10

don’t center align text.


44RULE 10

don’t center align text.ever.


45RULE 10

don’t center align text.ever.unless it’s on a button.


46pattern recognition


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.


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.


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.


50RULE 11

sans or serif is fine – but don’t decorate.


51who’s on first?


52who’s on first?

primary actions

current choice highlighted

secondary action


53who’s on first?

secondary

tertiary

primary


54RULE 12

visually separate primary and secondary actions.


the great software trendkill12 rules for great UI design

55

The Great Software Trendkill: 12 Rules for Great UI Design

Design

Transcript of The Great Software Trendkill: 12 Rules for Great UI Design