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

Post on 17-Aug-2014

34.084 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

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

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

Paul AnnettDesign lead at Clearleft

clearleft.comtwitter.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

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

http://tweet1.com resize the browser

http://twequency.com resize the browser

Clearleft anagram ambigram

CLEARLEFT

Clearleft anagram ambigram

CLEARLEFTELF CARTEL

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

Ho ho ho

Ho ho ho

Google Moon

Google Moon, cheesy

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

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

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

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

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

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

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

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

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

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

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

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

http://tinyurl.com/ipodyahoo

http://producten.hema.nl

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

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

subj

ectiv

e sa

tisfa

ctio

n le

vel

quality of execution

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

performance needs

Performance needs e.g. hotel check-in speed

Performance needs e.g. online shopping delivery

Richard Rutter; Paperback

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

performance needs

basic needs

Basic needs e.g. toilet roll in hotel room

Basic needs e.g. that a website actually works

Kano Model of customer satisfaction

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

basic needs

excitement needs

performance needs

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

Poorexecution

Very goodexecution

Delightedcustomer

Unhappycustomer

basic needs

excitement needs

performance needs

time

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

twitter.comyoutube.com

del.icio.us

/ nicepaul/ nicepaul/ paulannett / sxsw09

Slides at clearleft.com/slides/paul/sxsw09

Thank you

paul@clearleft.com

Paul Annett

These slides are released under aCreative 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/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

top related