URL Design for Information Architects Deanna Marbeck Silver Oliver

What we are going to tell you Why you should care about URLs How to design beautiful URLs When to think about URL design What deliverables come out of the design process

Why you should care about URLs

How to design beautiful URLs

When to think about URL design

What deliverables come out of the design process

What we are not going to tell you What are URLs

What are URLs

Do you design URLs?

Why do I care about URL design? First 10 minutes of my working day

First 10 minutes of my working day

www.hotmail.com

www.hotmail.com

http://icanhascheezburger.com/2008/08/27/funny-pictures-how-many-calorees/

http://icanhascheezburger.com/2008/08/27/funny-pictures-how-many-calorees/

http:// mikeschinkel.com/blog/welldesignedurlsarebeautiful /

http:// mikeschinkel.com/blog/welldesignedurlsarebeautiful /

http://www.currybet.net/cbet_blog/2008/04/doctor_wh

http://www.currybet.net/cbet_blog/2008/04/doctor_wh

http://www.currybet.net/cbet_blog/2008/04/doctor_wh

http://www.currybet.net/cbet_blog/2008/04/doctor_wh

http://www.currybet.net/cbet_blog/2008/04/

http://www.currybet.net/cbet_blog/2008/04/

doctor_who_rss_url.php 17-Jun-2008 07:42

doctor_who_rss_url.php 17-Jun-2008 07:42

http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml

http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml

http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml

http://www.bbc.co.uk/doctorwho/news/cult/news/drwho/2008/04/22/54453.shtml

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 Persistent Readable Hackable

Persistent

Readable

Hackable

Which takes priority?

Maslow’s hierarchy of needs

Maslow’s hierarchy of needs Persistent

Persistent Why? Other sites link to you Users bookmark you Search engines find you

Why?

Other sites link to you

Users bookmark you

Search engines find you

http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e

http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e

Persistent Prince? The Artist Formerly Known As Prince? Symbol? The Purple One? Prince Rogers Nelson?

Prince?

The Artist Formerly Known As Prince?

Symbol?

The Purple One?

Prince Rogers Nelson?

Persistent Prince? The Artist Formerly Known As Prince? The Purple One? Prince Rogers Nelson? http://www.bbc.co.uk/music/artists/070d193a-845c-479f-980e-bef15710653e

Prince?

The Artist Formerly Known As Prince?

The Purple One?

Prince Rogers Nelson?

“ Designing mostly means leaving information out” Sir Tim Berners-Lee said that

What NOT to put in URLs Author’s name Status Subject Filename extensions Software mechanisms Session ids

Author’s name

Status

Subject

Filename extensions

Software mechanisms

Session ids

http://open.bbc.co.uk/labs/innovation_labs_future_media_t.php

http://open.bbc.co.uk/labs/innovation_labs_future_media_t.php

Maslow’s hierarchy of needs Persistent

Human Readable Why? Don’t only appear in the address bar Easy to understand Easy to remember More meaningful Arguably some SEO benefit

Why?

Don’t only appear in the address bar

Easy to understand

Easy to remember

More meaningful

Arguably some SEO benefit

www.bbc.co.uk/topics/dogs

www.bbc.co.uk/topics/dogs

Human Readable rubbishandrecycling? rubbish-and-recycling? rubbish_and_recycling? special characters

rubbishandrecycling?

rubbish-and-recycling?

rubbish_and_recycling?

special characters

~

~

Human Readable rubbishandrecycling? rubbish-and-recycling? rubbish_and_recycling? special characters length

rubbishandrecycling?

rubbish-and-recycling?

rubbish_and_recycling?

special characters

length

Maslow’s hierarchy of needs Persistent

Hackable Why? Represents the logical structure of your site Provides extra information – orientation within the site Lets people move to higher levels of your site Lets people guess the address for a similar resource

Why?

Represents the logical structure of your site

Provides extra information – orientation within the site

Lets people move to higher levels of your site

Lets people guess the address for a similar resource

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04

Hackable http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10

Hackable http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10 http://www.bbc.co.uk/bbcfour/programmes

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10

http://www.bbc.co.uk/bbcfour/programmes

http://www.bbc.co.uk/bbcfour/programmes

Hackable http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04 http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10 http:// www.bbc.co.uk/bbcfour/programmes http://www.bbc.co.uk/bbcfour

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/04

http://www.bbc.co.uk/bbcfour/programmes/schedules/2008/08/10

http:// www.bbc.co.uk/bbcfour/programmes

http://www.bbc.co.uk/bbcfour

http://www.bbc.co.uk/bbcfour

Hackable Consistent use of labels Similar resources should sit at the same level Provide a meaningful page for every level of your hierarchy

Consistent use of labels

Similar resources should sit at the same level

Provide a meaningful page for every level of your hierarchy

The guiding principles Persistent Readable Hackable

Persistent

Readable

Hackable

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 Understand user requirements Understand business requirements Understand your data – domain model

Understand user requirements

Understand business requirements

Understand your data – domain model

http://www.bbc.co.uk/music/beta

Music Domain Model

Design your URLs Make your schema Understand the relationships between your data Design your URLs from the bottom up One URL for every resource

Make your schema

Understand the relationships between your data

Design your URLs from the bottom up

One URL for every resource

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 /music/artists/:artist/releases/:releasetype /music/artists/:artist/releases /music/artists/:artist /music/artists /music /music/about /music/developers /music/contactus

/music/artists/:artist/releases/:releasetype

/music/artists/:artist/releases

/music/artists/:artist

/music/artists

/music

/music/about

/music/developers

/music/contactus

More music URLs /music/labels /music/labels/:label /music/labels/:label/releases /music/labels/:label/releases/:type /music/labels/:label/artists /music/releases /music/releases/:release /music/releases/:release/tracks /music/releases/:release/events /music/releases/:release/contributors /music/releases/:release/links

/music/labels

/music/labels/:label

/music/labels/:label/releases

/music/labels/:label/releases/:type

/music/labels/:label/artists

/music/releases

/music/releases/:release

/music/releases/:release/tracks

/music/releases/:release/events

/music/releases/:release/contributors

/music/releases/:release/links

Now you have a site structure

Job done! http://flickr.com/photos/neloqua/243001463/

Deliverables

Communication Walls of URLs Lists of pages Wireframes Designs Prototypes

Walls of URLs

Lists of pages

Wireframes

Designs

Prototypes

URLs on postits

Walls of URLs

URL syntax :artist {service} /music/artists/:artist /{service}/programmes

:artist

{service}

/music/artists/:artist

/{service}/programmes

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 URLs are part of the user experience Information Architects should be involved in the design of URLs Create beautiful URLs and beautiful site structures

URLs are part of the user experience

Information Architects should be involved in the design of URLs

Create beautiful URLs and beautiful site structures

thank/you [email_address] [email_address]