1. Cognitive Elements of an Effective UI/UX Design Shabnam Shahfar

2. @ShabnamShahfar
www.protegra.com
Shabnam Shahfar

3. Topics
•Human Centered Design
•UI/UX Design
•Design Principals
•Vision
•Attention
•Memory

4. Design
“Few people think about it or are aware of it. But there is nothing made by human beings that does not involve a design decision somewhere.” — Bill Moggridge
4

5. Design
“The world does not understand design”
-Don Norman
5

6. Design
•Good design starts with an understanding of psychology and technology.
•Good designers ask why
6

7. Areas of Design
•Industrial
•Experience
•Interaction
•Artistic
7

8. Human Centered Design
•HCD is a design philosophy.
•It means starting with a good understanding of people and the needs that the design is intended to meet.
8

9. YOU ARE NOT
EVERYONE!

10. What is User Experience (UX) Design?
10
UX vs. UI

11. Design
Two of the most important characteristics of a good design are:
•Discoverability
•Understanding
11

12. Discoverability
12

13. Affordance & Signifier
•Affordance is a relationship between the properties of an object and a person, e.g, a chair affords sitting.
•Signifier is the signal or clues that helps users find possible actions.
13

14. Signifier
14

15. Feedback
15

16. Conceptual Model
16

17. Human Error?!
17

18. Human Visual Perception
What you see is not what it is!

19. 19

20. 20

21. 21

22. 22

23. 23

24. Foveal vs. Peripheral vision

25. V U Y

26. Y U V

27. Eye tracking

28. Eye movements
How do we know where to look when presented with an image?

29. 29
Foveal vs. Peripheral vision

30. 30
Foveal vs. Peripheral vision

31. 31
Foveal vs. Peripheral vision

32. 32
Foveal vs. Peripheral vision

33. Gestalt Psychology
33
The human eye sees objects in their entirety before perceiving their individual parts

34. 34

35. Gestalt Laws of Grouping
•Law of proximity
•Law of closure
•Law of similarity
35

36. Law of Proximity
36

37. Law of Proximity
37

38. Law of Similarity
38

39. Law of Similarity
39

40. Law of Similarity
40

41. 41

42. Law of Closure
42

43. Law of Closure
43

44. 44

45. Color
•Primary color to enhance your branding
•Accent color is to provide contrast for important buttons and UI elements and components
45

46. Color
•Use color to unite user experience across multiple platforms and multiple devices
46

47. Protanopia
No red cones
Deuteranopia No green cones
Tritanopia
No blue cones
Normal vision

48. Color deficiency
48

49. 49

50. 50

51. Attention
•“The addictive nature of web browsing can leave you with an attention span of nine seconds – the same as a goldfish” *
* BBC in 2002
51

52. 52

53. 53

54. 54

55. 55

59. Memory
Working Memory Long Term Memory
59

60. Cognitive Load
60
Just like computers, human brains have a limited amount of processing power

61. Cognitive Load
61
Average person is able to hold only 7+/- 2 units of information in short-term memory
- Cognitive psychologist George A. Miller, Princeton University [1956]

62. Minimizing Cognitive Load
•Avoid visual clutter
•Build on existing mental models
•Offload tasks
62

64. 64
@ShabnamShahfar
www.protegra.com
Shabnam Shahfar

65. Credits
Design of every day things, Don Norman
Don’t make me think, Steve Krug
http://www.webexhibits.org/colorart/ag.html
http://en.wikipedia.org/wiki/Foveal
http://www.smashingmagazine.com/2014/03/28/design-principles-visual- perception-and-the-principles-of-gestalt/
http://ddriscollfnd111.wordpress.com/design-tips/gestalt-theory-for-designers/
https://developers.google.com/events/io/sessions/326460111
http://en.wikipedia.org/wiki/Cognitive_load
http://www.nngroup.com/articles/minimize-cognitive-load/
http://en.wikipedia.org/wiki/Attention
http://news.bbc.co.uk/2/hi/science/nature/1834682.stm
http://www.nngroup.com/articles/definition-user-experience/
http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
65