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.

Cognitive elements of an effective UI/UX design

2,825 views

Published on

In this session we will talk about some of the design principals based on psychology and the cognitive science. We will look at the human perception and its implications for an interactive and effective visual design. You will learn some of the recent findings of cognitive science research that can help in creating a better UI/UX design for your mobile and web applications.

Published in: Design

Cognitive elements of an effective UI/UX design

  1. 1. Cognitive Elements of an Effective UI/UX Design Shabnam Shahfar
  2. 2. @ShabnamShahfar www.protegra.com Shabnam Shahfar
  3. 3. Topics •Human Centered Design •UI/UX Design •Design Principals •Vision •Attention •Memory
  4. 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. 5. Design “The world does not understand design” -Don Norman 5
  6. 6. Design •Good design starts with an understanding of psychology and technology. •Good designers ask why 6
  7. 7. Areas of Design •Industrial •Experience •Interaction •Artistic 7
  8. 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. 9. YOU ARE NOT EVERYONE!
  10. 10. What is User Experience (UX) Design? 10 UX vs. UI
  11. 11. Design Two of the most important characteristics of a good design are: •Discoverability •Understanding 11
  12. 12. Discoverability 12
  13. 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. 14. Signifier 14
  15. 15. Feedback 15
  16. 16. Conceptual Model 16
  17. 17. Human Error?! 17
  18. 18. Human Visual Perception What you see is not what it is!
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. 23
  24. 24. Foveal vs. Peripheral vision
  25. 25. V U Y
  26. 26. Y U V
  27. 27. Eye tracking
  28. 28. Eye movements How do we know where to look when presented with an image?
  29. 29. 29 Foveal vs. Peripheral vision
  30. 30. 30 Foveal vs. Peripheral vision
  31. 31. 31 Foveal vs. Peripheral vision
  32. 32. 32 Foveal vs. Peripheral vision
  33. 33. Gestalt Psychology 33 The human eye sees objects in their entirety before perceiving their individual parts
  34. 34. 34
  35. 35. Gestalt Laws of Grouping •Law of proximity •Law of closure •Law of similarity 35
  36. 36. Law of Proximity 36
  37. 37. Law of Proximity 37
  38. 38. Law of Similarity 38
  39. 39. Law of Similarity 39
  40. 40. Law of Similarity 40
  41. 41. 41
  42. 42. Law of Closure 42
  43. 43. Law of Closure 43
  44. 44. 44
  45. 45. Color •Primary color to enhance your branding •Accent color is to provide contrast for important buttons and UI elements and components 45
  46. 46. Color •Use color to unite user experience across multiple platforms and multiple devices 46
  47. 47. Protanopia No red cones Deuteranopia No green cones Tritanopia No blue cones Normal vision
  48. 48. Color deficiency 48
  49. 49. 49
  50. 50. 50
  51. 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. 52
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. Memory Working Memory Long Term Memory 59
  57. 57. Cognitive Load 60 Just like computers, human brains have a limited amount of processing power
  58. 58. 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]
  59. 59. Minimizing Cognitive Load •Avoid visual clutter •Build on existing mental models •Offload tasks 62
  60. 60. 64 @ShabnamShahfar www.protegra.com Shabnam Shahfar
  61. 61. 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

×