The UX of URLs

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


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.


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

Technology

The UX of URLs