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

1. Andi Galpern, UI/UX Strategist
@andigalpern @cascadesf #uxnight
Designing
For Your Mom
Learn 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 elementary
school for 25+ years.

5. She adores her family.

6. She loves to travel.

7. She really treasures
an exceptional travel deal.

9. She types with two fingers...

11. And she finds this mess...

13. Yes. We are actually going
to talk about design.

15. I’m not sure
where to start.

16. Apply W3C accessibility guidelines
and Gestalt principles to create
the ultimate user experience.
Accessibility Guidelines
http://www.w3.org/TR/WCAG20/

17. Gestalt Principles
Visual perception theories
established in the 1920s

18. Gestalt Principles
• Proximity
• Continuity
• Similarity
• Figure/Ground
• Closure

19. Gestalt Principles
• Proximity
• Continuity
• Similarity
• Figure/Ground

20. Proximity
Where items are placed in relationship to one another

21. Proximity
The closer the items are to each other, the more likely
they will be seen as a group.
A headline should behave like a headline.

22. Poor use of gradients.
Proximity
If it is not clickable, don’t make it look like a button.

23. Where are you visiting?
San Francisco, CA
Check-In:
08/01/2013
Check-Out:
08/08/2013 1
Rooms:
Find me a great deal!
Proximity
Group related content together so the user knows
EXACTLY what to do.

24. Left-Aligned Labels
to the Left of Input Fields1
Right-Aligned Labels
to the Left of Input Fields2
Left-Aligned Labels
Above Input Fields3
500 ms
User Study: UX Matters
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

25. User Study: UX Matters
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Left-Aligned Labels
to the Left of Input Fields1
Right-Aligned Labels
to the Left of Input Fields2
Left-Aligned Labels
Above Input Fields3
240 ms

26. Left-Aligned Labels
to the Left of Input Fields1
Right-Aligned Labels
to the Left of Input Fields2
Left-Aligned Labels
Above Input Fields3
50 ms
User Study: UX Matters
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

27. Left-Aligned Labels
to the Left of Input Fields1
Right-Aligned Labels
to the Left of Input Fields2
Left-Aligned Labels
Above Input Fields3
50 ms240 ms500 ms
User Study: UX Matters
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

28. Continuity
Create the easiest path for the user

29. Where do I
pick the date?

30. Continuity
Create the easiest path for the user

31. Continuity
Create the easiest path for the user

32. Continuity
Make it easy on the eye

33. Similiarity
Use repeating elements so people understand what they do
Which brands do these buttons belong to?

34. Google
Flickr Pinterest
Twitter Facebook

35. The Button Test
https://medium.com/design-ux/77eb4f9a439d

36. I can’t read
this site!

37. Accessibility & Text
Use the 80 character rule to keep text easily scannable.

38. Accessibility & Text
Except for captions and images of text,
text can be resized without assistive
technology up to 200 percent without loss of
content or functionality.

39. Perfect Typography
http://www.pearsonified.com/typography

40. Accessibility & Text
Do not save text as images

41. Accessibility & Text

42. With CSS3 we can create gradients, import
fonts, add shadows, rotate, and more.
Woohoo!
Use CSS instead of an image

43. Figure/Ground
Use contrast to separate items

44. On focus
Use contrasting states so the user knows where they are

45. On focus
Use contrasting states so the user knows where they are

46. Contrast and Meaning Article
http://alistapart.com/article/contrastandmeaning matters.com/mt/archives/2006/07/label-
placement-in-forms.php
“ Simply put, contrast is at the
root of almost everything you’ll
accomplish with design.”
- ANDY RUTLEDGE

47. Gestalt Principles
• Proximity
• Continuity
• Similarity
• Figure/Ground
• Closure

48. Every design choice needs
to serve a clear purpose.

49. Our goal is for everyone to
understand the point of the
site immediately.

50. Including my mom

51. My Mom

52. Me