URL as UI
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:
- Open a Finder window.
- Open the folder “svn” in my home folder.
- Open the folder “batchbook”
- Open the folder “public”
- Open the folder “images”
- Find the file “button.png”
- 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:
- Open the Terminal
- 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:
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.
[…] Traces of Inspiration » Blog Archive » URL as UI […]
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/
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”
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.
Nice refreshing article. Part of the merit for pretty URLs goes to tools like Ruby on Rails, which provide this behavior out of the box.
P.S. You got a fine taste for music BTW
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”.
Another good resource on the subject: the “Routing” chapter of the symfony project documentation. Not only does it explain you why you should consider that the URL is UI, it also tells you how to do it.
http://www.symfony-project.org/book/1_0/09-Links-and-the-Routing-System#What%20Is%20Routing?
[…] Darowski has a very interesting post up on his blog (link) on using the URL as a direct-access user interface. I completely agree with what he’s […]
Well, it’s true: the url is front end. maybe more than anything else…
But do we know if only power users hack urls? What I observed is that the average user does not look at the url at all once they are browsing on the site (do we have any research on that?). And to get there, they likely put in all the http and www and so on, which should not be necessary anymore, these days: I am power-using firefox’s adress bar, only typing parts of the url I remember. Example: ’37signals svn’ brings me directly to the SvN-Blog. I don’t have to remember if it’s .com or .net or whatever - I think that’s quite important. Urls don’t have to be so exact anymore - we have search engines.
I think you’ve missed two of the nicest examples of usable URIs
1. Most blog software, (including your own) uses nice date based ‘folders’, meaning its really easy to backtrack form an article to archives and scour through content …
2. Del.icio.us provide a really nice way of searching tags using the uri so that del.icio.us/tag/design/ retrieves all of their data on design. Its easily expandable and puts a massive API right in the address bar.
Just a note to say that all of our radio stations are findable by readable URL’s too:
http://www.last.fm/listen/artist/Cher/similar
http://www.last.fm/listen/user/joanofarctan/personal
http://www.last.fm/listen/user/joanofarctan/neighbours
http://www.last.fm/listen/globaltags/disco
http://www.last.fm/listen/group/mnml
etc.
How can
cd svn/batchbook/public/images/button.png
be adding a file to a reposetory.
Shouldn’t it be
svn add svn/batchbook/public/images/button.png
just a hint
[…] wird der Zweck von URLs als Bestandteil des Webdesigns verständlich dargestellt. Und ja, es macht […]
Thanks for an interesting read. For a long time, the Amazon URLs have been bugging me too. I hope, but doubt, that they’re going to change it.
Just as a note, at the end of an Amazon URL, the DP stands for “detail page” and the code is the item’s Amazon Standard Identification Number (ASIN).
Nice post. I often find myself typing direct URLs for sites I frequent.
@Wolf, @HarabanaR: Thanks for the tip on my lil’ svn typo. Fixed now. Cheers!
@Damjan: Thanks man!
As you’ve noted, last.fm and Flickr are wonderfully navigable via URL hacking. Another site that largely shares this property is del.icio.us (as Ben Sekulowicz-Barclay noted).
However, del.icio.us goes one step further: the page for a user has a textbox which effectively encourages you to navigate tags by typing. For example, here’s Joshua Schachter’s bookmarks; notice that the page header is very similar to the URL, and that you can enter a tag either in the URL or in the header to see bookmarks labelled with it.
Another point Ben mentions is weblog URLs. There was a period during (I think) 2003 when the likes of MT and Wordpress made a concerted effort to move from numeric IDs in URLs to readable URLs of the sort you see now. An example is this post by Mark Pilgrim detailing how he made his URLs cleaner. The point is, I think, that good URLs don’t always come naturally, but have to be worked on.
A lot of today’s frameworks (Rails, CodeIgniter) allow this with their “/controller/function/variable” URLs. There’s a pretty old Alertbox column on this as well:
URL as UI
Also to mention in this context is PHP.net, which I use a lot for their great shortcuts to function descriptions:
php.net/rand gives me the manual page for the rand() function, if I need infos on any other function I just add it after php.net/ - with Quicksilver this is faster than any manual’s clever index and/or search function.
A note on Amazon URLs: any human-readable text in them is actually meaningless. All of the following URLs go to the same page:
http://amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/
http://amazon.com/dp/B00005AUBA/
http://amazon.com/Metallica/dp/B00005AUBA/
Another aspect of URLs as UI is that to consistently compare resources, they should have one URL–ie, finding a book on Amazon by browsing and by searching should refer to that book by the same URL (which they don’t).
[…] very interesting article from Adam Darowski on transforming URLs into usable pieces of the user […]
[…] Darowski looks at how using your URL as part of your UI can be helpful for power users. I’ve long used this as a best practice personally. It may […]
This is a great explanation of something a lot of us take for granted. Thanks for taking the time to write it up, I imagine I’ll end up pointing a lot of people here in the future.
One thing worth noting though, is that sadly your ‘made for humans’ and ‘made for machines’ labels aren’t quite right.
bec above points out that the human-readable text in the Amazon URL gets ignored. You have it labelled as ‘made for humans’ but I’m pretty sure it’s a search engine optimisation thing. Google apparently favours pages where the URLs contain the search text, hence a recent rash of pages that have nice, tidy strings in their URLs as well as a bunch of nonsense.
It seems that people couldn’t be persuaded that the del.icio.us/Flickr/last.fm route was a good one until they also realised it brought SEO benefits. Writing pages and URLs for Google? “Meh” I say!
I think this makes sense for web sites with well categorized data.
I wonder if there are any tests out there that can prove the effectiveness of a well designed URL system in a world that rarely features good URL structure.
On my sites, I like using mod_rewrite (for Apache) to create usable URLs. I think that it is important for users to be able to manipulate the URL to find what they need quickly in a way that makes sense to them.
A note to the author: The <abbr&rt; tag at the top specifies that URL stands for Universal Resource Loctor, not Locator
Building on this is there any way to build a smart 404 page to suggest alternative pages to possible mispellings?
So that www.amazon.com/music/Mowqai
give you a page that suggest a Mogwai or what you were looking for instead of the standard, “this page doesn’t exist here’s a link.”
Locationbar2 is a really nice firefox extension for exploiting these types of URLs. Pressing ctrl with your mouse over the url allows you to click the part which you want to navigate to.
Isn’t this what wikipedia does? You can easily get a wikipedia page like this http://en.wikipedia.org/wiki/Music#Improvisation where the hash # directs you even to the desired part of the page or photos. This isn’t new?
You’re dead on accurate here. I expected to see an article on RESTful URLs, but this is much better. The command line vs. explorer analogy is a good one- when you know what you want, it’s faster to just type it in. And I’ve been typing out Last.fm URLs for a while without even thinking about it, which just goes to show how great it is: the best examples of design are where your productivity is improved without bringing attention to the interface. Note, you can either use ‘+’ in place of spaces, or just leave the space there for Last.fm- the space will be converted to a %20, which works fine with the back-end. Now that’s good design.
@bec: Man, I hadn’t realized that. That’s just plain weird.
@Tom Carden: I hadn’t realized, as bec pointed out, that the “human readable” portion was actually completely ignored. That does completely drop it from the UI of the URL, since it isn’t a usable part.
@Timothy Armstrong: Thanks for the typo tip in the abbr… and great catch!
@Brandon: One site I’ve seen handle misspellings well is Baseball-Reference.com. Only thing is, I think they are all pretty much generated manually, so I’m not sure that’s what you’re looking for.
For example, on this page: http://www.baseball-reference.com/s/schmimi01.shtml
At the bottom, you see “Name and misspellings: mike micheal Michael Mike jach michael mark joe jakie Jack shmidt scmidt schmitt Schmidt schimdt smidt”
@Web Chick: Yeah, there are many good examples, like Wikipedia and Del.icio.us, as many mentioned here. It isn’t necessarily new, just an observation of a best practice.
I like the movement towards RESTful URLs in a lot of application, simple GET requests are handled differently than others (PUT, POST, DELETE).
Would be nice to search results URLs like:
http://amzn.com/keyword/Web%20Usability
http://amzn.com/isbn/12345790
http://amzn.com/author/Jakob%20Nielson
Good article, and definitely something that ought to be used more often. I find Wikipedia’s URI structure is pretty good.
I also try stick to as much logic as possible with URL/Is - I avoid ending a URL with a file extension, pointing instead to a directory. Common sense really, but no one seems to have thought about it before…
//Harry
@Adam Darowski: That’s a great example, I really don’t know how you would generate it any other way than manually unfortunately. (Especially as my development skills are pretty much limited to xhtml/css.)
Great article though, I wish more sites would adopt this practice in the future.
[…] really like URLs as a topic for user experience. Today, I found somebody else who think the same thing. Interestingly enough, he goes over what a good URL is but not how to achieve […]
This is great for information rich websites. Bu tfor sites that are business centric, like your bank, I wouldn’t want to use a command line like
www.mybank.com/transer/from-account=ksdjfksld&to__account=djfld&amount=233.90
Sorry, not going to do that.
@Vijay: That’s a great point. There are time when this should *not* be used and you probably just gave the best example.
[…] Traces of Inspiration » Blog Archive » URL as UI (tags: usability URL ui) […]
[…] Traces of Inspiration » Blog Archive » URL as UI […]
Surprised no one has mentioned how this can be achieved easily! If your server is Apache, the magic is achieved through use of mod rewrite, you can do this by editing (or creating) a htacess file.
A quick Google finds this http://corz.org/serv/tricks/htaccess2.php which is one of many ways to do it!
Happy rewriting
[…] week, Jacob turned me on to an interesting article about readable URLs. It’s been sitting in the back of my mind ever […]
Well said. This thinking particularly comes into its own on web apps like delicious, flickr etc. where your url effectively becomes your home page / application welcome screen.
[…] URL as UI. 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. © 1999-2008 Justin Blanton (e-mail) e v e r y t h i n g i s r e l a t i v e In partnership with […]
Just found this article. Surprised no one posted this:
http://www.amazon.com/RESTful-Web-Services-Leonard-Richardson/dp/0596529260/
A great book that talks about these ‘friendly-urls’ being used as part of a technology methodology embracing REST.
[…] Anlaşılabilir internet adresinin avantajları. Bağlantı […]
@Morgan: I actually just picked that up over the weekend. Glad to see it’s in mentioned in there.
When the web had static pages this used to be done loads.
Nokia were great - you heard a new phone was coming out
www.nokia.com/phones/nnnn
would take you straight to the page you needed.
[…] Darowski has an excellent piece on URLs as user interface at his blog, Traces of […]
nokia homepage also has one of the most unusable url structure
good post
[…] Adam Darowski: “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.” [via.] […]
[…] 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. (source) […]