The Secret Lives of Links

The Secret Lives of Links
User Interface Engineering - www.uie.com

Jared M. Spool (@jmspool) User Interface Engineering
Copyright 2011, User Interface Engineering. All Rights Reserved.

Jared M. Spool (@jmspool) User Interface Engineering
The
Secr et L of L ives inks
CNN
CNN
CNN
The Most Important Story The Second Most Important Story The Third Most Important Story An Unimportant, Yet Entertaining Story Yet Another Charlie Sheen Story
ADVERTISEMENT
Crap You Dont Need
Most Important Story
Ad for Crap You Dont Need
Second Most Important Story Unimportant, Entertaining Story
Third Most Important Story

CNN
Links secretly live to deliver their user to that users desired objective
CNN
NYTimes.com
LATimes.com
HuffingtonPost.com
The Scent of Information
MIT.edu
Oberlin.edu
Arts.Yale.Edu
10
OSU.edu
Walgreens
11
5% 6% 21% 16% 11% % of Total Trafc: 59.0% % of Total Area: 3.8%
Walgreens
Fittss Law The speed a user can acquire a target is directly proportional to the size of the target and indirectly proportional to the distance from the target. The bigger and closer, the easier to hit.
Paul Fitts, 1954
12
Walgreens
New York Times
13
NYTimes.com
PelizzoliWorld.com
14
PelizzoliWorld.com
Deliver Users to Their Desired Objective

Link copy needs to communicate what the user will get
Sometimes using original, unique copy Sometimes taking advantage of what the user already expects
The links have to take the user to where they want to go

Not to where the site wants them to go
Make real estate reect users desires

Take advantage of Fittss Law
15
Links secretly live to emit the right scent
d When
oes th
ster e e seme
nd?
Where
s the
librar
y?
my ats rade? Whth g ma

OSU.edu
16
Trigger Words
A word or phrase that matches the users goals and signals where to click.
OSU.edu
All Clickstreams
Failure
Users Finding Content
Success
58%
42%
17
Use of the Back Button
Predicting Failures of Scent

Use of Search
Pogosticking
Back Button Predicts Failure

Clickstreams with One Back Button
Failure
Success
82%
18%
18
Back Button Predicts Failure

Clickstreams with Two Back Buttons
Failure
Success
98%
2%
Pogosticking!
When the user bounces between levels of the information hierarchy
1 3 5
Gallery
6
Content
19
Pogosticking Prevents Success
Failure
Without Pogosticking
Success
45%
Failure
With Pogosticking
55%
Success
89%
11%
Home
Content
Getting from Home to Content

Copyright 2011, User Interface Engineering. All Rights Reserved. 20
Home
Search
Content
Home
Categories
Content

Home
Fea tur ed C
ont
ent
Content
Home
Search
Fea tur ed C
Categories
ont
ent
Content

The Users Scanning Process 1. Scan the page for trigger words. 2. Type a keyword into Search.
CityOfNewHaven.com
Amazon.com
23
B . Y. O. L.
Bring Your Own Link
CityOfNewHaven.com
Search Pro Tip: Your search logs are lled with trigger words. Match the search phrases up with the pages users search from.
24
Search Also Prevents Success
Failure
Without Search
Success
47%
Failure
With Search
53%
Success
70%
30%
7-Eleven Milk Experiment
25
Patrick Bolduan
26
Compelled Shopping: Buying Apparel

Sales per Thousand Dollars Ideal Site The Gap Lands End Macys Newport News $0 $156 $63 $250 $500 $750 $1000 $465 $660 $1,000
27

Number of Pages to Purchase The Gap Lands End Macys Newport News 0 15 30 45 11.9
}
15.7 51.2 51.0 60
28
Missing Trigger Words

Forces Pogosticking
Missing Trigger Words

Forces Pogosticking
Crutcheld Provides Descriptions

Enough information to make choice
29
BankOfAmerica.com
StonehamBank.com
30
EasternBank.com
Good Design is Invisible
31
BLS.gov
Cancer.gov
32
Emit the Right Scent

Use the users trigger words to drive them to where they need to be Watch for the back button, pogosticking, and search Your search log is a source of trigger words Make sure its clear the user knows why they should click
Dont be afraid to give them context
Links secretly live to look good (while still looking like links)
33
Links are supposed to be blue and underlined

Thankfully, weve moved beyond this.
JohnDeere.com
34
? ? ? ? ? ? ?
LATimes
BBC.co.uk
35
DrudgeReport
RefDesk.com
36
? ? ?
? ? ?
Aging In America
MidwestUXConference.com
37
United
Intel.com
38
Look Good (While Still Looking Like Links)

Links no longer have to be blue and underlined Users need to understand that the link is different from the rest of the content We confuse users with things that look like links, but arent
Links secretly live to do what the user expects
39
Lively Design
Dictionary.com
40
Time.com
Telegraph.co.uk
41
ChicagoTribune.com
ChicagoTribune.com
42
Jenis Ice Cream Shop
JenisIceCream.com
JenisIceCream.com
43
JenisIceCream.com
Jenis Ice Cream - After
JenisIceCream.com
44
JenisIceCream.com
OfficeMax
45
OfficeMax
OfficeMax
46
MIT Architecture Site
Architecture.MIT.EDU
United Mileage Plus Rewards
47
Do What The User Expects

Support the user with what they want to do
Dont distract them
Dont hide scent through youts and dropdowns

Surface your most important scent by displaying it outright
Remember that users like to move in straight lines
Delta
48
Chase Online Banking
Arts.Yale.Edu
49
Art.Yale.Edu

Deliver users to their desired objective Emit the right scent Look good, while still looking like a link Do what the user expects
50
Special Deal for AEA Attendees

New book:
Designing Great Web Apps

Avoid 5 key usability challenges Make web app designs delightful Identify the interesting moments Win for the biz and the user Bypass 16 account sign-in mistakes
Free ebook: send email to webappbook@uie.com
51

The Secret Lives of Links

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Secret Lives of Links

Uploaded by

Copyright:

Available Formats

The Secret Lives of Links

User Interface Engineering - www.uie.com