Songza and a Little Thing

Design Our Products

Last month we added an “about songza” page to Songza. It’s a simple page — just a couple headers, some text, and a return-to-Songza link. I thought I’d a walk through my thought process in through-designing this tiny feature. It’s not quite as simple as it first appears.

The first question is whether to have the about content be on a separate page, or as lightbox/hidden-div content on the main page. I was tempted by the second option; there is a seduction to having Songza exists on only one page. On the other hand, that solution isn’t particularly scalable — Songza has already added other pages similar to the about page, how would they all interact? And how do you keep the load-time reasonable as more and more content is added? — More importantly, the content is not linkable or search-able. Using clever Ajaxy tricks means that the visibility of the content is dependent on application state.

It’s clear that the about page should be, in fact, a separate page. That leaves us with a glaring usability problem. Do you see it? It’s bad enough that I would be wary of clicking links while listing to songs if I ever got bitten by the problem.

Say I’m listening to “Bohemian Rhapsody”, singing along in that I-hope-the-neighbors-won’t-report-me-to-the-landlord sort of way, and I decide to find-out more about Songza. I click the link and — BAM — I’m no longer listening to the song. Instead, I’m staring at this self-serving, slightly meglomaniacal page about Songza’s history and its founders. Not only that, but I’ve lost my spot just at the best part of the song (I’m not saying which part that is in hopes of starting a small flame war). The naive approach to creating a separate page has turned the unassuming “about songza” link into a landmine — under no circumstance should you punish your users for using your system. Because there is no way for the user to know which links will intterupt the music, every link is a Russian Roulette. Not cool.

The solution is to open a new window (although preferably, it would be a new tab). This way, the “about songza” page opens without interrupting the song. It’s work-flow transparent. Spamming the user with extra windows or tabs is never a good thing, so we use a little bit of Javascript to open a new page only if a song is currently being played. We used a similar solution for the “Watch Video” link as well, except we went the extra mile there and automatically pause the Songza song so that it doesn’t compete with the video.

Now we need examine the behavior of the “return to songza” link that formerly went at the bottom of the about page. By opening the about page in a new window, we’ve broken the link’s behavior. If I were to click on it, it would cause that new window to go to Songza, which means I would have two separate instances of Songza open. How annoying! One solution would be to change the link to say “close about page”. That works great if I had come to the page from Songza, but if I had found myself on the page by doing a search, I would have no way of getting back to Songza proper without editing the URL. We are in a bit of a bind — either way we do the link, we have a suboptimal behavior.

One solution is to introduce site-wide navigation aides, like adding nav-bar, linking the logo, or appending a footer site-map. Although Songza may need this at some point in the future, our goal is to keep Songza simple enough that that isn’t needed. Plus, there is a more elegant solution that doesn’t require adding anything. The solution is a conditional: if the page is visited by following the link with music playing, we know display the “close” link, otherwise we display the “return to songza” link.

On a scale from straight-forward to clever, I’d give this solution a cute. Give it a try, and let me know how it feels. It’s not ground breaking, but then it is the little things that can often make the difference between a design that is a joy, and a design that is frustrating.

so everything worked just as described in your blogpost. when one drives down a freshly paved road its hard to appreciate not having to drive into potholes. i can’t wait to see the impact you fellas will have on the mozilla project. regards, declan.

I wasn’t aware of the site until this post, but I found it quite nice. I liked how it found songs I couldn’t find anywhere else, but seeing as though you are just redirecting content from Youtube (Am I right about this, BTW?) it reminded me of a project I started half a year ago and never finished.

Getting back to the subject - it was quite smart of you to write a bit harder code for a more humane (I decided against saying usable here) user experience.

And of course - nice to see Jonathan Coulton on the main page!

I like songza but can you please replace the red. It hurts the eyes.

Qoute: And how do you keep the load-time reasonable as more and more content is added?
I think your songza product is brilliant in many ways, though you should be aware that an extra few paragraphs of text wouldnt hurt the load time as much as some of the things you allready do on the main page. I suggest you take a look at YSlow ( a firefox addon). It gives you a score from 0 to 100 based on how optimal your site is. At the time of this writing, songza.com is given a D (63), mostly due to many componentes (http requests), that are not zipped and does not have an expires header. There is a large improvement in speed to be gained here.

