Your SlideShare is downloading. ×
0
URL Design for Information Architects Deanna Marbeck Silver Oliver
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><...
What we are not going to tell you <ul><li>What are URLs </li></ul>
Do you design URLs?
Why do I care about URL design? <ul><li>First 10 minutes of my working day </li></ul>
 
 
 
 
 
 
<ul><li>www.hotmail.com </li></ul>
 
 
<ul><li>http://icanhascheezburger.com/2008/08/27/funny-pictures-how-many-calorees/   </li></ul>
 
<ul><li>http:// mikeschinkel.com/blog/welldesignedurlsarebeautiful /   </li></ul>
 
 
<ul><li>http://www.currybet.net/cbet_blog/2008/04/doctor_wh </li></ul>
 
<ul><li>http://www.currybet.net/cbet_blog/2008/04/doctor_wh </li></ul>
<ul><li>http://www.currybet.net/cbet_blog/2008/04/ </li></ul>
 
<ul><li>doctor_who_rss_url.php  17-Jun-2008 07:42  </li></ul>
 
 
 
<ul><li>http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml </li></ul>
 
 
 
<ul><li>http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml </li></ul>
 
 
What does this all mean?
URLs are as important as the logos and navigation of a site http://www.bbc.co.uk/doctorwho/
 
What helps you design these URLs?
The guiding principles <ul><li>Persistent </li></ul><ul><li>Readable </li></ul><ul><li>Hackable </li></ul>
Which takes priority?
Maslow’s hierarchy of needs
Maslow’s hierarchy of needs Persistent
Persistent <ul><li>Why? </li></ul><ul><li>Other sites link to you </li></ul><ul><li>Users bookmark you </li></ul><ul><li>S...
 
 
 
<ul><li>http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e </li></ul>
Persistent <ul><li>Prince? </li></ul><ul><li>The Artist Formerly Known As Prince? </li></ul><ul><li>Symbol? </li></ul><ul>...
Persistent <ul><li>Prince? </li></ul><ul><li>The Artist Formerly Known As Prince? </li></ul><ul><li>The Purple One? </li><...
“ Designing mostly means leaving information out” Sir Tim Berners-Lee said that
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>Filenam...
<ul><li>http://open.bbc.co.uk/labs/innovation_labs_future_media_t.php </li></ul>
Maslow’s hierarchy of needs Persistent
Human Readable <ul><li>Why? </li></ul><ul><li>Don’t only appear in the address bar </li></ul><ul><li>Easy to understand </...
 
<ul><li>www.bbc.co.uk/topics/dogs </li></ul>
 
Human Readable <ul><li>rubbishandrecycling? </li></ul><ul><li>rubbish-and-recycling? </li></ul><ul><li>rubbish_and_recycli...
<ul><li>~ </li></ul>
Human Readable <ul><li>rubbishandrecycling? </li></ul><ul><li>rubbish-and-recycling? </li></ul><ul><li>rubbish_and_recycli...
Maslow’s hierarchy of needs Persistent
Hackable <ul><li>Why? </li></ul><ul><li>Represents the logical structure of your site </li></ul><ul><li>Provides extra inf...
 
 
http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04
Hackable <ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 </li></ul><ul><li>http://www.bbc.co.uk/bbcfo...
http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10
Hackable <ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 </li></ul><ul><li>http://www.bbc.co.uk/bbcfo...
http://www.bbc.co.uk/bbcfour/programmes
Hackable <ul><li>http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 </li></ul><ul><li>http://www.bbc.co.uk/bbcfo...
http://www.bbc.co.uk/bbcfour
Hackable <ul><li>Consistent use of labels </li></ul><ul><li>Similar resources should sit at the same level </li></ul><ul><...
The guiding principles <ul><li>Persistent </li></ul><ul><li>Readable </li></ul><ul><li>Hackable </li></ul>
It’s a balancing act
Maslow’s hierarchy of needs Persistent
The design process and deliverables
Why do I care?
Michael Smethurst
aka My Boss
Traditional IA
 
bbc.co.uk/programmes
Elegant, extensible, logical
“ What URL is that at?”
http://flickr.com/photos/hurleygurley/4338767/
When?
At the beginning of the design process <ul><li>Understand user requirements </li></ul><ul><li>Understand business requirem...
http://www.bbc.co.uk/music/beta
Music Domain Model
Design your URLs <ul><li>Make your schema </li></ul><ul><li>Understand the relationships between your data </li></ul><ul><...
Music Domain Model
http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e/releases/singles
http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e/releases
http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e
http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e
http://www.bbc.co.uk/music/artists
http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e.xml
Music URLs <ul><li>/music/artists/:artist/releases/:releasetype </li></ul><ul><li>/music/artists/:artist/releases </li></u...
More music URLs <ul><li>/music/labels </li></ul><ul><li>/music/labels/:label </li></ul><ul><li>/music/labels/:label/releas...
Now you have a site structure
Job done! http://flickr.com/photos/neloqua/243001463/
Deliverables
Communication <ul><li>Walls of URLs  </li></ul><ul><li>Lists of pages </li></ul><ul><li>Wireframes </li></ul><ul><li>Desig...
URLs on postits
Walls of URLs
URL syntax <ul><li>:artist </li></ul><ul><li>{service} </li></ul><ul><li>/music/artists/:artist </li></ul><ul><li>/{servic...
Involve your team
Spreadsheets
http://www.flickr.com/photos/suneko/373318607/
Sitemaps
Schematic
Designs
Prototype -  http://www.bbc.co.uk/music/artists
http://www.flickr.com/photos/purrr/126597849/
Job done! http://flickr.com/photos/neloqua/243001463/
Summary <ul><li>URLs are part of the user experience </li></ul><ul><li>Information Architects should be involved in the de...
thank/you [email_address] [email_address]
Upcoming SlideShare
Loading in...5
×

URL Design for Information Architects

8,814

Published on

1 Comment
36 Likes
Statistics
Notes
  • great presentation
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,814
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
202
Comments
1
Likes
36
Embeds 0
No embeds

No notes for slide
  • Transcript of "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]
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×