SlideShare ist ein Scribd-Unternehmen logo
1 von 69
Downloaden Sie, um offline zu lesen
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
Oooh, that's Clever! (unnatural experiments in web design)
Oooh, that's Clever! (unnatural experiments in web design)
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

Weitere ähnliche Inhalte

Ähnlich wie Oooh, that's Clever! (unnatural experiments in web design)

Best practice ecommerce design
Best practice ecommerce designBest practice ecommerce design
Best practice ecommerce designGeorge Ioannou
 
Designing For User Experience
Designing For User ExperienceDesigning For User Experience
Designing For User ExperienceJames Gagliardi
 
Fmp, initial plans
Fmp, initial plansFmp, initial plans
Fmp, initial plansBenDix4
 
Natural born conversion killers - Conversion Jam
Natural born conversion killers - Conversion JamNatural born conversion killers - Conversion Jam
Natural born conversion killers - Conversion JamCraig Sullivan
 
UX for Lean Products
UX for Lean ProductsUX for Lean Products
UX for Lean ProductsLim Donald
 
A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...
A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...
A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...Lean Kanban Central Europe
 
Technical Debt - Why should you care? (Agiles Buenos Aires 2011)
Technical Debt - Why should you care?  (Agiles Buenos Aires 2011)Technical Debt - Why should you care?  (Agiles Buenos Aires 2011)
Technical Debt - Why should you care? (Agiles Buenos Aires 2011)CI&T
 
2. production techniques evaluation pro forma(1)-2
2. production techniques evaluation pro forma(1)-22. production techniques evaluation pro forma(1)-2
2. production techniques evaluation pro forma(1)-2Sam Fulton
 
Emperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkEmperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkkevinjohngallagher
 
Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012kevinjohngallagher
 
Can hotel rooms ever be too tech?
Can hotel rooms ever be too tech?Can hotel rooms ever be too tech?
Can hotel rooms ever be too tech?Iconsulthotels
 
Appear.in premium walkthrough
Appear.in premium walkthroughAppear.in premium walkthrough
Appear.in premium walkthroughDag-Inge Aas
 
Embrace Community! Embrace a better life!
Embrace Community! Embrace a better life!Embrace Community! Embrace a better life!
Embrace Community! Embrace a better life!Rico Lin
 
Project 1 production techniques evaluation final
Project 1 production techniques evaluation finalProject 1 production techniques evaluation final
Project 1 production techniques evaluation finalLouisCoopre
 
How to make a Rock Star Product?
How to make a Rock Star Product?How to make a Rock Star Product?
How to make a Rock Star Product?tlesselin
 
Userstories a practical intro
Userstories a practical introUserstories a practical intro
Userstories a practical introMarcus Hammarberg
 
Wcphilly- Unsucking e-Commerce
Wcphilly- Unsucking e-CommerceWcphilly- Unsucking e-Commerce
Wcphilly- Unsucking e-CommerceAmanda Blum
 
Designing on Solid Foundations
Designing on Solid FoundationsDesigning on Solid Foundations
Designing on Solid FoundationsNew Adventures
 

Ähnlich wie Oooh, that's Clever! (unnatural experiments in web design) (20)

Best practice ecommerce design
Best practice ecommerce designBest practice ecommerce design
Best practice ecommerce design
 
Designing For User Experience
Designing For User ExperienceDesigning For User Experience
Designing For User Experience
 
Fmp, initial plans
Fmp, initial plansFmp, initial plans
Fmp, initial plans
 
Technologie3
Technologie3Technologie3
Technologie3
 
Natural born conversion killers - Conversion Jam
Natural born conversion killers - Conversion JamNatural born conversion killers - Conversion Jam
Natural born conversion killers - Conversion Jam
 
UX for Lean Products
UX for Lean ProductsUX for Lean Products
UX for Lean Products
 
A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...
A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...
A STORY OF FAILURE - INSIGHTS FROM A START-UP & WHY THEY MATTER IN AN ENTERPR...
 
Technical Debt - Why should you care? (Agiles Buenos Aires 2011)
Technical Debt - Why should you care?  (Agiles Buenos Aires 2011)Technical Debt - Why should you care?  (Agiles Buenos Aires 2011)
Technical Debt - Why should you care? (Agiles Buenos Aires 2011)
 
2. production techniques evaluation pro forma(1)-2
2. production techniques evaluation pro forma(1)-22. production techniques evaluation pro forma(1)-2
2. production techniques evaluation pro forma(1)-2
 
Emperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkEmperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakk
 
Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012
 
Can hotel rooms ever be too tech?
Can hotel rooms ever be too tech?Can hotel rooms ever be too tech?
Can hotel rooms ever be too tech?
 
Appear.in premium walkthrough
Appear.in premium walkthroughAppear.in premium walkthrough
Appear.in premium walkthrough
 
Embrace Community! Embrace a better life!
Embrace Community! Embrace a better life!Embrace Community! Embrace a better life!
Embrace Community! Embrace a better life!
 
Project 1 production techniques evaluation final
Project 1 production techniques evaluation finalProject 1 production techniques evaluation final
Project 1 production techniques evaluation final
 
How to make a Rock Star Product?
How to make a Rock Star Product?How to make a Rock Star Product?
How to make a Rock Star Product?
 
Userstories a practical intro
Userstories a practical introUserstories a practical intro
Userstories a practical intro
 
Wcphilly- Unsucking e-Commerce
Wcphilly- Unsucking e-CommerceWcphilly- Unsucking e-Commerce
Wcphilly- Unsucking e-Commerce
 
Designing on Solid Foundations
Designing on Solid FoundationsDesigning on Solid Foundations
Designing on Solid Foundations
 
Question 6 Final
Question 6 FinalQuestion 6 Final
Question 6 Final
 

Kürzlich hochgeladen

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Kürzlich hochgeladen (19)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

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