Conversational UI 101: How to Design for Voice and Chat

1Intuit Confidential and ProprietaryIntuit Confidential and ProprietaryIntuit Confidential and Proprietary
Stephen Gay & Kay Viswanadha
Conversational UI
How to Walk the Talk

Conversational UI 101
Introduction
00

KAY VISWANADHA
Design Strategist
QuickBooks
@KayViswanadha
STEPHEN GAY
Global Director
QuickBooks
@stephengay

We are designers designing conversational
experience for our customers.
We are not experts in natural language.

What products does Intuit make?
Just show the logos
OK, now?
Shouldn’t you know?

So how do we innovate?
What’s D4D?
D4D
Design for Delight

Lets talk about conversational UI.

Conversational Experience
Interacting with your brand or
product using natural language,
kinda like communicating with
another human.

Why users careUse their own words (simpler)
Shorter, focused path (perceived faster)
Natural interactions (magical)
“Text Jenny I’m running
a few minutes late, see
you soon.”

Command Line
Interface
(CLI)
Time
Technology
Voice User
Interface
(VUI)
Graphical UI
(GUI)
Conversational UI
(CUI)
Chat
Interface
Chat
Bots
Voice User
Interface
(VUI)
INTUIT
IS
HERE

“Microsoft’s speech
recognition accuracy is
now just as accurate
as humans.”
Oct 2016
“Google Home can identify &
personalize experience for up
to six voices.”
Apr 2017
“Facebook plans to double
down on chatbots.”
Apr 2017
“Amazon Lex, the
technology behind
Alexa opens up to
developers.”
- Apr 2017
Conversational experiences
Investment & innovation
“Apple Business Chat
aims to steal chatbots'
retail thunder”
- Jun 2017
“IBM Watson’s natural language
understanding technology uses both
words & context to deliver a near-
instant translation.”
- Jun 2017

01 Conversational UI
customer journey
03 Designing a
conversational UI.
Enhancing a
conversational UI.02

Determine conversational context.
Conversational UI
customer journey.
01

Conversational experiences….
Leveraging voice interactions (VUI) and
chat based interactions (CHAT UI)

Family time
VOICE INTERACTIONS (VUI)
HANDS FREE,
NATURAL
INTERACTIONS: We
can speak 3 to 4
times faster than we
can type.

CHAT BASED INTERACTIONS (CHAT UI)
FAMILIAR INTERACTIONS
More than 2.1 billion users today
use a social messaging app
- Portio research

Step back into customer benefit & customer journey
OK,

YOUR CUSTOMER JOURNEY- (very) high level
Discover Setup First benefit
Re-use &
follow up
Users become aware of
your product/ service &
understand how it works,
how they could benefit from
it.
Users enter data to create
account, configure settings
and customize features.
Users experience at least
one key benefit, that
delivers the value of your
product/ service.
Users continue to engage
with your product/ service
& experience the benefits.
BENEFIT
Achieved when the user
completes one or more
jobs.
JOB
A core function of the users’
business made up of several
individual tasks.
TASKS
The small pieces of functionality or
tasks a user must complete in order to
achieve a micro-benefit.
CUSTOMER

VOICE & CHAT UI IN DISCOVER PHASEDiscover &
Understand
“Alexa, what
can you do?”
VOICE
Advantages
- Get a specific question addressed
more easily
- Focused conversation & limiting
number of choices lends speed &
confidence to decision making
What’s lacking today
- May not be obvious to user that they
can initiate conversation
- User has to know what to ask and
how to ask
- Cognitive load to process voice
response
- User misses out on ambient content
CHAT UI
Advantages
- Same as Voice +
- Augment experience by moving from
bot/ system to human on the other
side of the conversation
- Could be perceived slow- only get
responses to the questions you ask
- Responses could end up as “walls
of text”.
- User misses out on ambient content
Discover phase: Users become aware of your product/ service & understand
how it works, how they could benefit from it.

