Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
skeuomorphs
"Skeuomorphism is the use of
  previously necessary design elements
 in a place they are no longer necessary
in order to i...
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            phys...
“When appropriate, add a realistic, physical dimension
to your application. Often, the more true to life your
application ...
“Dig, however, the page-curl animation (beautifully
rendered, but stick-in-the-craw wrong) in iBooks. Feast
your eyes on t...
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 uti...
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...
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...
THANK YOU.
                                     WRITING BY
                           Fred Beecher, Ben Brooks,
          ...
a   Andrew Watterson is a designer.
    www.andrewwatterson.com
    @andrewwatterson




    Meebo is totally hiring.
    ...
Skeuomorphism (UX Lx, May 2011)
Skeuomorphism (UX Lx, May 2011)
Skeuomorphism (UX Lx, May 2011)
Skeuomorphism (UX Lx, May 2011)
Skeuomorphism (UX Lx, May 2011)
Skeuomorphism (UX Lx, May 2011)
Skeuomorphism (UX Lx, May 2011)
Skeuomorphism (UX Lx, May 2011)
Upcoming SlideShare
Loading in …5
×

of

Skeuomorphism (UX Lx, May 2011) Slide 1 Skeuomorphism (UX Lx, May 2011) Slide 2 Skeuomorphism (UX Lx, May 2011) Slide 3 Skeuomorphism (UX Lx, May 2011) Slide 4 Skeuomorphism (UX Lx, May 2011) Slide 5 Skeuomorphism (UX Lx, May 2011) Slide 6 Skeuomorphism (UX Lx, May 2011) Slide 7 Skeuomorphism (UX Lx, May 2011) Slide 8 Skeuomorphism (UX Lx, May 2011) Slide 9 Skeuomorphism (UX Lx, May 2011) Slide 10 Skeuomorphism (UX Lx, May 2011) Slide 11 Skeuomorphism (UX Lx, May 2011) Slide 12 Skeuomorphism (UX Lx, May 2011) Slide 13 Skeuomorphism (UX Lx, May 2011) Slide 14 Skeuomorphism (UX Lx, May 2011) Slide 15 Skeuomorphism (UX Lx, May 2011) Slide 16 Skeuomorphism (UX Lx, May 2011) Slide 17 Skeuomorphism (UX Lx, May 2011) Slide 18 Skeuomorphism (UX Lx, May 2011) Slide 19 Skeuomorphism (UX Lx, May 2011) Slide 20 Skeuomorphism (UX Lx, May 2011) Slide 21 Skeuomorphism (UX Lx, May 2011) Slide 22 Skeuomorphism (UX Lx, May 2011) Slide 23 Skeuomorphism (UX Lx, May 2011) Slide 24 Skeuomorphism (UX Lx, May 2011) Slide 25 Skeuomorphism (UX Lx, May 2011) Slide 26 Skeuomorphism (UX Lx, May 2011) Slide 27 Skeuomorphism (UX Lx, May 2011) Slide 28 Skeuomorphism (UX Lx, May 2011) Slide 29 Skeuomorphism (UX Lx, May 2011) Slide 30 Skeuomorphism (UX Lx, May 2011) Slide 31 Skeuomorphism (UX Lx, May 2011) Slide 32 Skeuomorphism (UX Lx, May 2011) Slide 33 Skeuomorphism (UX Lx, May 2011) Slide 34
Upcoming SlideShare
Skeuomorphs and Spandrels: Examining the Interaction of Culture and Design
Next

8 Likes

Share

Skeuomorphism (UX Lx, May 2011)

Why does my iPad calendar app look like a leather desk set from the 1940s?

We make new things look like old things because the old is familiar: it helps with usability, it makes us safer, and it's cute. Our mobile phones have replaced pads of paper and physical dials with touchscreens that have pictures of these things on them. Our digital cameras play a prerecorded shutter sound when we press the button because that's how our old cameras told us the picture was taken.

