This hour-long workshop was essentially a mini-UX design process. We reviewed with Nielsen's usability heuristics, talked content strategy, created personas, sketched mobile prototypes, and practiced giving better feedback.
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
UX Tools, Tips & Tricks for Code(Her) Conference 2015
1. User Experience
tools, tips, & tricks
Katelyn Caillouet
UX Designer, Organizer of District UX Book Club
@hellokatelyn
katelyncaillouet@gmail.com
2. WHATWE WILL COVER
Usability heuristics Content guidelines
Delivering better feedback
Desktop vs. mobile designCreating personas
3. 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
5. 1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
6. 1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
7. 1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
Color change: good
Same verbiage: bad
8. 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.
9. 2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
10. 2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
11. 2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
12. 2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
Different phrases
13. 2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
Different style
Different phrases
Different syllables
14. 3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to expand
15. 3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to contract
16. 4. CONSISTENCY & Standards
Don’t confuse your user – keep
words & actions consistent.
18. 6. RECOGNIZE RATHER THAN
RECALL
Make objects & actions available.
Instructions should be visible.
19. 7. Flexibility & Efficiency of use
Allow users to manipulate & personalize frequent actions.
20. 8. Aesthetic & Minimalist design
All information should be valuable and relevant.
21. 9. Help users recognize, Diagnose &
Recover from errors
Error messages should be in plain language, indicate the
problem, and constructively suggest a solution.
NOPE.Sure.
25. CONTENT FIRST
Content is king.
Content is what users come for.
Content is what users want to access.
Design is nothing without content.
26. CONTENT FIRST
Content is king.
Content is what users come for.
Content is what users want to access.
Design is nothing without content.
27. 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.
28. CONTENT GUIDELINES
Clear & concise voice.
Keep it simple.
Make it useful.
An example of what not to do; vague, no
useful information, and annoying.
30. EMPATHY IN User Interfaces
Be aware of cognitive biases.
Practice empathy.
You are not your user.
31. 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)
34. • 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...
35. TARGET USER: early 20’s-late 30’s fashion forward men & women
COME UPwith a Persona!
Name
Age
Occupation
Location
Attitudes
Values
Skills
Behaviors Goals
Needs
36. COME UPwith a Persona!
TARGET USER: early 20’s-late 30’s fashion forward men & women
37. 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 thatyou have a persona...
38. Example Goals (for our internet retailer)
1 2 3
The 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.
39. Come upwith 3 goals for your site!
1 2 3
The 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.
41. MOBILE vs. DESKTOP
“Mobile first” – “mobile only”
Mobile is under extreme space & content constraints.
Constraints are good for design.
Responsive design > Static design
45. 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%
46. DESIGN Tips
More space = more whitespace
Use it well – let your elements
breathe
not always white
47. DESIGN Tips
More space = more whitespace
Don’t overwhelm user with too
much information
Use color to call out important
information
(“call to action”)
49. DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much information
call-to-action
whitespace
simple navigation
recommendations (less important) below
56. Like is nota part of the
criticalthinker’s
vocabulary.
- Erika Hall
Just Enough Research
57. But...we need to help Guide feedback
Give people time to look over your work.
58. But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3
The 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.
59. But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3
The 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.
60. But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3
The 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.
61. Try giving feedback!
Exchange a prototype with someone nearby.
Does the prototype achieve the goals he/she set? Is it on the
right track?
62. 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
63. 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
65. UX in the DC community
Join our Slack channel!
Email districtux@gmail.com
Follow us on Twitter for book
club updates: @DistrictUX
Join us once a month at
TrackMaven for our events!