Juhan’s Weight and Frequency of Sex


    First job   RingDisc Break up w/GF          New job Married   Udo born   Startup...
lots of books on design guidelines, apis, usability, forms, css...
We need an
INTERFACE
DESIGN
field guide.
              for the craftsman
              less words, more visuals
           ...
Photos by Alvero Carnicero
System approach
to design.

                  for the technically savvy artist

                  typography
             ...
INTERFACE     Data
            • Let data scream
DESIGN      • Reality Bites
AXIOMS          Feedback
            •   Prot...
c re a m
          a ta s
L e t d
Photo by ktempest
Photo by Mex Beady Eyes
Photo by kvanhorn
hierarchy, priority = ?
Photo by jeffwilcox
Photo by kvanhorn
Name
Contact
Message
Company
1/4”
18pt



       Photo by danperry.com
Rightsizing text




There is a formula for determining the
size of a conference badge/name tag
... so that it’s legible f...
Visual Angle Formula
For small visual angles (<10 degrees)


VA (in minutes) = (3438 x H)/D
             H = (VA x D)/3438
Visual Angle Formula

  Visual Angle Legibility                  Condition
    (minutes of arc)


          60            ...
For badges...
                         10 feet away




                         }
                    H = (VA x D)/3438

...
@ 10 feet away
H = 0.9 inches
H = 70 points    Kate
@ 10 feet away
H = 2.1 inches
H = 145 points
Size matters.
So does
typeface,
serif/non-serif,
height-to-width ratio,
spacing,
leading, and
color.
For business cards...
                    2 feet away




                         }
                    H = (VA x D)/3438...
H = 0.125 inches (9pt)   H = 0.2 inches (13pt)
H = 0.125 inches (9pt)   H = 0.2 inches (13pt)   H = 0.40 inches (26pt)
Size matters. Don’t be afraid of going   BIG   .
Math is on your side.
Wikipedia Concept Extractor
http://sourceforge.net/projects/conceptextract/
Ink and lines scream
  Data disappears

  Violates all 5 Tufte principles
  Five principles produce substantial changes in...
Clear, data-dense display




NYTimes
PROJECT            CUSTMR    STE   BURN     TOTAL $   ODC    STAFF   WTCH    SPEND

NCOI                         354   -35...
Beauty
alone is
lovely....
Aim for beautiful and useful.
... they’re not mutually exclusive.
ID Magazine
Less ink.
More bang.
There’s not much we can do with

shit data
... other than create or find better data
... or point out how shitty that data ...
Specious data and viz masquerading as validated and thorough results.
Lovely poster by Jess Bachman
Let’s jam on this beautiful art
and make the data sing.
hard for humans to diff
This isn’t working beautifully... yet.
as seen in adbusters
US Budget in 2009
                  (Dollar amounts in billions)



Non-Discretionary 2,000
Discretionary     1,000

Total...
US Budget in 2009
          (Dollar amounts in billions)



Non-Discretionary Discretionary

2,000             1,000


Tot...
US Budget in 2009
                      (Dollar amounts in billions)



            Non-Discretionary Discretionary
OMB
  ...
US Budget in 2009
                             (Dollar amounts in billions)



                   Non-Discretionary Discre...
Fun = integral in adoption and use

Clarity and data truth = key for
understanding

Work both.
by Brian Staats
Jam on this data:


data.gov
The Theatre of Interface
software = a visual medium


Let data scream
= all about staging the scene in theatre
Backgrounds and 2ndary objects
= designed not to distract the
  audience from the action




Most screens show too much.
Think in visual terms first
= expression, action, sound
affect, music...

Then the dialog tells
something about the
product...
Software is staged.

Software interface design
= a series of scenes which need to be
interesting, staged, and ruthlessly
e...
38%
Priorities, hierarchy

   1 filtering
   2 navigating
     ....
     ....
     ....
last patient data
95%
  60%
40%

        35%
92%
90%
Let data scream



                  85%
92%   Wufoo
90    Graffle
88    Pages
82    Word
                  of the page spa...
