Designing for Voice UI: Planning and Writing for Voice Interaction

CHXD Webinar
Designing for Voice UI: Planning and
Writing for Voice Interaction

Kathryn Hautanen
Director, CHXD
khautanen@madpow.com
@kathrynhautanen
Welcome!

About Us
Mad*Pow
Mad*Pow leverages strategic design and the psychology of motivation to
create innovative experiences and compelling digital solutions that are good
for people and good for business.
Center for Health Experience Design
The Center for Health Experience Design, founded by Mad*Pow, is a
community of over 800 professionals and a range of
organizations in the health space. Our partners include fledging startups and
global corporations.

Center for Health Experience Design
A Focus on Collaboration
We piece together and governs multi-stakeholder initiatives that are open to and will
benefit the greater community.
Membership to Accelerate Your Innovation Efforts
Memberships are a lightweight way to strategically extend your team and bring in
niche expertise. Access to subject matter experts, Mad*Pow design services,
discounts on HXD and Workshops, and much more…
Visit CenterHXD.com to learn more

GoToWebinar Interface
We will be presenting for approximately 45
minutes, and then we will spend 10 minutes
answering your questions.
Please enter your questions into the question
box.
If we run out of time, you can email us directly.

M A D * P O W | @ M A R S I N T H E S T A R S
6
NICE TO MEET YOU!
Marli Mesibov
VP, Content Strategy
Mad*Pow

Must Insert Background Image
To do so:
1- Select “Insert” in the file menu
2- Select “Picture from File”
3- Scale your image to fill the page
by dragging the corner
Background Image must be “sent to back”
To do so:
Right click the Image, select “Send to Back”
Make sure Arrow Box and Mad*Pow
Are viewable.
Mad*Powleverages strategicdesignandthe psychologyofmotivation
tocreate innovativeexperiences andcompelling digitalsolutions that
aregoodforpeople andgoodforbusiness.
DESIGN FOR CHANGE

P H O T O F R O M C O O P E R

S T A T S F R O M D E S I G N I N T E C H R E P O R T 2 0 1 7
Voice recognition has gone from
a high error rate (>25%) to a low
rate (<5%).

OUR JOB IS TO GO UNNOTICED
“…when no one in the audience knows where the light on the stage comes
from, and when no one notices anything on the stage except the actors […]
then you know that you have done your job as it should be done.” –Jean
Rosenthal, Broadway lighting designer

OUR JOB IS TO GO UNNOTICED
“…when no one in the audience knows where the light on the stage comes
from, and when no one notices anything on the stage except the actors […]
then you know that you have done your job as it should be done.” –Jean
Rosenthal, Broadway lighting designer
“Tomorrow’s devices should be unobtrusive… something so “you” that it
dissolves into your life.” - Thomas Gayno, Product Lead at Spotify

I M A G E F R O M L H B S

WHAT IS VOICE UI?
The future is calling

EXAMPLES OF VOICE UI
UI That Listens (Speech Recognition)
Speech to Text apps (e.g. Dragon, or Google
Voice)
Evernote
Midomi
ToDoist
Netflix
Xbox
UI That Listens and Responds
Siri
Cortana
Amazon Echo
Google Home
Interactive voice response (robot phone
operators)
Cue robot

17
VOICE VS. CONVERSATION
Chatbots AI Assistants Alexa Skills
Build a voice and tone Build a voice and tone Has a voice and tone
Does not need
an algorithm
Requires an
algorithm
Does not need
an algorithm
Responds to trigger-words Responds to trigger-words Responds to trigger-words
Transactional
Technology-based, so could
be either
Transactional or
informational
All content created by 1
company
All content created by 1
company
Collection of apps

EXPECTATIONS ARE HIGH!
18

19
REALITY? WE’RE NOT EVEN HITTING THE LOWEST BAR
V O I C E A P P L I C A T I O N P R O D U C T S T R A T E G Y , P H I L L I P H U N T E R

20
WHAT’S THE PROBLEM?
We are too focused on creating something
“delightful” and not focused enough on creating
something useful, intuitive, and human.
Let’s make Voice UI useful.

BIG PICTURE TIPS
How much voice would a voice voice voice if a voice voice had a voice voice?

22
“A conversational interface is any UI that mimics
chatting with a real human.”
–Conversational Interfaces, Explained
VOICE IS VOICE

23
1. IT’S A CONVERSATION
Just like writing, you want to:
• Consider the questions people state, and the questions they mean
• Set the user up for success
• Use language the audience will recognize
• Match the tone to the situation

24
EXAMPLE: LEMONADE HAS A CONVERSATION WITH YOU
Question
Answer
Question Question
Answer Answer

