User Experience

tools, tips, & tricks

Katelyn Caillouet
UX Designer, Organizer of District UX Book Club
@hellokatelyn
katelyncaillouet@gmail.com

WHAT WE WILL COVER

Usability heuristics
Creating personas

Content guidelines
Desktop vs. mobile design

Delivering better feedback

Usability Heuristics
Heuristic = an experts opinion on the best way to do something
Broad rule of thumb not a specific guideline
Jacob Nielsens 10 usability heuristics for UI design

Jacob Nielsens
10 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: good
Same verbiage: bad

1. VISIBILITY OF SYSTEM STATUS

My suggestion: change to a check
Provide feedback for action in a reasonable
amount of time.
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
Different verbiage

Sign In

2. MATCH BETWEEN SYSTEM & REAL WORLD

Use words, phrases & concepts familiar to the user.

Register
Different verbiage
Different style

Sign In

2. MATCH BETWEEN SYSTEM & REAL WORLD

Use words, phrases & concepts familiar to the user.

Register
Different verbiage
Different style
Different phrases

Sign In

2. MATCH BETWEEN SYSTEM & REAL WORLD

Use words, phrases & concepts familiar to the user.

Register
Different verbiage
Different style
Different phrases
Different syllables

Sign In

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

Dont confuse your user keep
words & actions consistent.

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

6. RECOGNIZE RATHER THAN

RECALL
Make 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 errors
Error messages should be in plain language, indicate the
problem, and constructively suggest a solution.
Sure.

NOPE.

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.

CONTENT
guidelines

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 its 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.

CREATING
personas

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)

Persona
Name: Sam
Age: 37
Occupation:
Live musician

SAM, 37
Techconnected
On-the-go
lifestyle
Dad
Wants to
access health
info quickly &
efficiently

Were designing FoR...

An internet retailer
Wants a modern, minimalist, exclusive, luxury
vibe
Targeting early 20s-late 30s fashion forward
men & women

COME UP with a Persona!

TARGET USER: early 20s-late 30s fashion forward men & women

Name
Age
Occupation
Location

Attitudes
Values
Skills
Behaviors

Goals
Needs

COME UP with a Persona!

TARGET USER: early 20s-late 30s fashion forward men & women

Now that you have a persona...

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?

Example Goals (for our internet retailer)

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.

3
Content on the page should
reflect the high-end aesthetic
we are trying to achieve.

Come up with 3 goals for your site!

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.

3
Content on the page should
reflect the high-end aesthetic
we are trying to achieve.

Desktop vs. Mobile

different 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.

MOBILE MENUS
Burger bar becoming
less common
If <5 options, avoid burger
bar
(more interaction with nav bar)

Redbooth removed their burger menu out & saw session time jump 70%

DESIGN Tips
More space = more whitespace
not always white

Use it well let your elements

breathe

DESIGN Tips
More space = more whitespace
Dont overwhelm user with too
much information
Use color to call out important
information
(call to action)

DESKTOP DESIGN
More space = more whitespace
Dont overwhelm user with too much information

DESKTOP DESIGN

simple navigation

More space = more whitespace

call-to-action

Dont overwhelm user with too much information

whitespace

recommendations (less important) below

Mobile DESIGN

Mobile DESIGN
simple navigation made
easy transition to mobile

call-to-action

simplified
recommendations

Lets Make a sketch Prototype!

But I cant
draw!

If you can draw a line,

you can sketch a
prototype.

Lets Make a sketch Prototype!

Delivering
better feedback

When your client gives the feedback, I dont like it.

Like is not a part of the

critical thinkers
vocabulary.
- Erika Hall
Just 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 youre trying to meet.

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.

3
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 youre trying to meet.

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.

3
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 youre trying to meet.

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.

3
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 thats 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 districtux@gmail.com

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