http://regex.info/i/LightroomIchigo.jpg
http://regex.info/i/LightroomIchigo.jpg
labels as interface (filtering)




                                                   data as interface
                  ...
Let data scream

the data is THE story
size matters: big n’ juicy
less ink, more bang
shit data = shit displays
beautiful ...
Reality
bites
design with fake data = fake design
LOREM IPSUM
Use real data
1. Real data needs to be grokked by YOU.


See the data, know the data.
Find the core stories.
2. Real data has a min-max.

Data story and interface has to
accommodate ALL THE DATA,
including crazy data points

Key ou...
Firstname Lastname

Firstname Lastname

Firstname Lastname

Firstname Lastname

Firstname Lastname

Firstname Lastname



...
3. Amplify real data


Not much we can do with shit data...
  ...but point out how shitty the data really is.

Can you mak...
4. Real data = real feedback
            = forces people to
              make real decisions

You, your colleagues, teste...
Describe your hospital experience:

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismo...
misspellings



# of data
bigger width




not all data
is equal


all caps
5. Real data won’t blow up production
If you don’t have access to real data,



craft it.
Reality bites

design with fake data = fake design
ban lorem ipsum
use real data
real data = real feedback = real decisions
Prototype
like crazy
= sketch
= prototype
= sketch/comp
= prototype
prototype =
working, touchable, clickable, feelable,
chewable service

