Oooh, that’s clever!
(unnatural experiments in web design)
Paul Annett
Design lead at Clearleft
clearleft.com
twitter.com/nicepaul

International Magic

The girl next door

This’n’That magic trick video at http://tinyurl.com/thisnthat

This’n’That 0m 56s

Clearleft user experience consultancy

Silverback holding page

20,000+ views from one Tweet
silverbackapp.com

Silverback paper-based wireframes

Clever logos

FedEx logo, predictably

Toblerone logo, polar bear

Aerosmith ambigram

Trick rotate 180°

Trick ...or treat? rotate 180°

truce truce

Mill

Spectrogram

Venetian Snares (meow)

Hidden Mickey ½ a mile across

Innocent Smoothies “stop looking at my bottom”

Moo stickers

Moo stickers

Chip Art Cheetah

Mighty Mouse

about:mozilla in Firefox

resize the browser
http://silverbackapp.com/holding

resize the browser
http://tweet1.com

resize the browser
http://twequency.com

Clearleft anagram ambigram
CLEARLEFT

Clearleft anagram ambigram
CLEARLEFT
ELF CARTEL

resize the browser
http://tinyurl.com/horsemoves

Ho ho ho

Ho ho ho

Google Moon

Google Moon, cheesy

click the timeline
http://2007.dConstruct.org

click the worm at the bottom
http://kyanmedia.com

navigate using top left menu
http://modernista.com

navigate using top left menu
http://skittles.com

http://www.mybloodyvalentinein3d.com

scroll ↓ watch the logo
http://fatuus.de

scroll → watch the logo
http://designedbyable.com

scroll ↓ watch the diver
http://tinyurl.com/zenocean

scroll ↓ watch the paint
http://webleeddesign.com

wait... watch blue
http://de-online.co.uk/archive/5.html

image above fold
http://de-online.co.uk/archive/8.html

blue turned pink
http://de-online.co.uk/archive/5.html

blue again
http://de-online.co.uk/archive/1.html

http://youtube.com/experiencewii

http://tinyurl.com/ipodyahoo

http://producten.hema.nl

scroll ↓ watch logo
http://econsultancy.com/blog

Kano Model of customer satisfaction
Delighted
customer
subjective satisfaction level
Poor Very good
execution execution
quality of execution
Unhappy
customer

Kano Model of customer satisfaction
Delighted
customer
performance needs
Poor Very good
execution execution
Unhappy
customer

Performance needs e.g. hotel check-in speed

Performance needs e.g. online shopping delivery
Richard Rutter; Paperback

Kano Model of customer satisfaction
Delighted
customer
performance needs
Poor Very good
execution execution
basic needs
Unhappy
customer

Basic needs e.g. toilet roll in hotel room

Basic needs e.g. that a website actually works

Kano Model of customer satisfaction
Delighted excitement needs
customer
performance needs
Poor Very good
execution execution
basic needs
Unhappy
customer

Excitement needs e.g. free wi-fi at hotel

Excitement needs e.g. swishy vines & a man in a gorilla suit

Kano Model of customer satisfaction
Delighted excitement needs
customer
performance needs
Poor Very good
execution execution
basic needs
time
Unhappy
customer

Don Norman, user experience pioneer
“ It is not enough that
we build products
that function, that are
understandable and
usable, we also need
to build products that
bring joy and
excitement, pleasure
and fun, and, yes,
beauty to people’s
”
lives

Slides at clearleft.com/slides/paul/sxsw09
Thank you
Paul Annett
paul@clearleft.com
twitter.com / nicepaul
youtube.com / nicepaul
del.icio.us / paulannett / sxsw09
These slides are released under a
Creative Commons attribution
sharealike licence

Magic shop http://flickr.com/photos/misterpeter/3087426323/
Model shop http://flickr.com/photos/bowbrick/653647381/
FedEx truck http://flickr.com/photos/mukluk/292641326/
Toblerone http://flickr.com/photos/kylejones/1380466813
Aerosmith ambigram designed by John Langdon
Trick or Treat ambigram designed by John Langdon for Objective Productions
Truce logo designed by Brian Jaramillo
Mill logo designed by North Design
Spectrogram http://flickr.com/photos/waders/2495322032/
Songs About My Cats spectrogram © 2001 Venetian Snares
“Hidden Mickey” portion of Google Maps © 2006 Google
Innocent Smoothie http://flickr.com/photos/duncan/2084134925/
Moo sticker book 1 http://flickr.com/photos/lwr/972289835/
Moo sticker book 2 http://flickr.com/photos/please/1061596487/
Chip art © Silicon Zoo http://micro.magnet.fsu.edu/creatures/index.html
Mighty Mouse http://www.flickr.com/photos/angryamoeba/116066934/
Website screenshots © their respective owners.
Hotel check-in http://www.flickr.com/photos/ceekay/2560549258/
Toilet roll http://www.flickr.com/photos/lastyearsgirl_/467097802/
Hotel lobby wifi http://www.flickr.com/photos/rogue2408/3027375592/
Don Norman http://www.jnd.org/NNg-Photographs/NNg-photographs.html