Category: music

Mar 08

why the symphony needs a progress bar

(photo courtesy of Santa Barbara Choral Society)

About three years ago, my work-life balance started to improve – start-up sleep deprivation was no longer a constant norm. I didn’t have enough time to restart violin lessons but season tickets to the San Francisco Symphony? Yup, I could swing that.

I bought tickets for myself and my husband, Todd, a relatively new concert-goer. But after a few shaky experiences, I was worried that Todd would back out of a subsequent season subscription. I started doing anything I could to avoid the, “Oh my god – is this only the first movement?” mid-concert terror. Seeing the experience from a newbie’s perspective, my UX instincts kicked in and I started jotting down the, “If only the symphony had…” moments. Three years later, here’s my list:

If Only the Symphony Had…

1. A Progress Bar

Even the most devout classical music listener has, “OMG is this over yet?” moments. When you’re not responding to a performance, the experience becomes torturous if you don’t know whether you’ve endured 5% or 95% of the piece. A progress bar would make a world of difference. Nearly every other performance genre has accompanying scoreboards, screens, tickers, or subtitles to track the event’s progress. A JumboTron might be inappropriate but a few progress lights on the conductor’s podium would really help.

MTT Talks

2. People Who Talk

Half of the fun of following a sports team is getting to know the players. At the symphony, you regularly have a two-hour experience with over a hundred performers with absolutely no words exchanged. I love encores because the artist announces the piece they are about to play and I can suddenly match a voice to a performer. Then they become real. I’d love for the conductor or soloist to provide a 3-4 sentence introduction, “Thank you for joining us this evening. Tonight we will be performing…” It’s only natural that the audience feels more engaged when they hear a performer’s voice. In the three years I’ve attended the San Francisco Symphony, I’ve never heard Michael Tilson Thomas talk!

quiet candy

3. Quiet Candy

The symphony season is almost perfectly aligned with head cold season – fall through spring. No one wants to cough during a performance but when that annoying tickle happens, you can only hold your breath and writhe in agony. I’m sure Ms. Stewart would endorse a hospitable offering of wax paper-wrapped candy in the entryway as both a welcoming gesture and a potential quick-fix to hold you over until you can make a mad dash to the water fountain.

4. A tl;dr opener

My typical symphony experience started with leaving Meebo a little early without dinner and finding myself starving in a 101-N traffic jam with a spouse who is thinking, “Wait a second, if we miss the symphony, we can skip the concert and get pizza instead!” We have never missed a performance but we sprinted from the parking lot on a few occasions. With seconds to spare, I’d see Todd crack open his program to find a dense Ph.D. thesis on the first piece. Two-three sentences in, the lights would dim and suddenly Todd was grasping his dark, useless program notes with no idea of what he was listening to.

Here’s a San Francisco Symphony program written for Messiaen’s Oiseaux Exotiques (click to read the 11-page version):

In all of the 2,000 words, the title, “Exotic Birds”, is never translated! Assuming Todd made it through the first paragraph before the music began, he’d know the commissioner, dedication, and all of the locations and conductors who have played this piece of work since 1956. This is not helpful information for someone who is going to listen to Messiaen for the first time!

The first paragraph needs to be oriented to a 30-second, the-lights-are-dimming panic scan. Here’s what I wish preceded the lengthy write-up:

Oiseaux Exotiques (“Exotic birds”), 1956
Duration: 16 minutes (no movements)
Composer: Oliver Messiaen (1908-1992), France
Period: 20th century
Influences: Roman Catholicism, birds, colors, Japanese music, landscapes
Instruments: Piano and small orchestra
Listening notes: Forty-eight birdsongs are played throughout this piece. Messiaen was not familiar with American birds so many of the birdsongs such as the Cardinal, Wood Thrush, Prairie Chicken, Oriole, and Finch were exotic to his ear.

concert notes

5. Program notes on the fold

While I’m harping about program notes, I’ll also mention a personal pet peeve. I dread the moment when I accidentally close my program and realize that I’ve lost the position to the concert notes. I’ll need to carefully open and flip through pages to locate the notes again without squeaking a chair or elbowing my neighbor. I know that it might make economical sense to bury the program notes amidst diamond cocktail ring advertisements but I’d really appreciate a program that naturally falls open to the concert details. If the advertising dollars can’t be missed, then offer a lightweight $.99 iPhone app that has white-on-black text (to avoid glowing screens) that can be flicked in the dark.

