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.

Elvia Vasconcelos, Experience Design for Chatbots

734 views

Published on

Elvia Vasconcelos - Senior UX Designer at SapientRazorfish

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Elvia Vasconcelos, Experience Design for Chatbots

  1. 1. If I was to start a new chatbot project tomorrow I would ... Elvia Vasconcelos Senior Designer @SapientRazorfish_ @ElviaVasc
  2. 2. Elvia Vasconcelos @ElviaVasc Hola
  3. 3. Elvia Vasconcelos @ElviaVasc Context Goal A practical toolkit ---> If I was to start a new chatbot project tomorrow I would... Context Discuss UX tools and methods in the context of conversational interfaces. Secret project 3 x Sprint Chatbot POC Talk @LadiesThatUX meetup Internal talks @SapientRazorfish_ 2x You are here
  4. 4. Elvia Vasconcelos @ElviaVasc Agenda 1. Before you start 2. Understanding Artificial Intelligence 3. Tools 4. Interaction Design 5. *Bonus* Challenges for you
  5. 5. Elvia Vasconcelos @ElviaVascElvia Vasconcelos @ElviaVasc Before you start
  6. 6. Elvia Vasconcelos @ElviaVasc Designing for Chatbots Part I
  7. 7. Elvia Vasconcelos @ElviaVasc Be critical
  8. 8. Elvia Vasconcelos @ElviaVasc Team No content strategist or copywriter
  9. 9. Elvia Vasconcelos @ElviaVasc What is the problem you are trying to solve?
  10. 10. Elvia Vasconcelos @ElviaVascElvia Vasconcelos @ElviaVasc Understanding the field of AI
  11. 11. Elvia Vasconcelos @ElviaVascElvia Vasconcelos @ElviaVasc
  12. 12. Elvia Vasconcelos @ElviaVasc
  13. 13. Elvia Vasconcelos @ElviaVasc Developer
  14. 14. Elvia Vasconcelos @ElviaVasc
  15. 15. Elvia Vasconcelos @ElviaVasc
  16. 16. Elvia Vasconcelos @ElviaVasc
  17. 17. Elvia Vasconcelos @ElviaVasc Glossary on evernote
  18. 18. Elvia Vasconcelos @ElviaVasc Come up with an Intent structure as a team
  19. 19. Elvia Vasconcelos @ElviaVasc ID Intent User says Action Response Contexts “Example” Natural language @Entity @Event Action name Parameter value Text response Rich Message Image Card Quick reply A2 “How many hours of sleep did I get last night?” @sleep ... - Sleep Time timeunits - Hours, minutes, seconds “Last night you got <hours of sleep> of sleep.” - - More nights Add “example” synonym Add Entity synonyms e.g. Snooze, rest, time in bed, nap, doze
  20. 20. Elvia Vasconcelos @ElviaVasc ID Intent User says Action Response Contexts “Example” Natural language @Entity @Event Action name Parameter value Text response Rich Message Image Card Quick reply A2 - Morning <rules> Sleep Time same Morning, Alex. Hope you are feeling rested, you slept 10 hours yesterday. - - - Last night First opening app
  21. 21. Elvia Vasconcelos @ElviaVascElvia Vasconcelos @ElviaVasc Tools
  22. 22. Elvia Vasconcelos @ElviaVascElvia Vasconcelos @ElviaVasc Process is led by copy and logic
  23. 23. Elvia Vasconcelos @ElviaVasc Tree map Excel for copy :( Js file to update copy Artifacts
  24. 24. Elvia Vasconcelos @ElviaVasc Popular bot tools https://www.motion.ai/ - visual Bot.store - templates Botkit Studio - Content Management, Libraries and analytics Chatfuel - facebook messenger no coding Twine - OpenSource, stories Wit.ai - NPL Api.ai - NPL Botwiki - Catalogue of bots, tools and tutorials Botlist - Catalogue of bots Tools on evernote 1. Bot tools
  25. 25. Elvia Vasconcelos @ElviaVasc Popular decision tree tools Omnigraffle Xmind Coggle Mindnode iThoughtsX *Bonus* Visual vocabulary + legend Highlight paths e.g. happy path, user testing, what is built, sprint planning 2. Decision tree tool Jesse James Garrett Visual Vocabulary
  26. 26. Elvia Vasconcelos @ElviaVasc Popular writing tools Omnioutliner 3. Writing tool
  27. 27. Elvia Vasconcelos @ElviaVasc Pick your tools (have some alternatives up your sleeve)
  28. 28. Elvia Vasconcelos @ElviaVascElvia Vasconcelos @ElviaVasc Interaction design
  29. 29. Elvia Vasconcelos @ElviaVasc Basics first
  30. 30. Elvia Vasconcelos @ElviaVasc Interaction Design 1 Starting the conversation & Empty states 2 UI Elements 3 Generic intents
  31. 31. Elvia Vasconcelos @ElviaVasc Starting the conversation Empty State What are the barriers to starting a conversation?
  32. 32. Elvia Vasconcelos @ElviaVasc Starting the conversation State a clear purpose Explain how to use it
  33. 33. Elvia Vasconcelos @ElviaVasc Design for empty states http://emptystat.es/
  34. 34. Elvia Vasconcelos @ElviaVasc “A good empty state is clear, concise and prompts users to take action in a meaningful way” @nancyduan “Designing Conversational UI with Information Architecture — Part 4”
  35. 35. Elvia Vasconcelos @ElviaVasc Experience design challenges 1 Starting the conversation & Empty states 2 UI Elements 3 Generic intents
  36. 36. Elvia Vasconcelos @ElviaVasc Text elements Source http://blog.invisionapp.com/guide-to-chatbots/
  37. 37. Elvia Vasconcelos @ElviaVasc Media elements Source http://blog.invisionapp.com/guide-to-chatbots/
  38. 38. Elvia Vasconcelos @ElviaVasc Motion Typing indicator Autocomplete (when appropriate)
  39. 39. Elvia Vasconcelos @ElviaVasc UI Elements Type here Cards Images, gifs, PNG Action buttons Text replies Quick replies User says Menu & Type
  40. 40. Elvia Vasconcelos @ElviaVasc Create a library of UI elements (and think of motion)
  41. 41. Elvia Vasconcelos @ElviaVasc Experience design 1 Starting the conversation & Empty states 2 UI Elements 3 Generic intents
  42. 42. Elvia Vasconcelos @ElviaVasc Generic intents Errors Help Recovery
  43. 43. Elvia Vasconcelos @ElviaVasc Errors Design for errors
  44. 44. Elvia Vasconcelos @ElviaVasc Help Offer help If at any point you feel the need to speak to someone, you can do so via: - Chat to a live agent - Call - Email I need to speak to someone
  45. 45. Elvia Vasconcelos @ElviaVasc Recovery Offer ways to start again At the end At the end Idle for x minutes When request has been Identified Before you start During Any other thing I can help you with? NoYes Allright. See you next time Ask me anything by typing simple keywords.
  46. 46. Elvia Vasconcelos @ElviaVasc Plan your sprints with a balance of generic intents and specific intents
  47. 47. Elvia Vasconcelos @ElviaVasc Wrap up
  48. 48. Elvia Vasconcelos @ElviaVasc What is the problem you are trying to solve and why is a conversational interface the right fit?
  49. 49. Elvia Vasconcelos @ElviaVasc Understand key concepts on AI + Intent structure
  50. 50. Elvia Vasconcelos @ElviaVasc Pick your tools
  51. 51. Elvia Vasconcelos @ElviaVasc Nail the basics first
  52. 52. Elvia Vasconcelos @ElviaVasc Clear, concise and actionable empty states
  53. 53. Elvia Vasconcelos @ElviaVasc Create your UI Library
  54. 54. Elvia Vasconcelos @ElviaVasc Balance of generic + specific intents
  55. 55. Elvia Vasconcelos @ElviaVasc *Bonus* Challenges for you
  56. 56. Elvia Vasconcelos @ElviaVasc Is this enough? #ClassicUXResearch 5 users every 2 weeks Hypothesis Completion rate Satisfaction rate
  57. 57. Elvia Vasconcelos @ElviaVasc Discovery for voice
  58. 58. Elvia Vasconcelos @ElviaVasc Designing generative systems
  59. 59. Elvia Vasconcelos @ElviaVasc Thank you! Twitter @ElviaVasc Email elvia.vasconcelos@gmail.com Instagram Sketchnotes_are_awesome
  60. 60. Elvia Vasconcelos @ElviaVasc Get in touch Twitter @ElviaVasc Email elvia.vasconcelos@gmail.com Instagram Sketchnotes_are_awesome

×