How to make URLs user-friendly
Summary: One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable.
Before I delve into this topic, I must admit that I haven't yet decked out my site with friendly URLs. But I'll get right on it! :-)
I hate typing URLs, and I'm sure that millions of other internet users do too. For some time, I had gotten used to bookmarking, but then my bookmark lists became really long, and suffered from extensive linkrot (when pages disappear from where they used to be). Then Netscape surprised me with a nice feature: if I wanted to go to a given .com site, all I needed to do was type the middle part of the name, say, "yahoo", and it would direct me to the right place. But then .net and .org sites started getting popular, and I had to specify the full URL most of the time.
I started running into even bigger problems when I had to write down (on paper, with a pen) a URL, or say it out loud to someone over the phone. Yahoo! is a great place to do research, but their long and complicated (if logical) URLs are absolutely useless once you leave the realm of computer-aided communication. Collaboration over the phone can be tough if you rely on one of the web's best resources; few people have a setup that lets them do everything digitally, everywhere (in libraries, movie theatres, and so on). And I don't know of any other way of telling someone a URL over the phone (not until we get simultaneous instant messaging and voice phones, anyway).
Four characteristics that make URLs user-friendly
- plain language
I don't think I've ever seen URLs that have all four characteristics of user-friendliness. Yahoo's URLs tend to be in plain language, but they certainly aren't short or lowercase. They're not conventional or self-correcting either.
A definition of short
I define short URLs to be no more than two levels deep (i.e. example.com/jobs/toronto/) and consisting of no hyphenated, underscored, or lengthy versions of words. How does this work?
- Instead of "example.com/employment/greater_toronto_area/", use "example.com/jobs/toronto"
- Instead of buying "sultans-of-swing.org", buy "sos.org", "sultansos.org", or "swingsultans.org"
Short URLs are better because they're easier to type, easier to remember, and easier to write down or say out loud in conversation.
A definition of lowercase
I'm not sure this needs any explanation, but just in case: lowercase means no capital letters.
- Instead of "example.com/Employment/Greater_Toronto_Area/", use "example.com/jobs/toronto"
URLs with mixes of capital and lowercase letters are harder to type than all-lowercase URLs, hard to remember, and hard to say out loud in conversation.
A definition of plain language
I'm basing this guideline on English, but it probably applies to many other languages as well.
For heaven's sake, don't use technical jargon or strange abbreviations in URLs. Don't use symbols and codes. Think of how users perceive the thing you're trying to position on the website:
- Instead of "example.com/Employ/loc?=$GTA_Toronto/", use "example.com/jobs/toronto"
- Instead of "example.com/prods/RAM/", use "example.com/products/memory/", or better yet, "example.com/memory/"
Yes, URLs in plain language are easier to remember, say, write down, and type. A lot of people don't even know that ~ is a "tilde". To them it's just a squiggly thing. "So you go to example dot com, and then a slash, then a squiggly thing..."
A definition of conventional
Being conventional in URLs is tougher than the other guidelines, but it's just as important. If most websites use the directory /jobs/ to show employment opportunities, don't use /careers/ or /employment/ or anything else. Being conventional is about anticipating the user's expectations based on Nielsen's Law of the Internet User Experience: users spend most of their time on other sites. If those other sites use specific terminology in their URLs, every site should.
- Instead of "example.com/careers/greatLakesRegion/", use "example.com/jobs/toronto"
- Instead of "pop3.example.com", use "mail.example.com"
Being conventional isn't a bad idea for other aspets of web design either: feel free to stop using the term "user ID" any time!
And of course, conventional URLs are easier to remember, because there's nothing special or unique about the URL to remember other than the domain name.
A definition of self-correcting
Self-correcting URLs are the best: imagine, if you accidentally type in /Jobs/ instead of /jobs/, or /emplyment/ instead of /employment/, or even /employment/ instead of /jobs/, the web server compensates and directs you to the right place. Pure genius, and it doesn't have to break the back button. In saying that, I advise against using META tags to redirect users. That causes very annoying back button behaviour.
Amazingly, if you're using Apache (a common web server), a little .htaccess configuration can do the trick of correcting URLs. But how do you define the rules for correction?
- common spelling errors
- common synonyms
- all upper and lowercase mixes of the same word, common spelling errors, and common synonyms
- any earlier URLs that may have housed the same information (prevents old bookmarks from going bad)
Finding out some of these common spelling errors and common synonyms might take some research, or designers can just put themselves in the user's shoes and think of different ways of saying the same thing. Think: "jobs, employment, careers, opportunities, internships, hiring, human resources, hr..."
- Instead of "example.com/emplyment/" generating an error, have it automatically redirect to "example.com/employment/", or better yet, "example.com/jobs/"
One of the nice things about self-correcting URLs is that they take some of the burden away from the other user-friendly URL characteristics. For instance, if you insist on mixing capitals and lowercase letters, like Yahoo!, users can afford to make mistakes with their capitalization, because your web server will automatically compensate and take them where they want to go.
A final thought about URLs
Web users have to deal with these artifacts of the technical web all the time, yet very little attention is paid to their construction or operation. URLs are often the single barrier that prevents millions of users from visiting a site. There is an ad for a great government-sponsored international study program that's plastered all over the Toronto subway system. But the URL for the program is so complicated, I have absolutely no clue what it is. And I resent the fact that the government thinks that I should have a pen and a pad of paper ready on a whim, just to make up for their laziness.
Take a look at your URLs; they could probably benefit from a little tune-up!
Adam Baker is a user experience designer who's worked at Google, Apple, BlackBerry, and Marketcircle, and mentored startups in Vancouver.