SlideShare une entreprise Scribd logo
1  sur  34
skeuomorphs
"Skeuomorphism is the use of
  previously necessary design elements
 in a place they are no longer necessary
in order to increase appeal or usability."
Digital Camera
Recorded mechanical shutter sound
Reason Software Synth
Hardware synth-style layout and controls
Electric Car
Recorded engine noise (required by law)
Ancient Pottery
Sculpted woven-basket pattern
Rubber Wine Corks
  Painted-on mottling
Hubcap
Decorative spokes
House
Decorative shutters
WHY IS THIS RELEVANT?



Touch interfaces

We're using
our hands

They're new
technology
REFERENCES TO FAMILIAR OBJECTS




          1984                            2010
  desktop metaphor helps            physical metaphors
 the transition to graphical   (skeuomorphs) help transition
         interfaces                 to touch interfaces
“When appropriate, add a realistic, physical dimension
to your application. Often, the more true to life your
application looks and behaves, the easier it is for people
to understand how it works and the more they enjoy
using it.”

                     — iOS Human Interface Guidelines
“Dig, however, the page-curl animation (beautifully
rendered, but stick-in-the-craw wrong) in iBooks. Feast
your eyes on the leatherette Executive Desk Blotter
nonsense going on in Notes. Open up Calendar, with its
twee spiral-bound conceit, and gaze into the face of Fear.
What are these but misguided coddles, patronizing
crutches, interactively horseless carriages?”

                                     — Adam Green eld
WHICH IS THE IDEAL READING EXPERIENCE?




           iBooks                   Kindle
WHAT IS THIS DEVICE FOR?



It's barely a device;
it's a book.

Skeuomorphs
deemphasize
the technology
in favor of the utility.
WHICH ONE DO WE GET FOR GRANDMA?




          iOS                  Android
KNOW YOUR AUDIENCE




                       Worst.
                     Skeuomorph.
                        Ever.
WHICH IS BETTER GIVEN THE TECHNOLOGY?




  skeuomorphic compass      camera-enabled compass
WHAT HAVE WE LEARNED?


Use skeuomorphs to add a satisfying or nostalgic
emotional e ect.

Bridge gaps between what people are used to
and a new method with skeuomorphs.

Question whether you're skipping the opportunity
for innovation by using a skeuomorph.

Don't mismatch your functionality
and your skeuomorph.
Two goals for our users:
Two goals for our users:



1. GET THINGS DONE
Two goals for our users:



1. GET THINGS DONE
       2. SMILE
Two goals for our users:



1. GET THINGS DONE
       2. SMILE

Skeuomorphism can help.*
           (*if done well)
“Usable designs are not necessarily enjoyable to use...
an attractive design is not necessarily the most e cient.
But must these attributes be in con ict? Can beauty and
brains, pleasure and usability, go hand in hand?”

                                         — Don Norman
THANK YOU.
                                     WRITING BY
                           Fred Beecher, Ben Brooks,
                       Adam Green eld, John Pavlus,
                        Steven Poole, Dorian Taylor,
                  Timothy Taylor, Aaron Weyenberg,
                            and Quora users like you.


                                        PHOTOS BY
             anitakhart on ickr, museum_girl on ickr,
             captkodak on ickr, taberandrew on ickr,
                        Matt Groening, Penny Arcade,
                         innerauto.com, nissanusa.com,
                               and the iOS App Store.
a   Andrew Watterson is a designer.
    www.andrewwatterson.com
    @andrewwatterson




    Meebo is totally hiring.
    www.meebo.com/jobs

Contenu connexe

Tendances

Week1 Interactivity
Week1 InteractivityWeek1 Interactivity
Week1 Interactivity
CMoz
 

Tendances (15)

Creativity and things
Creativity and thingsCreativity and things
Creativity and things
 
The Life on the Screen (online identity)
The Life on the Screen (online identity)The Life on the Screen (online identity)
The Life on the Screen (online identity)
 
3D Content for Mobile Devices
3D Content for Mobile Devices3D Content for Mobile Devices
3D Content for Mobile Devices
 
Immersive Learning: Tying Virtual to Real
Immersive Learning: Tying Virtual to RealImmersive Learning: Tying Virtual to Real
Immersive Learning: Tying Virtual to Real
 
Grayson
GraysonGrayson
Grayson
 
The Guardian Avatar
The Guardian AvatarThe Guardian Avatar
The Guardian Avatar
 
