Sex and Design Axioms
Upcoming SlideShare
Loading in...5
×
 

Sex and Design Axioms

on

  • 11,483 views

Interface design axioms... for software. ...

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

Statistics

Views

Total Views
11,483
Views on SlideShare
10,683
Embed Views
800

Actions

Likes
52
Downloads
467
Comments
6

13 Embeds 800

http://www.oscon.com 586
http://en.oreilly.com 115
http://kms.sec.samsung.net 44
http://www.techgig.com 23
http://www.slideshare.net 14
http://translate.googleusercontent.com 5
http://lanyrd.com 5
http://skipjack.info 3
http://www.linkedin.com 1
http://www.kovair.techgig.com 1
http://webcache.googleusercontent.com 1
http://web.archive.org 1
http://115.112.206.131 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 6 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • clear, fine presentation
    Are you sure you want to
    Your message goes here
    Processing…
  • @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) :)
    Are you sure you want to
    Your message goes here
    Processing…
  • 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?
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sex and Design Axioms Sex and Design Axioms Presentation Transcript

  • 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
  • lots of books on design guidelines, apis, usability, forms, css...
  • We need an INTERFACE DESIGN field guide. for the craftsman less words, more visuals real examples free constantly evolving <100 pages
  • Photos by Alvero Carnicero
  • System approach to design. for the technically savvy artist typography color theory composition layout code usability interaction design customer service
  • 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
  • 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 from 10 feet. http://www.hf.faa.gov/Webtraining/VisualDisplays/text/size1a.htm
  • 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 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.
  • 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
  • @ 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 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)
  • 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 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.
  • Clear, data-dense display NYTimes
  • 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
  • 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 really is
  • 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 3,000
  • US Budget in 2009 (Dollar amounts in billions) Non-Discretionary Discretionary 2,000 1,000 Total = $3 trillion
  • 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
  • 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
  • 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... and not the exposition. Exaggerated features nose, hair, attitude, physique, clothing
  • Software is staged. Software interface design = a series of scenes which need to be interesting, staged, and ruthlessly edited.
  • 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 space should be for data, the actual workspace
  • http://regex.info/i/LightroomIchigo.jpg
  • http://regex.info/i/LightroomIchigo.jpg
  • labels as interface (filtering) data as interface (direct manipulation) labels as interface (filtering) grid as 2ndary player
  • 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
  • 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 outliers = ?
  • 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
  • 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
  • 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?
  • 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.
  • 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 function) or using a temporary data engine/model or... You can Or lick it. USE it.
  • 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 BIG.
  • Churn baby churn! 35
  • My eyes hurt.
  • Merry Christmas!
  • 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
  • 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
  • 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 Family Lawyers Engineers Designers Any nitwit who wouldn’t walk away from me...
  • 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).
  • Edit, edit, and edit
  • first started at MITRE
  • now... Brian O’Neill Brian Haven Kerry Bodine Kate Sonin Dave Bedingfield Chris Doellner Rob McCready Ayal Spitz
  • 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.
  • Small plotters (like an HP DesignJet 130) = $1k My preference = go nuts and get an Epson 9900.
  • 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
  • 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
  • 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 sketching
  • 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. Sketches stay on paper.
  • 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 Pepsi, You’re Screwed Zone Polarizing Inclusive Premium Price Differentiated Product Intensity of Emotion
  • Apostle Buyer Prospect Skeptic Cynic
  • Apostle User Experience Buyer Value Prop Prospect Performance Skeptic Facts Cynic
  • Apostles are delighted
  • customer delight = delivered service - expected service need, desire, promises, want, quality, past performance, competition
  • 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 Keep promises Manage expectations Learn service recoveries
  • ∆ customer delight NEW DELIGHT LEVELS PREVIOUS DELIGHT LEVELS D<E D=E D>E Over time, it’s more difficult to deliver delightful services.
  • 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
  • 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 Driving experience in hours
  • 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.
  • 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 I doing?? Opening a Writing, image editing, ?? Parenting beer, $ from professional reputation, an ATM, farming finding music on an ipod
  • 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.
  • 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
  • >3 billion pages Beginner Intermediate Advanced keyword keywords++ query operators keywords exact matches ~ sentences OR, AND, NOT hacks
  • 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 through a service
  • So what?
  • DESIGN MATTERS adoption usage fun factor learning expectations impact reputation
  • customer delight = remarkable service performance & service wildly exceeds my expectations
  • Global issues 1 Education 2 Energy 3 Population control 4 Food 5 Clean water 6 Sanitation 7 Open governance 8 Fiscal parity 9 Health
  • Interface to Energy Out of sight, out of mind photo by Adventure Ken
  • 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 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.
  • designaxioms.com
  • SEX DESIGN & AXIOMS Juhan Sonin juhan@mit.edu designaxioms.com