SlideShare une entreprise Scribd logo
1  sur  79
what can web applications learn from the harpsichord?
elaine wherry Co-founder, Meebo
classical music internet
today ,[object Object],[object Object],[object Object]
 
 
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
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],timeline
 
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 ,[object Object],[object Object],[object Object],[object Object]
today
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],“ this design is…”
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
http://www.webelements.com/
 
WWHD?
“ what are the true  fundamentals of  composition?”  –  Young Haydn
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],WWHD?
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object]
visual effects map to physical space stacked not stacked
“ wait a second…”  –  Young Haydn
 
haydn’s lessons ,[object Object],[object Object],[object Object],[object Object]
 
 
 
to flout the rules, you must know the rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
haydn’s lessons ,[object Object],[object Object],[object Object],[object Object]
esterházy palace
unparalleled iteration
rapid iteration
lab testing
bucket testing
guerilla usability
 
rapid iteration
 
[object Object],[object Object]
internal  evaluation external validation
usability evaluations ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
high-fidelity prototyping
high-fidelity prototyping
 
 
 
 
prototyping ,[object Object],[object Object],[object Object],[object Object]
haydn’s lessons ,[object Object],[object Object],[object Object],[object Object]
influence
 
do larger organizations naturally benefit? ,[object Object],[object Object],[object Object]
 
summary ,[object Object],[object Object],[object Object],[object Object]
 
Image credits ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
thank you

Contenu connexe

Similaire à What Web Applications 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 HarpsichordElaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the HarpsichordBayCHI
 
Twf homepagedesign sb_okey
Twf homepagedesign sb_okeyTwf homepagedesign sb_okey
Twf homepagedesign sb_okeyLimeRed Studio
 
HMF Emarketing Workshop
HMF Emarketing WorkshopHMF Emarketing Workshop
HMF Emarketing WorkshopSian Jamieson
 
Steve Portigal: Disciplinarity and Rigour?
Steve Portigal: Disciplinarity and Rigour?Steve Portigal: Disciplinarity and Rigour?
Steve Portigal: Disciplinarity and Rigour?Steve Portigal
 
Some thinking - space
Some thinking  - spaceSome thinking  - space
Some thinking - spaceLes Bicknell
 
Martin bazley evaluating digital learning resources leicester reduced for upl...
Martin bazley evaluating digital learning resources leicester reduced for upl...Martin bazley evaluating digital learning resources leicester reduced for upl...
Martin bazley evaluating digital learning resources leicester reduced for upl...Martin Bazley
 
Creativity and design day 01
Creativity and design day 01Creativity and design day 01
Creativity and design day 01R. Sosa
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hesswww.usarte.co
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UXWhitney Hess
 
Malaysian Higher Ed-UN Learning
Malaysian Higher Ed-UN LearningMalaysian Higher Ed-UN Learning
Malaysian Higher Ed-UN LearningWayne Hodgins
 
State Of Interaction Design 2008
State Of Interaction Design 2008State Of Interaction Design 2008
State Of Interaction Design 2008Dave Malouf
 
Improving your nonprofit agency website
Improving your nonprofit agency website Improving your nonprofit agency website
Improving your nonprofit agency website Eriko Kennedy
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien CowboysMatt Jones
 
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundupMaximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundupPlatypus
 
Bubbles and Easter eggs - Museum Pecha Kucha
Bubbles and Easter eggs - Museum Pecha KuchaBubbles and Easter eggs - Museum Pecha Kucha
Bubbles and Easter eggs - Museum Pecha KuchaMia
 
Museum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st CenturyMuseum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st CenturyDana Mitroff Silvers
 
Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05Marc Rettig
 
New Perspectives on the Future of Learning
New Perspectives on the Future of LearningNew Perspectives on the Future of Learning
New Perspectives on the Future of LearningWayne Hodgins
 