Set up
VOICE
Advantages
- Handy when user situation requires
hands-free set up
- Data entry (e.g. email address,
password etc.) is difficult
- Cognitive burden involved in
selecting from multiple options
- Privacy & security concerns
- Tunnel vision- can’t see what’s the
extent of setup, what’s next
CHAT UI
Advantages
- Humanize set up
- Eliminate context change by enabling
user to transition to setup from
discover via chat UI
- Security concerns around entering
data to create account
- Chat UI could make it awkward to
process choose between options
related to set up
- Tunnel vision- can’t see what’s the
extent of setup, what’s next
- Feels slow
Setup phase: Users enter data to create account, configure settings and customize features.
VOICE & CHAT UI IN SETUP PHASE

First Benefit
“OK Google, what’s
traffic like near work?
VOICE
Advantages
- Elegant interaction for simple create
or do (gopher-like) tasks
- Get to first benefit via user’s
preferred words, in place of first
absorbing your IA/ nomenclature
- Provide guided task flow
- Doesn’t work well for first use tasks
that involve data input
- Difficult to introduce user to next
tasks & benefits
- Might feel like “blank slate” to some
users
CHAT UI
Advantages
Same as voice +
- Can work for simple tasks that
require data input
- Inefficient for first use tasks that require
data input
First Benefit phase: Users experience at least a part of key benefit promised by your
product/ service.
VOICE & CHAT UI IN FIRST BENEFIT PHASE

Re-use/
follow up
VOICE
Advantages
- Command & done!
- Convenient shortcut for frequent or
recurring tasks, also personalized
based on history
- Great for specific info/ data look up
and data analysis tasks, that are
either buried or not accessible via
app navigation
- Add an interpretation narrative over
data to help user
- Difficult to present related tasks
- Doesn’t work as well for recurring
tasks that require data input e.g.
create an invoice
CHAT UI
Advantages
same as Voice +
- some opportunity to introduce related
tasks
- Doesn’t work as well for recurring
tasks that require data input e.g.
create an invoice
“Alexa, ask Capital
One what’s my
balance”
Re-use & Follow up phase: Users continue to engage with your product/ service &
experience the benefits.
VOICE & CHAT UI IN RE-USE/ FOLLOW UP PHASE

Let’s try a worksheet.

FIRSTBENEFIT REUSE & FOLLOW-UPDISCOVER SETUP
TASK
LIST THE SMALL TASKS
THAT LADDER UP TO THE
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
UX
JOURNEY
CUSTOMER
A description of the customer
JOB
A core function the user wants to
complete, made up of several tasks
BENEFIT
What the user achieves when they
complete one or more jobs
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
CUSTOMER JOURNEY
Consumer Get a Ride Travel from A:B
Hear from friend
Search for app
Download the app
Create an account
Enable geo locationLearn about app
Understand benefit Add credit card
Open the app
Enter destination
Select ride type
Wait for driver
Take the ride
Pay for ride
Rate driver
Review payment history
Repeat a ride
Lost item
L L
L L
L M
L L
L M
L L
M M
L M
H H
M H
H H
H H
H H
H H
L M
M H
L L
M H

TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
CUSTOMER JOURNEY
Small business Invoice customers Get paid
Search for app
Learn about how it works
Understand benefit
L L
L L
L M
M MRecurring invoice support
Download the app
Create an account
Set up your company
L M
L L
L L
Set up invoice template L L
Open the app
Enter client info
Enter service line items
Enable online payment
preview invoice
Send invoice
Track client activity
on invoice
Review invoice
Edit invoice
Remind client
H H
L M
L M
H H
L L
H H
H H
L M
H H
H H
Set up payments account L L
Resend invoice
H H
Record payment L L

TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
TASK
OVERALL JOB
RATE LOW, MED, HIGH
OPPORTUNITY
VOICE CHAT
CUSTOMER JOURNEY