6. Programming for beginners

When you launch a new product, you inevitably have a few crazy, very vocal early adopters (why don’t you support Opera’s browser yet?) that you have to selectively ignore if you want a product that appeals to a wider audience. The symphony is the same. About half of the audience attends for a pleasant symphony-going experience. A small minority will be hard-core educated symphony folks who needle, “Why haven’t we heard more atonal music by post-Ján Valašťan Dolinský Slavic composers this season?” The remainder are the musically tepid spouses and children who have been dragged to the hall and are just trying to stay awake and to clap at the right times.

To sustain the symphony, there needs to be beginner programming at every concert – even if it’s just a 3-minute warm-up to perk up newbie ears with a, “Oooh – I’ve heard of this!” moment. Pre-concert talks are fantastic but I’m battling hectic schedules and a seatmate who (though he’d graciously never admit it) probably wants to spend less, not more, time at the symphony. However, it’s these seat-mates who determine whether I repurchase symphony season tickets and who will probably determine whether the symphony thrives longterm.

I can imagine that in two hundred years people will attend rock concerts performed by historical cover bands and wonder, “Why do they require that we stand for the entire concert?” Or, “If the concert really begins at 11pm, why do they print 10pm on the tickets?” The symphony was intended for entertainment and our rigid adherence to its nineteenth century form has made it increasingly difficult to appreciate. A progress bar is long overdue!

Apr 11

baroque trappings of today’s web applications

I had the unexpected opportunity to present at the February BayCHI event a few months ago. For a year, I’d been mulling on a presentation that is a mouthful to say, “What Web Applications can Learn from the Harpsichord.” It’s not the typical “What you should know about HTML5/CSS3/JavaScript” presentation and I knew I couldn’t assume it would ever find an appropriate audience. However, when Christian Crumlish asked me if I had anything I’d want to talk about at BayCHI, it felt like an extraordinary stroke of luck.

If you’re wondering how someone starts pairing harpsichords with web application design, it might help to know that I started playing the violin when I was five and continued playing throughout school. I don’t consider myself an expert in classical music (and my former music theory teacher would undoubtedly agree) but I do know that most classical music pieces can be categorized into one of about seven historical periods and that most household composer names come from the Baroque, Classical, and Romantic musical periods.

Interestingly, most of those musical period labels weren’t applied until the mid-19th century, after Beethoven’s death. It’s not often that musicians, designers, or architects have the foresight to declare the arrival of a new stylistic period. In reality, styles evolve more organically and it’s usually the duty of future historians to argue about these divisions.

Ten years ago, we talked about the Internet boom followed by the bubble. Five years ago, we started calling ourselves Web 2.0. Now we talk about social media. And in my head, I keep wondering whether these divisions will still be applicable in future Web Application Design museums hopefully 20-30 years away.

It was this thought process that led me to wonder what would happen if you compared the development of classical music with the evolution of today’s web applications. I’ve spent the last few weeks mulling on how to translate and visually represent this thought within a coherent blog post.

I’d like to propose that today’s web apps are stuck in a Baroque-like era and that by looking at the similarities between the evolution of classical music and web applications, we can break free of our Baroque trappings and progress forward to the next Internet period.

Before diving into the particulars of what a Baroque era looks like, here’s what I recall from my high school music theory classes up through the Romantic period with a few audio snippets. The most important take-away is to note the steps leading up to the Baroque music explosion fueled by public demand, an instrumental boom, and an abundance of musicians.

Classical Music between 400-1820
Medieval (400-1400)

Long period of research and development
A slow Medieval simmering of musical development primarily confined to the Church who develops the first handwritten musical notation system for Gregorian chant. Music generally consists of religious vocal chants.
Renaissance (1400-1600)
First craftsmen and instruments
The printing press makes it easier to reproduce music and instructional books for playing musical instruments. Instrumental music is no longer limited to just accompaniment and new demand develops to design instruments with a fuller range of sounds.

