Your SlideShare is downloading. ×
  • Like
What Web Applications can Learn from the Harpsichord
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

What Web Applications can Learn from the Harpsichord

  • 643 views
Published

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 …

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 discusses how to approach web application design when, instead of one dominant voice, there's a multitude of web product and design philosophies.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
643
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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.
  • Hi, I’m Elaine. And just to give some context about who I am… A little bit about my background …
  • 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.
  • 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.”
  • 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/
  • 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/
  • 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/
  • 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
  • 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/
  • 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/
  • 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/
  • ‘ 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/
  • 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
  • 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
  • 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
  • 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/
  • 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
  • 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.
  • This ends our time travel experiment. Now, let’s jump to today…. Image Credits ------------------- http://www.flickr.com/photos/bendodson/3402250681/
  • 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.
  • 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
  • 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/
  • 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
  • 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.
  • 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
  • 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?
  • 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…
  • 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
  • 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.
  • 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
  • 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.
  • 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
  • This is what I think I’d hear…
  • 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
  • And yet, we know intuitively that there are clearly some times that squares are better than rounded rectangles .
  • Vice versa - rounded rectangles are better than squares
  • 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.
  • 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
  • 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)
  • Memorize every rule in the book
  • 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 
  • 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.
  • 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.
  • 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?”
  • 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
  • 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 .
  • To no longer be a design craftsman, you need to flout the rules. Minimize ornamentation so your rule flouting has maximum effect
  • And for Meebo, you see our rule flouting when you mouse over the little green Android character on our mobile product page.
  • 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.
  • 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.
  • 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,
  • 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/
  • 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
  • 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/
  • Here is a room at a university devoted entirely to evaluating designs. Image Credits -------------- Brighton University Lab: http://www.flickr.com/photos/yandle/3231980616/
  • With bucket testing , we can evaluate multiple designs simultaneously .
  • 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 .
  • 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 .
  • We pride ourselves on our Usability evaluations. But if we are confident in our design principles, then I think we’re selling ourselves short.
  • 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
  • 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 .
  • 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.
  • 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.
  • 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.
  • However, I think there’s also more opportunity on the prototyping level.
  • 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/
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 .
  • 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.
  • 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.
  • 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.
  • And that’s where I’ll leave tonight. With these four lessons and an interesting question.
  • 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/

Transcript

  • 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…
  • 5.  
  • 6.  
  • 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
  • 13.  
  • 14.  
  • 15. “ Enough!” – Haydn
  • 16. classical 1750-1820
  • 17. romantic 1820-1910
  • 18.
    • 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
  • 19.  
  • 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
  • 26.  
  • 27.  
  • 28.  
  • 29.  
  • 30.  
  • 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.
    • how “so-and-so” does it
    • more intuitive
    • more professional
    • techier
    • friendlier
    • good feng shui
    • aesthetically-pleasing
    • less noisy
    “ this design is…”
  • 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/
  • 36.  
  • 37. WWHD?
  • 38. “ what are the true fundamentals of composition?” – Young Haydn
  • 39.
    • 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?
  • 40.
    • 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
  • 41. a similar appearance suggests similar behavior Clickable! Clickable! Clickable! Clickable! Not clickable! 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
  • 45.  
  • 46. haydn’s lessons
    • To flout the rules, you must know the rules
    • Minimize ornamentation to maximize effect
  • 47.  
  • 48.  
  • 49.  
  • 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
    • To flout the rules, you must know the rules
    • Minimize ornamentation to maximize effect
    • Use design principles for internal iteration
    • Prototype in your medium
  • 52. esterházy palace
  • 53. unparalleled iteration
  • 54. rapid iteration
  • 55. lab testing
  • 56. bucket testing
  • 57. guerilla usability
  • 58.  
  • 59. rapid iteration
  • 60.  
  • 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
  • 66.  
  • 67.  
  • 68.  
  • 69.  
  • 70. prototyping
    • Native OS
    • Pixel-level
    • Reusable UI components
    • Closer to the native language
  • 71. haydn’s lessons
    • To flout the rules, you must know the rules
    • Minimize ornamentation to maximize effect
    • Use design principles for internal iteration
    • Prototype in your medium
  • 72. influence
  • 73.  
  • 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?
  • 75.  
  • 76. summary
    • To flout the rules, you must know the rules
    • Minimize ornamentation to maximize effect
    • Use design principles for internal iteration
    • Prototype in your medium
  • 77.  
  • 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