Step
• Write down customer journey tasks.
• Evaluate each task- high, medium, low for VUI and Chat.
• Debate and discuss.
10 mins Try
10 mins Share

Did everyone land somewhere here?
Discover Setup First benefit
Reuse &
follow up
LOWVOICE
MEDIUMCHAT UI
LOW
LOW
LOW
MEDIUM
HIGH
HIGH

• Consider the entire customer journey when
selecting Chat UI or Voice UI.
• Chat UI and Voice UI is typically optimized for
reuse / follow-up phase in the customer
journey.
Conversational
UI customer
journey

Let’s take VUI and CUI
to the next level.
Enhancing a
conversational UI.
02

Quick recap of pros/cons of voice & chat UI
OK,

VOICE
(VUI)
BENEFITS
Hands-free, natural
interactions
CHALLENGES
Not suitable for tasks that
require visual guidance,
user input or involve
many choices.
CHAT UI
BENEFITS
Familiar, focused
interactions
CHALLENGES
Cumbersome for
experiences that require
intense user input
Challenges
center around
User Input &
Data Input

User Input/ Utterances
“OK Google, news
briefing”
“OK Google, remind me
to call ……. in 3 days”
“OK Google, ask
Spotify to play Adele’s
Send My Love”
Variability example

Data input via voice and Chat UI
Types of data input VOICE CHAT UI
On/off (checkbox, switch)
Easy Easy
Select one or multiple from options
offered (radio options, dropdown
menus, checkboxes, cards)
Difficult
(cognitive load with visual aid)
Difficult
(presentation of choices)
Structured fields (dates, currency etc.)
Difficult
(inconsistent voice recognition
performance)
Easy, but could be tedious when
multiple fields are involved
Text fields with variable data (email
address, people names, addresses)
Difficult
(voice recognition of variable data)
Easy, but could be tedious when
multiple fields are involved

Data input > Chat UI is better than voice for some types of input
VUI is hard, but
Chat UI is great for variable data
like an address, because it’s easily
validated as typed.

Data input/ but chat UI can get cumbersome too…
Chat UI to create invoice is inefficient
for data input.
Needed input
- Customer info
- Project info
- Line items to detail products sold
and/ or services rendered
- Payment methods & terms

Taking conversational experiences to the next level

MULTIMODAL
What is multimodal?
Advantages of multimodal experiences

MULTIMODAL
Multimodal- combining two or more modes of interaction
Leverage advantages of voice or
chat based interactions, and
compensate for weaknesses
through visual interface or GUI.

MULTIMODAL EXAMPLES
Enhancing voice interactions
with visual interface
Amazon Echo Show (coming soon)
simplifies interactions with video
calling & touch screen

MULTIMODAL EXAMPLES
Siri simplifies interactions with
visual confirmation
User can tap or speak to confirm or
edit request

MULTIMODAL EXAMPLES
Hound app – only voice input,
Responses are voice + visual

MULTIMODAL EXAMPLES
Enhancing chat interactions
with GUI widgets
Ozlo app (Chat UI based) –
- uses cards with visual content to present
options
- carousel to deliver additional content
- images to present options (also helps with
monotony and homogeneity of text)
- guides conversation with suggested response
buttons

Penny app (Chat UI based)-
User can switch between GUI & chat UI,
based on their preference & goal
MULTIMODAL EXAMPLES
Enabling switching between
chat UI & GUI

PLATFORM
Why does the platform matter?
What are the advantages?

CHATBOTS ON MESSAGING
PLATFORMS
Examples: Facebook
messenger, Slack, Kik, Skype
Examples: Amazon Echo, Google Home,
Siri (limited), Cortana
VUI PLATFORMS

