With the advent of voice-activated products and platforms, more news companies are dipping their toes in voice and conversational bots. For designers, this raises the question—how do you approach design when it’s invisible? In her session, senior product designer Sanette Tanaka will go over how her team at Vox Media designed an Amazon Echo bot, never having worked with voice interfaces prior. She will walk you through the steps she followed to adapt her design process for voice, while also sharing best practices in voice design.
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Designing for Voice
1. Presented by Sanette Tanaka
Senior Designer at Vox Media
SND 2017
Designing for
Voice
2.
3. “Alexa, open Circuit Breaker”
“Tell me the details”
“Price”
“Next story, please”
Here’s today’s featured gadget...
This pillow supposedly reproduces sunlight...
This light-up pillow starts at $199.
The SwitchCharge might be the first good
battery case for the Nintendo Switch…
5. What is a bot?
A bot is software that automates a task
In the context of journalism and publishing, the
term “bot” is normally used to refer to something
that users can interact with*
A user interface is the space where a human and
computer can interact
* Excerpted from Paul Bradshaw’s Online Journalism Handbook
14. What needed to be
designed, a non-
exhaustive list
What content makes sense for voice?
How should a user navigate?
How should they interact with the bot?
What words will they use?
How should the bot respond?
How frequent should the interactions be?
What’s the personality?
What’s the tone?
17. Content System
● What type of content
should we deliver in our
app?
● How can our content
be useful to our
readers in our app
(How is what we're
planning any different
from a newsletter?)
● What are the
mechanics of content
delivery?
Interactions
● What kinds of bot
interactions are
valuable?
● Is there a way we can
add value without
interactions?
● What’s a smart way we
can invite users to dive
deeper into a topic?
● How can we support
navigating the app?
● How can we provide
feedback?
Personality
● What is the
personality of this
app?
● How can we run that
personality through
every aspect of the
app?
● How does Alexa’s
innate personality
support or hinder us?
18.
19. Moving into
design(!)
Married vision with technical reality
Platform limitations: Alexa could not instigate a
conversation
Resource limitations: Could not build an open-
ended, AI-driven bot
Keyword-and-answer model worked best for us
20. Decide on the structure of the
bot (navigation, information
architecture, flow)
STEP THREE
21. What type of content
would exist in our bot,
and how could our
user access it?
26. How we tested our
Alexa bot
Read a script out loud
Played content using Alexa’s developer tools
Prerecord Alexa speaking
Test with an actual prototype
27. How we tested our
Alexa bot,
continued
Recruit both experts and novices
Recognize your limitations
35. Our solutions
Accommodate your user over the bot
Broaden what your app will accept
Make room for natural speech
Consider filler words (ums, ahs, well)
43. The results
Finished the project with a working prototype that
we launched internally
Learned a ton about how to approach design for
voice
Makes me more aware of questions like:
● How much am I relying on visual indicators?
● What am I making my users remember?
● Am I considering copy as much as visuals?
● What’s the personality or tone of my product?
● Where can I cut cruft?
49. Resources
BOOKS
The Elements of VUI Style: A Practical Guide to Voice User Interface Design by Ahmed
Bouzid and Weiye Ma
The Voice in the Machine: Building Computers That Understand Speech by Roberto
Pieraccin
Wired for Speech: How Voice Activates and Advances the Human-Computer Relationship
by Clifford Nass and Scott Brave
Design for Real Life by Eric Meyer and Sara Wachter-Boettcher
WEB
An invisible interface: 6 things we learned from designing for voice by Sanette Tanaka
Alexa Skills Kit Voice Design Best Practices
The Jack Principles by Harry Gottlieb
How conversational interfaces make the internet more accessible for everyone by Josh Shi
Emotion and Voice User Interfaces by Darnell Clayton and Colleen Jones
All Talk and No Buttons: The Conversational UI by Matty Mariansky
Talking to Machines and Being Heard by Dave Rich
Extending the Google Assistant with Actions on Google via Google Cloud Next '17
Natural User Interfaces – What are they and how do you design user interfaces that feel
natural? by Ditte Hvas Mortensen
The Rise of Chatbots by Les-Tilleuls.coop
Conversational Interfaces, Explained by John Brownlee