Baroque (1600-1750)
Mass adoption and experimentation
The Baroque period emphasizes broad experimentation with the goal of creating emotional impact through complexity, ornamentation, and textures. Baroque fugues (like Bach) and ornamented harpsichord music are characteristic compositions of this period. Formalized teaching methods arise to develop new musicians and composers.

Classical (1750-1820)
Restraint and principles, craft to art
The Classical period aims to understanding underlying order and hierarchy for compositions. Instead of the melody and harmony sharing an equal role, composers prefer a single, audible melody with a secondary harmony accompaniment.

Romantic (1820-1910)
Artistic maturity, full expression
Finally, the art form reaches full maturity in the Romantic era as more composers and musicians master how to flout Classical rules for the desired effect. More formalized compositional structures develop. The Romantic period achieves what the Baroque period sought out to do – achieve emotional impact through compositional grandeur. However, it needed the rules of the Classical period to do so.


With that background, here’s how the classical music timeline might parallel the development of the Internet.

Medieval – Long period of research and development
– In 400 AD, the Church is the only organization with the money and resources to 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
– Like Medieival music was initially limited to religious devotion, the Medieval Internet was initially intended for military research
Renaissance – first craftsmen and instruments

– During the Renaissance period, music development breaks away from the Church and as more Europeans are exposed to music, music-making becomes an industry craft. Similarly, the development of the Internet moves from academic and government institutions to predominantly industry in the 1990’s.
– Developing music becomes less expensive with the development of the printing press. Similarly, the lowering cost of personal computers provide the general public with a new opportunity to have a presence on the web. Venture capitalist fund a startup land grab.
Baroque – mass adoption and experimentation

– The Baroque musical period represents the longest and broadest period of musical experimentation in European musical history ever with an emphasis on exerting an overwhelming emotional impact through ornamentation, a texture of voices, and a variety of instrument ensembles. With the Internet, web applications see an explosion of pixel treatments, mashups, api’s, and social media widgets. In both cases, there’s a sense of doing things because you can, not necessarily because you should.
– In both genres, technology continues to develop and best practices are formalized.


Personally, when I listen to harpsichord music from the Baroque period, not too much time passes before I start to think, “I think this harpsichord piece is just trying to play as many notes as possible.” Similarly, after browsing the Internet for a bit today I start to think, “I’m not sure I can withstand another mashup, rounded corner, or headline announcing a breakthrough platform.”

It’s easy to think that today’s Internet baroque period is confined to the glossy Web 2.0 style. For instance, if I look at this personalized MySpace page with its glitter tags, purple background, widgets, and musical embeds, it’s hard to argue that it doesn’t have Baroque leanings. It’s not so dissimilar from this 1777 Baroque San Cristobal Cathedral where the emphasis is on the amount of ornamentation, materials, and architectural techniques for emotional effect.

However, you see the same types of mashups happening at the UI level. Consider this book previewing UI. In this image, you’ll see a modal litebox preview with a drop-down menu (with expandable accordions) that can be dismissed by an ‘X’ close button. All of this is encapsulated with a next/previous photo viewer. And judging by the buttons at top, you can zoom too. I’m really not sure what to expect when I click on the “Expanded View” option in the top right-hand corner.

How many more interactive elements can we fit within this UI? This montage is fairly daunting considering this UI’s primary intent is just to flip the page of a book.

In the musical Baroque period, the emphasis shifted from developing instruments to developing ensembles like the Opera and string quartet. The ultimate Internet homepage was a very Baroque endeavor that aimed to create the best one-stop-shop with stock quotes, feeds, and personalized services though not necessarily doing any one individual service particularly well.

Now, the focus has evolved from ultimate homepages to social media integrations with the aim of making sharing and communicating easier. When you click on a sharing service in your favorite news site, it’s dizzying to watch your browser load a zillion icons to display the matrix of services eager to announce you’ve read (and perhaps liked) an article. It’s amazing that copying and pasting an article is still such an attractive alternative to most of these services. Again, just because you can connect with all of these services, does that mean you should?

So where do we go from here? Personally, I want to live to see the Classical and hopefully the Romantic phase of web application design. I hope that our craft will continue to evolve and that with enough Baroque trial and learning, we will develop enough confidence to exercise restraint and present more compelling experiences to our users.