• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The UX of URLs
 

The UX of URLs

on

  • 241 views

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 ...

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

Statistics

Views

Total Views
241
Views on SlideShare
241
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The UX of URLs The UX of URLs Presentation Transcript

    • 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 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
    • HTTP SPOKEN HEREHTTP SPOKEN HERE “We are building clans around languages we speak to the Machine.” —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 in navigational tasks vs. 22% in informational tasks.” —Edward Cutrell & Zhiwei Guan, 2007
    • 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
    • PEOPLE CAREPEOPLE CARE
    • MACHINES CAREMACHINES CARE
    • BECAUSE WE CANBECAUSE WE CAN
    • WHAT MAKES A URL?WHAT MAKES A URL? http https ftp data file mailto tel ws/wss about
    • 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://உதாரண�.பரி�ைச)
    • 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:password@www.example.com:80/path/of /any/length/resource?query=data&another=parameter#fragment
    • 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
    • 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
    • WHAT MAKES A URL?WHAT MAKES A URL? http://example.com/path/resource?query=data#fragment
    • 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
    • A GOOD DOMAINA GOOD DOMAIN Short Memorable Speakable Readable
    • GOOD DOMAINS AREGOOD DOMAINS ARE SPEAKABLESPEAKABLE real-estate.com “Real hyphen estate dot com” realestateonline.com “Real estate online dot com”
    • GOOD DOMAINS AREGOOD DOMAINS ARE READABLEREADABLE IllJIll.com lovelymorn.com
    • A BAD DOMAINA BAD DOMAIN HTTP://RIM.JOBSHTTP://RIM.JOBS HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM
    • HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM ←←
    • A BAD DOMAINA BAD DOMAIN HTTP://RRRRTHATS5RS.COMHTTP://RRRRTHATS5RS.COM HTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROBHTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROB WLLLLANTYSILIOGOGOGOCH.CO.UKWLLLLANTYSILIOGOGOGOCH.CO.UK
    • A GOOD PATHA GOOD PATH Reflects information structure Consistent Predictable Most general → most specific
    • 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
    • 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
    • UTF-H8UTF-H8 A 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 FRAGMENT Fragment = location in a document That is all Use history.pushState()
    • THE REST OF THE PUZZLETHE REST OF THE PUZZLE Scheme Domain Path Query Fragment Everything
    • A GOOD URL ISA GOOD URL IS CREDIBLECREDIBLE
    • CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON REPUTATIONREPUTATION http://en.wikipedia.org/wiki/Chinchilla http://joebanana.tripod.com/mysite/chinchilla_page.htm
    • 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
    • PROCESSING FLUENCYPROCESSING FLUENCY The 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 to get to another page.” —Matt Wilcox, 2008
    • 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
    • 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
    • SLUGSSLUGS
    • SLUGSSLUGS Canonical 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 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.
    • 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-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
    • OLD-FASHIONEDOLD-FASHIONED SHARINGSHARING
    • AVOID AMBIGUITYAVOID AMBIGUITY O 0 G 6 1 I l 2 Z http://0range.io http://Orange.io
    • NEW-FANGLED SHARINGNEW-FANGLED SHARING
    • SHORTNESSSHORTNESS http://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 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
    • 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
    • CANONICALCANONICAL One URL for one document 301 any alternates Rewrite trailing slashes
    • 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
    • KNOW YOUR REDIRECTSKNOW YOUR REDIRECTS 301 Moved Permanently 302 Found 303 See Other 307 Temporary Redirect 308 Permanent Redirect (Experimental)
    • DROP THE .PHPDROP THE .PHP Bad: http://example.com/about.php Good: http://example.com/about
    • 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
    • MAKING A PLANMAKING A PLAN Good Memorable Readable Speakable Credible Hackable Shareable Robust … times a hundred thousand.
    • URI TEMPLATESURI TEMPLATES RFC 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 for future usage, such as "about", "contact", "admin", "stats"…”
    • 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
    • THANK YOU!THANK YOU! Ryan Freebern / @rfreebern Union Street Media
    • REFERENCESREFERENCES 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. http://www.ietf.org/rfc/rfc1738.txt https://twitter.com/mraleph/status /225587192427327488 http://www.ietf.org/rfc/rfc1738.txt http://www.ietf.org/rfc/rfc1738.txt http://en.wikipedia.org/wiki/URI_scheme http://en.wikipedia.org/wiki/Top-level_domain http://en.wikipedia.org /wiki/Internationalized_domain_names http://www.ietf.org/rfc/rfc2732.txt http://www.w3.org/DesignIssues/MatrixURIs.html http://www.andersramsay.com/2005/07 /30/selecting-user-friendly-domain-names/ http://www.adaptivepath.com/ideas/e000058 http://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.org http://en.wikipedia.org/wiki/Credibility http://en.wikipedia.org/wiki/Processing_fluency http://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/0201379376 http://en.wikipedia.org/wiki/Slug_%28publishing%29 http://picturesofpeoplescanningqrcodes.tumblr.com/ http://ascii.textfiles.com/archives/3029 http://joshua.schachter.org/2009/04/on-url- shorteners.html http://www.w3.org/Provider/Style/URI.html http://en.wikipedia.org /wiki/List_of_HTTP_status_codes#3xx_Redirection http://tools.ietf.org/html/rfc6570
    • IMAGE CREDITSIMAGE CREDITS “ ”byTenSpeedPress,usedwithoutpermission.1. “ ”from ,usedwithoutpermission.2. “ ”basedonstillfrom“ ,fromWarnerBros.,via ,usedwithoutpermission. 3. “ ”from“ ”fromPixar,usedwithoutpermission.4. “ ”byMahatma4711onFlickr,CC-By-2.05. “ ”by ,usedwithoutpermission.6. “ ”byYiChenonFlickr,CC-By-2.07. “ ”byShirtoid.com,usedwithoutpermission.8. “ ”byGlennonFlickr,CC-By-SA-2.09. “ ”byEricFlemingonFlickr,CC-By-2.010. “ ”from ,usedwithoutpermission.11. “ ”from12. “ ”bymslavickonFlickr,CC-By-2.013. WhyPaintCats2006Calendar LoveURL TheIndependent BoromirMeme TheLordoftheRings:TheFellowshipoftheRing QuickMeme.com Wall-EandEve Wall-E ClimbersatKhumbuIcefall FreudDrivingaTractor VonCrunchDesign TheSkepticalChihuahua,Taipei Mom'sFriendlyRobotCompany Slug-50051 Sharingbirthdaycake. LongURL benjaminraymondkelley.com http://blog.rnf.me/ux-of-urlsQRCode KaywaQRCode No!
    • SOFTWARE MENTIONSSOFTWARE MENTIONS 1. 2. 3. 4. http://www.crockford.com/wrmg/base32.html https://github.com/rfreebern/easier http://yourls.org http://pecl.php.net/package/uri_template
    • THANKSTHANKS Anne van Kesteren Vitorio Miliano James Baicoianu