The UX of URLs

Ryan Freebern / @rfreebern
Union Street Media

What is a URL?

RFC 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).”

HTTP Spoken Here

“We are building clans around languages we speak to the Machine.”

Why Design URLs?

Why Paint Cats
  1. Because people care.
  2. Because machines care.
  3. Because we can.

People Care

http://LOVE

People Care

“[P]eople spent 25% of their time looking at the URL in navigational tasks vs. 22% in informational tasks.”

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

People Care

One does not simply click on mordor.com

Machines Care

Pixar’s Wall-E and EVE

Because We Can

Climbers at Khumbu Icefall

What Makes a URL?

  • http
  • https
  • ftp
  • data
  • file
  • mailto
  • tel
  • ws/wss
  • about

What Makes a URL?

  • example.com
  • gTLD: .com, .net, .org, .edu, .aero., .asia, .biz, .cat, .coop, .gov, .info, .int, .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?

http://example.com/path/of/any/length/resource?query=data&another=parameter#fragment

What Makes a URL?

http://127.0.0.1/path/of/any/length/resource?query=data&another=parameter#fragment

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?

http://www.example.com/path/of/any/length/resource?query=data&another=parameter#fragment

What Makes a URL?

http://www.example.com:80/path/of/any/length/resource?query=data&another=parameter#fragment

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?

http://username:password@www.example.com:80/path/of/any/length;param=123/resource?query=data&another=parameter#fragment

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?

http://example.com/path/resource?query=data#fragment

What Makes a URL Good?

    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 Domain

  • Short
  • Memorable
  • Speakable
  • Readable

Good Domains are

Speakable

  • real-estate.com “Real hyphen estate dot com”
  • realestateonline.com “Real estate online dot com”

Good Domains are

Readable

  • IllJIll.com
  • lovelymorn.com

A Bad Domain

http://rim.jobs

http://oddsextractor.com

http://oddsextractor.com

An odd sex tractor

← Freud

A Bad Domain

http://rrrrthats5rs.com

http://www.llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk

A Good Path

  • Reflects information structure
  • Consistent
  • Predictable
  • Most general → most specific

CMSjunk

“[L]ong strings of characters that exist only to satisfy some technical constraint, detracting from the effectiveness of our URLs as communication tools.”

A 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-H8

A 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?”

A Good Fragment

  • Fragment = location in a document
  • That is all
  • Use history.pushState()

The Rest of the Puzzle

  • Scheme
  • Domain
  • Path
  • Query
  • Fragment
  • Everything

A Good URL is

Credible

Skeptical chihuahua

Credibility is based on

Reputation

  • http://en.wikipedia.org/wiki/Chinchilla
  • http://joebanana.tripod.com/mysite/chinchilla_page.htm

Credibility is based on

Association

  • http://www.cmu.edu/staff/daviska/papers/2013/alg349a
  • http://www.securisite.com/articles/2013/08/new-algorithm

Processing Fluency

The ease with which your brain can parse information.

Good URLs are

Hackable

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

Good URLs are

Hackable

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?

Good interfaces are habitual.

Habitually Hackable

Not Hackable, No Habit

  • http://example.com/6219867/rfreebern

Slugs

Slug

Slugs

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 Rules

  1. Stick to alphanumerics and hyphen
  2. Get rid of common words (conjunctions, articles, etc.)
  3. Include something unique (an ID or a date)
  4. (or store the slug with the document)

Good URLs are

Shareable

Sharing is Caring

Robustness

Old-Fashioned
Sharing

A long URL

Avoid Ambiguity

  • O 0
  • G 6
  • 1 I l
  • 2 Z

http://0range.io

http://Orange.io

New-Fangled Sharing

http://blog.rnf.me/ux-of-urls

Pictures of People Scanning QR Codes

Should I use a QR code? No. But what if.... OMG NO.

Shortness

http://example.com/article/august-2013/good-url-design

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

I Want Short URLs Anyway

Canonical

  • One URL for one document
  • 301 any alternates
  • Rewrite trailing slashes

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

Know Your Redirects

  • 301 Moved Permanently
  • 302 Found
  • 303 See Other
  • 307 Temporary Redirect
  • 308 Permanent Redirect (Experimental)

Drop the .php

  • Bad: http://example.com/about.php
  • Good: http://example.com/about

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

Making a Plan

  • Good
  • Memorable
  • Readable
  • Speakable
  • Credible
  • Hackable
  • Shareable
  • Robust
  • … times a hundred thousand.

URI Templates

RFC 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 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 Care About URLs?

“We are building clans around languages we speak to the Machine.”

Thank you!

Ryan Freebern / @rfreebern
Union Street Media

References

Image Credits

  1. Why Paint Cats 2006 Calendar” by Ten Speed Press, used without permission.
  2. Love URL” from The Independent, used without permission.
  3. Boromir Meme” based on still from “The Lord of the Rings: The Fellowship of the Ring, from Warner Bros., via QuickMeme.com, used without permission.
  4. Wall-E and Eve” from “Wall-E” from Pixar, used without permission.
  5. Climbers at Khumbu Icefall” by Mahatma4711 on Flickr, CC-By-2.0
  6. Freud Driving a Tractor” by Von Crunch Design, used without permission.
  7. The Skeptical Chihuahua, Taipei” by Yi Chen on Flickr, CC-By-2.0
  8. Mom's Friendly Robot Company” by Shirtoid.com, used without permission.
  9. Slug-50051” by Glenn on Flickr, CC-By-SA-2.0
  10. Sharing birthday cake.” by Eric Fleming on Flickr, CC-By-2.0
  11. Long URL” from benjaminraymondkelley.com, used without permission.
  12. http://blog.rnf.me/ux-of-urls QR Code” from Kaywa QR Code
  13. No!” by mslavick on Flickr, CC-By-2.0

Software Mentions

  1. http://www.crockford.com/wrmg/base32.html
  2. https://github.com/rfreebern/easier
  3. http://yourls.org
  4. http://pecl.php.net/package/uri_template

Thanks