Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Content Design for the Conversational UI - STC Summit 2018

882 Aufrufe

Veröffentlicht am

Are you a technical writer or content strategist? Soon you'll be asked to design interactions for a content-only interface: the chatbot. This talk helps you learn how to craft chatbot experiences that work for users.

Veröffentlicht in: Technologie
  • TEENS ARE LOOKING FOR REAL SEX NEAR YOU! HOOK-UP TONIGHT! ♥♥♥ http://t.cn/AiuWKDWR
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How long does it take for VigRX Plus to start working? ♥♥♥ http://t.cn/Ai88iYkP
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Content Design for the Conversational UI - STC Summit 2018

  1. 1. Content Design Conversational UI Melanie Seibert Sr. Content Strategist WillowTree forthe #stc18 @melanie_seibert
  2. 2. Content Design forthe Conversational UI
  3. 3. Content Design forthe Conversational UI Hey Google, 
 make it warmer.
  4. 4. Content Design forthe Conversational UI 4 December 2017: 46% of Americans use digital voice assistants Source: Pew Research Center
  5. 5. Content Design forthe Conversational UI 5 Smart speaker ownership grew 54% overthe following three months December 2017—February 2018 Source: comScore
  6. 6. Content Design forthe Conversational UI 1. What is Content Design? 2. The Conversational UI 3. The Design Process 4. Easy Ways to Explore
  7. 7. 7 “If you approach a new piece of web content with ‘how shall I write this?’, that’s writing or editorial. If you approach it from ‘how am I going to get this across to the audience in the best way possible?’, that’s content design.” SARAH RICHARDS AUTHOR OF CONTENT DESIGN
  8. 8. Section Title01 8 What is Content Design? • Writing and editorial • Usability (making content user-focused, 
 actionable, clear) • Layout, structure, 
 and hierarchy • Flow and navigation • Formats (text, video, images, audio, tables, graphs) • Metadata • Accessibility • Testing and optimization
  9. 9. 9 What is Content Design? Where Content Strategy and Product Design overlap.
  10. 10. Content Design forthe Conversational UI 1. What is Content Design? 2. The Conversational UI 3. The Design Process 4. Easy Ways to Explore
  11. 11. 11 The Conversational UI A type of user interface consisting primarily of content, with relatively few visual elements, compared to the graphical UI (GUI).
  12. 12. 12 The Conversational UI That means you’re the designer now.
  13. 13. 13 3 Conversational UI Formats Voice MultimodalScreen
  14. 14. 14 Screen Facebook Messenger Slack Kik
  15. 15. 15 Voice Amazon Alexa Google Home Apple Siri Microsoft Cortana
  16. 16. 16 Multimodal Voice + screen Done.Your alarm has been set for 6 a.m.
  17. 17. 17 Source: Typing speed: Brown, CM (1988). Human-computer interface design guidelines. | Speaking speed Yaun, Liberman, Cieri, Towards an Integrated Understanding of Speaking Rate in Conversation. Typing Speaking 40 wpm 130 wpm
  18. 18. 18 Source: Reading: University of Chicago Listening Reading 130 wpm 250 wpm
  19. 19. What’s the best place to eat in Charlottesville that’s not too pricy? Intents Entities “What’s the best place to eat in Charlottesville that’s not too pricy?” best place to eat Charlottesville not too pricy Find food best Charlottesville not too pricy Additional Context Location Previous reviews Allergies 1 2 3 Analysis4 Contextual Action Fulfillment 5 6 Feedback 
 Confirmation or request for Additional Information Action Call to any relevant APIs API Anatomy of a Conversation Recording (voice only) Conversion to text (voice only) User Input System Output
  20. 20. What’s the best place to eat in Charlottesville that’s not too pricey? Intents Entities “What’s the best place to eat in Charlottesville that’s not too pricy?” best place to eat Charlottesville not too pricy Find food best Charlottesville not too pricy Additional Context Location Previous reviews Allergies User Input1 Recording (voice only)2 Conversion to text (voice only)3 Analysis4 Contextual Action Fulfillment 5 System Output6 Feedback 
 Confirmation or request for Additional Information Action Call to any relevant APIs API Anatomy of a Conversation
  21. 21. Content Design forthe Conversational UI 1. What is Content Design? 2. The Conversational UI 3. The Design Process 4. Easy Ways to Explore
  22. 22. Content Design forthe Conversational UI The Design Process 22 Start with data
  23. 23. Content Design forthe Conversational UI Can I replace the handle User Input on my ?product Customer Service Logs Interviews Content Audit
  24. 24. Content Design forthe Conversational UI 24
  25. 25. Content Design forthe Conversational UI The Design Process 25 Write a user story for each intent
  26. 26. 26 What’s a User Story? “A user story is a way of pinning down what the team need to do …without telling them how to do it.” SARAH RICHARDS, CONTENT DESIGN
  27. 27. 27 What’s a User Story? User story: "As a , I want to , so that I can ."
  28. 28. 28 User Stories User story: "As a product user, I want to know if I can replace the handle, so that I can avoid having to buy a new one when the handle breaks."
  29. 29. Content Design forthe Conversational UI The Design Process 29 Prototype the conversation
  30. 30. 30 “Wizard of Oz” role-play (on Slack).
  31. 31. Content Design forthe Conversational UI The Design Process 31 Train the AI
  32. 32. User interviews.
  33. 33. Training data generation (on Slack).
  34. 34. Content Design forthe Conversational UI The Design Process 34 Design the Flow
  35. 35. 35 Flows to design Primary Path The designed intents. Error Paths Can the bot recover when it doesn’t understand or receive input? Escalate to Customer Support When should a human agent take over? Linking to Accounts & Other Platforms How do you need to integrate with other services? Examples include purchase, add to shopping list, message someone, call someone.
  36. 36. 36 Flow chart.
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. Content Design forthe Conversational UI The Design Process 40 Create and Refine Scripts
  41. 41. Content Design forthe Conversational UI
  42. 42. Designing for Modality
  43. 43. 43 Voice Tip Manage content density with “landmarking.” Amazon Alexa Skills Kit Glossary
  44. 44. 44 Voice Manage content density with “landmarking.” Ask Astrology Daily 
 for my horoscope. Horoscope for what sign? • Establishes trust • Supports a natural dialogue Amazon Alexa Skills Kit Glossary Voice Tip Do:
  45. 45. 45 Voice How to Simplify Your Responses - Amazon Alexa Voice Design Guide What’s happening 
 at 10 a.m.? At 10 a.m., you have 
 the weekly status meeting. You have the weekly 
 status meeting at 10 a.m. Manage content density with “landmarking” (also 
 known as implicit confirmation). Voice Tip Don’t: Do:
  46. 46. 46 Voice How long does it take to 
 get to the Richmond airport? Manage content density with “landmarking” (also 
 known as implicit confirmation). Example: Cortana Voice Tip
  47. 47. 47 Voice Amazon Alexa Voice Design Guide Use “chunking” 
 to aid 
 comprehension. Voice Tip Here are the cheeses you may like: cheddar and gouda, as well as gorgonzola, parmesan, and brie. The cheeses you may like are cheddar, gouda, Jarlsberg, porter cheddar, St. Agur blue cheese, gorgonzola, brie, gruyere, sharp cheddar, and reggiano parmesan. Do: Don’t:
  48. 48. 48 Use shorter responses. Are there any restaurants open right now? Example: Cortana Voice Tip
  49. 49. 49 Amazon Alexa Voice Design Guide Provide clear choices. Voice Tip We have brie or gouda. 
 Which would you like? Would you like brie or gouda? Don’t: Do: Which would you like? 
 Brie or gouda? Don’t:
  50. 50. 50 Screen Tip Use timing to break up longer utterances.
  51. 51. 51
  52. 52. 52
  53. 53. 53
  54. 54. 54 Use Quick Replies (aka “chips”). Facebook MessengerGoogle Assistant Screen Tip
  55. 55. 55 Take advantage of web links. Zulily on Facebook Messenger Screen Tip
  56. 56. 56 Multimodal Tip “Design prompts for both the ear and the eye. It’s easiest to start with the spoken prompt, imagining what you might say in a human-to-human conversation.Then, condense it to create the display prompt. GOOGLE DESIGN GUIDELINES
  57. 57. 57 Google Assistant
  58. 58. 58 Working with Platforms Constraints & Opportunities Entry & Exit Points Things to consider:
  59. 59. 59 https://developer.amazon.com/designing-for-voice/what-users-say
  60. 60. 60
  61. 61. Content Design forthe Conversational UI The Design Process 61 Design the Personality
  62. 62. 62 Example: Westminster Catechism
  63. 63. WHO WE ARE WHO WE’RE NOT Bloomstein’s 
 “messaging architecture” 
 method ✖️✔️
  64. 64. 1. Supportive 2. Optimistic 3. Formal 4. Humorous 5. Motivated Personality Framework How… …is it?
  65. 65. Supportive I root for you. I will try to help you achieve your goals ratherthan pursuing my own agenda. • Opposite: adversarial How… …is it? Personality Framework
  66. 66. Optimistic I speak in positive terms. 
 I try to see the upside of everything. • Neutral: realistic • Opposite: pessimistic How… …is it? Personality Framework
  67. 67. Humorous I like to entertain and amuse you—and myself. • Opposite: serious How… …is it? Personality Framework
  68. 68. Motivated I’m enthusiastic and excited about our conversation. • Opposite: reserved How… …is it? Personality Framework
  69. 69. Formal I carefully observe rules of etiquette and present myself in a “highbrow” manner. • Opposite: casual How… …is it? Personality Framework
  70. 70. Supportive I root for you. I will try to help you achieve your goals ratherthan pursuing my own agenda. • Opposite: adversarial Optimistic I speak in positive terms. I try to see the upside of everything. • Neutral: realistic • Opposite: pessimistic Humorous I like to entertain and amuse you—and myself. • Opposite: serious Motivated I’m enthusiastic and excited about our conversation. • Opposite: reserved Formal I carefully observe rules of etiquette and 
 present myself in a “highbrow” manner. • Opposite: casual How… …is it? Personality Framework
  71. 71. 72 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 Supportive Humorous FormalMotivated Optimistic Continuity Personality Golden path Error Entry & exit Bot Personality
  72. 72. 73 “What types of things do you know about?” “Currently I am configured to discuss myself, and answer whatever questions you might have about how I work, what I am, what I can do, how to configure me, and so on.” Example: Designed Intents User Formal: longer, uses passive voice. Realistic: focuses on what it can do right now. Reserved: sticks to the facts. First draft: WillowTree Bot
  73. 73. 74 User Revision: WillowTree Bot “Right now, I know about myself. But I can extend my database to learn about any topic. Do you have any suggestions?” Shorter, less formal. Optimistic: focuses on what it can do in the future. Motivated: interested to learn about your domain. Example: Designed Intents “What types of things do you know about?”
  74. 74. Content Design forthe Conversational UI 1. What is Content Design? 2. The Conversational UI 3. The Design Process 4. Easy Ways to Explore
  75. 75. 76 Actions on Google https://developers.google.com/actions/templates/first-app
  76. 76. 77 Alexa Skill Blueprints https://blueprints.amazon.com
  77. 77. Content Design forthe Conversational UI 78 Questions? #stc18 @melanie_seibert
  78. 78. Section Title01 79 Resources Sarah Richards, Content Design Margot Bloomstein, Content Strategy at Work Google Design Guidelines Amazon Alexa Voice Design Guide WillowTree, The Executive’s Guide to Driving ROI with Voice Experiences

×