could be feature lean (like 1 lonely but
acting fun...
Hand meet pencil
= sketch
big bang theory =

broken deadlines,
late compromises,
craptastical services
illusion of
project
management
Make a giant to-do list

... from product tasks to
tiddly startup jobs like
getting trash bins and
slippers

and print it ...
Churn baby churn!
        35
My eyes hurt.
Merry Christmas!
OSS&E        show summary export
Last updated 2 weeks ago



                    Project X4.0                             ...
WATCHLIST           show summary export
Last updated 1 week ago
                                                          ...
Get criticism.
Early and often.
This data
doesn’t make
 any sense.
How about...




               Where’s the
                timeline?
Be shameless.
Prototype everywhere.


Nurses
Doctors
Administrators
Insurance agents
Friends
Friends who are in Health
Fam...
Design critiques

Informal, formal. Daily, weekly, monthly.

Andy Grove engagement model: honest, critical
feedback to fel...
Edit, edit, and edit
first started at MITRE
now...
         Brian O’Neill
         Brian Haven
         Kerry Bodine
         Kate Sonin
         Dave Bedingfield
    ...
Big prints = bigger impact


Print designs - and task lists - BIG...

obnoxious big.
It’s in your face and you can’t ingor...
Small plotters (like an
                     HP DesignJet 130) =
                     $1k




My preference =
go nuts and ...
Big prints for designers, engineers, project leads
to hover around =
excellent method for on-the-fly critiques

Sending cli...
Prototype like crazy

prototype = working service
big bang theory = low percentage shot
hand meet pencil
churn baby churn
...
Pixel Perfect
14 point Gill Sans @ 3200% zoom
Wireframes = sketches, gross screen
design (still as a sketch), ideas
Just like theatre.
Start with a sketch =
Abstract, rough interpretation of
behavior, story, objects and grouping
Sketching = we’re filling in the gaps
Low barrier of entry, low fidelity
Brainjamming, idea generation


= the power of sket...
flickr: adactio   flickr: yandle
by Sloan Kulper
Sketch like a maniac,
...then move to machine-like precision with pixels.


No sketch-ish interface design in pixels.
Sket...
screen = any rendering on a cpu, any
instantiation of an interface using
pixels
pixel = 1 or 0, ON or OFF
precision, absolute
color, placement/layout...
Doing a ‘wireframe’ (on screen) and
ignoring type, grid, data, and behavior
= laziness
low fidelity sketches
vs
high fidelity comps


Which are you going to get better
feedback with?
higher fidelity screens =
higher fidelity feedback
Print BIG
Design every pixel
~0.5 inch




3200% zoom
No half pixels
= muddy edges and
  won’t align in code, on screen
on the half pixel = a no-no
Pixel perfect

draw baby, draw
skip wireframing, go directly to pixel jockeying
design every pixel
Repeat
customers
rock
Polarizing   Inclusive
Coke,
             Pepsi

Polarizing   Inclusive
Banana Rep,
BMW,         Toyota,
Apple,       Coke,
Harley       Pepsi,

Polarizing   Inclusive
Banana Rep,
BMW,                                 Toyota,
Apple,                               Coke,
Harley                ...
Apostle
Buyer
Prospect
Skeptic
Cynic
Apostle
           User Experience
Buyer
           Value Prop
Prospect
           Performance
Skeptic
           Facts
Cy...
Apostles are delighted
customer delight = delivered service
                   -
                   expected service
                   need, des...
delight = expectations

D<E        D=E                 D>E
∆ customer delight




D<E        D=E             D>E
∆ customer delight

                                   DELIGHT LEVELS




D<E        D=E                          D>E




...
∆ customer delight

                                               NEW DELIGHT LEVELS




                          PREVIO...
You want experienced users to:

• tell their friends about it
• demand other services to hook into it
• make their work pr...
ipod
iphone
GIT
RoR

Polarizing   Inclusive
Polarizing   Inclusive
Apostles = pissed

cell reception
wayfinding
reconfigurable space
maintenance




Polarizing            Inclusive
Design for repeat customers
1,500
 decisions/sec
Veteran



Nimble

Capable
Hazard

          0 1 hour   10           100               1000   10,000


                   ...
tur
              nr
               igh
                        turn on




                   t
                       he...
Beginners aren’t
beginners for long.
Don’t Make Me Think
= fabulous mantra.

Works most of the time.
It should just feel right.

.... but not always true.
Start posting in 10 seconds.
vs
vs   vs
Expert

Intermediate

Beginner
           T                                                          WTF am
              ...
More powerful rewards

Expert

Intermediate

Beginner
           TIME    <T



           “It has to be easy.”
           ...
Make a service ROCK:


1
st for the repeat, more experienced user,


2
nd for the novice, and finally


3
rd for the inexpe...
>3 billion pages
Beginner    Intermediate    Advanced

keyword     keywords++      query operators
keywords    exact match...
Beginner

standard objects
location
extruding

No single paths through a service
Intermediate

construction
composition
lighting
Advanced

numeric modeling
complex systems
rendering
Repeat customers ROCK!

polarize your audience
delight your apostles
design for intermediates first
design multiple paths t...
So what?
DESIGN MATTERS
     adoption
       usage
    fun factor
     learning
   expectations
      impact
    reputation
customer delight = remarkable service
                   performance
                   &
                   service wildl...
Global issues

1   Education
2   Energy
3   Population control
4   Food
5   Clean water
6   Sanitation
7   Open governance...
Interface to Energy




                                               Out of sight, out of mind



                      ...
Do the small stuff right...

and let the beautiful stuff
emerge naturally.
Special thanks to       CC Photo Credits

Harry Sleeper           Alvaro Carnicero
Paul Kroft              Luiz Castro
Mik...
designaxioms.com
SEX
DESIGN
             &




AXIOMS
Juhan Sonin
juhan@mit.edu
designaxioms.com
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Sex and Design Axioms
Upcoming SlideShare
Loading in...5
×

Sex and Design Axioms

8,218

Published on

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

Published in: Design, News & Politics
6 Comments
52 Likes
Statistics
Notes
  • clear, fine presentation
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Juhan.Sonin Feedback: I think that this prsesentation is very good - but maybe the presentation needs a better title. Instead of 'Design Axioms' (or btw the slideshare title right now is 'Sex and Design Axioms' which is misleading) - perhaps instead: 'Let Data Scream + prototype like crazy: interface design axioms for software' . I thought that it was funny that you appear to be a big Tufte backer - though re-iterating his points better. I took a semester with him when I was in college (regarding that, no comments. Will comment in person) :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This particular version was given at OSCON (O'Reilly's Open Source Conference) in July '09. An updated twist was given at RefreshBoston in October '09.

    Any feedback on making it better SML?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is great! Great presentation + great stuff. Nice to see you talk also :)

    Where was this presentation given? Shared on FF + Twitter!

    Cheers,
    See-ming
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Slidescare barfs of my presentation... and I'm unable to sync slides and audio past slide #120. I've emailed feedback 3 times with NO results.

    Yuk x3.

    An unfortunate hack = download the presentation and have the audio track going in the background. If you have any feedback, fire away.

    PDF: http://files.getdropbox.com/u/40223/Sex_Design_Axioms_OSCON.pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,218
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
469
Comments
6
Likes
52
Embeds 0
No embeds

