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

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

2. International Magic

3. The girl next door

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

5. This’n’That 0m 56s

6. Clearleft user experience consultancy

7. Silverback holding page

8. 20,000+ views from one Tweet
silverbackapp.com

9. Silverback paper-based wireframes

10. Clever logos

11. FedEx logo, predictably

12. Toblerone logo, polar bear

13. Aerosmith ambigram

14. Trick rotate 180°

15. Trick ...or treat? rotate 180°

16. truce truce

17. Mill

18. Spectrogram

19. Venetian Snares (meow)

20. Hidden Mickey ½ a mile across

21. Innocent Smoothies “stop looking at my bottom”

22. Moo stickers

23. Moo stickers

24. Chip Art Cheetah

25. Mighty Mouse

26. about:mozilla in Firefox

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

30. resize the browser
http://tweet1.com

31. resize the browser
http://twequency.com

32. Clearleft anagram ambigram
CLEARLEFT

33. Clearleft anagram ambigram
CLEARLEFT
ELF CARTEL

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

35. Ho ho ho

36. Ho ho ho

37. Google Moon

38. Google Moon, cheesy

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

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

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

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

43. http://www.mybloodyvalentinein3d.com

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

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

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

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

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

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

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

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

52. http://youtube.com/experiencewii

53. http://tinyurl.com/ipodyahoo

54. http://producten.hema.nl

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

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

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

58. Performance needs e.g. hotel check-in speed

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

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

61. Basic needs e.g. toilet roll in hotel room

62. Basic needs e.g. that a website actually works

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

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

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

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

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

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

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