URL as UI

URL as UI - Intro

One of my favorite parts of my NewBCamp talk last month was something I had never really talked about (either in person or on this blog) but wanted to take the chance to share: The idea of the URL as UI. So, what is URL as UI?

Computer users have gotten so used to the graphical user interface (GUI) that it is easy to forget that computers basically operate via a series of commands. The web has not only brought the command line back to the surface (with the web browser’s address bar), it has exposed the concept to an entire generation of users that has never seen a command line.

When you access a web site, you are generally typing in a URL (unless, of course, you are selecting a bookmark or following a link from an email, IM, other site, etc.). The URL is essentially a command to go fetch that content. We take components of the URL such as “http://”, “www”, and “.com” for granted now, these are rather arcane expressions that would be nonsensical to non-web user. But since most sites we access start with an “http” (perhaps an “https”) and end with a “.com” (or “.net”, “.org”, etc.), we get used to these conventions.

Many developers take the time to learn the command line instead of using the graphical user interface because it can be faster and more efficient. For example, if I wanted to add a graphic called “button.png” to code base for BatchBook (the web-based contact organizer I’m working on for BatchBlue), I’d have two options. I could:

  1. Open a Finder window.
  2. Open the folder “svn” in my home folder.
  3. Open the folder “batchbook”
  4. Open the folder “public”
  5. Open the folder “images”
  6. Find the file “button.png”
  7. Right click on “button.png” and choose “Add” from the contextual menu (I was using SCPlugin for Subversion)

Or, I could do it via the command line like this:

  1. Open the Terminal
  2. Type “svn add svn/batchbook/public/images/button.png”

Once I learned the conventions, it was an easy choice for me.

Similarly, navigating a web site simply by the URL can be much faster and more efficient than relying on the site’s information architecture and navigation menus.

Unusable URLs

If I visit Amazon.com and search for the album Rock Action by Mogwai, I am directed to a page with this URL (line break mine):

http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/
ref=pd_bbs_sr_1?ie=UTF8&s=music&qid=1203311335&sr=8-1

My first question was “how much of this is needed to access the page and how much is session information Amazon is capturing?” Well, turns out that the URL really is:

http://amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/

What’s good about this is that it has the artist and title of the album in the URL. What isn’t so nice is the extra stuff that means nothing to me, the user. I’m sure it means something to Amazon, but that doesn’t mean it needs to be exposed on the front end. If I want to look up a different CD or different artist, I need to rely on the search functions or Amazon’s site architecture, even though I already know exactly what I want.

Is this just Amazon? No. Here’s the URL that Barnes & Noble gives me (again, line break mine):

http://music.barnesandnoble.com/search/
product.asp?z=y&EAN=744861049029&itm=1

To me, this is far worse… there is no human readable component here at all.

URL as UI Done Right

So, what’s a good example of URL as UI? Last.fm, of course. Here is the URL for information about Rock Action:

http://last.fm/music/Mogwai/Rock+Action

Now, let’s compare the three showing human usable vs. machine usable data:

URL as UI - Comparison

(click for larger version)

With Last.fm, if I want to look at the main Mogwai page, I can just delete the “/Rock+Action” part. If I want to look at a different artist page, I simply swap out the “Mogwai” with, say, “Orbit”. If I want to look at a particular Orbit album, I can just add it after the “/Orbit”, such as “/Orbit/Libido+Speedway”.

Notice that everywhere there would be a space, you use a “+”. Once you learn this simple convention, you can keep using it to speed up your interactions with the site.

Another example of a convention you need to learn is the individual track convention. It is possible for an artist to have the same song appear on many albums (such as the standard release, live album, greatest hits, etc.). Last.fm could track these separately but instead chooses to treat these all as one song. So, this is how you would access a single track’s page:

http://last.fm/music/Arcade+Fire/_/Intervention

Notice the “/_/” between the band name and the track name. The underscore in the directory where the album name would normally go signifies that we’re no longer looking at an album—we’re looking at individual tracks. If you were on the page for Arcade Fire’s “Intervention” and wanted to look at a different track by them, you’d have to hunt around the page and try to find a link to that track, or more likely go back to the main artist or album page and find it there. Using the URL, you can jump right to “/Ocean+Of+Noise”.

Of course, you can use this technique elsewhere on the site. For example, every artist has a wiki-based bio page, with a URL like http://www.last.fm/music/Mogwai/+wiki. If you wanted to read a few band bios, you’d have type the artist’s name into the search field, land on the artist’s page, and click the “Bio” tab to see each bio (and repeat the process for each artist). Why not just type the artist’s name and that’s it (via the URL)? Same thing goes with photo pages for each artist, video pages, etc.

Also, Last.fm is not the only site doing this right. Another example is Flickr. To see my photos, you go to this URL:

http://www.flickr.com/photos/darowskidotcom/

If you want to go switch to another user’s photos, as long as you know their username you can replace mine with theirs. It works well for tags, too. If you want to see all my photos I have tagged as “redsox”, you can go to:

http://www.flickr.com/photos/darowskidotcom/tags/redsox/

If you want to see someone else’s photos tagged “redsox”, simply swap in that user’s username. If you’d rather see everyone’s photos tagged “redsox”, just take out the username altogether.

If people use your site enough, they’ll want an even faster way to reach the content they want. They’re not browsing anymore. They are power users. They know what they want. Give them a nicely hackable URL to do this.

Update: A translation to Russian has been provided by Everycloudtech. A translation German has been provided by Kate Osipova.

63 Comments

  1. On March 17th, 2008 at 2:00 am crawlspace|media » Blog Archive » Daily Ma.gnolia Links for March 16 said:

    [...] Traces of Inspiration » Blog Archive » URL as UI [...]

  2. On March 31st, 2008 at 11:33 pm Jehiah said:

    Well said. I think del.icio.us was one of the first sites I really used with urls like that.

    I have tried to emulate that design as much as possible in my side project recently, and I have been pretty happy with the results. I end up with self explanatory urls like:

    http://theNextTrain.com/at/lirr/penn-station/to/mineola/

    or

    http://thenexttrain.com/at/path/hoboken/to/33rd-st/

  3. On April 1st, 2008 at 12:18 am Colin Williams said:

    The first time I noticed this was with newsvine.com. If you want news and opinion about the NFL, you can simply visit newsvine.com/NFL. President Bush? newsvine.com/bush.

    I used this concept on a real estate listing site once. You could find nearby listings by visiting thesiteurl.com/90210 (a zip code). I wish something like weather.com would do this, so I could hit weather.com/78130 instead of searching the Zip, or setting up “One-click Weather”

  4. On April 1st, 2008 at 12:54 am Wolf said:

    For power users: if you are logged in on Flickr you can replace your long nickname (e.g. darowskidotcom ) with me.

    So http://www.flickr.com/photos/me .

    Sweet article, one error crept in, you forgot to add the file to SVN in the terminal example.

  5. On April 1st, 2008 at 2:02 am Damien van Holten said:

    Interesting concept of describing it as an element of the UI.

    I would disagree with splitting URI‘s in “Made for machines” and “Made for humans” though.

    If you look at how apache – or any web server for that matter – uses URI‘s. I would say the are “Made for machines” and “Made for humans & machines”.