Content Design for the Conversational UI - Design + Content Conference 2019
2 likes453 views
The document discusses content design for conversational user interfaces (CUI), highlighting the increasing prevalence of smart speakers and voice assistants. It outlines the design process, including data analysis, creating user stories, prototyping conversations, and defining bot personality. Additionally, it provides tips for managing content density and designing effectively for text, voice, and multimodal interactions.
Content Design for the Conversational UI - Design + Content Conference 2019
- 1. Content Design for the Conversational UI Design & Content Conference 2019 Melanie Seibert Sr. Content Strategist, WillowTree @melanie_seibert
- 2. 2
- 3. 3 Hey Google, make it warmer.
- 4. 4 September 2018: 24% of U.S. households own a smart speaker Source: Nielsen 4
- 5. 5 December 2018: 2.5 billion digital voice assistants in use Source: Juniper Research 5
- 6. Voice Platform Marketing If you haven’t encountered a conversational interface yet, you will. 6
- 7. 7 Content Design for the Conversational UI 1. The Conversational UI 2. The Design Process 3. Easy Ways to Explore
- 8. Content Design for the Conversational UI 8 A type of user interface consisting primarily of content. The Conversational UI
- 9. Content Design for the Conversational UI 9 Content is the design. You’re the designer. The Conversational UI
- 10. Content Design for the Conversational UI 10 1. Text 2. Voice 3. Multimodal 3 Formats
- 11. Content Design for the Conversational UI • Facebook Messenger • Slack 11 Text
- 12. Content Design for the Conversational UI 12 Voice • Amazon Alexa • Google Home • Apple Siri • Microsoft Cortana
- 13. 13 Voice + Text Multimodal Done. Your alarm has been set for 6 a.m.
- 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. Read300 wpm “Speed Reading," The University of Chicago Student Health and Counseling Services, 2017. 15 Listen130 wpm
- 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. 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 Content Design for the Conversational UI 1. The Conversational UI 2. The Design Process 3. Easy Ways to Explore
- 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. What is Content Design? Where Content Strategy and Product Design overlap. 20 Content Design for the Conversational UI
- 21. The Design Process Content Design for the Conversational UI Start with data 21
- 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 Content Design for the Conversational UI
- 24. The Design Process Content Design for the Conversational UI Write a user story for each intent 24
- 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. User Story: “As a _________________, I want to _________________, So that I can _________________.” 26
- 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. The Design Process Content Design for the Conversational UI Prototype the conversation 28
- 29. “Wizard of Oz” role-play (on Slack).
- 30. The Design Process Content Design for the Conversational UI Design the Flow 30
- 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. Content Design for the Conversational UI Flow chart. 32
- 33. Content Design for the Conversational UI 33
- 34. Content Design for the Conversational UI 34
- 35. Content Design for the Conversational UI 35
- 36. The Design Process Content Design for the Conversational UI Train the Bot 36
- 37. User interviews.
- 38. Training data generation (on Slack). 38
- 39. The Design Process Content Design for the Conversational UI Design the Personality 39
- 41. WHO WE ARE WHO WE’RE NOT Bloomstein’s “messaging architecture” method ✖️✔️
- 42. 42
- 43. 1. Supportive 2. Optimistic 3. Formal 4. Humorous 5. Motivated Personality Framework 43 How… …is it?
- 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. 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. Personality Framework Humorous I like to entertain and amuse you— and myself. Opposite: serious How… …is it? 46
- 47. Motivated I’m enthusiastic and excited about our conversation. Opposite: reserved Personality Framework How… …is it? 47
- 48. Personality Framework Formal I carefully observe rules of etiquette and present myself in a “highbrow” manner. Opposite: casual How… …is it? 48
- 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. 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 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 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. The Design Process Content Design for the Conversational UI Create and Refine Scripts 53
- 54. 54 Content Design for the Conversational UI
- 55. Designing for Modality 5 5
- 56. Content Design for the Conversational UI Voice Tip Manage content density with “landmarking.” Amazon Alexa Skills Kit Glossary 56
- 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. 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. 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. 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. Content Design for the Conversational UI Use shorter responses. Example: Cortana 61 Voice Tip Are there any restaurants open right now?
- 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. Content Design for the Conversational UI Screen Tip Use timing to break up longer utterances. 63
- 64. Content Design for the Conversational UI 64
- 65. Content Design for the Conversational UI 65
- 66. Content Design for the Conversational UI 66
- 67. Content Design for the Conversational UI Use Quick Replies (aka “chips”). Facebook Messenger Google Assistant Screen Tip 67
- 68. Content Design for the Conversational UI Take advantage of web links. Zulily on Facebook Messenger Screen Tip 68
- 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. Content Design for the Conversational UI Google Assistant 70
- 71. 1. The Conversational UI 2. The Design Process 3. Easy Ways to Explore 71 Content Design for the Conversational UI
- 73. 73
- 74. https://blueprints.amazon.com 74 Alexa Skill Blueprints
- 75. Thanks! 75 Content Design for the Conversational UI Melanie Seibert Sr. Content Strategist, WillowTree @melanie_seibert
- 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. Content Design for the Conversational UI Thanks to: • Daniel Atwood • Shadiah Garwell • Ayesha Zafar 77