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.

RT @azaaza Songza and a Little Thing | Follow @azaaza on Twitter | All blog posts