Danielle Leigh Portfolio 2015
Danielle Leigh Portfolio 2015Danielle Leigh Portfolio 2015
Danielle Leigh Portfolio 2015
 
Week1 Interactivity
Week1 InteractivityWeek1 Interactivity
Week1 Interactivity
 
The iPad
The iPadThe iPad
The iPad
 
Technologies that have recently come
Technologies that have recently comeTechnologies that have recently come
Technologies that have recently come
 
Social Media for Storytellers
Social Media for StorytellersSocial Media for Storytellers
Social Media for Storytellers
 
20100602 arevent
20100602 arevent20100602 arevent
20100602 arevent
 
Learning Library Spring 2008
Learning Library Spring 2008Learning Library Spring 2008
Learning Library Spring 2008
 
This Drama Is Pwned
This Drama Is PwnedThis Drama Is Pwned
This Drama Is Pwned
 
"Enchanted Objects and People:" Data Driven AR
"Enchanted Objects and People:" Data Driven AR"Enchanted Objects and People:" Data Driven AR
"Enchanted Objects and People:" Data Driven AR
 

Similaire à Skeuomorphism (UX Lx, May 2011)

Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...
Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...
Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...
BayCHI
 
Designing Interaction with emotion
Designing Interaction with emotionDesigning Interaction with emotion
Designing Interaction with emotion
Michihito Mizutani
 

Similaire à Skeuomorphism (UX Lx, May 2011) (20)

Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...
Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...
Industrial Design Intelligence: Evaluation Supporting Aesthetic and Functiona...
 
OpenVoice #01 - Ben Sauer - Voice UI: The past, the future and ... what now?
OpenVoice #01 - Ben Sauer - Voice UI: The past, the future and ... what now?OpenVoice #01 - Ben Sauer - Voice UI: The past, the future and ... what now?
OpenVoice #01 - Ben Sauer - Voice UI: The past, the future and ... what now?
 
Making Sense of Sensors
Making Sense of SensorsMaking Sense of Sensors
Making Sense of Sensors
 
FORWARD TO REALITY - PHYSICAL COMPUTING – THE NEXT LEVEL OF WEB INTERACTION
FORWARD TO REALITY - PHYSICAL COMPUTING – THE NEXT LEVEL OF WEB INTERACTION FORWARD TO REALITY - PHYSICAL COMPUTING – THE NEXT LEVEL OF WEB INTERACTION
FORWARD TO REALITY - PHYSICAL COMPUTING – THE NEXT LEVEL OF WEB INTERACTION
 
Your Future - Design in 2017
Your Future - Design in 2017Your Future - Design in 2017
Your Future - Design in 2017
 
Google io 2015, Trip Report
Google io 2015, Trip ReportGoogle io 2015, Trip Report
Google io 2015, Trip Report
 
A Design Journey /// Naba 2014
A Design Journey /// Naba 2014 A Design Journey /// Naba 2014
A Design Journey /// Naba 2014
 
Context Rising : Wearable Interfaces
Context Rising : Wearable InterfacesContext Rising : Wearable Interfaces
Context Rising : Wearable Interfaces
 
Designing Interaction with emotion
Designing Interaction with emotionDesigning Interaction with emotion
Designing Interaction with emotion
 
Applied And Persuasive Applications For Museums
Applied And Persuasive Applications For MuseumsApplied And Persuasive Applications For Museums
Applied And Persuasive Applications For Museums
 
Ubiquity: smart people, smart places, smart organisations
Ubiquity: smart people, smart places, smart organisationsUbiquity: smart people, smart places, smart organisations
Ubiquity: smart people, smart places, smart organisations
 
How to design more ethically engaging experiences (UCD 2016)
How to design more ethically engaging experiences (UCD 2016)How to design more ethically engaging experiences (UCD 2016)
How to design more ethically engaging experiences (UCD 2016)
 
Designing Discreetness recap @ Thingscon
Designing Discreetness recap @ ThingsconDesigning Discreetness recap @ Thingscon
Designing Discreetness recap @ Thingscon
 
Interaction as a Material
Interaction as a MaterialInteraction as a Material
Interaction as a Material
 
Applied and persuasive: playful learning
Applied and persuasive: playful learningApplied and persuasive: playful learning
Applied and persuasive: playful learning
 
Wozniak
WozniakWozniak
Wozniak
 
