Successfully reported this slideshow.
Your SlideShare is downloading. ×

Skeuomorphism (UX Lx, May 2011)

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 34 Ad

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.

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.

Advertisement
Advertisement

More Related Content

Similar to Skeuomorphism (UX Lx, May 2011) (20)

Advertisement

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

×