Designing For Your Mom

  • 2,287 views
Uploaded on

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

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

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,287
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
15
Comments
3
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Andi Galpern, UI/UX Strategist@andigalpern @cascadesf #uxnightDesigningFor Your MomLearn how to design for the not-so-tech-savvy generation
  • 2. Please meet my mom,Staci Galpern
  • 3. She lives in Hollywood, FL.
  • 4. She worked at an elementaryschool for 25+ years.
  • 5. She adores her family.
  • 6. She loves to travel.
  • 7. She really treasuresan exceptional travel deal.
  • 8. She types with two fingers...
  • 9. And she finds this mess...
  • 10. Yes. We are actually goingto talk about design.
  • 11. I’m not surewhere to start.
  • 12. Apply W3C accessibility guidelinesand Gestalt principles to createthe ultimate user experience.Accessibility Guidelineshttp://www.w3.org/TR/WCAG20/
  • 13. Gestalt PrinciplesVisual perception theoriesestablished in the 1920s
  • 14. Gestalt Principles• Proximity• Continuity• Similarity• Figure/Ground• Closure
  • 15. Gestalt Principles• Proximity• Continuity• Similarity• Figure/Ground
  • 16. ProximityWhere items are placed in relationship to one another
  • 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. Poor use of gradients.ProximityIf it is not clickable, don’t make it look like a button.
  • 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. 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. 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. 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. 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. ContinuityCreate the easiest path for the user
  • 25. Where do Ipick the date?
  • 26. ContinuityCreate the easiest path for the user
  • 27. ContinuityCreate the easiest path for the user
  • 28. ContinuityMake it easy on the eye
  • 29. SimiliarityUse repeating elements so people understand what they doWhich brands do these buttons belong to?
  • 30. GoogleFlickr PinterestTwitter Facebook
  • 31. The Button Testhttps://medium.com/design-ux/77eb4f9a439d
  • 32. I can’t readthis site!
  • 33. Accessibility & TextUse the 80 character rule to keep text easily scannable.
  • 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. Perfect Typographyhttp://www.pearsonified.com/typography
  • 36. Accessibility & TextDo not save text as images
  • 37. Accessibility & Text
  • 38. With CSS3 we can create gradients, importfonts, add shadows, rotate, and more.Woohoo!Use CSS instead of an image
  • 39. Figure/GroundUse contrast to separate items
  • 40. On focusUse contrasting states so the user knows where they are
  • 41. On focusUse contrasting states so the user knows where they are
  • 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. Gestalt Principles• Proximity• Continuity• Similarity• Figure/Ground• Closure
  • 44. Every design choice needsto serve a clear purpose.
  • 45. Our goal is for everyone tounderstand the point of thesite immediately.
  • 46. Including my mom
  • 47. My Mom
  • 48. Me