Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
What was Apple thinking?
!

Jochen Wolters
@jochenWolters
Gestalt Laws | Affordances | Skeuomorphism
Gestalt
!

The essence or shape of an
entity’s complete form.

Gestalt Laws | Affordances | Skeuomorphism
Source: Wikipedi...
Sniff,
Sniff…

Gestalt Laws | Affordances | Skeuomorphism
Image by R. C. James
Similarity

Gestalt Laws | Affordances | Skeuomorphism
Proximity

Gestalt Laws | Affordances | Skeuomorphism
Closure

Gestalt Laws | Affordances | Skeuomorphism
Similarity + Proximity + Closure

Gestalt Laws | Affordances | Skeuomorphism
Affordance
!

A property of an object, or an
environment, which allows an
individual to perform an action.
action
that is ...
Gestalt Laws | Affordances | Skeuomorphism
Gestalt Laws | Affordances | Skeuomorphism
“Does the user perceive that
clicking on that location is
a meaningful, useful action
to perform?”
Donald Norman

Gestalt ...
Skeuomorph
!

A derivative object that retains
ornamental design cues to a
structure that were functionally

necessary in ...
Rear Door

Front Door

Gestalt Laws | Affordances | Skeuomorphism
Gestalt Laws | Affordances | Skeuomorphism
Don’t Make Me Think!

Steve Krug

Gestalt Laws | Affordances | Skeuomorphism
“That’s a button!”
OS X 10.9

“Looks like a button.”
Windows 8

“Is that a button?”
iOS 7

Slide inspired by Eric Reiss
Examples
Buttons

Gestalt Laws | Affordances | Skeuomorphism
Tweetlogix
Notes
“ Does the user perceive that
clicking on that location is a
meaningful, useful action to
perform?”

Donald Norman

Source...
Examples
Buttons
Icons

Gestalt Laws | Affordances | Skeuomorphism
Share Panel in Safari
“That’s a book!”
“Looks like a book.”
“Is that a book?”
“Huh?!”
iBooks

Passbook

Notes

Game Center

Reminders

Voice Memos
Examples
Buttons
Icons
Barrel Widget

Gestalt Laws | Affordances | Skeuomorphism
Calendar
Examples
Buttons
Icons
Barrel Widget
Hidden Functions
Gestalt Laws | Affordances | Skeuomorphism
Search Field in iBooks
Podcasts
“ Does the user perceive that
clicking on that location is a
meaningful, useful action to
perform?”

Donald Norman

Source...
Gestalt Laws
Affordances
Skeuomorphism
help create meaningful:
Structure
Discoverability
Knowledge Transfer
Donald P. Norman

The Design of
Everyday Things
Questions
& Answers,
Spirited Discussion
Thank you!
!

Jochen Wolters
@jochenWolters
!

jochen@uiobservatory.com
Prochain SlideShare
Chargement dans…5
×

What was Apple thinking?

998 vues

Publié le

A completely subjective list of problems with the User Interface of Apple' iOS 7 mobile operating system, based on a quick recap of the fundamental design concepts of Gestalt Laws, affordances, and skeumorphism.

Publié dans : Design
  • Soyez le premier à commenter

What was Apple thinking?

  1. 1. What was Apple thinking? ! Jochen Wolters @jochenWolters
  2. 2. Gestalt Laws | Affordances | Skeuomorphism
  3. 3. Gestalt ! The essence or shape of an entity’s complete form. Gestalt Laws | Affordances | Skeuomorphism Source: Wikipedia
  4. 4. Sniff, Sniff… Gestalt Laws | Affordances | Skeuomorphism Image by R. C. James
  5. 5. Similarity Gestalt Laws | Affordances | Skeuomorphism
  6. 6. Proximity Gestalt Laws | Affordances | Skeuomorphism
  7. 7. Closure Gestalt Laws | Affordances | Skeuomorphism
  8. 8. Similarity + Proximity + Closure Gestalt Laws | Affordances | Skeuomorphism
  9. 9. Affordance ! A property of an object, or an environment, which allows an individual to perform an action. action that is readily perceivable. Gestalt Laws | Affordances | Skeuomorphism Source: Wikipedia
  10. 10. Gestalt Laws | Affordances | Skeuomorphism
  11. 11. Gestalt Laws | Affordances | Skeuomorphism
  12. 12. “Does the user perceive that clicking on that location is a meaningful, useful action to perform?” Donald Norman Gestalt Laws | Affordances | Skeuomorphism Source: http://www.jnd.org/dn.mss/affordances_and.html
  13. 13. Skeuomorph ! A derivative object that retains ornamental design cues to a structure that were functionally
 necessary in the original. Gestalt Laws | Affordances | Skeuomorphism Source: Wikipedia
  14. 14. Rear Door Front Door Gestalt Laws | Affordances | Skeuomorphism
  15. 15. Gestalt Laws | Affordances | Skeuomorphism
  16. 16. Don’t Make Me Think! Steve Krug Gestalt Laws | Affordances | Skeuomorphism
  17. 17. “That’s a button!” OS X 10.9 “Looks like a button.” Windows 8 “Is that a button?” iOS 7 Slide inspired by Eric Reiss
  18. 18. Examples Buttons Gestalt Laws | Affordances | Skeuomorphism
  19. 19. Tweetlogix
  20. 20. Notes
  21. 21. “ Does the user perceive that clicking on that location is a meaningful, useful action to perform?” Donald Norman Source: http://www.jnd.org/dn.mss/affordances_and.html
  22. 22. Examples Buttons Icons Gestalt Laws | Affordances | Skeuomorphism
  23. 23. Share Panel in Safari
  24. 24. “That’s a book!” “Looks like a book.” “Is that a book?” “Huh?!”
  25. 25. iBooks Passbook Notes Game Center Reminders Voice Memos
  26. 26. Examples Buttons Icons Barrel Widget Gestalt Laws | Affordances | Skeuomorphism
  27. 27. Calendar
  28. 28. Examples Buttons Icons Barrel Widget Hidden Functions Gestalt Laws | Affordances | Skeuomorphism
  29. 29. Search Field in iBooks
  30. 30. Podcasts
  31. 31. “ Does the user perceive that clicking on that location is a meaningful, useful action to perform?” Donald Norman Source: http://www.jnd.org/dn.mss/affordances_and.html
  32. 32. Gestalt Laws Affordances Skeuomorphism help create meaningful: Structure Discoverability Knowledge Transfer
  33. 33. Donald P. Norman The Design of Everyday Things
  34. 34. Questions & Answers, Spirited Discussion
  35. 35. Thank you! ! Jochen Wolters @jochenWolters ! jochen@uiobservatory.com

×