Interface design axioms... for software.
Axioms previewed in the presentation:
Let data scream
Reality bites
Prototype like crazy
Pixel perfect
Repeat customers ROCK
PDF: files.getdropbox.com/u/40223/Sex_Design_Axioms_OSCON.pdf
9. System approach
to design.
for the technically savvy artist
typography
color theory
composition
layout
code
usability
interaction design
customer service
10. INTERFACE Data
• Let data scream
DESIGN • Reality Bites
AXIOMS Feedback
• Prototype like crazy
• Pixel Perfect
• Bitch! Loud and often
• Eat your own dog food
• Stop seeking approval
• Date your users
Layout
• Grid it
• Type less + less type
• Color carefully
Interaction
• What interface?
• Repeat customers ROCK
• Deja vu all over again
• Get physical
• Lust to Dust
23. Rightsizing text
There is a formula for determining the
size of a conference badge/name tag
... so that it’s legible from 10 feet.
http://www.hf.faa.gov/Webtraining/VisualDisplays/text/size1a.htm
24. Visual Angle Formula
For small visual angles (<10 degrees)
VA (in minutes) = (3438 x H)/D
H = (VA x D)/3438
25. Visual Angle Formula
Visual Angle Legibility Condition
(minutes of arc)
60 Excellent visually impaired w/low vision
25 Good important/dynamic text
20 Fair important/dynamic text
15 Poor even w/normal vision and static text
20/20 vision is the ability to resolve a spatial pattern separated by a visual angle of 1 minute of arc.
26. For badges...
10 feet away
}
H = (VA x D)/3438
everyday reading
H = (25 x 120 inches)/3438
H = 0.9 inches
lower light, H = (60 x 120 inches)/3438
visual impairment
H = 2.1 inches
27. @ 10 feet away
H = 0.9 inches
H = 70 points Kate
31. For business cards...
2 feet away
}
H = (VA x D)/3438
everyday reading
H = (25 x 24 inches)/3438
H = 0.17 inches (12.25pt)
lower light, H = (60 x 24 inches)/3438
visual impairment
H = 0.42 inches (27pt)
39. Ink and lines scream
Data disappears
Violates all 5 Tufte principles
Five principles produce substantial changes in graphical design:
1. Above all else show the data.
2. Maximize the data-ink ratio (i.e., the % of ink that shows data).
3. Erase non-data ink.
4. Erase redundant data-ink.
5. Review and edit.
65. software = a visual medium
Let data scream
= all about staging the scene in theatre
66. Backgrounds and 2ndary objects
= designed not to distract the
audience from the action
Most screens show too much.
67. Think in visual terms first
= expression, action, sound
affect, music...
Then the dialog tells
something about the
product... and not the
exposition.
Exaggerated features
nose, hair, attitude,
physique, clothing
68. Software is staged.
Software interface design
= a series of scenes which need to be
interesting, staged, and ruthlessly
edited.
83. labels as interface (filtering)
data as interface
(direct manipulation)
labels as interface (filtering) grid as 2ndary player
84. Let data scream
the data is THE story
size matters: big n’ juicy
less ink, more bang
shit data = shit displays
beautiful and useful
stage your data
85% rule
92. 1. Real data needs to be grokked by YOU.
See the data, know the data.
Find the core stories.
93. 2. Real data has a min-max.
Data story and interface has to
accommodate ALL THE DATA,
including crazy data points
Key outliers = ?
94. Firstname Lastname
Firstname Lastname
Firstname Lastname
Firstname Lastname
Firstname Lastname
Firstname Lastname
Andrei Herasimchuk Pick 2 ends of the data
spectrum (the extremes).
Dirk Knemeyer Impact on design = ?
Kriengsak Niratpattanasai
Tiff Biset
Katrina Penruddocked-Longoria
Juhan Sonin
95. 3. Amplify real data
Not much we can do with shit data...
...but point out how shitty the data really is.
Can you make it cleaner, better... find
better data?
Can users make it better?
Mark the differences = CONTRAST
96.
97. 4. Real data = real feedback
= forces people to
make real decisions
You, your colleagues, testers, early
adopters, can give higher fidelity
feedback.
How do I give meaningful feedback on
Lorem Ipsum?
98. Describe your hospital experience:
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
Which one
Describe your hospital experience:
makes sense?
Walking into Beth Israel alone for major
surgery was a bit unnerving. I had never been
to the surgery level; it was a breeze to find
with the well-placed signage.
The was no queue for check-in. I gave the
admin a few data points and within 40
seconds, I was twittling my thumbs waiting for
the big red door to swing open, my doc to
jump out and stab me in the arm with a
sedative, and start cutting. I was pleasantly
surprised.
110. prototype =
working, touchable, clickable, feelable,
chewable service
could be feature lean (like 1 lonely but
acting function)
or using a temporary data engine/model
or...
You can
Or lick it.
USE it.
122. OSS&E show summary export
Last updated 2 weeks ago
Project X4.0 Project X4.2 Project X4.5
-6m -3m Now -6m -3m Now -6m -3m Now
6 Full Compliance 6 Full Compliance 6 Full Compliance
5 Process, Certification 5 Process, Certification 5 Process, Certification
4 SLA, Sustainment 4 SLA, Sustainment 4 SLA, Sustainment
3 Implementation Plan 3 Implementation Plan 3 Implementation Plan
2 Processes Established 2 Processes Established 2 Processes Established
1 Self Assessment 1 Self Assessment 1 Self Assessment
0 System Identified 0 System Identified 0 System Identified
CLICK FOR FULL SCHEDULE
2005 2006 2007 -6m -3m Now
6 Full Compliance
5 Process, Certification
4 SLA, Sustainment
3 Implementation Plan
2 Processes Established
1 Self Assessment
0 System Identified
123. WATCHLIST show summary export
Last updated 1 week ago
State
Issue -6m -3m Now Level Weeks old 2006 2007 2008 2009 Get well by Principle Effect OPR
Useage of Project X4 over COP radars at risk due to incompatibility.. PRG 57 31 Dec 08 Cost McCormack, Lee
Baseline Project Management with KPIs PRG 86 31 Dec 08 Technical McCormack, Lee
Definition of low bandwidth routers installed on site with... PRG 48 26 Jul 08 Technical Battle, Guy
Program Performance of Reorganized Project X4 Team PRG GRP 86 31 Dec 08 Schedule McCormack, Lee
Software Requirements in flux PRG 86 20 Dec 08 Technical Battle, Guy
LEADING INDICATORS show summary export
Last updated 3 weeks ago
CONTRACTOR GOVERNMENT
State State Comments
Leading Indicator -6m -3m Now -6m -3m Now Contractor Government
Processes
Resources
Requirements Lack of concrete deliverables from AF.
Engineering Documentation
Risk Handling Adverse working environment in desert.. On-site development process failing..
Risk Exposure Trends
Interfaces, Integration, Interoperability,
and Interdependencies Dependence on 3rd party (Disaster Inc).. Vendor cross-communication is di!cient..
Software Development na
Hardware Development na
Verification and Validation
Review Action Closure Trends
129. Design critiques
Informal, formal. Daily, weekly, monthly.
Andy Grove engagement model: honest, critical
feedback to fellow colleagues (gnaw on the idea, not
the individual)... to make our ideas better.
Changing the trust model with staff... and the
customer (a la FedEx did with package delivery).
132. now...
Brian O’Neill
Brian Haven
Kerry Bodine
Kate Sonin
Dave Bedingfield
Chris Doellner
Rob McCready
Ayal Spitz
133. Big prints = bigger impact
Print designs - and task lists - BIG...
obnoxious big.
It’s in your face and you can’t ingore it.
You can see your design.
134. Small plotters (like an
HP DesignJet 130) =
$1k
My preference =
go nuts and get an
Epson 9900.
135.
136. Big prints for designers, engineers, project leads
to hover around =
excellent method for on-the-fly critiques
Sending clients big prints of their work =
bigger smiles
137.
138.
139. Prototype like crazy
prototype = working service
big bang theory = low percentage shot
hand meet pencil
churn baby churn
get criticism early and often
buddy up
print big
186. ∆ customer delight
NEW DELIGHT LEVELS
PREVIOUS DELIGHT LEVELS
D<E D=E D>E
Over time, it’s more difficult to deliver
delightful services.
187. You want experienced users to:
• tell their friends about it
• demand other services to hook into it
• make their work products better
• make users happy (by being efficient)
• purchase upgrades, future products
195. tur
nr
igh
turn on
t
headlights turn on
hazard lights
honk here
radio channel up channel down
Explicit instruction = drive
myself to the funny farm.
202. Expert
Intermediate
Beginner
T WTF am
I doing??
Opening a Writing, image editing, ?? Parenting
beer, $ from professional reputation,
an ATM, farming
finding music
on an ipod
203. More powerful rewards
Expert
Intermediate
Beginner
TIME <T
“It has to be easy.”
“Noobs need to
Most of the things worth
instantly get it.” doing, require learning,
“No learning
curve.” effort, and our time.
204. Make a service ROCK:
1
st for the repeat, more experienced user,
2
nd for the novice, and finally
3
rd for the inexperienced user.
Using this order = designing products
that will pass the test of time
HECKEL, HERASIMCHUK, TUFTE
217. Do the small stuff right...
and let the beautiful stuff
emerge naturally.
218. Special thanks to CC Photo Credits
Harry Sleeper Alvaro Carnicero
Paul Kroft Luiz Castro
Mike Nosal Chris Jordan
Dirk Knemeyer GotPlaid
Rani Manoharan Mibi
Brian Staats NoiseCullusion
Andrei Herasimchuk OakleyOriginals
Camille Goudeseune Oliver Orloff
Brian Haven Optiglot
Rob McCready Juhan Sonin
Chauncey Wilson Syvwich
Abigail Kirigin Stefan Thiesen
Tushyd
and all of the people Wizum
who have elevated my
design and life IQ...
and Kate Sonin.