ux tools, tips & tricks for code(her) conference 2015
TRANSCRIPT
User Experiencetools, tips, & tricks
Katelyn CaillouetUX Designer, Organizer of District UX Book Club
WHAT WE WILL COVER
Usability heuristics Content guidelines
Delivering better feedback
Desktop vs. mobile designCreating personas
Usability Heuristics
Heuristic = an expert’s opinion on the best way to do something
Broad rule of thumb – not a specific guideline
Jacob Nielsen’s 10 usability heuristics for UI design
Jacob Nielsen’s10 Usability Heuristics
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
Color change: goodSame verbiage: bad
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.My suggestion: change to a check mark icon for the terms “remind me”
Or keeping star icon, change to term to favorite and store “favorites” on a
separate page.
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
Different phrases
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
Different phrases
Different syllables
3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to expand
3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to contract
4. CONSISTENCY & Standards
Don’t confuse your user – keep words & actions consistent.
5. Error Prevention
Prevent problems from occurring with confirmation messages.
6. RECOGNIZE RATHER THAN RECALLMake objects & actions available.
Instructions should be visible.
7. Flexibility & Efficiency of use
Allow users to manipulate & personalize frequent actions.
8. Aesthetic & Minimalist design
All information should be valuable and relevant.
9. Help users recognize, Diagnose & Recover from errorsError messages should be in plain language, indicate the problem, and constructively suggest a solution.
NOPE.Sure.
From Mail Chimp Voice & Tone
10. Help & Documentation
Any help information should be easy to search, focused, list concrete steps, and not be too large.
CONTENTguidelines
CONTENT FIRST
Content is king.
Content is what users come for. Content is what users want to access.
Design is nothing without content.
CONTENT FIRST
Content is king.
Content is what users come for. Content is what users want to access.
Design is nothing without content.
CONTENT FIRST
People come for the content, but stay for good design.
Users are more likely to trust your content if it’s well-designed.
CONTENT GUIDELINES
Clear & concise voice.
Keep it simple.
Make it useful.
An example of what not to do; vague, no useful information, and annoying.
CREATINGpersonas
EMPATHY IN User Interfaces
Be aware of cognitive biases.
Practice empathy.
You are not your user.
Personas
A way to empathize with and internalize the mindset of people that will eventually use the software we design.
Take a walk in your users’ shoes.
More than one persona is best – try 3-4(depending on project scope)
Name: SamAge: 37Occupation: Live musician
Persona
• Tech-connected
• On-the-go lifestyle
• Dad
• Wants to access health info quickly & efficiently
SAM, 37
• An internet retailer
• Wants a modern, minimalist, exclusive, luxury vibe
• Targeting early 20’s-late 30’s fashion forward men & women
We’re designing FoR...
TARGET USER: early 20’s-late 30’s fashion forward men & women
COME UP with a Persona!
NameAge
Occupation Location
AttitudesValuesSkills
Behaviors GoalsNeeds
COME UP with a Persona!
TARGET USER: early 20’s-late 30’s fashion forward men & women
What are your goals in designing for this target user?
What kind of experience do you need to create?
What kind of tone should your content have?
Now that you have a persona...
Example Goals (for our internet retailer)
1 2 3The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store.
The “Buy Now” call-to-action button needs to stand out most on the page.
Content on the page should reflect the high-end aesthetic we are trying to achieve.
Come up with 3 goals for your site!
1 2 3The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store.
The “Buy Now” call-to-action button needs to stand out most on the page.
Content on the page should reflect the high-end aesthetic we are trying to achieve.
Desktop vs. Mobiledifferent experiences
MOBILE vs. DESKTOP
“Mobile first” – “mobile only”
Mobile is under extreme space & content constraints.
Constraints are good for design.
Responsive design > Static design
MOBILE First Process
MOBILE TOUCHPOINTS
Bigger touch points are generally better.
Leave enough space between touch points.
MOBILE TOUCHPOINTS
“designing for thumbs”
Large smartphones have taken over!
More on Luke W.
Burger bar – becoming less common
If <5 options, avoid burger bar(more interaction with nav bar)
MOBILE MENUS
Redbooth removed their burger menu out & saw session time jump 70%
DESIGN Tips
More space = more whitespace
Use it well – let your elementsbreathe
not always white
DESIGN Tips
More space = more whitespace
Don’t overwhelm user with too much information
Use color to call out important information(“call to action”)
DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much information
DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much informationcall-to-action
whitespace
simple navigation
recommendations (less important) below
Mobile DESIGN
Mobile DESIGN
call-to-action
simple navigation made easy transition to mobile
simplified recommendations
Let’s Make a sketch Prototype!
But I can’t draw! If you can draw a line,
you can sketch a prototype.
Let’s Make a sketch Prototype!
Deliveringbetter feedback
When your client gives the feedback, “I don’t like it.”
Like is not a part of thecritical thinker’s
vocabulary.
- Erika HallJust Enough Research
But...we need to help Guide feedback
Give people time to look over your work.
But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store.
The “Buy Now” call-to-action button needs to stand out most on the page.
Content on the page should reflect the high-end aesthetic we are trying to achieve.
But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store.
The “Buy Now” call-to-action button needs to stand out most on the page.
Content on the page should reflect the high-end aesthetic we are trying to achieve.
But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store.
The “Buy Now” call-to-action button needs to stand out most on the page.
Content on the page should reflect the high-end aesthetic we are trying to achieve.
Try giving feedback!
Exchange a prototype with someone nearby. Does the prototype achieve the goals he/she set? Is it on the right track?
To recap• Keep content clear & simple
• Content first will save you time – press for more content
• Set constraints
• You are not your user – practice empathy with personas
• Utilize white space
• Use color to encourage actions
RESOURCES FOR YOU
• User Onboard – a breakdown of how popular apps/site onboard users
• Dribbble for design inspiration
• Persona – a photography project that’s helpful for developing personas
• A Book Apart series if you want some easy reading
• Design Review Podcast – UX principles applied to a UI review
UX in the DC community
UX in the DC community
Join our Slack channel!Email [email protected]
Follow us on Twitter for book club updates: @DistrictUX
Join us once a month at TrackMaven for our events!
questions?Ask them now.
Thank you!DC Web Women &
Code(Her) Attendees