25
2. SAY IT ALOUD AND USE NATURAL LANGUAGE
You’re not building a chatbot, so you may be building one-off statements
• Use active voice
• Clarify the question
• “What’s the capital of Alaska?”
• “The capital of Alaska is Juneau.”
• Keep information brief – too much will get lost
• Accept that most conversations will be transactional
• Vary sentence structure, much like in writing

26
EXAMPLE: VEHICLE UI REQUIRES SHORT, NATURAL LANGUAGE STATEMENTS
A F A I L U R E S T O R Y T O D E S I G N V O I C E U S E R I N T E R F A C E # 1 , S U N K I M

27
EXAMPLE: MEMORIZING COMMANDS IS HARD

28
3. DON’T ASSUME CONTEXT
Voice UI doesn’t have the context of the written word
• There’s no surrounding navigation to tell visitors “where” they are
• No headers to visually orient
• No images
• User flows are broader, more expansive
“You have to map each voice request to a manually-curated query (i.e. create “all the dialog
boxes” by hand).”
- This is the Year of Voice

29
EXAMPLE: ALEXA ONLY KNOWS WHAT IT’S TOLD
What about questions like…
Alexa, where’s
the nearest
doctor?
(that takes my insurance)
Alexa, where can
I get a flu shot?
(and does that place
have them in stock?)
Alexa, is Starbucks
open today?
(and are there holiday
hours in effect?)
Alexa, when does
daylight savings
time begin?
(and does the country I am
visiting this weekend
observe it?)

30
4. ACCESSIBILITY IS SUPER IMPORTANT
• Written accessibility makes things visual and auditory
• Captions
• Alt-tags
• Transcripts
• Voice UI accessibility is about…
• Accents
• Cultural phrasing
• Understanding lisps
• Asking nicely for repeats
• Offering options before users get frustrated or overwhelmed

31
EXAMPLE: VOICE UI NEEDS TO BE ABLE TO “HEAR”
E L E V A T O R R E C O G N I T I O N | B U R N I S T O U N

32
5. VOICE SOUNDS DIFFERENT
Even an audio team like NPR identifies difference in the phrases people use:
“We started with a few questions:
• What features might users most value in a voice-driven context?
• How would the voice device respond in each scenario? (When should the device give a
minimal response? When should it provide more verbose feedback? When should it
provide no feedback and just perform the action?)
• What should a conversation with NPR over VUI feel like? (When might users expect to
provide additional information? What contextual information are users expecting? How
much response information is enough?)”
-Talking Back to Your Radio: How We Approached Voice-UI (NPR)

33
EXAMPLE: NPR CHANGES THE TERMINOLOGY FOR VOICE
T A L K I N G B A C K T O Y O U R R A D I O : H O W W E A P P R O A C H E D V O I C E - U I

HOW DO YOU WRITE FOR
VOICE?
Your voice has a voice (and tone)

START WITH VOICE AND TONE
A voice and tone accurately reflects brand personality. It supports communication goals and
provides useful, usable content.
Voice
The voice, or personality, comes across in everything the brand “says” – every bit of help text,
microcopy, messaging, etc.
Tone
Tone is a subset of voice; where voice is the overarching personality, the tone is the appropriate
variation, given the specific situation.

EXAMPLE: 18F

EXAMPLE: MAILCHIMP

HOW DO YOU CREATE A VOICE (FOR VOICE)?
1. Identify content goals
2. Create a message architecture
3. Define the voice
4. TEST!
5. Select relevant scenarios, and each scenario’s
appropriate tone
6. Add the nuts and bolts: editorial guidelines

1. CONTENT GOALS
The content goals are made up of a combination of audience needs and business
objectives. To do that, first define:
1. Audience
Define the audience(s) we are speaking to
2. Audience Goals
List out prioritized audience goals
3. Business Objectives
List out prioritized business objectives
What Makes it Voice-Specific?
It’s Not! But you should still
consider:
• Why do you offer this as a voice
product?
• How will voice UI help your
audience reach their goals?

START WITH VOICE AND TONE
K A T E K I E F E R L E E , C R E A T I N G C O N T E N T F O R H U M A N S

2. MESSAGE ARCHITECTURE
A message architecture serves as a guidepost for future decision making. These themes are
distilled from our audience needs and business objectives.
The message architecture themes will drive
tactical decisions about content and how we
prioritize, organize and present information.
When in doubt, return to the message
architecture to ask: does this decision support
our architecture?
consider:
• A message architecture should be
what helps your team identify if
voice UI is right for you.
• But if you’re already committed,
use the message architecture to
check that voice UI will help
uphold your pillars.

MESSAGE ARCHITECTURE THEMES
A message architecture is typically made up of 4-6 pillars. Write down your pillars, and for
each one consider:
How People Will Describe Us
This should be specific to the pillar: how will
people describe us that tells us we are
aligning with this pillar. i.e. if one pillar is that
we are a technology-driven influencer, what
will people say about us that reinforces that?
Content/Design Implications
These may come from behavior change
recommendations, client requests, or known
best practices.
Examples: Scaffold learning; Use X
technology; Allow users to track their work;
Use gamification to do X; Personalize
elements to do X; Create mobile-friendly
content (etc.)

