URLs are how we talk to the web and how we talk about the web. A user's first interaction with your site isn't viewing a page or reading your content, it's seeing your URL. This talk covers how we know that, what it means, and how to create good URLs.
View the full version of this slide deck at http://blog.rnf.me/ux-of-urls
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
The UX of URLs
1. THE UX OF URLSTHE UX OF URLS
/Ryan Freebern @rfreebern
Union Street Media
2. WHAT IS A URL?WHAT IS A URL?
RFC 1738RFC 1738
“This document describes the syntax and semantics for a
compact string representation for a resource available via
the Internet. These strings are called ‘Uniform Resource
Locators’ (URLs).”
—Tim Berners-Lee et al, 1994
3. HTTP SPOKEN HEREHTTP SPOKEN HERE
“We are building clans around languages we speak to the
Machine.”
—Vyacheslav Egorov, 2013
4. WHY DESIGN URLS?WHY DESIGN URLS?
Because people care.1.
Because machines care.2.
Because we can.3.
6. PEOPLE CAREPEOPLE CARE
“[P]eople spent 25% of their time looking at the URL in
navigational tasks vs. 22% in informational tasks.”
—Edward Cutrell & Zhiwei Guan, 2007
7. PEOPLE CAREPEOPLE CARE
“[S]earchers are particularly interested in the URL when
they are assessing the credibility of a destination. If the URL
looks like garbage, people are less likely to click on that
search hit. On the other hand, if the URL looks like the page
will address the user's question, they are more likely to click.”
—Jakob Nielsen, 2007
11. WHAT MAKES A URL?WHAT MAKES A URL?
http
https
ftp
data
file
mailto
tel
ws/wss
about
12. WHAT MAKES A URL?WHAT MAKES A URL?
example.com
gTLD: .com, .net, .org, .edu, .aero., .asia, .biz, .cat, .coop, .gov, .info, .in
.jobs, .mil, .mobi, .museum, .name, .post, .pro, .tel, .travel, .xxx
ccTLD: .us, .uk, .au, .ca, .mx, .cc, .cx, .ws, .io, .ly, .es, .fr …and hundreds
more.
Infrastructure TLDs: .arpa
Reserved TLDs: .test, .example, .invalid, .localhost, and .local
http://ws, http://uz
Internationalized domain names: http://xn--zkc6cc5bi7f6e.xn--
hlcj6aya9esc7a (http://உதாரண�.பரி�ைச)
13. WHAT MAKES A URL?WHAT MAKES A URL?
http://example.com/path/of/any/length/resource?query=data&
another=parameter#fragment
14. WHAT MAKES A URL?WHAT MAKES A URL?
http://127.0.0.1/path/of/any/length/resource?query=data&
another=parameter#fragment
15. WHAT MAKES A URL?WHAT MAKES A URL?
http://[ff:ff:ff:ff:uu:uu:uu:uu]/path/of/any/length
/resource?query=data&another=parameter#fragment
16. WHAT MAKES A URL?WHAT MAKES A URL?
http://www.example.com/path/of/any/length/resource?query=data&
another=parameter#fragment
17. WHAT MAKES A URL?WHAT MAKES A URL?
http://www.example.com:80/path/of/any/length
/resource?query=data&another=parameter#fragment
18. WHAT MAKES A URL?WHAT MAKES A URL?
http://username:password@www.example.com:80/path/of
/any/length/resource?query=data&another=parameter#fragment
19. WHAT MAKES A URL?WHAT MAKES A URL?
http://username:password@www.example.com:80/path/of
/any/length;param=123/resource?query=data&
another=parameter#fragment
20. WHAT MAKES A URL?WHAT MAKES A URL?
http://username:password@www.example.com:80/path/of
/any/length;param=123/resource?query=data&
another=parameter#fragment
21. WHAT MAKES A URL?WHAT MAKES A URL?
http://example.com/path/resource?query=data#fragment
22. WHAT MAKES A URLWHAT MAKES A URL
GOODGOOD??
Known knowns
Planned for from the start
Known unknowns
Auto-generated from user interaction
Unknown unknowns
Added in the future, after you get hit by a truck
23. A GOOD DOMAINA GOOD DOMAIN
Short
Memorable
Speakable
Readable
24. GOOD DOMAINS AREGOOD DOMAINS ARE
SPEAKABLESPEAKABLE
real-estate.com “Real hyphen estate dot com”
realestateonline.com “Real estate online dot com”
28. A BAD DOMAINA BAD DOMAIN
HTTP://RRRRTHATS5RS.COMHTTP://RRRRTHATS5RS.COM
HTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROBHTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROB
WLLLLANTYSILIOGOGOGOCH.CO.UKWLLLLANTYSILIOGOGOGOCH.CO.UK
29. A GOOD PATHA GOOD PATH
Reflects information structure
Consistent
Predictable
Most general → most specific
30. CMSJUNKCMSJUNK
“[L]ong strings of characters that exist only to satisfy some
technical constraint, detracting from the effectiveness of our
URLs as communication tools.”
—Jesse James Garrett, 2002
31. A GOOD QUERYA GOOD QUERY
Query strings are intimidating
Keep 'em simple
http://www.google.com/#gs_rn=21&gs_ri=psy-ab&cp=10&
gs_id=29&xhr=t&q=search+term&es_nrs=true&
pf=p&output=search&sclient=psy-ab&oq=search+ter&gs_l=&
pbx=1&bav=on.2,or.r_qf.&bvm=bv.49478099,d.dmg&
fp=f0de797458b9bb2a&biw=1149&bih=660
http://www.google.com/search?q=search+term
33. “%2B OR NOT %2B?”“%2B OR NOT %2B?”
Allowed unescaped in path segment: :@-._~!$&'()*+,;=
Allowed unescaped in query parameter: /?:@-._~!$'()* ,;
Allowed unescaped in query value: /?:@-._~!$'()* ,;=
Allowed unescaped in fragment: /?:@-._~!$&'()*+,;=
Valid URL:
URL spec:
http://example.com/:@-._~!$&'()*+,=?/?:@-._~!$'()*+,;=
/?:@-._~!$'()*+,;==#/?:@-._~!$&'()*+,;=
http://url.spec.whatwg.org
34. A GOOD FRAGMENTA GOOD FRAGMENT
Fragment = location in a document
That is all
Use history.pushState()
35. THE REST OF THE PUZZLETHE REST OF THE PUZZLE
Scheme
Domain
Path
Query
Fragment
Everything
37. CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON
REPUTATIONREPUTATION
http://en.wikipedia.org/wiki/Chinchilla
http://joebanana.tripod.com/mysite/chinchilla_page.htm
38. CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON
ASSOCIATIONASSOCIATION
http://www.cmu.edu/staff/daviska/papers/2013/alg349a
http://www.securisite.com/articles/2013/08/new-algorithm
40. GOOD URLS AREGOOD URLS ARE
HACKABLEHACKABLE
“A hackable URL is one that makes sense to a human reader,
and where the human reader can guess what to change to
get to another page.”
—Matt Wilcox, 2008
41. GOOD URLS AREGOOD URLS ARE
HACKABLEHACKABLE
Not hackable: http://www.amazon.com/Tovolo-KING-Cube-Trays-
Blue/dp/B00395FHRO/ref=sr_1_2
Hackable: https://github.com/mbourque/BostonConference
42. WHO CARES?WHO CARES?
Good interfaces are habitual.
HABITUALLY HACKABLEHABITUALLY HACKABLE
http://github.com/<username>
Twitter username: @rfreebern
http://github.com/rfreebern
NOT HACKABLE, NO HABITNOT HACKABLE, NO HABIT
http://example.com/6219867/rfreebern
45. SLUG RULESSLUG RULES
Stick to alphanumerics and hyphen1.
Get rid of common words (conjunctions, articles, etc.)2.
Include something unique (an ID or a date)3.
(or store the slug with the document)4.
47. ROBUSTNESSROBUSTNESS
→ 301 Moved
Permanently
→ 301
Moved Permanently
→ 404
Not Found
http://example.com/2013/08/1298654-robust-urls-are-best
http://example.com/2013/08/1298654
http://example.com/2013/08/1298654-robust-urls-a
http://example.com/2013/08/1298654-ha-ha-you-suck
55. “URL shorteners may be one of the worst ideas, one of the
most backward ideas, to come out of the last five years. ...
[T]hese general-purpose URL shorteners, with their shady or
fragile setups and utter dependence upon them, well. If we
lose TinyURL or bit.ly, millions of weblogs, essays, and
non-archived tweets lose their meaning. Instantly. To
someone in the future, it’ll be like everyone from a certain
era of history […] started speaking in a one-time pad of
cryptographic pass phrases.”
—Jason Scott, 2011
56. I WANT SHORT URLS ANYI WANT SHORT URLS ANY
WAYWAY
Host your own: (and other packages).
<link rel=”shorturl” href=”...”>
Bonus points:
YOURLS
Douglas Crockford's Base32 algorithm
Ryan Freebern's Easier encoder
58. URLS ARE FOREVERURLS ARE FOREVER
“When someone follows a link and it breaks, they generally
lose confidence in the owner of the server. They also are
frustrated—emotionally and practically from accomplishing
their goal.”
—Tim Berners-Lee, 1998
59. KNOW YOUR REDIRECTSKNOW YOUR REDIRECTS
301 Moved Permanently
302 Found
303 See Other
307 Temporary Redirect
308 Permanent Redirect (Experimental)
60. DROP THE .PHPDROP THE .PHP
Bad: http://example.com/about.php
Good: http://example.com/about
61. PAY UPPAY UP
“Pretty much the only good reason for a document to
disappear from the Web is that the company which owned
the domain name went out of business or can no longer
afford to keep the server running.”
—Tim Berners-Lee, 1998
62. MAKING A PLANMAKING A PLAN
Good
Memorable
Readable
Speakable
Credible
Hackable
Shareable
Robust
… times a hundred thousand.
64. LESS FORMALLESS FORMAL
“User profiles will be located at http://example.com
/<username>. We will reserve a number of usernames for
future usage, such as "about", "contact", "admin", "stats"…”
65. WHY SHOULD I CAREWHY SHOULD I CARE
ABOUT URLS?ABOUT URLS?
“We are building clans around languages we speak to the
Machine.”
—Vyacheslav Egorov, 2013