Kalan Ray (Magnopus): Bringing the Land of the Dead to Life: The Making of Co...
Kalan Ray (Magnopus): Bringing the Land of the Dead to Life: The Making of Co...Kalan Ray (Magnopus): Bringing the Land of the Dead to Life: The Making of Co...
Kalan Ray (Magnopus): Bringing the Land of the Dead to Life: The Making of Co...
 
Using Technology to Create Personalized Guest Experiences in Group Environmen...
Using Technology to Create Personalized Guest Experiences in Group Environmen...Using Technology to Create Personalized Guest Experiences in Group Environmen...
Using Technology to Create Personalized Guest Experiences in Group Environmen...
 
MIXX Canada 2015: Smart Dumb Things
MIXX Canada 2015: Smart Dumb Things MIXX Canada 2015: Smart Dumb Things
MIXX Canada 2015: Smart Dumb Things
 
UX Unicorns - legend or fable?
UX Unicorns - legend or fable?UX Unicorns - legend or fable?
UX Unicorns - legend or fable?
 

Dernier

一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 

Dernier (20)

Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 

Skeuomorphism (UX Lx, May 2011)

  • 1.
  • 3. "Skeuomorphism is the use of previously necessary design elements in a place they are no longer necessary in order to increase appeal or usability."
  • 5. Reason Software Synth Hardware synth-style layout and controls
  • 6. Electric Car Recorded engine noise (required by law)
  • 8. Rubber Wine Corks Painted-on mottling
  • 11. WHY IS THIS RELEVANT? Touch interfaces We're using our hands They're new technology
  • 12. REFERENCES TO FAMILIAR OBJECTS 1984 2010 desktop metaphor helps physical metaphors the transition to graphical (skeuomorphs) help transition interfaces to touch interfaces
  • 13. “When appropriate, add a realistic, physical dimension to your application. Often, the more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.” — iOS Human Interface Guidelines
  • 14. “Dig, however, the page-curl animation (beautifully rendered, but stick-in-the-craw wrong) in iBooks. Feast your eyes on the leatherette Executive Desk Blotter nonsense going on in Notes. Open up Calendar, with its twee spiral-bound conceit, and gaze into the face of Fear. What are these but misguided coddles, patronizing crutches, interactively horseless carriages?” — Adam Green eld
  • 15.
  • 16. WHICH IS THE IDEAL READING EXPERIENCE? iBooks Kindle
  • 17.
  • 18. WHAT IS THIS DEVICE FOR? It's barely a device; it's a book. Skeuomorphs deemphasize the technology in favor of the utility.
  • 19. WHICH ONE DO WE GET FOR GRANDMA? iOS Android
  • 20. KNOW YOUR AUDIENCE Worst. Skeuomorph. Ever.
  • 21.
  • 22. WHICH IS BETTER GIVEN THE TECHNOLOGY? skeuomorphic compass camera-enabled compass
  • 23.
  • 24.
  • 25.
  • 26.
  • 27. WHAT HAVE WE LEARNED? Use skeuomorphs to add a satisfying or nostalgic emotional e ect. Bridge gaps between what people are used to and a new method with skeuomorphs. Question whether you're skipping the opportunity for innovation by using a skeuomorph. Don't mismatch your functionality and your skeuomorph.
  • 28. Two goals for our users:
  • 29. Two goals for our users: 1. GET THINGS DONE
  • 30. Two goals for our users: 1. GET THINGS DONE 2. SMILE
  • 31. Two goals for our users: 1. GET THINGS DONE 2. SMILE Skeuomorphism can help.* (*if done well)
  • 32. “Usable designs are not necessarily enjoyable to use... an attractive design is not necessarily the most e cient. But must these attributes be in con ict? Can beauty and brains, pleasure and usability, go hand in hand?” — Don Norman
  • 33. THANK YOU. WRITING BY Fred Beecher, Ben Brooks, Adam Green eld, John Pavlus, Steven Poole, Dorian Taylor, Timothy Taylor, Aaron Weyenberg, and Quora users like you. PHOTOS BY anitakhart on ickr, museum_girl on ickr, captkodak on ickr, taberandrew on ickr, Matt Groening, Penny Arcade, innerauto.com, nissanusa.com, and the iOS App Store.
  • 34. a Andrew Watterson is a designer. www.andrewwatterson.com @andrewwatterson Meebo is totally hiring. www.meebo.com/jobs