The document explores concepts related to design including Gestalt laws, affordances, and skeuomorphism. It emphasizes the importance of user perception in determining the usability of design elements like buttons and icons. The content references various sources and experts to support these concepts in the context of user experience design.

1. What was Apple thinking?
!
Jochen Wolters
@jochenWolters

2. Gestalt Laws | Affordances | Skeuomorphism

3. Gestalt
!
The essence or shape of an
entity’s complete form.
Gestalt Laws | Affordances | Skeuomorphism
Source: Wikipedia

4. Sniff,
Sniff…
Gestalt Laws | Affordances | Skeuomorphism
Image by R. C. James

5. Similarity
Gestalt Laws | Affordances | Skeuomorphism

6. Proximity
Gestalt Laws | Affordances | Skeuomorphism

7. Closure
Gestalt Laws | Affordances | Skeuomorphism

8. Similarity + Proximity + Closure
Gestalt Laws | Affordances | Skeuomorphism

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. Gestalt Laws | Affordances | Skeuomorphism

11. Gestalt Laws | Affordances | Skeuomorphism

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. 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. Rear Door
Front Door
Gestalt Laws | Affordances | Skeuomorphism

15. Gestalt Laws | Affordances | Skeuomorphism

16. Don’t Make Me Think!
Steve Krug
Gestalt Laws | Affordances | Skeuomorphism

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. Examples
Buttons
Gestalt Laws | Affordances | Skeuomorphism

19. Tweetlogix

20. Notes

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. Examples
Buttons
Icons
Gestalt Laws | Affordances | Skeuomorphism

23. Share Panel in Safari

24. “That’s a book!”
“Looks like a book.”
“Is that a book?”
“Huh?!”

25. iBooks
Passbook
Notes
Game Center
Reminders
Voice Memos

26. Examples
Buttons
Icons
Barrel Widget
Gestalt Laws | Affordances | Skeuomorphism

27. Calendar

28. Examples
Buttons
Icons
Barrel Widget
Hidden Functions
Gestalt Laws | Affordances | Skeuomorphism

29. Search Field in iBooks

30. Podcasts

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. Gestalt Laws
Affordances
Skeuomorphism
help create meaningful:
Structure
Discoverability
Knowledge Transfer

33. Donald P. Norman
The Design of
Everyday Things

34. Questions
& Answers,
Spirited Discussion

35. Thank you!
!
Jochen Wolters
@jochenWolters
!
jochen@uiobservatory.com