Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Words and the design process - Confab 2018 - Biz Sanford

360 views

Published on

When it comes to building products, some people might think of content as a final flourish, words on a page or screen that can be written just before launch. But we know thoughtful, consistent interface content is a core element of a well-designed user experience. In this talk, we look at how to incorporate content throughout the design process. We start with the role of content in sketching and work our way up to polishing content in high fidelity mockups.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Words and the design process - Confab 2018 - Biz Sanford

  1. 1. Words and the design process Biz Sanford @bizsanford
  2. 2. Documentation ProductMarketing
  3. 3. Thoughtful, consistent interface content is a core element of a well designed user experience.
  4. 4. We’ll talk about - Sketching with words - Wireframing with the right amount of content - Polishing content in high-fidelity mockups
  5. 5. Design process
  6. 6. You’ll learn how to - Improve content fidelity gradually - Map content elements and determine hierarchy - Teach designers a content-first approach - Provide sound rationale for your content decisions
  7. 7. Project lifecycle
  8. 8. Project lifecycle
  9. 9. Sketching with words
  10. 10. Content you need - Headings - Button text - Key nouns and verbs
  11. 11. Use headings YES: Create discount code NO:
  12. 12. Say exactly what buttons do YES: Share NO: Click here
  13. 13. Use key nouns and verbs YES: Add package NO: Edit package
  14. 14. Problem scope
  15. 15. Write out any new content
  16. 16. Wireframing with content
  17. 17. Define content elements
  18. 18. Type: Link text Element: Customer name Output: Catherine Middleton
  19. 19. Type Element Output Link text Customer name Catherine Middleton Badge Status Open / Closed Filter Location Minneapolis Button Edit address —
  20. 20. Type: Filter Element: Location Output: Minneapolis
  21. 21. Prioritize content elements
  22. 22. Before you prioritize elements - Look for connections between elements - Think about tasks users are doing - List out business priorities - Consider how patterns will come into play
  23. 23. Content in low fidelity mockups
  24. 24. Use realistic content - Pull anything from sketches that worked well - Replace squiggly lines - Write a solid first draft - Avoid placeholder content
  25. 25. How to create realistic content - Task: What they need to do - Benefit: What they will get out of it or how it helps them - Messaging hierarchy: Prioritize most important messages - Terminology: Nouns, verbs, etc. - Emotions: Any stress cases to account for
  26. 26. Don’t do this
  27. 27. Do this
  28. 28. Why it’s important - Easier and faster to co-design in low fidelity - You’ll get more robust feedback from peers and users
  29. 29. End-to-end experience - Touchpoints across the product - Errors - Confirmations - Onboarding
  30. 30. Low fidelity content - Define content elements, prioritize, and review with stakeholders - Use real content - Think about the end-to-end experience
  31. 31. Low fidelity still means high quality
  32. 32. Real talk - Adjust these techniques based on project and scope - Remember why you’re doing all of this in the first place - Real world is more messy than a step-by-step process
  33. 33. High fidelity mockups
  34. 34. Polish reviews - FED, content, design, product manager - Typos, spacing problems, etc. - Anything unexpected
  35. 35. Teach people how to - Look at designs from a content perspective - Spot content inconsistencies - Provide suggestions to improve content
  36. 36. Content throughout the design process
  37. 37. What we talked about today - Sketching with specific words - Defining content elements and content hierarchy - Wireframing with content - Polishing content in high-fidelity mockups
  38. 38. Thank you! @bizsanford ux.shopify.com

×