what can web applications learn
     from the harpsichord?
elaine wherry

Co-founder, Meebo
classical music




internet
today
•  Classical music 101
•  Why the baroque period relates to web
   applications today
•  Moving forward…
medieval
400-1400
medieval
400-1400
renaissance
1400-1600
renaissance
1400-1600
baroque period
1600-1750
baroque = “misshapen pearl”
1600-1750
“Enough!” – Haydn
classical
1750-1820
romantic
1820-1910
timeline

•  Medieval
    •  Necessary technical development
•  Renaissance
    •  Initial instruments and craftsman
•  Ba...
classical music




internet
emerging technology / medieval
1940-1991
emerging technology / medieval
1940-1991
mass adoption / renaissance
1991-2005
mass adoption / renaissance
1991-2005
experimentation / baroque
2005-2010
baroque period is here
•  Emphasis on doing as much as possible rather than
   trying to construct an underlying order
   ...
today 

“this design is…”
•    how “so-and-so” does it
•    more intuitive
•    more professional
•    techier
•    friendlier
•  ...
pro-round
•    Smoother objects say hold me, sharp objects look dangerous
•    More congruous with our other technologies ...
http://www.webelements.com/
WWHD?
“what are the true 
 fundamentals of 
 composition?” 
             – Young Haydn
WWHD?

round
•  Rounded rectangles keep the eye focused in the center of
   the object instead of the corners, create stro...
Universal Principles of Design 
          Lidwell, Holden, Butler
Call to action &                  Progression &         ...
a similar appearance suggests
similar behavior




  Clickable!
                 Clickable!
      Clickable!


           ...
a different appearance suggests
different behavior
                   • 
Filter
elements
are
white



                   •...
visual effects map to physical
space




                       stacked


                       not
stacked

“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 emotion...
haydnʼs lessons
1    To flout the rules, you must know the rules
2    Minimize ornamentation to maximize effect
3    Use de...
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.” 
        ...
internal 
              evaluation




 external
validation
usability evaluations
•  Users can:
   •  Validate that our mental models are successful
   •  Participate in A/B test 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 de...
influence
do larger organizations naturally
benefit?
•  Good usability = predictability
•  Most users prefer what they see the most,
...
summary
1    To flout the rules, you must know the rules
2    Minimize ornamentation to maximize effect
3    Use design pri...
Image credits
•    Time travel clock: http://www.flickr.com/photos/bendodson/3402250681/
•    Medieval Church: http://www....
thank you

Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Upcoming SlideShare
Loading in …5
×

Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord

2,029 views

Published on

Baroque harpsichordists excelled at taking simple melodies and creating elaborate, beautiful pieces of music. But in their desire to push the boundaries of experimentation, these keyboard virtuosi eventually ornamented the music beyond the limits of good taste, making the composer's original melody unrecognizable. Listen to enough Baroque music, and you'll ultimately decide, "This is ridiculous. I never want to hear another harpsichord!"

Something similar happens in Web design. With new technology comes a natural desire to experiment, challenging fundamental design rules to push the limits of web applications. As designers explore just how far they can go, there inevitably comes a breaking point, where you think, "This is ridiculous. I never want to see another rounded corner!"

In both cases, the lesson learned is that just because you can, doesn't mean you should.

Web application interaction design brings a wealth of creative freedom and makes it increasingly important to identify the functional rationale for UI choices rather than gut reactions like "this is the way users are accustomed to it" or "this just looks better." Elaine will discuss how to approach web application design when, instead of one dominant voice, there's a multitude of web product and design philosophies.

Elaine Wherry is co-founder and VP of Products at Meebo. Originally a classically-trained violinist, Elaine graduated from Stanford University with a degree in Symbolic Systems with a concentration in Human-Computer Interaction. After graduating, she became the manager of Usability and Design at Synaptics. She co-founded Meebo.com in 2005 with two good friends, Seth Sternberg and Sandy Jen. Initially, she wrote Meebo's JavaScript framework and went on to build and oversee Meebo's web, user experience, and product management teams. Today, Meebo has approximately 40 million unique users in the United States and nearly 100 million unique users worldwide, according to Quantcast.

