What Web Applications can Learn from the Harpsichord
-
Upload
elaine-wherry -
Category
Technology
-
view
106 -
download
1
description
Transcript of What Web Applications can Learn from the Harpsichord
![Page 1: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/1.jpg)
what can web applications learn from the harpsichord?
![Page 2: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/2.jpg)
elaine wherryCo-founder, Meebo
![Page 3: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/3.jpg)
classical music
internet
![Page 4: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/4.jpg)
today
• Classical music 101• Why the baroque period relates to web
applications today• Moving forward…
![Page 5: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/5.jpg)
![Page 6: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/6.jpg)
![Page 7: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/7.jpg)
medieval400-1400
![Page 8: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/8.jpg)
medieval400-1400
![Page 9: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/9.jpg)
renaissance1400-1600
![Page 10: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/10.jpg)
renaissance1400-1600
![Page 11: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/11.jpg)
baroque period1600-1750
![Page 12: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/12.jpg)
baroque = “misshapen pearl”1600-1750
![Page 13: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/13.jpg)
![Page 14: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/14.jpg)
![Page 15: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/15.jpg)
“Enough!” – Haydn
![Page 17: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/17.jpg)
romantic1820-1910
![Page 18: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/18.jpg)
• 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
![Page 19: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/19.jpg)
![Page 21: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/21.jpg)
emerging technology / medieval1940-1991
![Page 22: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/22.jpg)
emerging technology / medieval1940-1991
![Page 23: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/23.jpg)
mass adoption / renaissance1991-2005
![Page 24: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/24.jpg)
mass adoption / renaissance1991-2005
![Page 25: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/25.jpg)
experimentation / baroque2005-2010
![Page 26: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/26.jpg)
![Page 27: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/27.jpg)
![Page 28: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/28.jpg)
![Page 29: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/29.jpg)
![Page 30: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/30.jpg)
![Page 31: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/31.jpg)
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)
![Page 32: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/32.jpg)
today
![Page 33: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/33.jpg)
• how “so-and-so” does it• more intuitive• more professional• techier• friendlier• good feng shui• aesthetically-pleasing• less noisy
“this design is…”
![Page 34: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/34.jpg)
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.
![Page 35: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/35.jpg)
http://www.webelements.com/
![Page 36: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/36.jpg)
![Page 38: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/38.jpg)
“what are the true fundamentals of composition?” – Young Haydn
![Page 39: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/39.jpg)
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?
![Page 40: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/40.jpg)
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
![Page 41: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/41.jpg)
a similar appearance suggests similar behavior
Clickable!
Clickable!
Clickable!
Clickable!
Not clickable!
Clickable!
![Page 42: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/42.jpg)
a different appearance suggests different behavior
• Filter elements are white
• Imdlg input element is blue
![Page 43: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/43.jpg)
stacked
not stacked
visual effects map to physical space
![Page 44: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/44.jpg)
“wait a second…” – Young Haydn
![Page 45: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/45.jpg)
![Page 46: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/46.jpg)
haydn’s lessons
1 To flout the rules, you must know the rules
2 Minimize ornamentation to maximize effect
3 …
4 …
![Page 49: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/49.jpg)
![Page 50: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/50.jpg)
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
![Page 51: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/51.jpg)
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
![Page 52: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/52.jpg)
esterházy palace
![Page 53: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/53.jpg)
unparalleled iteration
![Page 54: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/54.jpg)
rapid iteration
![Page 55: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/55.jpg)
lab testing
![Page 56: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/56.jpg)
bucket testing
![Page 57: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/57.jpg)
guerilla usability
![Page 58: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/58.jpg)
![Page 59: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/59.jpg)
rapid iteration
![Page 60: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/60.jpg)
![Page 61: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/61.jpg)
“I was cut off from the world. There was no one near to confuse or torment me, I was forced to become original.”
- Haydn
![Page 62: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/62.jpg)
internal evaluation
externalvalidation
![Page 63: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/63.jpg)
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
![Page 64: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/64.jpg)
high-fidelity prototyping
![Page 65: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/65.jpg)
high-fidelity prototyping
![Page 66: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/66.jpg)
![Page 67: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/67.jpg)
![Page 68: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/68.jpg)
![Page 69: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/69.jpg)
![Page 70: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/70.jpg)
prototyping
• Native OS• Pixel-level• Reusable UI components• Closer to the native language
![Page 71: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/71.jpg)
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
![Page 73: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/73.jpg)
![Page 74: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/74.jpg)
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?
![Page 75: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/75.jpg)
![Page 76: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/76.jpg)
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
![Page 77: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/77.jpg)
![Page 78: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/78.jpg)
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/
![Page 79: What Web Applications can Learn from the Harpsichord](https://reader035.fdocuments.net/reader035/viewer/2022062617/54c7a8464a7959300f8b4597/html5/thumbnails/79.jpg)
thank you