The UX of URLs

652 views
519 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
652
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The UX of URLs

  1. 1. THE UX OF URLSTHE UX OF URLS /Ryan Freebern @rfreebern Union Street Media
  2. 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. 3. HTTP SPOKEN HEREHTTP SPOKEN HERE “We are building clans around languages we speak to the Machine.” —Vyacheslav Egorov, 2013
  4. 4. WHY DESIGN URLS?WHY DESIGN URLS? Because people care.1. Because machines care.2. Because we can.3.
  5. 5. PEOPLE CAREPEOPLE CARE
  6. 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. 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
  8. 8. PEOPLE CAREPEOPLE CARE
  9. 9. MACHINES CAREMACHINES CARE
  10. 10. BECAUSE WE CANBECAUSE WE CAN
  11. 11. WHAT MAKES A URL?WHAT MAKES A URL? http https ftp data file mailto tel ws/wss about
  12. 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. 13. WHAT MAKES A URL?WHAT MAKES A URL? http://example.com/path/of/any/length/resource?query=data& another=parameter#fragment
  14. 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. 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. 16. WHAT MAKES A URL?WHAT MAKES A URL? http://www.example.com/path/of/any/length/resource?query=data& another=parameter#fragment
  17. 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. 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. 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. 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. 21. WHAT MAKES A URL?WHAT MAKES A URL? http://example.com/path/resource?query=data#fragment
  22. 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. 23. A GOOD DOMAINA GOOD DOMAIN Short Memorable Speakable Readable
  24. 24. GOOD DOMAINS AREGOOD DOMAINS ARE SPEAKABLESPEAKABLE real-estate.com “Real hyphen estate dot com” realestateonline.com “Real estate online dot com”
  25. 25. GOOD DOMAINS AREGOOD DOMAINS ARE READABLEREADABLE IllJIll.com lovelymorn.com
  26. 26. A BAD DOMAINA BAD DOMAIN HTTP://RIM.JOBSHTTP://RIM.JOBS HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM
  27. 27. HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM ←←
  28. 28. A BAD DOMAINA BAD DOMAIN HTTP://RRRRTHATS5RS.COMHTTP://RRRRTHATS5RS.COM HTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROBHTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROB WLLLLANTYSILIOGOGOGOCH.CO.UKWLLLLANTYSILIOGOGOGOCH.CO.UK
  29. 29. A GOOD PATHA GOOD PATH Reflects information structure Consistent Predictable Most general → most specific
  30. 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. 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
  32. 32. 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
  33. 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. 34. A GOOD FRAGMENTA GOOD FRAGMENT Fragment = location in a document That is all Use history.pushState()
  35. 35. THE REST OF THE PUZZLETHE REST OF THE PUZZLE Scheme Domain Path Query Fragment Everything
  36. 36. A GOOD URL ISA GOOD URL IS CREDIBLECREDIBLE
  37. 37. CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON REPUTATIONREPUTATION http://en.wikipedia.org/wiki/Chinchilla http://joebanana.tripod.com/mysite/chinchilla_page.htm
  38. 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
  39. 39. PROCESSING FLUENCYPROCESSING FLUENCY The ease with which your brain can parse information.
  40. 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. 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. 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
  43. 43. SLUGSSLUGS
  44. 44. 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
  45. 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.
  46. 46. GOOD URLS AREGOOD URLS ARE SHAREABLESHAREABLE
  47. 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
  48. 48. OLD-FASHIONEDOLD-FASHIONED SHARINGSHARING
  49. 49. AVOID AMBIGUITYAVOID AMBIGUITY O 0 G 6 1 I l 2 Z http://0range.io http://Orange.io
  50. 50. NEW-FANGLED SHARINGNEW-FANGLED SHARING
  51. 51. SHORTNESSSHORTNESS http://example.com/article/august-2013/good-url-design BIT.LY!BIT.LY!
  52. 52. NO.NO.
  53. 53. “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
  54. 54. 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
  55. 55. CANONICALCANONICAL One URL for one document 301 any alternates Rewrite trailing slashes
  56. 56. 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
  57. 57. KNOW YOUR REDIRECTSKNOW YOUR REDIRECTS 301 Moved Permanently 302 Found 303 See Other 307 Temporary Redirect 308 Permanent Redirect (Experimental)
  58. 58. DROP THE .PHPDROP THE .PHP Bad: http://example.com/about.php Good: http://example.com/about
  59. 59. 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
  60. 60. MAKING A PLANMAKING A PLAN Good Memorable Readable Speakable Credible Hackable Shareable Robust … times a hundred thousand.
  61. 61. 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
  62. 62. 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"…”
  63. 63. 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
  64. 64. THANK YOU!THANK YOU! Ryan Freebern / @rfreebern Union Street Media
  65. 65. 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
  66. 66. 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!
  67. 67. 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
  68. 68. THANKSTHANKS Anne van Kesteren Vitorio Miliano James Baicoianu

×