the ux of urls
DESCRIPTION
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-urlsTRANSCRIPT
THE UX OF URLSTHE UX OF URLS / Ryan Freebern @rfreebern
Union Street Media
WHAT IS A URL?WHAT IS A URL?RFC 1738RFC 1738
“This document describes the syntax and semantics for acompact string representation for a resource available viathe Internet. These strings are called ‘Uniform ResourceLocators’ (URLs).”
—Tim Berners-Lee et al, 1994
HTTP SPOKEN HEREHTTP SPOKEN HERE“We are building clans around languages we speak to theMachine.”
—Vyacheslav Egorov, 2013
WHY DESIGN URLS?WHY DESIGN URLS?Because people care.1.Because machines care.2.Because we can.3.
PEOPLE CAREPEOPLE CARE
PEOPLE CAREPEOPLE CARE“[P]eople spent 25% of their time looking at the URL innavigational tasks vs. 22% in informational tasks.”
—Edward Cutrell & Zhiwei Guan, 2007
PEOPLE CAREPEOPLE CARE“[S]earchers are particularly interested in the URL whenthey are assessing the credibility of a destination. If the URLlooks like garbage, people are less likely to click on thatsearch hit. On the other hand, if the URL looks like the pagewill address the user's question, they are more likely to click.”
—Jakob Nielsen, 2007
PEOPLE CAREPEOPLE CARE
MACHINES CAREMACHINES CARE
BECAUSE WE CANBECAUSE WE CAN
WHAT MAKES A URL?WHAT MAKES A URL?httphttpsftpdatafilemailtotelws/wssabout
WHAT MAKES A URL?WHAT MAKES A URL?example.comgTLD: .com, .net, .org, .edu, .aero., .asia, .biz, .cat, .coop, .gov, .info, .int,.jobs, .mil, .mobi, .museum, .name, .post, .pro, .tel, .travel, .xxxccTLD: .us, .uk, .au, .ca, .mx, .cc, .cx, .ws, .io, .ly, .es, .fr …and hundredsmore.Infrastructure TLDs: .arpaReserved TLDs: .test, .example, .invalid, .localhost, and .localhttp://ws, http://uzInternationalized domain names: http://xn--zkc6cc5bi7f6e.xn--hlcj6aya9esc7a (http://உதாரண�.பரி�ைச)
WHAT MAKES A URL?WHAT MAKES A URL?http://example.com/path/of/any/length/resource?query=data&another=parameter#fragment
WHAT MAKES A URL?WHAT MAKES A URL?http://127.0.0.1/path/of/any/length/resource?query=data&another=parameter#fragment
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
WHAT MAKES A URL?WHAT MAKES A URL?http://www.example.com/path/of/any/length/resource?query=data&another=parameter#fragment
WHAT MAKES A URL?WHAT MAKES A URL?http://www.example.com:80/path/of/any/length/resource?query=data&another=parameter#fragment
WHAT MAKES A URL?WHAT MAKES A URL?http://username:[email protected]:80/path/of/any/length/resource?query=data&another=parameter#fragment
WHAT MAKES A URL?WHAT MAKES A URL?http://username:[email protected]:80/path/of/any/length;param=123/resource?query=data&another=parameter#fragment
WHAT MAKES A URL?WHAT MAKES A URL?http://username:[email protected]:80/path/of/any/length;param=123/resource?query=data&another=parameter#fragment
WHAT MAKES A URL?WHAT MAKES A URL?http://example.com/path/resource?query=data#fragment
WHAT MAKES A URLWHAT MAKES A URLGOODGOOD??
Known knownsPlanned for from the startKnown unknownsAuto-generated from user interactionUnknown unknownsAdded in the future, after you get hit by a truck
A GOOD DOMAINA GOOD DOMAINShortMemorableSpeakableReadable
GOOD DOMAINS AREGOOD DOMAINS ARE
SPEAKABLESPEAKABLEreal-estate.com “Real hyphen estate dot com”realestateonline.com “Real estate online dot com”
GOOD DOMAINS AREGOOD DOMAINS ARE
READABLEREADABLEIllJIll.comlovelymorn.com
A BAD DOMAINA BAD DOMAINHTTP://RIM.JOBSHTTP://RIM.JOBS
HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM
HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM
←←
A BAD DOMAINA BAD DOMAINHTTP://RRRRTHATS5RS.COMHTTP://RRRRTHATS5RS.COM
HTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROBHTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROBWLLLLANTYSILIOGOGOGOCH.CO.UKWLLLLANTYSILIOGOGOGOCH.CO.UK
A GOOD PATHA GOOD PATHReflects information structureConsistentPredictableMost general → most specific
CMSJUNKCMSJUNK“[L]ong strings of characters that exist only to satisfy sometechnical constraint, detracting from the effectiveness of ourURLs as communication tools.”
—Jesse James Garrett, 2002
A GOOD QUERYA GOOD QUERYQuery strings are intimidatingKeep '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
UTF-H8UTF-H8A BRIEF TANGENTA BRIEF TANGENT
http://example.com/path/resource?query=data#fragment
http://example.com/?emotion=(╯°□°)╯︵┻━┻http://example.com/?emotion=%28%E2%95%AF%C2%B0%E2%96%A1%C2%B0%29%E2%95%AF%EF%B8%B5%20%E2%94%BB%E2%94%81%E2%94%BB
“%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
A GOOD FRAGMENTA GOOD FRAGMENTFragment = location in a documentThat is allUse history.pushState()
THE REST OF THE PUZZLETHE REST OF THE PUZZLESchemeDomainPathQueryFragmentEverything
A GOOD URL ISA GOOD URL IS
CREDIBLECREDIBLE
CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON
REPUTATIONREPUTATIONhttp://en.wikipedia.org/wiki/Chinchillahttp://joebanana.tripod.com/mysite/chinchilla_page.htm
CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON
ASSOCIATIONASSOCIATIONhttp://www.cmu.edu/staff/daviska/papers/2013/alg349ahttp://www.securisite.com/articles/2013/08/new-algorithm
PROCESSING FLUENCYPROCESSING FLUENCYThe ease with which your brain can parse information.
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 toget to another page.”
—Matt Wilcox, 2008
GOOD URLS AREGOOD URLS ARE
HACKABLEHACKABLENot hackable: http://www.amazon.com/Tovolo-KING-Cube-Trays-Blue/dp/B00395FHRO/ref=sr_1_2
Hackable: https://github.com/mbourque/BostonConference
WHO CARES?WHO CARES?Good interfaces are habitual.
HABITUALLY HACKABLEHABITUALLY HACKABLEhttp://github.com/<username>Twitter username: @rfreebernhttp://github.com/rfreebern
NOT HACKABLE, NO HABITNOT HACKABLE, NO HABIThttp://example.com/6219867/rfreebern
SLUGSSLUGS
SLUGSSLUGSCanonical URL: http://example.com/documents/12345/title-of-the-document
Requested URL: http://example.com/documents/12345
Response:
HTTP/1.1 301 Moved Permanently Location: /documents/12345/title-of-the-document
SLUG RULESSLUG RULESStick 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.
GOOD URLS AREGOOD URLS ARE
SHAREABLESHAREABLE
ROBUSTNESSROBUSTNESS→ 301 Moved
Permanently
→ 301
Moved Permanently
→ 404
Not Found
http://example.com/2013/08/1298654-robust-urls-are-besthttp://example.com/2013/08/1298654
http://example.com/2013/08/1298654-robust-urls-a
http://example.com/2013/08/1298654-ha-ha-you-suck
OLD-FASHIONEDOLD-FASHIONEDSHARINGSHARING
AVOID AMBIGUITYAVOID AMBIGUITYO 0G 61 I l2 Z
http://0range.io
http://Orange.io
NEW-FANGLED SHARINGNEW-FANGLED SHARING
SHORTNESSSHORTNESShttp://example.com/article/august-2013/good-url-design
BIT.LY!BIT.LY!
NO.NO.
“URL shorteners may be one of the worst ideas, one of themost backward ideas, to come out of the last five years. ...[T]hese general-purpose URL shorteners, with their shady orfragile setups and utter dependence upon them, well. If welose TinyURL or bit.ly, millions of weblogs, essays, andnon-archived tweets lose their meaning. Instantly. Tosomeone in the future, it’ll be like everyone from a certainera of history […] started speaking in a one-time pad ofcryptographic pass phrases.”
—Jason Scott, 2011
I WANT SHORT URLS ANYI WANT SHORT URLS ANYWAYWAY
Host your own: (and other packages).<link rel=”shorturl” href=”...”>
Bonus points:
YOURLS
Douglas Crockford's Base32 algorithmRyan Freebern's Easier encoder
CANONICALCANONICALOne URL for one document301 any alternatesRewrite trailing slashes
URLS ARE FOREVERURLS ARE FOREVER“When someone follows a link and it breaks, they generallylose confidence in the owner of the server. They also arefrustrated—emotionally and practically from accomplishingtheir goal.”
—Tim Berners-Lee, 1998
KNOW YOUR REDIRECTSKNOW YOUR REDIRECTS301 Moved Permanently302 Found303 See Other307 Temporary Redirect308 Permanent Redirect (Experimental)
DROP THE .PHPDROP THE .PHPBad: http://example.com/about.phpGood: http://example.com/about
PAY UPPAY UP“Pretty much the only good reason for a document todisappear from the Web is that the company which ownedthe domain name went out of business or can no longerafford to keep the server running.”
—Tim Berners-Lee, 1998
MAKING A PLANMAKING A PLANGoodMemorableReadableSpeakableCredibleHackableShareableRobust… times a hundred thousand.
URI TEMPLATESURI TEMPLATESRFC 6570RFC 6570
http://example.com/dictionary/c/cat
http://example.com/dictionary/d/dog
→ http://example.com/dictionary/{term:1}/{term}
uri_template PHP extension
LESS FORMALLESS FORMAL“User profiles will be located at http://example.com/<username>. We will reserve a number of usernames forfuture usage, such as "about", "contact", "admin", "stats"…”
WHY SHOULD I CAREWHY SHOULD I CAREABOUT URLS?ABOUT URLS?
“We are building clans around languages we speak to theMachine.”
—Vyacheslav Egorov, 2013
THANK YOU!THANK YOU!Ryan Freebern / @rfreebern
Union Street Media
REFERENCESREFERENCES1.2.
3.4.5.6.7.
8.9.
10.
11.12.
http://www.ietf.org/rfc/rfc1738.txthttps://twitter.com/mraleph/status/225587192427327488http://www.ietf.org/rfc/rfc1738.txthttp://www.ietf.org/rfc/rfc1738.txthttp://en.wikipedia.org/wiki/URI_schemehttp://en.wikipedia.org/wiki/Top-level_domainhttp://en.wikipedia.org/wiki/Internationalized_domain_nameshttp://www.ietf.org/rfc/rfc2732.txthttp://www.w3.org/DesignIssues/MatrixURIs.htmlhttp://www.andersramsay.com/2005/07/30/selecting-user-friendly-domain-names/http://www.adaptivepath.com/ideas/e000058http://blog.lunatech.com/2009/02/03/what-every-web-developer-must-know-about-url-encoding
12.13.14.15.
16.
17.
18.19.20.21.
22.23.
24.
http://url.spec.whatwg.orghttp://en.wikipedia.org/wiki/Credibilityhttp://en.wikipedia.org/wiki/Processing_fluencyhttp://www.boston.com/bostonglobe/ideas/articles/2010/01/31/easy__true/http://2002-2012.mattwilcox.net/archive/entry/id/990/http://www.amazon.com/The-Humane-Interface-Directions-Interactive/dp/0201379376http://en.wikipedia.org/wiki/Slug_%28publishing%29http://picturesofpeoplescanningqrcodes.tumblr.com/http://ascii.textfiles.com/archives/3029http://joshua.schachter.org/2009/04/on-url-shorteners.htmlhttp://www.w3.org/Provider/Style/URI.htmlhttp://en.wikipedia.org/wiki/List_of_HTTP_status_codes#3xx_Redirectionhttp://tools.ietf.org/html/rfc6570
IMAGE CREDITSIMAGE CREDITS“ ” by Ten Speed Press, used without permission.1.“ ” from , used without permission.2.“ ” based on still from “ , from Warner Bros., via
, used without permission.3.
“ ” from “ ” from Pixar, used without permission.4.“ ” by Mahatma4711 on Flickr, CC-By-2.05.“ ” by , used without permission.6.“ ” by Yi Chen on Flickr, CC-By-2.07.“ ” by Shirtoid.com, used without permission.8.“ ” by Glenn on Flickr, CC-By-SA-2.09.“ ” by Eric Fleming on Flickr, CC-By-2.010.“ ” from , used without permission.11.“ ” from 12.“ ” by mslavick on Flickr, CC-By-2.013.
Why Paint Cats 2006 CalendarLove URL The IndependentBoromir Meme The Lord of the Rings: The Fellowship of the Ring
QuickMeme.comWall-E and Eve Wall-EClimbers at Khumbu IcefallFreud Driving a Tractor Von Crunch DesignThe Skeptical Chihuahua, TaipeiMom's Friendly Robot CompanySlug-50051Sharing birthday cake.Long URL benjaminraymondkelley.comhttp://blog.rnf.me/ux-of-urls QR Code Kaywa QR CodeNo!
SOFTWARE MENTIONSSOFTWARE MENTIONS1.2.3.4.
http://www.crockford.com/wrmg/base32.htmlhttps://github.com/rfreebern/easierhttp://yourls.orghttp://pecl.php.net/package/uri_template
THANKSTHANKSAnne van KesterenVitorio MilianoJames Baicoianu