URL Design for Information Architects

9,855 views
9,570 views

Published on

URL Design for Information Architects

  1. 1. URL Design for Information Architects Deanna Marbeck Silver Oliver
  2. 2. What we are going to tell you <ul><li>Why you should care about URLs </li></ul><ul><li>How to design beautiful URLs </li></ul><ul><li>When to think about URL design </li></ul><ul><li>What deliverables come out of the design process </li></ul>
  3. 3. What we are not going to tell you <ul><li>What are URLs </li></ul>
  4. 4. Do you design URLs?
  5. 5. Why do I care about URL design? <ul><li>First 10 minutes of my working day </li></ul>
  6. 12. <ul><li>www.hotmail.com </li></ul>
  7. 15. <ul><li>http://icanhascheezburger.com/2008/08/27/funny-pictures-how-many-calorees/ </li></ul>
  8. 17. <ul><li>http:// mikeschinkel.com/blog/welldesignedurlsarebeautiful / </li></ul>
  9. 20. <ul><li>http://www.currybet.net/cbet_blog/2008/04/doctor_wh </li></ul>
  10. 22. <ul><li>http://www.currybet.net/cbet_blog/2008/04/doctor_wh </li></ul>
  11. 23. <ul><li>http://www.currybet.net/cbet_blog/2008/04/ </li></ul>
  12. 25. <ul><li>doctor_who_rss_url.php 17-Jun-2008 07:42 </li></ul>
  13. 29. <ul><li>http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml </li></ul>
  14. 33. <ul><li>http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml </li></ul>
  15. 36. What does this all mean?
  16. 37. URLs are as important as the logos and navigation of a site http://www.bbc.co.uk/doctorwho/
  17. 39. What helps you design these URLs?
  18. 40. The guiding principles <ul><li>Persistent </li></ul><ul><li>Readable </li></ul><ul><li>Hackable </li></ul>
  19. 41. Which takes priority?
  20. 42. Maslow’s hierarchy of needs
  21. 43. Maslow’s hierarchy of needs Persistent
  22. 44. Persistent <ul><li>Why? </li></ul><ul><li>Other sites link to you </li></ul><ul><li>Users bookmark you </li></ul><ul><li>Search engines find you </li></ul>
  23. 48. <ul><li>http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e </li></ul>
  24. 49. Persistent <ul><li>Prince? </li></ul><ul><li>The Artist Formerly Known As Prince? </li></ul><ul><li>Symbol? </li></ul><ul><li>The Purple One? </li></ul><ul><li>Prince Rogers Nelson? </li></ul>
  25. 50. Persistent <ul><li>Prince? </li></ul><ul><li>The Artist Formerly Known As Prince? </li></ul><ul><li>The Purple One? </li></ul><ul><li>Prince Rogers Nelson? </li></ul>http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e
  26. 51. “ Designing mostly means leaving information out” Sir Tim Berners-Lee said that
  27. 52. What NOT to put in URLs <ul><li>Author’s name </li></ul><ul><li>Status </li></ul><ul><li>Subject </li></ul><ul><li>Filename extensions </li></ul><ul><li>Software mechanisms </li></ul><ul><li>Session ids </li></ul>
  28. 53. <ul><li>http://open.bbc.co.uk/labs/innovation_labs_future_media_t.php </li></ul>
  29. 54. Maslow’s hierarchy of needs Persistent
  30. 55. Human Readable <ul><li>Why? </li></ul><ul><li>Don’t only appear in the address bar </li></ul><ul><li>Easy to understand </li></ul><ul><li>Easy to remember </li></ul><ul><li>More meaningful </li></ul><ul><li>Arguably some SEO benefit </li></ul>
  31. 57. <ul><li>www.bbc.co.uk/topics/dogs </li></ul>
  32. 59. Human Readable <ul><li>rubbishandrecycling? </li></ul><ul><li>rubbish-and-recycling? </li></ul><ul><li>rubbish_and_recycling? </li></ul><ul><li>special characters </li></ul>
  33. 60. <ul><li>~ </li></ul>
  34. 61. Human Readable <ul><li>rubbishandrecycling? </li></ul><ul><li>rubbish-and-recycling? </li></ul><ul><li>rubbish_and_recycling? </li></ul><ul><li>special characters </li></ul><ul><li>length </li></ul>
  35. 62. Maslow’s hierarchy of needs Persistent
  36. 63. Hackable <ul><li>Why? </li></ul><ul><li>Represents the logical structure of your site </li></ul><ul><li>Provides extra information – orientation within the site </li></ul><ul><li>Lets people move to higher levels of your site </li></ul><ul><li>Lets people guess the address for a similar resource </li></ul>
  37. 66. http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04
  38. 67. Hackable <ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 </li></ul><ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10 </li></ul>
  39. 68. http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10
  40. 69. Hackable <ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 </li></ul><ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10 </li></ul><ul><li>http://www.bbc.co.uk/bbcfour/programmes </li></ul>
  41. 70. http://www.bbc.co.uk/bbcfour/programmes
  42. 71. Hackable <ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 </li></ul><ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10 </li></ul><ul><li>http:// www.bbc.co.uk/bbcfour/programmes </li></ul><ul><li>http://www.bbc.co.uk/bbcfour </li></ul>
  43. 72. http://www.bbc.co.uk/bbcfour
  44. 73. Hackable <ul><li>Consistent use of labels </li></ul><ul><li>Similar resources should sit at the same level </li></ul><ul><li>Provide a meaningful page for every level of your hierarchy </li></ul>
  45. 74. The guiding principles <ul><li>Persistent </li></ul><ul><li>Readable </li></ul><ul><li>Hackable </li></ul>
  46. 75. It’s a balancing act
  47. 76. Maslow’s hierarchy of needs Persistent
  48. 77. The design process and deliverables
  49. 78. Why do I care?
  50. 79. Michael Smethurst
  51. 80. aka My Boss
  52. 81. Traditional IA
  53. 83. bbc.co.uk/programmes
  54. 84. Elegant, extensible, logical
  55. 85. “ What URL is that at?”
  56. 86. http://flickr.com/photos/hurleygurley/4338767/
  57. 87. When?
  58. 88. At the beginning of the design process <ul><li>Understand user requirements </li></ul><ul><li>Understand business requirements </li></ul><ul><li>Understand your data – domain model </li></ul>
  59. 89. http://www.bbc.co.uk/music/beta
  60. 90. Music Domain Model
  61. 91. Design your URLs <ul><li>Make your schema </li></ul><ul><li>Understand the relationships between your data </li></ul><ul><li>Design your URLs from the bottom up </li></ul><ul><li>One URL for every resource </li></ul>
  62. 92. Music Domain Model
  63. 93. http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e/releases/singles
  64. 94. http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e/releases
  65. 95. http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e
  66. 96. http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e
  67. 97. http://www.bbc.co.uk/music/artists
  68. 98. http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e.xml
  69. 99. Music URLs <ul><li>/music/artists/:artist/releases/:releasetype </li></ul><ul><li>/music/artists/:artist/releases </li></ul><ul><li>/music/artists/:artist </li></ul><ul><li>/music/artists </li></ul><ul><li>/music </li></ul><ul><li>/music/about </li></ul><ul><li>/music/developers </li></ul><ul><li>/music/contactus </li></ul>
  70. 100. More music URLs <ul><li>/music/labels </li></ul><ul><li>/music/labels/:label </li></ul><ul><li>/music/labels/:label/releases </li></ul><ul><li>/music/labels/:label/releases/:type </li></ul><ul><li>/music/labels/:label/artists </li></ul><ul><li>/music/releases </li></ul><ul><li>/music/releases/:release </li></ul><ul><li>/music/releases/:release/tracks </li></ul><ul><li>/music/releases/:release/events </li></ul><ul><li>/music/releases/:release/contributors </li></ul><ul><li>/music/releases/:release/links </li></ul>
  71. 101. Now you have a site structure
  72. 102. Job done! http://flickr.com/photos/neloqua/243001463/
  73. 103. Deliverables
  74. 104. Communication <ul><li>Walls of URLs </li></ul><ul><li>Lists of pages </li></ul><ul><li>Wireframes </li></ul><ul><li>Designs </li></ul><ul><li>Prototypes </li></ul>
  75. 105. URLs on postits
  76. 106. Walls of URLs
  77. 107. URL syntax <ul><li>:artist </li></ul><ul><li>{service} </li></ul><ul><li>/music/artists/:artist </li></ul><ul><li>/{service}/programmes </li></ul>
  78. 108. Involve your team
  79. 109. Spreadsheets
  80. 110. http://www.flickr.com/photos/suneko/373318607/
  81. 111. Sitemaps
  82. 112. Schematic
  83. 113. Designs
  84. 114. Prototype - http://www.bbc.co.uk/music/artists
  85. 115. http://www.flickr.com/photos/purrr/126597849/
  86. 116. Job done! http://flickr.com/photos/neloqua/243001463/
  87. 117. Summary <ul><li>URLs are part of the user experience </li></ul><ul><li>Information Architects should be involved in the design of URLs </li></ul><ul><li>Create beautiful URLs and beautiful site structures </li></ul>
  88. 118. thank/you [email_address] [email_address]

×