Sunday, March 15, 2009

Sane URLs

What is up with your URLs, eBay? When you click a link from an eBay search, you go to a URL that looks like this:

http://cgi.ebay.com/Bernard-Madoff-Ceramic-Coffee-Mug-Hard-to-get_W0QQitemZ200319297841QQcmdZViewItemQQptZLH_DefaultDomain_0?hash=item200319297841&_trksid=p3286.c0.m14&_trkparms=72%3A1205|66%3A2|65%3A12|39%3A1|240%3A1318|301%3A0|293%3A1|294%3A50

This is obviously insane -- there's no reason URLs can't be both unambiguous and human-readable.

Some guidelines:
  • The domain should make sense. What the fuck is "cgi"? This is gibberish to any non-technical user. The domain should just be "www.ebay.com" (I'm looking in your direction, www2.seamlessweb.com).
  • Since URLs need to unambiguously point to a single page, it won't generally be possible to make them entirely human-readable. However, you should limit the non-human-readable portion of the URL to the shortest string necessary to ensure uniqueness.
  • URLs should include additional text to make them easy to identify. eBay actually does an okay job of this by including "Bernard-Madoff-Ceramic-Coffee-Mug-Hard-to-get", but ideally this should appear at the end of the URL.
Here's a quick improvement on that eBay URL:

http://ebay.com/auctions/123456/Bernard-Madoff-Ceramic-Coffee-Mug-Hard-to-get

where "123456" is the auction's unique internal id. Of course http://ebay.com/auctions/123456/ should work as well (since the auction is uniquely identified by the numeric string).

This is a good generic solution, but we might be able to do even better. I.e., there might be a more human-readable way to make the URL unique than embedding the auction's internal id. For example, eBay could use a Blogger-like strategy:

http://ebay.com/auctions/end-date-20090315/Bernard-Madoff-Ceramic-Coffee-Mug-Hard-to-get.

If two auctions with the same name share an end date, append a number to the end of the URL. If you want to avoid this, you could add information about the seller to the URL:

http://ebay.com/auctions/seller-rogrpodcater/end-date-20090315/Bernard-Madoff-Ceramic-Coffee-Mug-Hard-to-get.

The nice part about this solution is that you could have http://ebay.com/auctions/seller-rogrpodcater take you to a page listing all of rogrpodacter's auctions. The downside to this solution is that now the URL is getting pretty long.

There will always be a tension in URLs between human-readability, unambiguousness, and brevity. The important thing is making sure that you don't sacrifice one value without improving another.

Thursday, March 12, 2009

Blogger templates and WYSIWYG editors

Here's how you select a template for your blogger blog:



Nice and rounded corner-y, right?

But what if I want to customize my template a little; for example by increasing the size of my blog's title or changing the color of the date headlines?

Ugh. I have to look through the raw HTML to find the right CSS class or id:
Click "Edit HTML" in the Blogger Layout tab, find the right CSS selector, and then enter the color I want in hexadecimal format:
Making this minor change requires the same level of expertise as creating an entirely new template.

So what's a better interface?

One thought is to go as high-level as possible: let users adjust page elements' properties by right clicking on them. To change the color of the date headlines, just right click on one, select "Change color", and you're done.

This interface is friendlier, but its ease of use comes at a cost (or, put another way, there are benefits to working with the raw HTML/CSS, frustrating though it can be). Consider: when you select "Change color" on a date heading, how can Blogger determine whether you want to change the color:
  1. Of every date heading on your blog
  2. Of the first date heading on every page
  3. Of just this particular date heading (perhaps it's your birthday)
If you give the user enough control to specify which one of these he means, you end up with an interface just as complicated as HTML/CSS.

So while my proposed WYSIWYG interface for configuring Blogger templates could supplement the existing interface (say by only allowing you to use it for blog-wide changes), it's not powerful enough to replace it.

This shortcoming is actually an instance of a more general class of problems that plague all WYSIWYG editors -- i.e., an interface that only lets you modify the way an individual element in a document looks cannot always capture your intent (since changing the formatting of an individual element can be in aid of any number of higher-level goals).

This is why using Word is such a pain in the ass. There's no easy way to specify whether you're bolding a line because it's a chapter heading (and therefore you want all other chapter headings to be bolded automatically), or just because you're trying to emphasize it. Word's default behavior is to assume that every change is local, which is fine until you have to change the font of 50 chapter titles manually.