Sex and Design Axioms

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 ﬁeld 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 ﬁnd 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 ﬁrst = 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 ﬁltering 2 navigating .... .... .... last patient data

95% 60% 40% 35%

92%

90%

Let data scream 85% 92% Wufoo 90 Grafﬂe 88 Pages 82 Word of the page space should be for data, the actual workspace

http://regex.info/i/LightroomIchigo.jpg

labels as interface (ﬁltering) data as interface (direct manipulation) labels as interface (ﬁltering) 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... ﬁnd 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 ﬁdelity 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 ﬁnd 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

ﬁrst started at MITRE

now... Brian O’Neill Brian Haven Kerry Bodine Kate Sonin Dave Bedingﬁeld 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-ﬂy 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 ﬁlling in the gaps Low barrier of entry, low ﬁdelity Brainjamming, idea generation = the power of sketching

ﬂickr: adactio ﬂickr: 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 ﬁdelity sketches vs high ﬁdelity comps Which are you going to get better feedback with?

higher ﬁdelity screens = higher ﬁdelity 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 difﬁcult 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 efﬁcient) • purchase upgrades, future products

ipod iphone GIT RoR Polarizing Inclusive

Polarizing Inclusive

Apostles = pissed cell reception wayﬁnding reconﬁgurable 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 ﬁnding 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 ﬁnally 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 ﬁrst 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

Sex and Design Axioms

2 comments

Notes on slide 1

32 Favorites