what web applications can learn from the harpsichord

what can web applications learn from the harpsichord?

elaine wherryCo-founder, Meebo

classical music

internet

today

• Classical music 101• Why the baroque period relates to web

applications today• Moving forward…

medieval400-1400

medieval400-1400

renaissance1400-1600

renaissance1400-1600

baroque period1600-1750

baroque = “misshapen pearl”1600-1750

“Enough!” – Haydn

classical1750-1820

romantic1820-1910

• Medieval• Necessary technical development

• Renaissance• Initial instruments and craftsman

• Baroque• Mass adoption and experimentation

• Classical• Restraint and principles, craft to art

• Romanticism• Artistic maturity, full expression

timeline

classical music

internet

emerging technology / medieval1940-1991

emerging technology / medieval1940-1991

mass adoption / renaissance1991-2005

mass adoption / renaissance1991-2005

experimentation / baroque2005-2010

baroque period is here

• Emphasis on doing as much as possible rather than trying to construct an underlying order• The ultimate destination site that does everything• Aggregators, API’s, open standards, widgets, frameworks• A misunderstanding of what the web does well – a collision of

the data presentation (pages and links) with the data manipulation world (windows and folders)

today

• how “so-and-so” does it• more intuitive• more professional• techier• friendlier• good feng shui• aesthetically-pleasing• less noisy

“this design is…”

pro-round• Smoother objects say hold me, sharp objects look dangerous• More congruous with our other technologies (cars, computers) that have become

rounded• It is more expensive, time-consuming, & difficult to produce rounded-corners, so

it implies better more technical skill, better value, attention to detail, greater desirability.

• We’ve evolved to like curved things – we eat round fruit, we’re attracted to round body parts, we stay away from sharp things (teeth). Have women ever gone out of style? No! Rounded corners are here to stay!

pro-square Simple and honest Bracing and solid. Shows technical-precision, advanced engineering. Demonstrate an appreciation for creating a content, information-focused site;

function over form. Embraces what html/css already does well. Shows advanced understanding of

how design and technology work together.

http://www.webelements.com/

WWHD?

“what are the true fundamentals of composition?” – Young Haydn

round• Rounded rectangles keep the eye focused in the center of

the object instead of the corners, create stronger visual containers

• Rounded rectangles typically require more whitespace in the design

square• Square page layouts and tabular data reinforce information

hierarchy• Stacked rectangles make it hard to tell what’s inside and out

WWHD?

Call to action & purpose

Strong defaults

80/20 rules

Designs targeted towards specific experiences are more successful

Can describe what it’s doing to your grandmother

Spatial chunking

Exposure likeness

Metaphor, mental model

Entry point

Progression & Continuity

Serialization of tasks

Error tolerance

Status messages

Confirmation

Eye dwells on busy areas, coast through free areas

Animations and movement reflect good continuums

Satisfaction & Confirmation

Garbage in, garbage out

Feedback

Performance

Consistency with expectations

Universal Principles of Design Lidwell, Holden, Butler

a similar appearance suggests similar behavior

Clickable!

Clickable!

Clickable!

Clickable!

Not clickable!

Clickable!

a different appearance suggests different behavior

• Filter elements are white

• Imdlg input element is blue

stacked

not stacked

visual effects map to physical space

“wait a second…” – Young Haydn

haydn’s lessons

1 To flout the rules, you must know the rules

2 Minimize ornamentation to maximize effect

3 …

4 …

to flout the rules, you must know the rules• Objective principles help:

• Sharpen your sensitivity to emotional and physical responses

• Facilitate good discourse

• Objective principles may not:• Account for emotional responses• Trump contextual issues

• You want to expect the unexpected• Focus the design, only innovate where necessary• False recaps, phony endings, musical pranks

haydn’s lessons

1 To flout the rules, you must know the rules

2 Minimize ornamentation to maximize effect

3 Use design principles for internal iteration

4 Prototype in your medium

esterházy palace

unparalleled iteration

rapid iteration

lab testing

bucket testing

guerilla usability

rapid iteration

“I was cut off from the world. There was no one near to confuse or torment me, I was forced to become original.”

- Haydn

internal evaluation