Their ability to both delight and confuse is profound - skeuomorphic touches will invariably get oohs and aahs at design reviews and from users. Yet in the quest for familiarity and nostalgia, these flourishes can perpetuate interfaces that only made sense given past technical limitations or, worse, suggest vintage mental models that are out of sync with the product's modern features.

Come listen to a light-hearted discussion about the what and the why of this increasingly common design pattern and how designers can leverage everything that's cute and rich about skeuomorphs without compromising mental models or a polished product.

Related Books

Free with a 30 day trial from Scribd

See all

Skeuomorphism (UX Lx, May 2011)

  1. 1. skeuomorphs
  2. 2. "Skeuomorphism is the use of previously necessary design elements in a place they are no longer necessary in order to increase appeal or usability."
  3. 3. Digital Camera Recorded mechanical shutter sound
  4. 4. Reason Software Synth Hardware synth-style layout and controls
  5. 5. Electric Car Recorded engine noise (required by law)
  6. 6. Ancient Pottery Sculpted woven-basket pattern
  7. 7. Rubber Wine Corks Painted-on mottling
  8. 8. Hubcap Decorative spokes
  9. 9. House Decorative shutters
  10. 10. WHY IS THIS RELEVANT? Touch interfaces We're using our hands They're new technology
  11. 11. REFERENCES TO FAMILIAR OBJECTS 1984 2010 desktop metaphor helps physical metaphors the transition to graphical (skeuomorphs) help transition interfaces to touch interfaces
  12. 12. “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
  13. 13. “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
  14. 14. WHICH IS THE IDEAL READING EXPERIENCE? iBooks Kindle
  15. 15. WHAT IS THIS DEVICE FOR? It's barely a device; it's a book. Skeuomorphs deemphasize the technology in favor of the utility.
  16. 16. WHICH ONE DO WE GET FOR GRANDMA? iOS Android
  17. 17. KNOW YOUR AUDIENCE Worst. Skeuomorph. Ever.
  18. 18. WHICH IS BETTER GIVEN THE TECHNOLOGY? skeuomorphic compass camera-enabled compass
  19. 19. 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.
  20. 20. Two goals for our users:
  21. 21. Two goals for our users: 1. GET THINGS DONE
  22. 22. Two goals for our users: 1. GET THINGS DONE 2. SMILE
  23. 23. Two goals for our users: 1. GET THINGS DONE 2. SMILE Skeuomorphism can help.* (*if done well)
  24. 24. “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
  25. 25. 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.
  26. 26. a Andrew Watterson is a designer. www.andrewwatterson.com @andrewwatterson Meebo is totally hiring. www.meebo.com/jobs
  • yonghyuk

    Oct. 15, 2014
  • afigar

    Jan. 19, 2013
  • bulentduagi1

    May. 4, 2012
  • ahmedxp

    Apr. 18, 2012
  • garfiar

    Jun. 9, 2011
  • AnaTroni

    May. 20, 2011
  • rnx

    May. 20, 2011
  • u106842

    May. 18, 2011

Why does my iPad calendar app look like a leather desk set from the 1940s? We make new things look like old things because the old is familiar: it helps with usability, it makes us safer, and it's cute. Our mobile phones have replaced pads of paper and physical dials with touchscreens that have pictures of these things on them. Our digital cameras play a prerecorded shutter sound when we press the button because that's how our old cameras told us the picture was taken. Their ability to both delight and confuse is profound - skeuomorphic touches will invariably get oohs and aahs at design reviews and from users. Yet in the quest for familiarity and nostalgia, these flourishes can perpetuate interfaces that only made sense given past technical limitations or, worse, suggest vintage mental models that are out of sync with the product's modern features. Come listen to a light-hearted discussion about the what and the why of this increasingly common design pattern and how designers can leverage everything that's cute and rich about skeuomorphs without compromising mental models or a polished product.

Views

Total views

4,011

On Slideshare

0

From embeds

0

Number of embeds

1,330

Actions

Downloads

0

Shares

0

Comments

0

Likes

8

×