There is another option that will both feed search engines and keep the content on one page (though it is significantly more complex than your simple, elegant solution).

The basic concept is to write your html with standard links, then parse the page with javascript and re-write the links to open the page with your ajax function. Bookmarking and page state can be handled by modifying the anchor (for example, the about page would be http://songza.com/#about instead of http://songza.com/about, though the actual page would live at http://songza.com/about).

If you don’t want to re-invent this, The Dojo Toolkit provides a great implementation.

You can view a live example of this in action at Napster - just click through some of the links under “Explore Napster” and watch the URL and content areas.

@ Alexander. I’ve known about YSlow, but (hypocritically) I haven’t applied it to Songza. Point taken — slow load times hurts usability. That would be a good thing to do.

@ Mikle. Songza uses a number of sources. For instance, this song comes from our deal with Seeqpod.

Answer appreciated…
Keep up with the good work… And thanks for linking me to a great song :)

Last night Jeremy was using Songza, and I noticed that he had to open up a separate tab and do a separate search for lyrics to a song. I was surprised to realize that Songza has links to discography but not to lyrics.

I appreciate how much thought you put into the design of the “about songza” link. I can imagine you clenched your teeth when you realized that you had to open a new window.

However, I’m afraid I found a way the design might fail. As I understand it, you’re using the popup window’s name to find out whether to show the links as “close” or “back”.

One scenario:
Open songza, play a song, click about, click the songza logo, and you’ve got two windows with songza in them. Not too good.
Now, say the song in the background window has stopped playing in the meanwhile. if you start to play a song in the new window and then click on “about”, the music is interrupted.

The problem, in my personal opinion, is that any approach that relies on controlling the browser’s windows is inherently flawed. That’s why every fix will lead to new problems, like this one.

I’m with Andreas on this one…

You’ve introduced state into the rather stateless browser beast, and nothing but pain can come of it.

But you can have your cake and eat it to. You can link to a simple about page, but use javascript to catch the click event and throw open a lightbox, or any effect for that matter. You don’t even have to pre-load the page, so the only overhead is the script snippet that acts as a container, and that can be as tiny (and compressed) as you’d like.

Plus this technique works for web crawlers and folks w/o javascript — and it eliminates the “close” or “return” problem — if you’re in a lightbox, close it, else, return — without having the state-race Andreas pointed out.

Hey songza’s giving a 403 whats with that?
maybe updating it?

sorry about that question answered.

By the way, it would be cool to control songza through enso. Don’t really think its workable but it would be cool.

mmh, since Songza only has a Main page and an About page, I’m wondering why you don’t make it one page and use prgressive enhancement to hide the About content using JS and show it, in lightbox if you wish, when needed. This way the content of the About is accessible and searchable. Problem(s) sovled.

thesixtyone “solves” this problem by turning every page into an ajax request, and “loading” pages via javascript. They try pretty hard to preserve links (http://www.thesixtyone.com/#/static/about/) but it’s a lot of effort to go to…

Everybody knows that the best part of Bohemian Rhapsody is the “Scatter mush, scatter mush will they do the FANDANGo?!?!?!?” Or something like that.

Something like the FF Extension, “YouPlayer” for audio could help the real issue here; requiring JavaScript just to access the page.

i dont know how to get an audio player to play while the user can still navigate….

a music player that will continue playing while the user can navigate the rest of the page without a problem

I’m working on a set of Songza commands for Enso using the Enso Developer.

’songza’ inserts the songs at Songza.com that match the current selection.

’songza list {song list}’ inserts the most played songs and the featured songs at Songza.com.

’songza playlist’ inserts the playlist of the currently selected Songza.com username.

I’ve implemented the ‘songza list {song list}‘ and ‘songza playlist‘ commands. I’ll implement the ‘songza‘ command when the Songza search API is released (which should be quite soon).

For more information about the Songza commands for Enso, including their Python implementation, visit the Enso Developer Wiki: http://www.ensowiki.com/wiki/index.php?title=Songza

I should add to my previous post that the Songza commands insert links to songs marked up in XHTML. For example, if you are working in Word and you want some music, simply insert a list of songs, such as your own playlist, click on a song link and the Songza website will open in your browser and start playing the song you clicked on.

Clickable song lists are available in any application capable of rendering the unordered list of XHTML links returned by the Songza commands.