Professional Information Research
Professional Information ResearchProfessional Information Research
Professional Information ResearchEric Kokke
 

Similaire à What Web Applications can Learn from the Harpsichord (20)

Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the HarpsichordElaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
Elaine Wherry, Meebo: What Web Application Design Can Learn from the Harpsichord
 
Twf homepagedesign sb_okey
Twf homepagedesign sb_okeyTwf homepagedesign sb_okey
Twf homepagedesign sb_okey
 
The Art Of Design
The Art Of DesignThe Art Of Design
The Art Of Design
 
HMF Emarketing Workshop
HMF Emarketing WorkshopHMF Emarketing Workshop
HMF Emarketing Workshop
 
Steve Portigal: Disciplinarity and Rigour?
Steve Portigal: Disciplinarity and Rigour?Steve Portigal: Disciplinarity and Rigour?
Steve Portigal: Disciplinarity and Rigour?
 
Some thinking - space
Some thinking  - spaceSome thinking  - space
Some thinking - space
 
Martin bazley evaluating digital learning resources leicester reduced for upl...
Martin bazley evaluating digital learning resources leicester reduced for upl...Martin bazley evaluating digital learning resources leicester reduced for upl...
Martin bazley evaluating digital learning resources leicester reduced for upl...
 
Creativity and design day 01
Creativity and design day 01Creativity and design day 01
Creativity and design day 01
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hess
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UX
 
Malaysian Higher Ed-UN Learning
Malaysian Higher Ed-UN LearningMalaysian Higher Ed-UN Learning
Malaysian Higher Ed-UN Learning
 
State Of Interaction Design 2008
State Of Interaction Design 2008State Of Interaction Design 2008
State Of Interaction Design 2008
 
Improving your nonprofit agency website
Improving your nonprofit agency website Improving your nonprofit agency website
Improving your nonprofit agency website
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
 
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundupMaximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
 
Bubbles and Easter eggs - Museum Pecha Kucha
Bubbles and Easter eggs - Museum Pecha KuchaBubbles and Easter eggs - Museum Pecha Kucha
Bubbles and Easter eggs - Museum Pecha Kucha
 
Museum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st CenturyMuseum Website Best Practices for the 21st Century
Museum Website Best Practices for the 21st Century
 
Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05Rettiggoel.ux week.8.25.05
Rettiggoel.ux week.8.25.05
 
New Perspectives on the Future of Learning
New Perspectives on the Future of LearningNew Perspectives on the Future of Learning
New Perspectives on the Future of Learning
 
Professional Information Research
Professional Information ResearchProfessional Information Research
Professional Information Research
 

Dernier

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 

Dernier (20)

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 

What Web Applications can Learn from the Harpsichord

