UX Tools, Tips & Tricks for Code(Her) Conference 2015
-
Upload
katelyn-caillouet -
Category
Design
-
view
14.102 -
download
0
Transcript of UX Tools, Tips & Tricks for Code(Her) Conference 2015
![Page 1: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/1.jpg)
User Experiencetools, tips, & tricks
Katelyn CaillouetUX Designer, Organizer of District UX Book Club
![Page 2: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/2.jpg)
WHAT WE WILL COVER
Usability heuristics Content guidelines
Delivering better feedback
Desktop vs. mobile designCreating personas
![Page 3: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/3.jpg)
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
![Page 4: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/4.jpg)
Jacob Nielsen’s10 Usability Heuristics
![Page 5: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/5.jpg)
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
![Page 6: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/6.jpg)
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
![Page 7: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/7.jpg)
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
Color change: goodSame verbiage: bad
![Page 8: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/8.jpg)
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.
![Page 9: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/9.jpg)
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
![Page 10: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/10.jpg)
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
![Page 11: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/11.jpg)
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
![Page 12: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/12.jpg)
2. MATCH BETWEEN SYSTEM & REAL WORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
Different phrases
![Page 13: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/13.jpg)
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
![Page 14: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/14.jpg)
3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to expand
![Page 15: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/15.jpg)
3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to contract
![Page 16: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/16.jpg)
4. CONSISTENCY & Standards
Don’t confuse your user – keep words & actions consistent.
![Page 17: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/17.jpg)
5. Error Prevention
Prevent problems from occurring with confirmation messages.
![Page 18: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/18.jpg)
6. RECOGNIZE RATHER THAN RECALLMake objects & actions available.
Instructions should be visible.
![Page 19: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/19.jpg)
7. Flexibility & Efficiency of use
Allow users to manipulate & personalize frequent actions.
![Page 20: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/20.jpg)
8. Aesthetic & Minimalist design
All information should be valuable and relevant.
![Page 21: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/21.jpg)
9. Help users recognize, Diagnose & Recover from errorsError messages should be in plain language, indicate the problem, and constructively suggest a solution.
NOPE.Sure.
![Page 22: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/22.jpg)
From Mail Chimp Voice & Tone
![Page 23: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/23.jpg)
10. Help & Documentation
Any help information should be easy to search, focused, list concrete steps, and not be too large.
![Page 24: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/24.jpg)
CONTENTguidelines
![Page 25: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/25.jpg)
CONTENT FIRST
Content is king.
Content is what users come for. Content is what users want to access.
Design is nothing without content.
![Page 26: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/26.jpg)
CONTENT FIRST
Content is king.
Content is what users come for. Content is what users want to access.
Design is nothing without content.
![Page 27: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/27.jpg)
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.
![Page 28: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/28.jpg)
CONTENT GUIDELINES
Clear & concise voice.
Keep it simple.
Make it useful.
An example of what not to do; vague, no useful information, and annoying.
![Page 29: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/29.jpg)
CREATINGpersonas
![Page 30: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/30.jpg)
EMPATHY IN User Interfaces
Be aware of cognitive biases.
Practice empathy.
You are not your user.
![Page 31: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/31.jpg)
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)
![Page 32: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/32.jpg)
Name: SamAge: 37Occupation: Live musician
Persona
![Page 33: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/33.jpg)
• Tech-connected
• On-the-go lifestyle
• Dad
• Wants to access health info quickly & efficiently
SAM, 37
![Page 34: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/34.jpg)
• 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...
![Page 35: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/35.jpg)
TARGET USER: early 20’s-late 30’s fashion forward men & women
COME UP with a Persona!
NameAge
Occupation Location
AttitudesValuesSkills
Behaviors GoalsNeeds
![Page 36: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/36.jpg)
COME UP with a Persona!
TARGET USER: early 20’s-late 30’s fashion forward men & women
![Page 37: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/37.jpg)
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...
![Page 38: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/38.jpg)
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.
![Page 39: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/39.jpg)
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.
![Page 40: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/40.jpg)
Desktop vs. Mobiledifferent experiences
![Page 41: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/41.jpg)
MOBILE vs. DESKTOP
“Mobile first” – “mobile only”
Mobile is under extreme space & content constraints.
Constraints are good for design.
Responsive design > Static design
![Page 42: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/42.jpg)
MOBILE First Process
![Page 43: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/43.jpg)
MOBILE TOUCHPOINTS
Bigger touch points are generally better.
Leave enough space between touch points.
![Page 44: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/44.jpg)
MOBILE TOUCHPOINTS
“designing for thumbs”
Large smartphones have taken over!
More on Luke W.
![Page 45: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/45.jpg)
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%
![Page 46: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/46.jpg)
DESIGN Tips
More space = more whitespace
Use it well – let your elementsbreathe
not always white
![Page 47: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/47.jpg)
DESIGN Tips
More space = more whitespace
Don’t overwhelm user with too much information
Use color to call out important information(“call to action”)
![Page 48: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/48.jpg)
DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much information
![Page 49: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/49.jpg)
DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much informationcall-to-action
whitespace
simple navigation
recommendations (less important) below
![Page 50: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/50.jpg)
Mobile DESIGN
![Page 51: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/51.jpg)
Mobile DESIGN
call-to-action
simple navigation made easy transition to mobile
simplified recommendations
![Page 52: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/52.jpg)
Let’s Make a sketch Prototype!
But I can’t draw! If you can draw a line,
you can sketch a prototype.
![Page 53: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/53.jpg)
Let’s Make a sketch Prototype!
![Page 54: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/54.jpg)
Deliveringbetter feedback
![Page 55: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/55.jpg)
When your client gives the feedback, “I don’t like it.”
![Page 56: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/56.jpg)
Like is not a part of thecritical thinker’s
vocabulary.
- Erika HallJust Enough Research
![Page 57: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/57.jpg)
But...we need to help Guide feedback
Give people time to look over your work.
![Page 58: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/58.jpg)
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.
![Page 59: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/59.jpg)
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.
![Page 60: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/60.jpg)
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.
![Page 61: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/61.jpg)
Try giving feedback!
Exchange a prototype with someone nearby. Does the prototype achieve the goals he/she set? Is it on the right track?
![Page 62: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/62.jpg)
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
![Page 63: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/63.jpg)
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
![Page 64: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/64.jpg)
UX in the DC community
![Page 65: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/65.jpg)
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!
![Page 66: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/66.jpg)
questions?Ask them now.
![Page 67: UX Tools, Tips & Tricks for Code(Her) Conference 2015](https://reader031.fdocument.pub/reader031/viewer/2022030302/587ccfdc1a28abfa018b77d3/html5/thumbnails/67.jpg)
Thank you!DC Web Women &
Code(Her) Attendees