externalvalidation

usability evaluations

• Users can:• Validate that our mental models are successful• Participate in A/B test to optimize designs

• Users may not:• Tell us why they think the way they do• Create new designs

• We will be faster if:• We can iterate within our own teams faster• Use design principles to

high-fidelity prototyping

high-fidelity prototyping

prototyping

• Native OS• Pixel-level• Reusable UI components• Closer to the native language

haydn’s lessons

1 To flout the rules, you must know the rules

2 Minimize ornamentation to maximize effect

3 Use design principles for internal iteration

4 Prototype in your medium

influence

do larger organizations naturally benefit?

• Good usability = predictability• Most users prefer what they see the most,

whether it’s good or bad• Do large organizations naturally benefit?

summary

1 To flout the rules, you must know the rules

2 Minimize ornamentation to maximize effect

3 Use design principles for internal iteration

4 Prototype in your medium

Image credits• Time travel clock: http://www.flickr.com/photos/bendodson/3402250681/• Medieval Church: http://www.flickr.com/photos/antmoose/102131833/• Pantheon: http://www.flickr.com/photos/misterjingo/1809727430/• Flea: http://www.flickr.com/photos/36128932@N03/3404894430/• Monte Python troubadoors: http://www.intriguing.com/mp/_pictures/grail/large/HolyGrail144.jpg• Renaissance books: http://www.flickr.com/photos/traceyp3031/2892438542/in/set-72157603791556092/

• Renaissance instruments: http://www.yesnet.yk.ca/schools/projects/renaissance/graphics/despreztwo.jpg• Late Renaissance chamber group: http://www.flickr.com/photos/allengarvin/3741207690/• Bernini's Cornaro chapel http://www.flickr.com/photos/aischylos/235801406/• The Adoration of the Magi, a 1624 • Sint-Pieter-en-Pauluschurch http://flickr.com/photos/e3000/82186320/• Vivaldi: http://en.wikipedia.org/wiki/File:Antonio_Vivaldi.jpg• Bach: http://en.wikipedia.org/wiki/File:Johann_Sebastian_Bach.jpg• Harpsichord: http://upload.wikimedia.org/wikipedia/commons/c/c5/Clavecin_flamand.png• Haydn - http://en.wikipedia.org/wiki/File:Haydn_portrait_by_Thomas_Hardy_(small).jpg• Beethoven: http://en.wikipedia.org/wiki/File:Beethoven.jpg• Mozart: http://upload.wikimedia.org/wikipedia/commons/1/1e/Wolfgang-amadeus-mozart_1.jpg• Erard piano: http://www.periodpiano.com/grand/images/Parquetry-Erard-lid-open.jpg• Teletype (1945): http://en.wikipedia.org/wiki/File:WACsOperateTeletype.jpg• Apple (1975): http://upload.wikimedia.org/wikipedia/commons/2/27/Apple_I.jpg• Apple II (1977): http://en.wikipedia.org/wiki/File:Apple-II.jpg• Gopher Servers Menu: http://en.wikipedia.org/wiki/File:Floodgap_gopher_servers_menu.PNG• arpa: http://en.wikipedia.org/wiki/File:Darpaheadquarters.jpg• Laeken Church: http://www.flickr.com/photos/nico78/152678493/• Yahoo 1994: http://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol• Wayback machine archive• iGoogle - http://timir.files.wordpress.com/2007/12/igoogle.jpg• Rounded corners theme: http://wp-themes.com/wp-content/themes/ahimsa/screenshot.png• Young haydn: http://www.audiosparx.com/sa/zdbpath/composerpix/2662.jpg• Law site: http://www.bluehousegroup.com/images/bpf_03.jpg• Esterhazy Palace: http://www.flickr.com/photos/konrads/2402182899/in/set-72157604062384320/• Haydn’s Opera court: http://www.bbc.co.uk/composers/haydn/pictures/images/haydn_05.jpg• Card sorting: http://www.flickr.com/photos/dunk/152245036/• Audience Voting: http://www.davegorman.com/images/audiencevote.jpg• Haydn’s tomb: http://www.flickr.com/photos/indigotimbre/2544538697/

thank you