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.

1. what can web applications learn
from the harpsichord?

2. elaine wherry
Co-founder, Meebo

3. classical music
internet

4. today
• Classical music 101
• Why the baroque period relates to web
applications today
• Moving forward…

7. medieval
400-1400

8. medieval
400-1400

9. renaissance
1400-1600

10. renaissance
1400-1600

11. baroque period
1600-1750

12. baroque = “misshapen pearl”
1600-1750

15. “Enough!” – Haydn

16. classical
1750-1820

17. romantic
1820-1910

18. 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

20. classical music
internet

21. emerging technology / medieval
1940-1991

22. emerging technology / medieval
1940-1991

23. mass adoption / renaissance
1991-2005

24. mass adoption / renaissance
1991-2005

25. experimentation / baroque
2005-2010

31. 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)

32. today

33. “this design is…”
• how “so-and-so” does it
• more intuitive
• more professional
• techier
• friendlier
• good feng shui
• aesthetically-pleasing
• less noisy

34. 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.

35. http://www.webelements.com/

37. WWHD?

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

39. 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

40. 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

41. a similar appearance suggests
similar behavior
Clickable! Clickable! Clickable!
Clickable! Clickable!
Not clickable!

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

43. visual effects map to physical
space
stacked
not stacked

44. “wait a second…”
– Young Haydn

46. haydnʼs lessons
1 To flout the rules, you must know the rules
2 Minimize ornamentation to maximize effect
3 …
4 …

50. 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

51. 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

52. esterházy palace

53. unparalleled iteration

54. rapid iteration

55. lab testing

56. bucket testing

57. guerilla usability

59. rapid iteration

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

62. internal
evaluation
external
validation

63. 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

64. high-fidelity prototyping

65. high-fidelity prototyping

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

71. 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

72. influence

74. 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?

76. 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

78. 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/

79. thank you