PLATFORM ADVANTAGES
- Meet customers where they are
- Leverage user’s platform profile, geolocation,
payment method etc. for faster user interactions
- Faster design & development
- Great extension of your experience for certain
conversation types (pre-sales, customer service)
- Bring value to group conversations
- Benefit from platform investment in external
developer experience
OTHER CONSIDERATIONS
- Limited to how open the platform is &
capabilities
- How does platform presence intersect with
your app & brand experiences?
- Discovery & voice command recall
- Setting the right user expectations related
to domain coverage

CUSTOMER JOURNEY
UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
List the small tasks that ladder
up to the overall job
Narrow to a specific
conversational UI
RATE PLATFORM
Advantages for leveraging an existing
conversational UI platform.
MULTI-
MODALHow to leverage a multi-modal experience to
increase the customer experience.
USER INPUT
What is the Language variability. Simple data
input, known data commands
VOICE CHAT
LIMITATIONS
What issues limit a great conversational UI
experience.
Consumer Get a Ride Travel from A:B
Open the app
Enter destination
Select ride type
Wait for driver
Take the ride
Pay for ride
H
H
H
H
H
H
Fixed app name
Complex data (i.e. address
name)
Ride type needs additional
data, such as price
Known data (i.e. time and
distance)
Known data (i.e. duration,
distance.)
After first use, credit card
Is available for repeat usage.
Select one
Text fields with variable data
Select multiple from options
Text fields with variable data (i.e.
driver name, and car)
N/A
N/A
N/A
Supplement ride type with
visualization
GUI for data visualization
GUI for data visualization
Pay for ride
N/A
Partner with a map provider and
OS for location data)
N/A
N/A
N/a
Partner with a platform for
Updated credit card information
Supplement location for
simple input confirmation.

CUSTOMER JOURNEY
UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
conversational UI
RATE PLATFORM
MULTI-
USER INPUT
VOICE CHAT
LIMITATIONS
experience.
Small business Invoice customers Get paid
H
L
M
M
H
H
Selecting client name
Recording customer’s credit card
or check info
Review invoice summary & activity
easy/ invoice details complicated
Identifying invoice fields & updating
them could be complicated
Client name complexity, multiple
clients with same name etc.
Validated, structured data input,
PCI compliance
N/A
Update one or many invoice fields,
text fields with variable data
Text field with variable data
Confirm resend invoice
For multiple clients with same
name, GUI to confirm client
Supplement with preview
GUI/ editable invoice view
Invoice summary with reminder
note attached/ ready to send
Invoice summary/ ready to send
N/A
N/A
N/A
N/A
N/A
N/A
GUI/ enter payment info
Track client
activity on invoice
Review invoice
Edit invoice
Remind client
Resend invoice
Record payment
Small businesses may include a
note when reminding client
N/A

CUSTOMER JOURNEY
UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
conversational UI
RATE PLATFORM
MULTI-
USER INPUT
VOICE CHAT
LIMITATIONS
experience.

Step
• Narrow to a specific customer journey step.
• Consider the opportunity for language variability,
multi-modal and platform
10 mins Try
10 mins Share

• Identity early the limitations of User Input &
Data Input for Chat UI and Voice UI.
• Leverage advantages of voice or chat based
interactions, and compensate for
weaknesses through visual interface or GUI.
• Leverage a platform to enhance the
conversational UI.
Enhancing a
Conversational
UI

Principles and methods
to design a
conversational UI.
Designing a
conversational
UI.
03

We know our target CUI or VUI
We know the opportunities to take to the next level
Now let’s talk about PRINCIPLES and PROTOTYPING.

Principles 1: Determine what is your conversation type
Scripted
OR
Free flow?

Principles 2: Determine who is talking
Brand
OR
Persona?

Principles 3: Determine what is your persona’s personality
Formal,
Fun,
Funny or
too funny?
$657.1
5
Austin
Just kidding about a credit card
purchase confirmation.
Mimics a quirky human

GREETING USER REQUEST
CLARIFY, CONFIRM
OR PROMPT FOR
MORE INPUT RESPOND
CONTINUE OR
CLOSE
Principles 4: Follow the conventions of the conversational flow.

