Designing For Your Mom

2,988 views

Published on

Learn to design for the not-so-tech-savvy generation

Published in: Design, Technology, Business
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,988
On SlideShare
0
From Embeds
0
Number of Embeds
243
Actions
Shares
0
Downloads
32
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Designing For Your Mom

  1. 1. Andi Galpern, UI/UX Strategist@andigalpern @cascadesf #uxnightDesigningFor Your MomLearn how to design for the not-so-tech-savvy generation
  2. 2. Please meet my mom,Staci Galpern
  3. 3. She lives in Hollywood, FL.
  4. 4. She worked at an elementaryschool for 25+ years.
  5. 5. She adores her family.
  6. 6. She loves to travel.
  7. 7. She really treasuresan exceptional travel deal.
  8. 8. She types with two fingers...
  9. 9. And she finds this mess...
  10. 10. Yes. We are actually goingto talk about design.
  11. 11. I’m not surewhere to start.
  12. 12. Apply W3C accessibility guidelinesand Gestalt principles to createthe ultimate user experience.Accessibility Guidelineshttp://www.w3.org/TR/WCAG20/
  13. 13. Gestalt PrinciplesVisual perception theoriesestablished in the 1920s
  14. 14. Gestalt Principles• Proximity• Continuity• Similarity• Figure/Ground• Closure
  15. 15. Gestalt Principles• Proximity• Continuity• Similarity• Figure/Ground
  16. 16. ProximityWhere items are placed in relationship to one another
  17. 17. ProximityThe closer the items are to each other, the more likelythey will be seen as a group.A headline should behave like a headline.
  18. 18. Poor use of gradients.ProximityIf it is not clickable, don’t make it look like a button.
  19. 19. Where are you visiting?San Francisco, CACheck-In:08/01/2013Check-Out:08/08/2013 1Rooms:Find me a great deal!ProximityGroup related content together so the user knowsEXACTLY what to do.
  20. 20. Left-Aligned Labelsto the Left of Input Fields1Right-Aligned Labelsto the Left of Input Fields2Left-Aligned LabelsAbove Input Fields3500 msUser Study: UX Mattershttp://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  21. 21. User Study: UX Mattershttp://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.phpLeft-Aligned Labelsto the Left of Input Fields1Right-Aligned Labelsto the Left of Input Fields2Left-Aligned LabelsAbove Input Fields3240 ms
  22. 22. Left-Aligned Labelsto the Left of Input Fields1Right-Aligned Labelsto the Left of Input Fields2Left-Aligned LabelsAbove Input Fields350 msUser Study: UX Mattershttp://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  23. 23. Left-Aligned Labelsto the Left of Input Fields1Right-Aligned Labelsto the Left of Input Fields2Left-Aligned LabelsAbove Input Fields350 ms240 ms500 msUser Study: UX Mattershttp://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  24. 24. ContinuityCreate the easiest path for the user
  25. 25. Where do Ipick the date?
  26. 26. ContinuityCreate the easiest path for the user
  27. 27. ContinuityCreate the easiest path for the user
  28. 28. ContinuityMake it easy on the eye
  29. 29. SimiliarityUse repeating elements so people understand what they doWhich brands do these buttons belong to?
  30. 30. GoogleFlickr PinterestTwitter Facebook
  31. 31. The Button Testhttps://medium.com/design-ux/77eb4f9a439d
  32. 32. I can’t readthis site!
  33. 33. Accessibility & TextUse the 80 character rule to keep text easily scannable.
  34. 34. Accessibility & TextExcept for captions and images of text,text can be resized without assistivetechnology up to 200 percent without loss ofcontent or functionality.
  35. 35. Perfect Typographyhttp://www.pearsonified.com/typography
  36. 36. Accessibility & TextDo not save text as images
  37. 37. Accessibility & Text
  38. 38. With CSS3 we can create gradients, importfonts, add shadows, rotate, and more.Woohoo!Use CSS instead of an image
  39. 39. Figure/GroundUse contrast to separate items
  40. 40. On focusUse contrasting states so the user knows where they are
  41. 41. On focusUse contrasting states so the user knows where they are
  42. 42. Contrast and Meaning Articlehttp://alistapart.com/article/contrastandmeaning matters.com/mt/archives/2006/07/label-placement-in-forms.php“ Simply put, contrast is at theroot of almost everything you’llaccomplish with design.”- ANDY RUTLEDGE
  43. 43. Gestalt Principles• Proximity• Continuity• Similarity• Figure/Ground• Closure
  44. 44. Every design choice needsto serve a clear purpose.
  45. 45. Our goal is for everyone tounderstand the point of thesite immediately.
  46. 46. Including my mom
  47. 47. My Mom
  48. 48. Me

×