UX Tools, Tips & Tricks for Code(Her) Conference 2015
•
132 likes•20,130 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to UX Tools, Tips & Tricks for Code(Her) Conference 2015
Similar to UX Tools, Tips & Tricks for Code(Her) Conference 2015 (20)
Recently uploaded
Recently uploaded (20)
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
- 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.
- 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)
- 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.
- 41. MOBILE vs. DESKTOP “Mobile first” – “mobile only” Mobile is under extreme space & content constraints. Constraints are good for design. Responsive design > Static design
- 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!
- 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!
- 67. Thank you! DC Web Women & Code(Her) Attendees