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.

Content Design for the Conversational UI - Design + Content Conference 2019

194 views

Published on

Each type of chatbot (voice, text, or both) has its own unique abilities and design requirements. How do you create truly helpful experiences for these user interfaces? Together, we’ll learn to think beyond the screen, and take advantage of the exciting potential of the conversational UI.

Published in: Technology
  • Be the first to comment

Content Design for the Conversational UI - Design + Content Conference 2019

  1. 1. Content Design for the 
 Conversational UI Design & Content Conference 2019 Melanie Seibert Sr. Content Strategist, WillowTree @melanie_seibert
  2. 2. 2
  3. 3. 3 Hey Google, 
 make it warmer.
  4. 4. 4 September 2018: 24% of U.S. households
 own a smart speaker Source: Nielsen 4
  5. 5. 5 December 2018: 2.5 billion digital voice 
 assistants in use Source: Juniper Research 5
  6. 6. Voice Platform Marketing If you haven’t encountered a conversational interface yet, 
 you will. 6
  7. 7. 7 Content Design for the Conversational UI 1. The Conversational UI 2. The Design Process 3. Easy Ways to Explore
  8. 8. Content Design for the Conversational UI 8 A type of user interface consisting primarily of content. The Conversational UI
  9. 9. Content Design for the Conversational UI 9 Content is the design. You’re the designer. The Conversational UI
  10. 10. Content Design for the Conversational UI 10 1. Text 2. Voice 3. Multimodal 3 Formats
  11. 11. Content Design for the Conversational UI • Facebook Messenger • Slack 11 Text
  12. 12. Content Design for the Conversational UI 12 Voice • Amazon Alexa • Google Home • Apple Siri • Microsoft Cortana
  13. 13. 13 Voice + Text Multimodal Done. Your alarm has been set for 6 a.m.
  14. 14. 14Typing speed: Brown, CM (1998). Human-Computer Interface Design Guidelines. Speaking speed: Yaun, Liberman, Cieri (2006). “Towards an Integrated Understanding of Speaking Rate in Conversation.” Typing Speaking 130 wpm 40 wpm
  15. 15. Read300 wpm “Speed Reading," The University of Chicago Student Health and Counseling Services, 2017. 15 Listen130 wpm
  16. 16. Intents Entities What’s the best place to eat 
 in Vancouver that’s not too pricy? best place to eat Vancouver not too pricy? Find food best Vancouver not too pricyAdditional Context Location Previous reviews Allergies 1 2 3 Analysis4Contextual Action Fulfillment 56 Feedback 
 Confirmation or request for Additional Information Action Call to any relevant APIs API Anatomy of a Conversation Recording Conversion to TextUser Input System Output “What’s the best 
 place to eat in 
 Vancouver 
 that’s not 
 too pricy?” 16
  17. 17. Intents Entities Find food best Vancouver not too pricyAdditional Context Location Previous reviews Allergies 1 2 3 Analysis4Contextual Action Fulfillment 56 Feedback 
 Confirmation or request for Additional Information Action Call to any relevant APIs API Anatomy of a Conversation Recording Conversion to TextUser Input System Output “What’s the best 
 place to eat in 
 Vancouver 
 that’s not 
 too pricy?” 17 What’s the best place to eat 
 in Vancouver that’s not too pricy? best place to eat Vancouver not too pricy?
  18. 18. 18 Content Design for the Conversational UI 1. The Conversational UI 2. The Design Process 3. Easy Ways to Explore
  19. 19. “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.” 19 Sarah Richards 
 Author of Content Design
  20. 20. What is Content Design? Where Content Strategy and 
 Product Design overlap. 20 Content Design for the Conversational UI
  21. 21. The Design Process Content Design for the Conversational UI Start with data 21
  22. 22. “Can I replace the handle User Input on my ?”product Customer Service Logs Interviews Content Audit 22 Content Design for the Conversational UI
  23. 23. 23 Content Design for the Conversational UI
  24. 24. The Design Process Content Design for the Conversational UI Write a user story for each intent 24
  25. 25. What’s a User Story? “A user story is a way of pinning down what the team needs to do… without telling them how to do it.” Sarah Richards | Content Design 25
  26. 26. User Story: “As a _________________,
 I want to _________________, So that I can _________________.” 26
  27. 27. User Story: “As a product user,
 I want to know whether I can replace the handle, So that I can avoid having to buy a new product when the handle breaks.” 27
  28. 28. The Design Process Content Design for the Conversational UI Prototype the conversation 28
  29. 29. “Wizard of Oz” role-play 
 (on Slack).
  30. 30. The Design Process Content Design for the Conversational UI Design the Flow 30
  31. 31. Content Design for the Conversational UI Flows to design Golden Path The designed intents. 
 Entry Point How is your bot invoked? 
 Error Paths Can the bot recover when it doesn’t understand or receive input? Escalate to a Human When should a person 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. 31
  32. 32. Content Design for the Conversational UI Flow chart. 32
  33. 33. Content Design for the Conversational UI 33
  34. 34. Content Design for the Conversational UI 34
  35. 35. Content Design for the Conversational UI 35
  36. 36. The Design Process Content Design for the Conversational UI Train the Bot 36
  37. 37. User interviews.
  38. 38. Training data generation 
 (on Slack). 38
  39. 39. The Design Process Content Design for the Conversational UI Design the Personality 39
  40. 40. Example: Westminster Catechism 40
  41. 41. WHO WE ARE WHO WE’RE NOT Bloomstein’s 
 “messaging architecture” 
 method ✖️✔️
  42. 42. 42
  43. 43. 1. Supportive 2. Optimistic 3. Formal 4. Humorous 5. Motivated Personality Framework 43 How… …is it?
  44. 44. Supportive I root for you. I will try to help you achieve your goals rather than pursuing my own agenda. Opposite: adversarial How… …is it? 44 Personality Framework
  45. 45. Personality Framework Optimistic I speak in positive terms. I try to see the upside of everything. Neutral: realistic Opposite: pessimistic How… …is it? 45
  46. 46. Personality Framework Humorous I like to entertain and amuse you— and myself. Opposite: serious How… …is it? 46
  47. 47. Motivated I’m enthusiastic and excited about our conversation. Opposite: reserved Personality Framework How… …is it? 47
  48. 48. Personality Framework Formal I carefully observe rules of etiquette and present myself in a “highbrow” manner. Opposite: casual How… …is it? 48
  49. 49. Supportive I root for you. I will try to help you achieve your goals rather than 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 Personality Framework How… …is it? 49
  50. 50. 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 Supportive Humorous FormalMotivated Optimistic Golden path Error Entry & exit Optimistic Supportive Humorous FormalMotivated Bot
 Personality ——— Golden path ——— Error ——— Entry & Exit
  51. 51. 51 Content Design for the Conversational UI Example: Designed Intents User First Draft: WillowTree Bot “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.” Formal: longer, uses passive voice. Realistic: focuses on what it can do right now. Reserved: sticks to the facts. “What types of things do you know about?”
  52. 52. 52 Content Design for the Conversational UI Example: Designed Intents 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. “What types of things do you know about?”
  53. 53. The Design Process Content Design for the Conversational UI Create and Refine Scripts 53
  54. 54. 54 Content Design for the Conversational UI
  55. 55. Designing for Modality 5 5
  56. 56. Content Design for the Conversational UI Voice Tip Manage content density with “landmarking.” Amazon Alexa Skills Kit Glossary 56
  57. 57. Content Design for the Conversational UI • Establishes trust • Supports a natural dialogue Voice Tip Manage content density with “landmarking.” Horoscope for what sign? Do: 57Amazon Alexa Skills Kit Glossary Ask Astrology Daily 
 for my horoscope.
  58. 58. Content Design for the Conversational UI How to Simplify Your Responses - Amazon Alexa Voice Design Guide Manage content density with “landmarking.” 58 Do: At 10 a.m., you have the
 weekly status meeting 
 with Rachel and Natasha. Don’t: You have the weekly status
 meeting with Rachel 
 and Natasha at 9 a.m. What’s happening 
 at 10 a.m.? Voice Tip
  59. 59. Content Design for the Conversational UI Example: Cortana 59 Manage content density with “landmarking.” Voice Tip How long does it take to 
 get to the Richmond airport?
  60. 60. Content Design for the Conversational UI The cheeses you may like are cheddar, gouda, Jarlsberg, porter cheddar, St. Agur blue cheese, gorgonzola, brie, gruyere, sharp cheddar, and reggiano parmesan. Amazon Alexa Voice Design Guide 60 Don’t: Do: Here are the cheeses you may 
 like: cheddar and gouda, as well 
 as gorgonzola, parmesan, 
 and brie. Use “chunking” 
 to aid comprehension. Voice Tip
  61. 61. Content Design for the Conversational UI Use shorter responses. Example: Cortana 61 Voice Tip Are there any restaurants
 open right now?
  62. 62. Content Design for the Conversational UI Provide clear choices. Amazon Alexa Voice Design Guide 62 Voice Tip Would you like brie or gouda? Don’t: Do: We have brie or gouda. Which would you like?
  63. 63. Content Design for the Conversational UI Screen Tip Use timing to break up longer utterances. 63
  64. 64. Content Design for the Conversational UI 64
  65. 65. Content Design for the Conversational UI 65
  66. 66. Content Design for the Conversational UI 66
  67. 67. Content Design for the Conversational UI Use Quick Replies (aka “chips”). Facebook Messenger Google Assistant Screen Tip 67
  68. 68. Content Design for the Conversational UI Take advantage of web links. Zulily on Facebook Messenger Screen Tip 68
  69. 69. Content Design for the Conversational UI 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 69
  70. 70. Content Design for the Conversational UI Google Assistant 70
  71. 71. 1. The Conversational UI 2. The Design Process 3. Easy Ways to Explore 71 Content Design for the Conversational UI
  72. 72. Actions on Google https://developers.google.com/actions/templates/first-app 72
  73. 73. 73
  74. 74. https://blueprints.amazon.com 74 Alexa Skill Blueprints
  75. 75. Thanks! 75 Content Design for the Conversational UI Melanie Seibert Sr. Content Strategist, WillowTree @melanie_seibert
  76. 76. Content Design for the Conversational UI Keep Learning • Sarah Richards, Content Design • Margot Bloomstein, Content Strategy at Work • Cathy Pearl, Designing Voice User Interfaces • Google Design Guidelines • Amazon Alexa Voice Design Guide • Sophie Kleber, Designing Emotionally Intelligent Machines (SXSW 2017) • Whitney French, “Shortcuts to Chatbot Emotional Intelligence” • WillowTree, "The Executive’s Guide to Driving ROI with Voice Experiences" 76
  77. 77. Content Design for the Conversational UI Thanks to: • Daniel Atwood • Shadiah Garwell • Ayesha Zafar 77

×