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.

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

4. Jacob Nielsen’s
10 Usability Heuristics

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.

17. 5. Error Prevention
Prevent problems from occurring with
confirmation messages.

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.

22. From Mail
Chimp
Voice & Tone

23. 10. Help & Documentation
Any help information
should be easy to
search, focused, list
concrete steps, and not
be too large.

24. CONTENT
guidelines

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.

29. CREATING
personas

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)

32. Name: Sam
Age: 37
Occupation:
Live musician
Persona

33. • Tech-
connected
• On-the-go
lifestyle
• Dad
• Wants to
access health
info quickly &
efficiently
SAM, 37

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.

40. Desktopvs. Mobile
different experiences

41. MOBILE vs. DESKTOP
“Mobile first” – “mobile only”
Mobile is under extreme space & content constraints.
Constraints are good for design.
Responsive design > Static design

42. MOBILE First Process

43. MOBILE TOUCHPOINTS
Bigger touch points are generally better.
Leave enough space between touch points.

44. MOBILE TOUCHPOINTS
“designing for
thumbs”
Large smartphones
have taken over!
More on Luke W.

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”)

48. DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much information

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

50. Mobile DESIGN

51. Mobile DESIGN
call-to-action
simple navigation made
easy transition to mobile
simplified
recommendations

52. Let’s Make a sketch Prototype!
But I can’t
draw! If you can draw a line,
you can sketch a
prototype.

53. Let’s Make a sketch Prototype!

54. Delivering
better feedback

55. When your client gives the feedback, “I don’t like it.”

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

64. UX in the DC community

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!

66. questions?
Ask them now.

67. Thank you!
DC Web Women &
Code(Her) Attendees