No notes for slide

Sex and Design Axioms

  1. 1. Juhan’s Weight and Frequency of Sex First job RingDisc Break up w/GF New job Married Udo born Startup + - 1994 1998 2002 2006 2010
  2. 2. lots of books on design guidelines, apis, usability, forms, css...
  3. 3. We need an INTERFACE DESIGN field guide. for the craftsman less words, more visuals real examples free constantly evolving <100 pages
  4. 4. Photos by Alvero Carnicero
  5. 5. System approach to design. for the technically savvy artist typography color theory composition layout code usability interaction design customer service
  6. 6. 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
  7. 7. c re a m a ta s L e t d
  8. 8. Photo by ktempest
  9. 9. Photo by Mex Beady Eyes
  10. 10. Photo by kvanhorn
  11. 11. hierarchy, priority = ?
  12. 12. Photo by jeffwilcox
  13. 13. Photo by kvanhorn
  14. 14. Name Contact Message Company
  15. 15. 1/4” 18pt Photo by danperry.com
  16. 16. 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
  17. 17. Visual Angle Formula For small visual angles (<10 degrees) VA (in minutes) = (3438 x H)/D H = (VA x D)/3438
  18. 18. 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.
  19. 19. 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
  20. 20. @ 10 feet away H = 0.9 inches H = 70 points Kate
  21. 21. @ 10 feet away H = 2.1 inches H = 145 points
  22. 22. Size matters. So does typeface, serif/non-serif, height-to-width ratio, spacing, leading, and color.
  23. 23. 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)
  24. 24. H = 0.125 inches (9pt) H = 0.2 inches (13pt)
  25. 25. H = 0.125 inches (9pt) H = 0.2 inches (13pt) H = 0.40 inches (26pt)
  26. 26. Size matters. Don’t be afraid of going BIG . Math is on your side.
  27. 27. Wikipedia Concept Extractor http://sourceforge.net/projects/conceptextract/
  28. 28. 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.
  29. 29. Clear, data-dense display NYTimes
  30. 30. PROJECT CUSTMR STE BURN TOTAL $ ODC STAFF WTCH SPEND NCOI 354 -35.1 18m 18m 498 10 AFMSTT AF AFMC 4 -2.0 16k 16k 4 1 C2C AF ESC 3 -1.2 14k 14k 3 1 SBR AF MC 5 ... 25k 25k 5 1 AFTERPS AF ESC 6 -5.7 20k 20k 6 2 GATM AF ESC 12 -2.0 20k 20k 12 ... CCS-C AF ESC 3 -1.4 30k 30k 3 2 JPALS AF PENT 4 -1.6 16k 16k 4 1 MACS AF ESC 6 -2.3 14k 14k 6 ... NAS AF ESC 3 +1.0 25k 25k 3 ... NGATS AF MC 11 ... 20k 20k 11 1 639TH 29 +3.9 2m 2m 41 8 DIRECT AF ESC 14 +2.0 16k 16k 14 2 GEMS AF ESC 1 +1.0 14k 14k 1 1 KG-3X AF ESC 6 ... 25k 25k 6 1 MMP AF ESC 2 ... 20k 20k 2 2 MSI AF ESC 3 +1.0 20k 20k 3 ... STRATEGIC & TACT 45 -7.2 5m 5m 62 7 ABN LASERCOM AF ESC 1 -3.7 30k 30k 1 1 ADVANCED PLANS AF ESC 5 ... 20k 20k 6 1 AIT AF PENT 3 ... 14k 14k 3 ... CSEL PROGRAM AF ESC 4 +1.0 25k 25k 4 ... FAB-T AF ESC 14 -1.3 20k 20k 14 ... GMS PROGRAM AF ESC 12 ... 20k 20k 12 2 GMT AF ESC 18 ... 30k 30k 18 2 HDR RF AF ESC 3 -2.5 16k 16k 3 ... TDC AF ESC 4 ... 14k 14k 4 ... TSAT-SE&I AF DOD 5 ... 25k 25k 5 ... TSAT-TE AF ESC 1 -0.2 30k 30k 1 1 BMSW 254 -12.1 18m 18m 295 18 AFMSTT AF AFMC 4 -2.0 16k 16k 4 1 C2C AF ESC 3 -1.2 14k 14k 3 1 SBR AF MC 5 ... 25k 25k 5 1 AFTERPS AF ESC 6 -5.7 20k 20k 6 2 GATM AF ESC 12 -2.0 20k 20k 12 ... CCS-C AF ESC 3 -1.4 30k 30k 3 2 JPALS AF PENT 4 -1.6 16k 16k 4 1 MACS AF ESC 6 -2.3 14k 14k 6 ... NAS AF ESC 3 +1.0 25k 25k 3 ... NGATS AF MC 11 ... 20k 20k 11 1 533TH 29 +3.9 2m 2m 41 8 DIRECT AF ESC 14 +2.0 16k 16k 14 2 GEMS AF ESC 1 +1.0 14k 14k 1 1 KG-3X AF ESC 6 ... 25k 25k 6 1 MMP AF ESC 2 ... 20k 20k 2 2 MSI AF ESC 3 +1.0 20k 20k 3 ... CYBERTECH 45 -7.2 5m 5m 62 7 ABN LASERCOM AF ESC 1 -3.7 30k 30k 1 1 ADVANCED PLANS AF ESC 5 ... 20k 20k 6 1 AIT AF PENT 3 ... 14k 14k 3 ... CSEL PROGRAM AF ESC 4 +1.0 25k 25k 4 ... FAB-T AF ESC 14 -1.3 20k 20k 14 ... GMS PROGRAM AF ESC 12 ... 20k 20k 12 2 GMT AF ESC 18 ... 30k 30k 18 2 HDR RF AF ESC 3 -2.5 16k 16k 3 ... TDC AF ESC 4 ... 14k 14k 4 ... TSAT-SE&I AF DOD 5 ... 25k 25k 5 ... TSAT-TE AF ESC 1 -0.2 30k 30k 1 1
  31. 31. Beauty alone is lovely....
  32. 32. Aim for beautiful and useful. ... they’re not mutually exclusive.
  33. 33. ID Magazine
  34. 34. Less ink. More bang.
  35. 35. There’s not much we can do with shit data ... other than create or find better data ... or point out how shitty that data really is
  36. 36. Specious data and viz masquerading as validated and thorough results.
  37. 37. Lovely poster by Jess Bachman
  38. 38. Let’s jam on this beautiful art and make the data sing.
  39. 39. hard for humans to diff
  40. 40. This isn’t working beautifully... yet.
  41. 41. as seen in adbusters
  42. 42. US Budget in 2009 (Dollar amounts in billions) Non-Discretionary 2,000 Discretionary 1,000 Total 3,000
  43. 43. US Budget in 2009 (Dollar amounts in billions) Non-Discretionary Discretionary 2,000 1,000 Total = $3 trillion
  44. 44. US Budget in 2009 (Dollar amounts in billions) Non-Discretionary Discretionary OMB 2,000 1,000 Black Ops NYTimes 2,000 1,100 40 Adbusters 2,600 1,500 300
  45. 45. US Budget in 2009 (Dollar amounts in billions) Non-Discretionary Discretionary OMB 2,000 1,000 Black Ops NYTimes 2,000 1,100 40 Adbusters 2,600 1,500 300 Bailout + Wars + 2,600 1,500 300 1,800 Total = $6.2 trillion
  46. 46. Fun = integral in adoption and use Clarity and data truth = key for understanding Work both.
  47. 47. by Brian Staats
  48. 48. Jam on this data: data.gov
  49. 49. The Theatre of Interface
  50. 50. software = a visual medium Let data scream = all about staging the scene in theatre
  51. 51. Backgrounds and 2ndary objects = designed not to distract the audience from the action Most screens show too much.
  52. 52. 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
  53. 53. Software is staged. Software interface design = a series of scenes which need to be interesting, staged, and ruthlessly edited.
  54. 54. 38%
  55. 55. Priorities, hierarchy 1 filtering 2 navigating .... .... .... last patient data
  56. 56. 95% 60% 40% 35%
  57. 57. 92%
  58. 58. 90%
  59. 59. Let data scream 85% 92% Wufoo 90 Graffle 88 Pages 82 Word of the page space should be for data, the actual workspace
  60. 60. http://regex.info/i/LightroomIchigo.jpg
  61. 61. http://regex.info/i/LightroomIchigo.jpg
  62. 62. labels as interface (filtering) data as interface (direct manipulation) labels as interface (filtering) grid as 2ndary player
  63. 63. 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
  64. 64. Reality bites
  65. 65. design with fake data = fake design
  66. 66. LOREM IPSUM
  67. 67. Use real data
  68. 68. 1. Real data needs to be grokked by YOU. See the data, know the data. Find the core stories.
  69. 69. 2. Real data has a min-max. Data story and interface has to accommodate ALL THE DATA, including crazy data points Key outliers = ?
  70. 70. 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
  71. 71. 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
  72. 72. 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?
  73. 73. 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.
  74. 74. misspellings # of data bigger width not all data is equal all caps
  75. 75. 5. Real data won’t blow up production
  76. 76. If you don’t have access to real data, craft it.
  77. 77. Reality bites design with fake data = fake design ban lorem ipsum use real data real data = real feedback = real decisions
  78. 78. Prototype like crazy
  79. 79. = sketch
  80. 80. = prototype
  81. 81. = sketch/comp
  82. 82. = prototype
  83. 83. 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.
  84. 84. Hand meet pencil
  85. 85. = sketch
  86. 86. big bang theory = broken deadlines, late compromises, craptastical services
  87. 87. illusion of project management
  88. 88. Make a giant to-do list ... from product tasks to tiddly startup jobs like getting trash bins and slippers and print it BIG.
  89. 89. Churn baby churn! 35
  90. 90. My eyes hurt.
  91. 91. Merry Christmas!
  92. 92. 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
  93. 93. 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
  94. 94. Get criticism. Early and often.
  95. 95. This data doesn’t make any sense. How about... Where’s the timeline?
  96. 96. Be shameless. Prototype everywhere. Nurses Doctors Administrators Insurance agents Friends Friends who are in Health Family Lawyers Engineers Designers Any nitwit who wouldn’t walk away from me...
  97. 97. 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).
  98. 98. Edit, edit, and edit
  99. 99. first started at MITRE
  100. 100. now... Brian O’Neill Brian Haven Kerry Bodine Kate Sonin Dave Bedingfield Chris Doellner Rob McCready Ayal Spitz
  101. 101. 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.
  102. 102. Small plotters (like an HP DesignJet 130) = $1k My preference = go nuts and get an Epson 9900.
  103. 103. 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
  104. 104. 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
  105. 105. Pixel Perfect
  106. 106. 14 point Gill Sans @ 3200% zoom
  107. 107. Wireframes = sketches, gross screen design (still as a sketch), ideas
  108. 108. Just like theatre.
  109. 109. Start with a sketch = Abstract, rough interpretation of behavior, story, objects and grouping
  110. 110. Sketching = we’re filling in the gaps Low barrier of entry, low fidelity Brainjamming, idea generation = the power of sketching
  111. 111. flickr: adactio flickr: yandle
  112. 112. by Sloan Kulper
  113. 113. Sketch like a maniac, ...then move to machine-like precision with pixels. No sketch-ish interface design in pixels. Sketches stay on paper.
  114. 114. screen = any rendering on a cpu, any instantiation of an interface using pixels
  115. 115. pixel = 1 or 0, ON or OFF precision, absolute color, placement/layout...
  116. 116. Doing a ‘wireframe’ (on screen) and ignoring type, grid, data, and behavior = laziness
  117. 117. low fidelity sketches vs high fidelity comps Which are you going to get better feedback with?
  118. 118. higher fidelity screens = higher fidelity feedback
  119. 119. Print BIG
  120. 120. Design every pixel
  121. 121. ~0.5 inch 3200% zoom
  122. 122. No half pixels = muddy edges and won’t align in code, on screen
  123. 123. on the half pixel = a no-no
  124. 124. Pixel perfect draw baby, draw skip wireframing, go directly to pixel jockeying design every pixel
  125. 125. Repeat customers rock
  126. 126. Polarizing Inclusive
  127. 127. Coke, Pepsi Polarizing Inclusive
  128. 128. Banana Rep, BMW, Toyota, Apple, Coke, Harley Pepsi, Polarizing Inclusive
  129. 129. Banana Rep, BMW, Toyota, Apple, Coke, Harley Pepsi, You’re Screwed Zone Polarizing Inclusive Premium Price Differentiated Product Intensity of Emotion
  130. 130. Apostle Buyer Prospect Skeptic Cynic
  131. 131. Apostle User Experience Buyer Value Prop Prospect Performance Skeptic Facts Cynic
  132. 132. Apostles are delighted
  133. 133. customer delight = delivered service - expected service need, desire, promises, want, quality, past performance, competition
  134. 134. delight = expectations D<E D=E D>E
  135. 135. ∆ customer delight D<E D=E D>E
  136. 136. ∆ customer delight DELIGHT LEVELS D<E D=E D>E Keep promises Manage expectations Learn service recoveries
  137. 137. ∆ customer delight NEW DELIGHT LEVELS PREVIOUS DELIGHT LEVELS D<E D=E D>E Over time, it’s more difficult to deliver delightful services.
  138. 138. 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
  139. 139. ipod iphone GIT RoR Polarizing Inclusive
  140. 140. Polarizing Inclusive
  141. 141. Apostles = pissed cell reception wayfinding reconfigurable space maintenance Polarizing Inclusive
  142. 142. Design for repeat customers
  143. 143. 1,500 decisions/sec
  144. 144. Veteran Nimble Capable Hazard 0 1 hour 10 100 1000 10,000 Driving experience in hours
  145. 145. 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.
  146. 146. Beginners aren’t beginners for long.
  147. 147. Don’t Make Me Think = fabulous mantra. Works most of the time. It should just feel right. .... but not always true.
  148. 148. Start posting in 10 seconds.
  149. 149. vs
  150. 150. vs vs
  151. 151. 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
  152. 152. 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.
  153. 153. 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
  154. 154. >3 billion pages Beginner Intermediate Advanced keyword keywords++ query operators keywords exact matches ~ sentences OR, AND, NOT hacks
  155. 155. Beginner standard objects location extruding No single paths through a service
  156. 156. Intermediate construction composition lighting
  157. 157. Advanced numeric modeling complex systems rendering
  158. 158. Repeat customers ROCK! polarize your audience delight your apostles design for intermediates first design multiple paths through a service
  159. 159. So what?
  160. 160. DESIGN MATTERS adoption usage fun factor learning expectations impact reputation
  161. 161. customer delight = remarkable service performance & service wildly exceeds my expectations
  162. 162. Global issues 1 Education 2 Energy 3 Population control 4 Food 5 Clean water 6 Sanitation 7 Open governance 8 Fiscal parity 9 Health
  163. 163. Interface to Energy Out of sight, out of mind photo by Adventure Ken
  164. 164. Do the small stuff right... and let the beautiful stuff emerge naturally.
  165. 165. 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.
  166. 166. designaxioms.com
  167. 167. SEX DESIGN & AXIOMS Juhan Sonin juhan@mit.edu designaxioms.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×