oooh, that's clever! (unnatural experiments in web design)

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

Upload: nicepaul

Post on 17-Aug-2014

34.084 views

Category:

Design


0 download

DESCRIPTION

Clearleft's design lead mixes unexpected delighters and unconventional designs, as the arcane art of smoke and mirrors meets 21st century web design.

TRANSCRIPT

Page 1: Oooh, that's Clever! (unnatural experiments in web design)

Oooh, that’s clever!(unnatural experiments in web design)

Paul AnnettDesign lead at Clearleft

clearleft.comtwitter.com/nicepaul

Page 2: Oooh, that's Clever! (unnatural experiments in web design)

International Magic

Page 3: Oooh, that's Clever! (unnatural experiments in web design)

The girl next door

Page 4: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 5: Oooh, that's Clever! (unnatural experiments in web design)

This’n’That 0m 56s

Page 6: Oooh, that's Clever! (unnatural experiments in web design)

Clearleft user experience consultancy

Page 7: Oooh, that's Clever! (unnatural experiments in web design)

Silverback holding page

Page 8: Oooh, that's Clever! (unnatural experiments in web design)

20,000+ views from one Tweet

silverbackapp.com

Page 9: Oooh, that's Clever! (unnatural experiments in web design)

Silverback paper-based wireframes

Page 10: Oooh, that's Clever! (unnatural experiments in web design)

Clever logos

Page 11: Oooh, that's Clever! (unnatural experiments in web design)

FedEx logo, predictably

Page 12: Oooh, that's Clever! (unnatural experiments in web design)

Toblerone logo, polar bear

Page 13: Oooh, that's Clever! (unnatural experiments in web design)

Aerosmith ambigram

Page 14: Oooh, that's Clever! (unnatural experiments in web design)

Trick rotate 180°

Page 15: Oooh, that's Clever! (unnatural experiments in web design)

Trick ...or treat? rotate 180°

Page 16: Oooh, that's Clever! (unnatural experiments in web design)

truce truce

Page 17: Oooh, that's Clever! (unnatural experiments in web design)

Mill

Page 18: Oooh, that's Clever! (unnatural experiments in web design)

Spectrogram

Page 19: Oooh, that's Clever! (unnatural experiments in web design)

Venetian Snares (meow)

Page 20: Oooh, that's Clever! (unnatural experiments in web design)

Hidden Mickey ½ a mile across

Page 21: Oooh, that's Clever! (unnatural experiments in web design)

Innocent Smoothies “stop looking at my bottom”

Page 22: Oooh, that's Clever! (unnatural experiments in web design)

Moo stickers

Page 23: Oooh, that's Clever! (unnatural experiments in web design)

Moo stickers

Page 24: Oooh, that's Clever! (unnatural experiments in web design)

Chip Art Cheetah

Page 25: Oooh, that's Clever! (unnatural experiments in web design)

Mighty Mouse

Page 26: Oooh, that's Clever! (unnatural experiments in web design)

about:mozilla in Firefox

Page 27: Oooh, that's Clever! (unnatural experiments in web design)
Page 28: Oooh, that's Clever! (unnatural experiments in web design)
Page 29: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 30: Oooh, that's Clever! (unnatural experiments in web design)

http://tweet1.com resize the browser

Page 31: Oooh, that's Clever! (unnatural experiments in web design)

http://twequency.com resize the browser

Page 32: Oooh, that's Clever! (unnatural experiments in web design)

Clearleft anagram ambigram

CLEARLEFT

Page 33: Oooh, that's Clever! (unnatural experiments in web design)

Clearleft anagram ambigram

CLEARLEFTELF CARTEL

Page 34: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 35: Oooh, that's Clever! (unnatural experiments in web design)

Ho ho ho

Page 36: Oooh, that's Clever! (unnatural experiments in web design)

Ho ho ho

Page 37: Oooh, that's Clever! (unnatural experiments in web design)

Google Moon

Page 38: Oooh, that's Clever! (unnatural experiments in web design)

Google Moon, cheesy

Page 39: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 40: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 41: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 42: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 44: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 45: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 46: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 47: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 48: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 49: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 50: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 51: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 53: Oooh, that's Clever! (unnatural experiments in web design)

http://tinyurl.com/ipodyahoo

Page 54: Oooh, that's Clever! (unnatural experiments in web design)

http://producten.hema.nl

Page 55: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 56: Oooh, that's Clever! (unnatural experiments in web design)

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

subj

ectiv

e sa

tisfa

ctio

n le

vel

quality of execution

Page 57: Oooh, that's Clever! (unnatural experiments in web design)

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

performance needs

Page 58: Oooh, that's Clever! (unnatural experiments in web design)

Performance needs e.g. hotel check-in speed

Page 59: Oooh, that's Clever! (unnatural experiments in web design)

Performance needs e.g. online shopping delivery

Richard Rutter; Paperback

Page 60: Oooh, that's Clever! (unnatural experiments in web design)

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

performance needs

basic needs

Page 61: Oooh, that's Clever! (unnatural experiments in web design)

Basic needs e.g. toilet roll in hotel room

Page 62: Oooh, that's Clever! (unnatural experiments in web design)

Basic needs e.g. that a website actually works

Page 63: Oooh, that's Clever! (unnatural experiments in web design)

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

basic needs

excitement needs

performance needs

Page 64: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 65: Oooh, that's Clever! (unnatural experiments in web design)

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

Page 66: Oooh, that's Clever! (unnatural experiments in web design)

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

basic needs

excitement needs

performance needs

time

Page 67: Oooh, that's Clever! (unnatural experiments in web design)

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

Don Norman, user experience pioneer

Page 68: Oooh, that's Clever! (unnatural experiments in web design)

twitter.comyoutube.com

del.icio.us

/ nicepaul/ nicepaul/ paulannett / sxsw09

Slides at clearleft.com/slides/paul/sxsw09

Thank you

[email protected]

Paul Annett

These slides are released under aCreative Commons attribution

sharealike licence

Page 69: Oooh, that's Clever! (unnatural experiments in web design)

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/1380466813Aerosmith ambigram designed by John LangdonTrick or Treat ambigram designed by John Langdon for Objective ProductionsTruce logo designed by Brian JaramilloMill logo designed by North DesignSpectrogram http://flickr.com/photos/waders/2495322032/Songs About My Cats spectrogram © 2001 Venetian Snares“Hidden Mickey” portion of Google Maps © 2006 GoogleInnocent 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.htmlMighty 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