Published in: Education
2 Comments
2 Likes
Statistics
Notes
  • in you are interested on clocks that has an art, you are in the right track because we are serving and entertaining people who are looking for artistic clocks. So, come and visit us at http://artisticclocks.com thank you.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Elaine, lovely insight into your processes at meebo. Is there a writeup or audio accompanying the slides somewhere?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,029
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
10
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord

  1. 1. what can web applications learn from the harpsichord?
  2. 2. elaine wherry
 Co-founder, Meebo
  3. 3. classical music internet
  4. 4. today •  Classical music 101 •  Why the baroque period relates to web applications today •  Moving forward…
  5. 5. medieval 400-1400
  6. 6. medieval 400-1400
  7. 7. renaissance 1400-1600
  8. 8. renaissance 1400-1600
  9. 9. baroque period 1600-1750
  10. 10. baroque = “misshapen pearl” 1600-1750
  11. 11. “Enough!” – Haydn
  12. 12. classical 1750-1820
  13. 13. romantic 1820-1910
  14. 14. timeline •  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
  15. 15. classical music internet
  16. 16. emerging technology / medieval 1940-1991
  17. 17. emerging technology / medieval 1940-1991
  18. 18. mass adoption / renaissance 1991-2005
  19. 19. mass adoption / renaissance 1991-2005
  20. 20. experimentation / baroque 2005-2010
  21. 21. 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)
  22. 22. today 

  23. 23. “this design is…” •  how “so-and-so” does it •  more intuitive •  more professional •  techier •  friendlier •  good feng shui •  aesthetically-pleasing •  less noisy
  24. 24. 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.
  25. 25. http://www.webelements.com/
  26. 26. WWHD?
  27. 27. “what are the true fundamentals of composition?” – Young Haydn
  28. 28. WWHD? 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
  29. 29. Universal Principles of Design Lidwell, Holden, Butler Call to action & Progression & Satisfaction & purpose Continuity Confirmation Strong defaults Serialization of tasks Garbage in, garbage out 80/20 rules Error tolerance Feedback Designs targeted towards Status messages Performance specific experiences are Confirmation Consistency with expectations more successful Eye dwells on busy areas, coast Can describe what itʼs doing to through free areas your grandmother Animations and movement reflect Spatial chunking good continuums Exposure likeness Metaphor, mental model Entry point
  30. 30. a similar appearance suggests similar behavior Clickable!
 Clickable!
 Clickable!
 Clickable!
 Clickable!
 Not
clickable!

  31. 31. a different appearance suggests different behavior • 
Filter
elements
are
white
 • 
Imdlg
input
element
is
blue


  32. 32. visual effects map to physical space stacked
 not
stacked

  33. 33. “wait a second…” – Young Haydn
  34. 34. haydnʼs lessons 1  To flout the rules, you must know the rules 2  Minimize ornamentation to maximize effect 3  … 4  …
  35. 35. 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
  36. 36. 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
  37. 37. esterházy palace
  38. 38. unparalleled iteration
  39. 39. rapid iteration
  40. 40. lab testing
  41. 41. bucket testing
  42. 42. guerilla usability
  43. 43. rapid iteration
  44. 44. “I was cut off from the world. There was no one near to confuse or torment me, I was forced to become original.” - Haydn
  45. 45. internal evaluation external validation
  46. 46. 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
  47. 47. high-fidelity prototyping
  48. 48. high-fidelity prototyping
  49. 49. prototyping •  Native OS •  Pixel-level •  Reusable UI components •  Closer to the native language
  50. 50. 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
  51. 51. influence
  52. 52. 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?
  53. 53. 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
  54. 54. 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/
  55. 55. thank you


×