46
Presented by Katelyn Vermeyen, UX Designer – February 16 th , 2015

UX Tools, Tips, and Tricks

Embed Size (px)

Citation preview

Page 1: UX Tools, Tips, and Tricks

Presented by Katelyn Vermeyen, UX Designer – February 16th, 2015

Page 2: UX Tools, Tips, and Tricks

Usability heuristics Content guidelines

Patient-facing interfaces Mobile vs. desktop design

Page 3: UX Tools, Tips, and Tricks

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, and Tricks
Page 5: UX Tools, Tips, and Tricks

Provide feedback for action in a reasonable amount of time.

Page 6: UX Tools, Tips, and Tricks

Provide feedback for action in a reasonable amount of time.

Page 7: UX Tools, Tips, and Tricks

Provide feedback for action in a reasonable amount of time.

Color change: goodSame verbiage: bad

Page 8: UX Tools, Tips, and Tricks

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, and Tricks

Use words, phrases & concepts familiar to the user.

Register Sign In

Page 10: UX Tools, Tips, and Tricks

Use words, phrases & concepts familiar to the user.

Register Sign In

Different verbiage

Page 11: UX Tools, Tips, and Tricks

Use words, phrases & concepts familiar to the user.

Register Sign In

Different verbiage

Different style

Page 12: UX Tools, Tips, and Tricks

Use words, phrases & concepts familiar to the user.

Register Sign In

Different verbiage

Different style

Different phrases

Page 13: UX Tools, Tips, and Tricks

Use words, phrases & concepts familiar to the user.

Register Sign In

Different verbiage

Different style

Different phrases

Different syllables

Page 14: UX Tools, Tips, and Tricks

Clearly mark an “emergency exit” – support undo/redo.

click to expand

Page 15: UX Tools, Tips, and Tricks

Clearly mark an “emergency exit” – support undo/redo.

click to contract

Page 16: UX Tools, Tips, and Tricks

Don’t confuse your user – keep words & actions consistent.

Page 17: UX Tools, Tips, and Tricks

Prevent problems from occurring with confirmation messages.

Page 18: UX Tools, Tips, and Tricks

Make objects & actions available.

Instructions should be visible.

Page 19: UX Tools, Tips, and Tricks

Allow users to manipulate & personalize frequent actions.

Page 20: UX Tools, Tips, and Tricks

All information should be valuable and relevant.

Page 21: UX Tools, Tips, and Tricks

Error messages should be in plain language, indicate the problem, and constructively suggest a solution.

Page 22: UX Tools, Tips, and Tricks
Page 23: UX Tools, Tips, and Tricks

Any help information should be easy to search, focused, list concrete steps, and not be too large.

Page 24: UX Tools, Tips, and Tricks
Page 25: UX Tools, Tips, and Tricks

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, and Tricks

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, and Tricks

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, and Tricks

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, and Tricks
Page 30: UX Tools, Tips, and Tricks

Be aware of cognitive biases.

Practice empathy.

You are not your user.

Page 31: UX Tools, Tips, and Tricks

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, and Tricks

Name: Sam

Age: 37

Occupation: Live musician

Page 33: UX Tools, Tips, and Tricks

• Tech-connected

• On-the-go lifestyle

• Dad

• Wants to access health info quickly & efficiently

Page 34: UX Tools, Tips, and Tricks
Page 35: UX Tools, Tips, and Tricks

“Mobile first”

Mobile is under extreme space & content constraints.

Constraints are good for design.

Responsive design > Static design

Page 36: UX Tools, Tips, and Tricks
Page 37: UX Tools, Tips, and Tricks

Bigger touch points are generally better

Leave enough space between touch points

Page 38: UX Tools, Tips, and Tricks

“designing for thumbs”

Large smartphones have taken over!

More on Luke W.

Page 39: UX Tools, Tips, and Tricks

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%

Page 40: UX Tools, Tips, and Tricks

More space = more whitespace

not always white

Page 41: UX Tools, Tips, and Tricks

More space = more whitespace

Don’t overwhelm user with too much information

Use color to call out important information

(“call to action”)

Page 42: UX Tools, Tips, and Tricks

More space = more whitespace

Don’t overwhelm user with too much information

Page 43: UX Tools, Tips, and Tricks

More space = more whitespace

Don’t overwhelm user with too much informationcall-to-action

whitespace

simple navigation

recommendations (less important) below

Page 44: UX Tools, Tips, and Tricks

• 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 45: UX Tools, Tips, and Tricks
Page 46: UX Tools, Tips, and Tricks

• 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

• Something more specific? Ask me.• [email protected]