EXAMPLE
A message architecture is typically made up of 4-6 pillars. Write down your pillars, and for
each one consider:
How People Will Describe Us
Supportive. Company X is a caring,
passionate, and friendly community that
helps me pay my bills. The coaches have a
genuine desire to pay-forward their own
rewarding experience.
Content/Design Implications
Customer support should always be
available.
Chatbot is very important for hours coaches
are not available.
All personalized or automated elements
need to be well explained, and never appear
to be preset.

3. VOICE
The voice, or personality, comes across in everything the brand “says”.
To create a voice, go back to your themes and
how you said people would describe you.
Make a list of 20-50 adjectives that align with
your message architecture. Then remove
duplicates and redundancies, and whittle
your list of adjectives down to 6-8.
These 6-8 define your voice.
consider:
• Your voice will need to be
consistent across multiple
channels (including voice UI).
• If you’re using Alexa Skills, there’s
already a voice there. How will
your voice align with Alexa’s?

TO CREATE YOUR VOICE, FOR EACH ADJECTIVE DEFINE:
Why it Matters
What we know about users.
How We Do it
Describe what this voice means/sounds like.
What it Sounds Like (Written) Not…
1-2 sentence example 1-2 sentence example
What it Sounds Like (Voice) Not…
1-2 sentence example 1-2 sentence example

EXAMPLE: EMPATHETIC
Why it Matters
Our audience fears they are being judged for not paying their bills on time. Empathy is key to
reducing their fear of judgment.
How We Do it
Express sympathy and understanding for members’ decisions, beliefs, and motivations.
What it Sounds Like (Written) Not…
Of course you want to pay your bills, but
sometimes life gets in the way. Let’s make a list
of some of the reasons you want to pay your
bills.
Pay your bills on time. Otherwise you’re causing
more problems for yourself.
What it Sounds Like (Voice) Not…
Do you want to call your coach? You didn’t call your coach yesterday. You need
to call now.

4. TEST
You can usability test a voice UI without a fancy developed prototype! Just use the “Wizard
of Oz” approach. It was pretty much invented for voice UI… in 1984.

5. TONE: WHAT DO WE SOUND LIKE WHEN…
Scenario #1
(common scenarios: first
interaction, giving bad
news, congratulating,
explaining something,
setting goals)
Scenario #2 Scenario #3
Scenario #4 Scenario #5 Scenario #6

TO CREATE YOUR TONES, FOR EACH SCENARIO DEFINE:
Key elements
Describe the tone and why it is appropriate for this specific scenario
How we do it
Give concrete examples, such as “restate the question”
What it sounds like
1-2 sentence examples
• Tone is intended to help for
various scenarios… but don’t
forget to include examples of the
channels where someone might
encounter a scenario.

EXAMPLE: MAILCHIMP
K A T E K I E F E R L E E , C R E A T I N G C O N T E N T F O R H U M A N S

6. EDITORIAL GUIDELINES
While the voice and tone convey your brand personality, following best practices and your
editorial guidelines gives your content structure and consistency.
Many editorial guidelines will change from one project or brand to the next. The important
thing is to stick to them for consistency.
• Editorial guidelines MUST change
to accommodate the differences
between voice UI and written
text.

QUESTIONS TO DETERMINE EDITORIAL GUIDELINES
• What grade reading level are you writing
for? (7th grade is appropriate for most
situations – written. What about voice?)
• Are you writing in 1st, 2nd, or 3rd person?
Why?
• Do you use slang?
• What punctuation do you prefer?
• What pronouns do you use?
• What abbreviations do you use (if any)?
• Do you use complete sentences?
• Do you use Active Voice?
• Break content into easily digestible chunks
with bullets, subheads, etc. – but how
small?
• Write clearly and concisely – what are
examples for voice vs. written text?

IN CONCLUSION
Let me ’splain… No, there is too much. Let me sum up.

VOICE UI IS A TOOL. USE IT WELL.

Thank you!
We’re here to help
• We can help with your design and innovation goals:
• Research & Strategy
• User Experience Design & Development
• Service Design
• Intervention Design & Evaluation
• Design & Innovation Challenges
For any questions, contact
khautanen@madpow.net

Designing for Voice UI: Planning and Writing for Voice Interaction

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Designing for Voice UI: Planning and Writing for Voice Interaction

Ähnlich wie Designing for Voice UI: Planning and Writing for Voice Interaction (20)

Mehr von Marli Mesibov

Mehr von Marli Mesibov (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Designing for Voice UI: Planning and Writing for Voice Interaction

Hinweis der Redaktion