Notes de l'éditeur

  1. Hello! So first off thanks for coming today. When Christian gave me the thumbs up to do this crazy BayCHI harpsichord talk, I was beside myself with excitement. However, then I started to wonder if anyone would actually show up. So… um… thanks for being here tonight and giving me this opportunity, and hopefully I can fulfill all of your wild harpsichord expectations.
  2. Hi, I’m Elaine. And just to give some context about who I am… A little bit about my background …
  3. Today I’m going to be drawing a parallel between between the way classical music has developed and the way web applications has evolved through history. I’d like to posit that web apps are stuck in a baroque-like era. And if that’s the case, what lessons can we apply from those composers two hundred years ago who managed to break free of their baroque trappings and push the internet forward to the next period.
  4. Specifically, for the first five minutes you can sit back and just enjoy a quick classical music 101 . And with that knowledge, we’ll talk about how the baroque period relates to today’s web applications And finally, we’ll start talking about how we can take things to the next level. And if I’m really successful, my goal is to have you saying– “down with harpsichords and up with Haydn.”
  5. We’re going to kick-start this evening with a time travel experiment back to 400 A.D. Image Credits ----------------------- http://www.flickr.com/photos/bendodson/3402250681/
  6. We’re back in 400 a.d . in this old Medieval church. And you should be thrilled that you weren’t born in Europe during this time… Image Credits --------------------- Medieval Church: http://www.flickr.com/photos/antmoose/102131833/
  7. Not only is the Roman Empire collapsing, there’s also a really nasty flea problem (1340). If anyone’s doing anything interesting, it’s probably happening within the Catholic Church who basically has all the money, power, and is ensuring that as few people as possible have fun. Image credits -------------------------------------- Pantheon: http://www.flickr.com/photos/misterjingo/1809727430/ Flea: http://www.flickr.com/photos/36128932@N03/3404894430/
  8. Music-wise, you’ll hear two things . In the Church, you’ve got some singing monks doing Gregorian Chant – there’s no formalized music notation system. Outside the Church, you have raunchy troubadoors singing about love and the holy grail – really just taking poems and adding some intonation. Today, musically, nothing substantial survived this era. However, the music from this time certainly inspired the Benedictine Monk Gregorian Chant craze in the 90’s and Monte Python’s singing troubadoors. Image credits -------------------------------------- Monte Python troubadoors: http://www.intriguing.com/mp/_pictures/grail/large/HolyGrail144.jpg
  9. A thousand years later, we’re in 1400 A.D . Greek and Roman texts are spurring an intellectual jumpstart to European civilization. Old technology is being rediscovered and put to good use. The Renaissance. Image Credits ------------------- Renaissance books: http://www.flickr.com/photos/traceyp3031/2892438542/in/set-72157603791556092/
  10. With this technology, music is no longer confined to the human body. Your very basic instrument set and tools for music making are being defined: brass, woodwinds, strings, and keyboard. Music is no longer restricted to the church. It becomes a craft that with training, you can earn a living entertaining others with madrigals and dances. Image Credits: -------------------------- Renaissance instruments: http://www.yesnet.yk.ca/schools/projects/renaissance/graphics/despreztwo.jpg Late Renaissance chamber group: http://www.flickr.com/photos/allengarvin/3741207690/
  11. After a few hundred years, there are enough msucians in the field to spur what is probably the longest and broadest period of musical experimentation in European music history ever : the Baroque era. The Baroque period isn’t something you can just hear – you can also see it. These are three pieces of Baroque architecture. What you should take away from these is that there’s way too much going on . You just know the conversations that happened when these pieces were being created, “ Hey Bernini , I need something for an altar and it has to be good because it’s my reputation that’s on the line.” Bernini says, “no problem, I will use every single material possible (red, green marble, no problem). It will be magificent.” For some reason, being “good” is synonomous with doing as much as possible . It’s still a craft. The goal is to create ensembles intended to exert an overwhelming emotional impact. Image Credits ------------------------- Bernini's Cornaro chapel http://www.flickr.com/photos/aischylos/235801406/ The Adoration of the Magi , a 1624 Sint-Pieter-en-Pauluschurch, triumph of baroque, Mechelen, Belgium. Built between 1670 and 1677. http://flickr.com/photos/e3000/82186320/
  12. ‘ baroque’ literally translates to misshapen pearl . And in music what’s literally happening. The emphasis is on how many themes are being played and what the texture is like rather than a division of melody and harmony . You’re more likely to get something that sounds like Dueling Banjos from this era where every instrument is fighting for the spotlight rather than taking turns. If you listen to Bach , what’s amazing is that he makes the Baroque textures work. Even though you can’t whistle back exactly what was played in a melody, it’s still beautiful Play music Image credits ---------------- 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 Sint-Pieter-en-Pauluschurch, triumph of baroque, Mechelen, Belgium. Built between 1670 and 1677. http://flickr.com/photos/e3000/82186320/
  13. If you look at this harpsichord, you should be scared . Distinctions from piano: * no hammer, strings are plucked like a dulcimer rather than pounded like a piano * no dynamics (soft and loud) * no sustained notes You could create the illusion of soft and loud by varying many notes you played at a time. For an illusion of loud, play a lot of notes. For an illusion of soft, play fewer notes. And if you’re going to try to play as many notes as possible, what better instrument as a medium than the harpsichord where you can exercise all 10 of your little fingers at once. Image Credits ---------------- Baroque Concert: http://www.bourbonbaroque.com/upload/_pop_BourbonBaroque_20_FS.JPG Contemporary Baroque Orchestra: http://www.eif.co.uk/files/images/European-Union-Baroque-Orchestra_0.jpg
  14. And here is another example that is one of my favorites, try to see if you can pick out the melody from here. Image Credits ---------------- Baroque Concert: http://www.bourbonbaroque.com/upload/_pop_BourbonBaroque_20_FS.JPG Contemporary Baroque Orchestra: http://www.eif.co.uk/files/images/European-Union-Baroque-Orchestra_0.jpg
  15. This is the superstar of the Baroque era. Haydn said – we can do better. Introduces symphonic technique & sonata form : make sure you have a theme, a purpose, development . He managed to take as many instruments as you could possibly fit into one room (a symphony) and then put the voices together in a way that made sense He wrote 104 symphonies to prove his point and went on to influence and teach Mozart and Beethoven. Many people call “Haydn” the father of classical music and he can certainly be credit with allowing music to evolve from a craft to an art . Image Credits -------------------------- http://en.wikipedia.org/wiki/File:Haydn_portrait_by_Thomas_Hardy_(small).jpg – Haydn Beethoven: http://en.wikipedia.org/wiki/File:Beethoven.jpg Mozart: http://upload.wikimedia.org/wikipedia/commons/1/1e/Wolfgang-amadeus-mozart_1.jpg
  16. Haydn’s emphasis on order and hierarchy has an interesting effect. Now that you have the rules, the art is in how you flout them . Key characteristics of a classical period. Mozart and Beethoven use Haydn’s principles to help music become more expressive without feeling inundated with lots of notes and ornamentation. Image credits ---------------- Beethoven: http://en.wikipedia.org/wiki/File:Beethoven.jpg Mozart: http://upload.wikimedia.org/wikipedia/commons/1/1e/Wolfgang-amadeus-mozart_1.jpg Newton: http://csmh.pbworks.com/f/1188431334/Isaac%20Newton%20apple.JPG Grand piano, ca. 1790: http://www.metmuseum.org/toah/images/h2/h2_89.4.3182.jpg The Adoration of the Magi , a 1624, Rubens Sint-Pieter-en-Pauluschurch, triumph of baroque, Mechelen, Belgium. Built between 1670 and 1677. http://flickr.com/photos/e3000/82186320/
  17. And it’s at the romantic period where I’m going to start end this classical music 101 . Romantic period is about imagination and dissonance. What interesting that the Romantic period succeeds as doing what the Baroque era tried to do initially – create emotional impact . However, it couldn’t have happened unless the classical period. Image Credits ------------- Erard piano: http://www.periodpiano.com/grand/images/Parquetry-Erard-lid-open.jpg
  18. In classical music you had the medieval period where things are slowly simmering Followed by the Renaissance where everything where a new landscape is explored defined . Musical instruments. Followed by the Baroque period where musicians are being defined by how many tricks they know and can use , rather than how well they use them. The Classical period can be summarized as a time of restraint and principles . The technology fully evolved to its own artform. Romantic period is when music reaches its full maturity.
  19. This ends our time travel experiment. Now, let’s jump to today…. Image Credits ------------------- http://www.flickr.com/photos/bendodson/3402250681/
  20. Now that you’ve had a quick introduction to classical music, let’s talk about how the classical music timeline parallels the development of the internet.
  21. Let’s see if any of this starts to sounds familiar… Starting in the 1940’s have a long period of technological development that begins with the 1940’s teletype machine, 1970’s personal computer, and ends with the success of the HTTP protocol in the 1990’s. Image Credits ------------------------- 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
  22. In 400 AD, the Catholic church is the only organization with the money and power to create written manuscripts and support music. In the 1970’s, the government, more specifically DARPA headquarters, is the only organization who can afford computing technology research for defense, not entertainment, purposes. In both cases, there is tremendous unrecognized potential – these are Medieval eras. Image Credits --------------------- Darpa: http://en.wikipedia.org/wiki/File:Darpaheadquarters.jpg Laeken Church: http://www.flickr.com/photos/nico78/152678493/
  23. In the Internet Renaissance, the internet is no longer limited to just the government and large organizations . Personal computers ensure everyone has access to the Internet. Starting with the basic click-view pages in the early 1990’s through the launch of Google Maps, which blew everyone’s minds, in 2005, this is where I’d characterize the Internet Renaissance period. Image Credits ------------------------- Yahoo 1994: http://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol Google Maps: screenshot on my computer 30% laptop sale: http://thumbs.dreamstime.com/thumb_327/122514424390zZP0.jpg
  24. Like the Renaissance period where you saw the first musical instruments and craftsman emerge, you see a similar web landscape being discovered during these 15 years as well. Webpages start with support for just text , add images , add javascript , developing more server-side technologies, and then eventually DHTML/Ajax . Sure there will be CSS3, HTML 5, and EcmaScript 5 in the future – we’ll get more tools, it’s new but it no longer feels uncharted.
  25. After 2005, you see a huge explosion of pixels , animations, and glossy, reflective surfaces. This feeling of ornamentation, mashups, and experimentation . When I listen to baroque music, I think, “I never want to hear another harpsichord again.” After browsing the internet for a bit today I think, “I’m going to die if I see another mashup, rounded corner, or glossy surface.” Image Credits ------------------------- Yahoo 1994: http://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol Wayback machine archive 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
  26. This comparison is just too easy. “Look at what I can do.” Doing things not because you should, but because you can . Glitter, marquee, blink tag, musical embeds, etc. Self-expression and entertainment. This is the web for web’s sake. ANIMATION to Chapel Remember Chapel – can’t you see the similarities?
  27. The web application baroque era extends beyond the visual too. Let’s look at this interaction design mashup... Modal litebox preview with a drop-down menu that can be dismissed by an ‘X’ close button and the menu itself contains expandable accordians , with a next/prev photo viewer . And judging by the buttons at top, you can zoom too! And God forbid what happens when you click “expanded view” in the corner. How many more interactive elements can we possibly fit on one page? You have to marvel at it’s complexity for what is essentially flipping pages of a book…
  28. And functionally, we have the quest for the “ ultimate mashup.” The ultimate iGoogle destination page that will do everything: stock quotes, your sport scores, search, and weather forecasts The focus is on texture, the number of things you can do , rather than trying to do one thing well Doesn’t this feel Baroque? Image Credit --------------------------- iGoogle - http://timir.files.wordpress.com/2007/12/igoogle.jpg
  29. This is amazing – it’s a storefront, it’s half-web, half-software, it’s half social recommendations, it’s a music player, it’s a repository, it’s just amazing. And technology-wise, I think iTunes is the ultimate Bach of this Baroque period . Thin client with a web-based backend. It’s an incredibly tall order to achieve – and somehow, here, it just works.
  30. And Meebo is certainly not immune to the Baroque era either. We’re doing a balancing act between two very different world s – a web document viewing medium and a software dialog medium . When we introduce a link into Meebo, we have to battle whether the link action should relate to opening a new page or performing a specific application action. Image Credits ------------------ http://www.meebo.com/site/img/meebo-desktop.png
  31. Hopefully, from these examples, I’ve convinced you that we are immersed in a Baroque period . We have mashups at all levels: aesthetically, functionally, and technically.
  32. This brings us to today’s design meeting rooms where people likes these are having conversations about what good design. Let’s take this wordpress template theme that is being evaluated by the team on the left. How do I imagine the team on the left would respond ? Image Credits ------------------------ Rounded corners: http://wp-themes.com/wp-content/themes/ahimsa/screenshot.png
  33. This is what I think I’d hear…
  34. But these emotional rationalizations don’t work . Using emotions and opinions, I can make just as many pro-square arguments as I can pro-round arguments. You can see why these kind of discussions can be easily divisive Read a few examples
  35. And yet, we know intuitively that there are clearly some times that squares are better than rounded rectangles .
  36. Vice versa - rounded rectangles are better than squares
  37. Pause. Which leads us to wonder, What Would Haydn Do ? Haydn had 1200 years of musical baggage to contend with. We have at the most, maybe 60 . If there is anyone in history who could bulldoze through a Baroque era, it’s this guy.
  38. Let’s start by asking “ what did Young Haydn do? ” Haydn was born to a peasant background and because he lacked formal musical training , he suffered from an educational inferiority complex in his youth. Haydn was also a prankster. After snipping the pigtails off of his fellow choirmate, his choral director kicked Haydn onto the streets at the age of 16. Suddenly, Haydn was an uneducated freelance r competing with classically-trained musicians . His first impulse was to devour everything he could about existing musical principles and forms, and even harpsichord ornamentation . Image Credits: -------------------- Young haydn: http://www.audiosparx.com/sa/zdbpath/composerpix/2662.jpg
  39. I think Haydn would say that we need these principles and rules so we can have a rational discourse about design. What is functionally true of rounded corners? (read bullets and explain)
  40. Memorize every rule in the book
  41. These unemotional principles can be applied to today’s web application design. I dug up some of our initial mockups for the Meebo to show some of the unemotional critiques our team made with our early drafts. Here, we have five buttons followed by a static image. Who wouldn’t click on that meebo logo just to see what it does? And when it does nothing, you’re kind of disappointed. Now it’s clickable 
  42. Here we see two input areas with different background colors. The status input area is whit e, but the conversation input area is blue . When you’re looking for areas to type, you use color as a cue for for identifying type-able areas. Now they both have the same background color.
  43. In this early version of the product, we had an M.C. Escher moment where you couldn’t figure out how the drop shadows on the top half of the buddylist relates to the flat bar area below. The IM dialogs are stacked but the connecting tabs are on the same z-index layer. This is now fixed.
  44. We could memorize every design principle ever written and do this all evening. These principles seem incredibly persuasive and I hope I’ve shown how they can be effective. How can you argue with “strong defaults,” “progressive disclosure,” or “error tolerance?”
  45. If I follow every design rule ever written, the result is boring . A rules-based method is essentially a Baroque craftsman approach . Constantly following rules leads to stagnation. Image Credits ------------------- http://www.bluehousegroup.com/images/bpf_03.jpg
  46. So this brings me to the first two of Haydn’s lessons. But to do this, Haydn had to choose which rules to flout . He knew that the ear was particularly sensitive to 4-bar themes . He would remove all other Baroque cruft and ornamentation so the user was tuned into that 4-bar theme. Then when he switched to a 3-bar theme, your ear can’t help but notice and appreciate that musical prank .
  47. To no longer be a design craftsman, you need to flout the rules. Minimize ornamentation so your rule flouting has maximum effect
  48. And for Meebo, you see our rule flouting when you mouse over the little green Android character on our mobile product page.
  49. These principles also be trumped by other factors such as historical, technical, branding, or legal… context . According to my HCI textbooks, Meebo should not work . A windowing system within a browser environment within another windowing system does not sound like a great idea. However, it works. When we launched in 2005 , the concept of a drag and drop web interface was foreign. We stretched the OS metaphor to help users overcome that initial leap into new web application functionality . The OS metaphor has its limitations – our initial complaints were that users couldn’t drag the windows outside the browser. But it was worth the trade-off. And the point is that here we had to weigh the historical context with the design principles. And returning to the round vs. square argument , if your brand visuals are predominantly square and a round button doesn’t look good, you don’t need to feel constrained to these principles but you should be aware of them.
  50. Haydn knew that design was inherently subjective and emotional (bullets) But that there were limits to design principles Your goal is to have your audience expect the unexpected.
  51. So this brings me to the second set of Haydn’s lessons. You should be able to reason through many of the issues we are facing ourselves. If you know the design principles, you should have the confidence to make a call with reasonable certainty,
  52. Fortunately , Haydn’s studies paid off and in his mid-20’s, he went from the streets to here , a position with the wealthiest family in Hungary, the Esterhazy’s . Image Credits ------------ Esterhazy Palace: http://www.flickr.com/photos/konrads/2402182899/in/set-72157604062384320/
  53. What is extraordinary about this is suddenly Haydn has amazing resources at his disposal . The Esterhazy’s had a 25-person orchestra on-hand. Haydn was able to write the music , have musicians test it, and edit the music while the ink was still wet . And he needed these resources because the Esterhazy’s were demanding . Haydn was expected to perform 2 instrumental concertos, 2 operas per week, in addition to the Prince’s daily wish list. We think our release cycles are fast – this is a new level. During his lifetime Haydn composed: * 68 string quartets 106 symphonies 15 operas Not until the invention of the digital MIDI player in the 1980’s would another composer have the chance to hear compositions with multiple players and edit them on the fly like Haydn. Reference: ----------------- http://entertainment.timesonline.co.uk/tol/arts_and_entertainment/music/article5809887.ece Image Credits --------- Haydn’s Opera court: http://www.bbc.co.uk/composers/haydn/pictures/images/haydn_05.jpg
  54. The idea of rapid iteration should sound familiar. We pride ourselves on how quickly we design and evaluate ideas. Certainly many tools and practices have developed us with our evaluations . Image Credits ----- Speedometer: http://www.flickr.com/photos/storem/3216888569/
  55. Here is a room at a university devoted entirely to evaluating designs. Image Credits -------------- Brighton University Lab: http://www.flickr.com/photos/yandle/3231980616/
  56. With bucket testing , we can evaluate multiple designs simultaneously .
  57. With half an hour, I can launch a usability poll or survey to gather user feedback. And there are other similar tools available like UserTesting.com, Mechanical turk, Silverback, Ethnio that help too. I’ll probably spend more time evaluating these applications than I will in constructing the actual design test .
  58. And the web makes it especially easy to tap into Twitter feeds and blog comments and know what your existing users are thinking at that moment .
  59. We pride ourselves on our Usability evaluations. But if we are confident in our design principles, then I think we’re selling ourselves short.
  60. Haydn wasn’t relying upon audience voting or focus groups when he composed. Certainly he had critics to contend with and the Prince to please , but most of the iteration was happening on his own . Image Credits ------------------ Audience Voting: http://www.davegorman.com/images/audiencevote.jpg
  61. Haydn did not have a Usability lab. His Hungarian palace was in the swamplands and he was very isolated. During the period of immense Baroque experimentation , one of the few quotes we have from Haydn is where he actually credits his isolation for one of the reasons for his success .
  62. But before the Usability folks throw me out of the room , I’m not arguing that Usability isn’t important. At Meebo, we try to do Usability every Friday . However, I am saying that the ratio of external validation vs. internal evaluation in our industry is off. If we have a good foundation and good principles , then we should trust ourselves more to iterate and think through the design rationale ourselves.
  63. Usability is best for helping us validate mental models . Instead of, “do you prefer ” then you want to ask, “ what do you expect .” And as far as guerilla usability has taken us, it’s still slow and it’s still data to analyze . Reserve it for when it makes sense.
  64. Returning to the Esterhazy palace for a moment… Haydn wasn’t prototyping with a piano or humming. He had an auditorium and musicians at his disposal where he could test out his compositions as they would be heard by his audience.
  65. However, I think there’s also more opportunity on the prototyping level.
  66. In our efforts to have rapid design cycles , we turn to low-fidelity prototyping so we can gather user feedback as quickly as possible. Image Credits ---------------- Card sorting: http://www.flickr.com/photos/dunk/152245036/
  67. However, our wireframes are simplifications of the actual design. They are lacking something. This is a wireframe of our Meebo bar notifications from this week.
  68. And this is the prototype that someone on our team created to illustrate the same concept. This is where we are most efficient at generating feedback . It’s much easier to see how the design principles like visual scan lines, hierarchy, etc could play out most effectively.
  69. Similarly, we prototyped with jQuery for our front page experiment with the Meebo registration process . And it was because we were able to play with JavaScript animations , that we were able to create this nice effect where the registration area slides up when the user selects this initial Register button. In a wireframe, this effect would have been an annotation on the sidelines . However, this sliding effect is a key part of this design’s success.
  70. As much effort as we are spending creating Usability tools , more opportunity now for developing native prototyping tools. Haydn was writing his symphonies and then hearing them immediately. Image how different things would be without an orchestra… A successful prototyping tool will utilize the Native OS elements like scrollbars, input elements , etc. One of the reasons it is hard to prototyping in Flash. Will help us get to the pixel implementation faster. I’d love to see it have reusable UI components so our prototyping is faster. And the closer we can get to the native language, the more accurate that prototype is going to be.
  71. So this brings me to the end of Haydn’s lessons. You should be able to reason through many of the issues we are facing ourselves. If you know the design principles, you should have the confidence to make a call with reasonable certainty, I hope that we all agree that we are in a Baroque era . With even more technologies on the horizon like CSS3 and HTML5, the situation is going to be even more complex before it gets better.
  72. What I’d like to leave you with is a question. Haydn had amazing influence on Western classical music. I don’t think it’s coincidental that one of the wealthiest families in Hungary produced was of the most extraordinary musical genuises in Western classical music .
  73. One of the reasons that I think Software interaction design didn’t suffer from such a Baroque era is that we had power houses that could bulldoze through these decisions for us. If you were a software interaction designer in the 1990’s, you relied upon the Apple and MSDN design guidelines and then applied one of the two pattern languages depending upon which one made sense. This was efficient but you might not know the underlying rationale for some of these patterns. With web design, there is no centralized design power house yet. This means that there’s more freedom for designers but far more patterns for users to become accustomed to.
  74. And this leads to an interesting Catch-22. In a few years, will the rest of us be following a few predominant patterns that have won out over the others? And with the Web, is it still early enough where these types design discussions can happen outside of large organizations and don’t end up being owned (or patented) by the largest organization.
  75. On the engineering side, I can’t help but be inspired by the proliferation of open source technologies . And I wonder if there’s a parallel opportunity for the design community. Pattern libraries are a star t but there aren’t that many of them and again, most are developed in larger organizations , not smaller communities.
  76. And that’s where I’ll leave tonight. With these four lessons and an interesting question.
  77. But there’s a problem with all this… Haydn’s dead . In fact, he’s been in this tomb for 200 years and it doesn’t look like he’s coming back to life anytime soon. So where do we go from here? I personally want to live to see the Classical and hopefully the Romantic phase of Web App design. The answer is not to look for the next Haydn. So as much as I’d love to skip from the Baroque to the big, fun Holst/Tchaikovsky Romantic period, I also recognize that it’s pretty unlikely. However, unlike Haydn, there’s a good chance we’ll all live to see it and that is what excites me . Image Credits ------------------ Haydn’s tomb: http://www.flickr.com/photos/indigotimbre/2544538697/