designing for your mom
Post on 18-Oct-2014
2.348 views
DESCRIPTION
Learn to design for the not-so-tech-savvy generationTRANSCRIPT
Andi Galpern, UI/UX Strategist @andigalpern @cascadesf #uxnight
Designing For Your MomLearn how to design for the not-so-tech-savvy generation
Please meet my mom, Staci Galpern
She lives in Hollywood, FL.
She worked at an elementary school for 25+ years.
She adores her family.
She loves to travel.
She really treasures an exceptional travel deal.
She types with two fingers...
And she finds this mess...
Yes. We are actually going to talk about design.
I’m not sure where to start.
Apply W3C accessibility guidelines and Gestalt principles to create the ultimate user experience.
Accessibility Guidelines http://www.w3.org/TR/WCAG20/
Gestalt Principles Visual perception theories established in the 1920s
Gestalt Principles
• Proximity
• Continuity
• Similarity
• Figure/Ground
• Closure
Gestalt Principles
• Proximity
• Continuity
• Similarity
• Figure/Ground
Proximity Where items are placed in relationship to one another
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.
Poor use of gradients.
Proximity If it is not clickable, don’t make it look like a button.
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.
Left-Aligned Labels
to the Left of Input Fields1 Right-Aligned Labels
to the Left of Input Fields2 Left-Aligned Labels
Above Input Fields3500 ms
User Study: UX Matters http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
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 Fields3240 ms
Left-Aligned Labels
to the Left of Input Fields1 Right-Aligned Labels
to the Left of Input Fields2 Left-Aligned Labels
Above Input Fields350 ms
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 Fields350 ms240 ms500 ms
User Study: UX Matters http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Continuity Create the easiest path for the user
Where do I pick the date?
Continuity Create the easiest path for the user
Continuity Create the easiest path for the user
Continuity Make it easy on the eye
Similiarity Use repeating elements so people understand what they do
Which brands do these buttons belong to?
Flickr Pinterest
Twitter Facebook
The Button Test https://medium.com/design-ux/77eb4f9a439d
I can’t read this site!
Accessibility & Text Use the 80 character rule to keep text easily scannable.
Accessibility & TextExcept for captions and images of text,
text can be resized without assistive
technology up to 200 percent without loss of
content or functionality.
Perfect Typography http://www.pearsonified.com/typography
Accessibility & Text
Do not save text as images
Accessibility & Text
With CSS3 we can create gradients, import
fonts, add shadows, rotate, and more.
Woohoo!
Use CSS instead of an image
Figure/Ground Use contrast to separate items
On focus Use contrasting states so the user knows where they are
On focus Use contrasting states so the user knows where they are
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
Gestalt Principles
• Proximity
• Continuity
• Similarity
• Figure/Ground
• Closure
Every design choice needs to serve a clear purpose.
Our goal is for everyone to understand the point of the site immediately.
Including my mom
My Mom
Me