Greeting
Best practices
Introduce yourself
Provide a few suggestions to get the conversation started
Pick suggestions that set the right user expectations
Greeting includes conversation starters

User request
Best practices
- Start with scripted, suggested responses
- Aim full domain coverage with your use cases
- Engage GUI widgets or switch to app GUI if appropriate
- Users will test limits with their requests. Be prepared to
address curve balls.
Solve for random user input

Clarify/ Confirm/ Prompt for more input
Best practices
- Keep context of what the user’s saying, till topic change
- Request clarifications to funnel the conversation
- Enable users to get out of errors and system loops with
“Undo” and “Cancel”
- If user switches to a different topic while you’re answering
the first request, acknowledge & clarify.
Clarify to funnel the conversation

Respond
Best practices
- No more than 3 lines per text bubble. Avoid “text walls”
- With voice responses, keep it short
- Communicate “I don’t know that yet” to the user in a way
that they don’t write it off completely
- Avoid monotony, respond with copy variations
- Get feedback on your responses to learn & improve
Avoid “walls of text”

Continue or close
Best practices
- Continue the conversation in service of your
customer benefit by offering choices to further
engage on the same topic
- Let user control switching to a different topic
- Recognize sometimes the right thing to do may be
to close the conversation
Continue the conversation

Sayspring prototyping toolFake chatbot experience with FB messenger
LOW FIDELITY PROTOTYPING
WITH ANY CHAT APP
VOICE PROTOTYPING
(SAYSPRING)
Prototyping

Prototyping
botsociety.io
CHATBOT
PROTOTYPING

We gave this app to customers… We watched the commands flow in... And we analyzed the conversations
INTERNAL SLACK BOT
monitor requests from research
participants & responses real-time
SCRAPPY CUI APP
Real customers interacted with CUI
in real world context
LEARNING: Our NLP
confidence level threshold
was too low; caused too
many false positives
QuickBooks Prototyping & Diary Study

Last one!

UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
USER INPUT
DATA ENTRY &
STUCTURE
PLATFORM
PLATFORM
ADVANTAGE
+ GUI
MULTI MODAL
ADVANTAGE
VOICE CHAT
Consumer Get a Ride Travel from A:B Enter destination
Text fields with variable data
Partner with a map provider and
OS for location data)
Supplement location for
simple input confirmation.

UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
USER INPUT
DATA ENTRY &
STUCTURE
PLATFORM
PLATFORM
ADVANTAGE
+ GUI
MULTI MODAL
ADVANTAGE
Gopher command
N/A
N/A
VOICE CHAT
Small business Invoice customers Get paid Confirm client to review invoice

UX
JOURNEY
CUSTOMER
JOB
BENEFIT
TASK
USER INPUT
DATA ENTRY &
STUCTURE
PLATFORM
PLATFORM
ADVANTAGE
+ GUI
MULTI MODAL
ADVANTAGE
Gopher command
N/A
N/A
VOICE CHAT

Step
• Let’s bring it together. Start prototyping
via sketch, or simulate a VUI or Chat-bot.
15 mins Try
10 mins Share

Designing a
conversation.
• It’s important to follow the conventions of the
conversational flow.
• Determine what is your conversation type,
scripted or free form.

PLATFORM RESOURCES/ DESIGN
https://developers.google.com/actions/design/
https://developer.amazon.com/designing-for-voice/
https://developers.facebook.com/docs/messenger-platform/design-
resources/guidelines
https://api.slack.com/best-practices
https://developer.apple.com/ios/human-interface-guidelines/features/siri/

Conversational UI 101: How to Design for Voice and Chat

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Conversational UI 101: How to Design for Voice and Chat

Similaire à Conversational UI 101: How to Design for Voice and Chat (20)

Plus de Stephen Gay

Plus de Stephen Gay (13)

Dernier

Dernier (20)

Conversational UI 101: How to Design for Voice and Chat