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.
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.