Build 2017 - P4066 - Designing conversational UI for bots (and humans)
•Transferir como PPTX, PDF•
3 gostaram•467 visualizações
The Bot Framework enables you to quickly build and publish a bot to engage with users on many of the popular messaging services like Skype, Microsoft Teams, Facebook Messenger, and Slack. But to many designers and developers, designing an “app” UI as a conversation in a messaging windows is a new and daunting prospect. In this session, you'll learn how to design a conversational UI that feels as fast, as fluid, and as natural as a messaging conversation between friends, while driving user engagement for your bot.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais de Windows Developer
Mais de Windows Developer (20)
Último
Último (20)
Build 2017 - P4066 - Designing conversational UI for bots (and humans)
- 11. Layout Design Interaction Design Visual Design Motion Design
- 23. Locations User Zip/City, ST Zip/City, ST? No Location Search 3 Yes > 0 No Locations Yes New Search Location More Locations Schedule
- 25. Characteristics or qualities that form an individual's distinctive character
Notas do Editor
- Chris Mayo, Senior UX Engineer @ Microsoft In particular, we’ll talk about how: You can leverage the same design skills, tools, and process you use today when designing web sites and mobile apps… …while learning what’s new and unique to designing conversational experiences for bots. Abstract: The Bot Framework enables you to quickly build and publish a bot that reaches users on many of the popular messaging services like Skype, Microsoft Teams, Facebook Messenger, and Slack. But to many designers and developers, designing and developing the bot UI as a conversation in a messaging windows is a new and daunting prospect. In this session, you'll learn how to design a conversational UI that feels as fast, as fluid and as natural as a messaging conversation between friends while driving the user engagement of your bot.
- Design sessions for Contoso Cuts bot resulted in these goals, user stories.
- Web/Mobile Designing your web site/apps, you’re using a process to map the user stories to…. … the information architecture of your site… …to the pages… …to some sort of navigation diagram, navigation UI design to support navigating those pages to support the user stories. Web/mobile Navigation Navigation menu Links Back button
- Bots Navigation is supported by the conversation. Navigation Changes the topic of the conversation. Just like telling someone when talking about the Redmond location… …that you want to schedule an appointment there… Navigation Commands Global keywords Navigate to a new topic of conversation. Discoverability Web/mobile UI elements on screen that make navigation discoverable… Bots There is nothing in the UI until your bot says it, so need to introduce navigation early in the conversation. Casey does this at the start of the conversation… Wayfinding Where am I? How did I get here? How do I get back?
- Web/Mobile At this point, you’d start designing the pages Layout of the pages, UI controls… Interaction design Visual design Motion design Starting low-fi Black and white, wireframes, placeholder images, etc. Prototype Get signoff before moving forward with final branding, assets, etc.
- You’ll follow a similar flow with your bot design. Goal is to ideate, illustrate, get sign off on conversational experience as you add fidelity. 2 passes Conversation Flow Structure of the conversation at a high level. Conversation UI Layout of the dialog to support the conversation flow.
- Start with the structure of the conversation You should be able to see how the user story will be completed by the conversation flow. No more detail than that. Don’t focus on the copy (yet) You can get bogged down on the copy Only to realize that the copy you discussed was eliminated as the structure changed. Design the “long form” first Assume you have to walk user through the whole process We’ll talk about how bot memory, intuition can expedite these conversation Storyboard/walkthrough Usually post it notes, walk through, then document/share with team.
- Dialog -> Conversation Flow Bots are always in a state of asking a question, waiting for response. Explicit – What is your zip code? Implicit – Which location would you like to learn more about? Balance what bot asks vs. what bot adds to the conversation. 2-4 prompts Users will get frustrated/bored if they don’t see value in conversation. Don’t worry about copy yet Start with structure, focus on flow Use overly simple/placeholder copy Use placeholder images
- Web/mobile Grid Label Textbox Button Image Option buttons Dropdowns Can depend on channel, but these are the basics…
- Design to be understood Design the UI so it’s easy for users to understand your bot. Design to understand Design your UI so your bot can easily understand your user Design for when your bot doesn’t understand Design to learn, remember Bots should learn/remember, the conversation gets better over time
- Guide the conversation The bot should always be guiding the conversation towards the goal/user story Be concise Most important Viewed on mobile devices On Casey, iterated to get copy as concise as possible. Break longer prompts down into smaller messages Promotes glancing. Minimize scrolling Limit how much, now often you reply Break messages up, prioritize information, let user decide if they need more info by clicking “more” button. Use carousels, makes information horizontal, prioritize information left to right, let user decide if they need to flip.
- Ask “closed-ended” questions where possible. Use buttons Makes it clear to user what you expect Be clear with “open-ended” questions Give examples What type of reply do you expect? Text? Attachment? Image? Document? What format do you expect? Want this to be a wide as possible, but for dates, what do you expect?
- Humans are unpredictable They will reply with anything and everything, your bot needs to provide a great experience Setting expectations Handling exceptions Support as many data formats as possible All of the following represent May 2nd. May 2, 2017, May 2, 5/2, 5/2/2017, Tuesday, Today, Next Week The more text formats your bot supports, the more it understands. Validate every reply Type Content, format Design the “Do not understand” prompt Design a DNU for every prompt in your bot. Be clear what/why bot doesn’t understand Be clear what bot does understand You need to handle these situations well, goal should be to minimize them down to zero. Retry the prompt
- Don’t strand your users Retry prompts a set number of times (3) Good place to start Retry to try and be more clear Retry in case the user goofed on their reply. Stop the Conversation Flow Don’t leave your customers stranded trying to answer a prompt they obviously don’t know how to answer. Give the user the opportunity to get help Get them in touch with a human Give the them opportunity to provide details/feedback Provide opportunity to start another Conversation Flow
- Contoso Cuts, chain of neighborhood barbershop/salons. Built a bot to help customers find locations, select services and schedule appointments. Welcome Navigation menu Locations Schedule Services Appointment Confirmation Natural Language Preferred location
- Humans remember and learn from conversations We take this for granted, your bot shouldn’t Bot should learn/remember when user tells it something Use what you know to improve the conversation over time Bot should use what it knows to help user From conversation From login/account Make it clear what your bot knows, how it knows it
- We did a flow chart for every conversation flow. Reviewed with stakeholders, got feedback, refined. We then wrote out every conversation flow in Excel to show back/forth. Can use any tool you want, but want to show conversation, get feedback before coding…
- Your conversations are well structured, conversation UI is concise, and interactions are fluid. Time to finalize copy and visual assets. Think of moving from wireframes to final visuals, assets, branding. Design for Persona A character assumed by an author in a written work. Reflects and embodiment of your brand. Design for Personality The combination of characteristics or qualities that form an individual's distinctive character. Tone - Casual/Formal. Contractions - Can't vs. Cannot. Emoji - Prompts/replies. Visual assets - Color, font, layout. Talk directly to the user. Your bot is a contact, trusted friend, so should talk like one. Call users by their name if you know it. Avoid gendered pronouns if you don't know. Don't be robotic. Design varied copy so prompts/replies aren't always the same. Design varied copy based on context. Do not understand. More human.