Next up: Preston So and his talk Elements Heard, Not Seen. Because this year I used Twitter’s threading / topics feature, it’s giving me 2 tweets in each embed I do here. I’m embedding every other tweet for readability. There’s a PDF at the bottom of the page in case this all collapses.
♛ Next at #AEAOT, Oracle Sr Product Strategy Director (and @ABookApart author) @PrestonSo helps us transition to voice design—using familiar web elements + emerging affordances.#ux #design #VoiceUX #VoiceDesign #WebDesign pic.twitter.com/gh6Gcgdn2r
— zeldman (@zeldman) October 12, 2021
Designing for voice interfaces has no visual canvas. How do we actually design for voice interfaces? Our skills are biased toward the visual web. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
When you create a voice interface, no matter with it’s based on, there are 2 things that matter most:
1. a set of dialogs
2. voice interface flows that outline the structure and how users journey across the interface. #aeaot— Anne Gibson (@perpendicularme) October 12, 2021
in voice, machines are playing on our terms, not us playing on machines’ terms.
Screen readers are very very different from voice interfaces. Readymade verbal implementation of websites are not the same as voice interfaces.
— Anne Gibson (@perpendicularme) October 12, 2021
Designing for voice interfaces means writing natural dialogue and structuring natural flows.
Many of us are not starting from scratch. We’re converting existing content and sites into voice interfaces.
— Anne Gibson (@perpendicularme) October 12, 2021
The thematic element of the web (pages, formatting, links, calls to action, forms, alert boxes, etc.) all map to the voice elements of onboarding, prompts, intents, and responses. They’re called utterances.
all elements in web design have equivalents in web flows. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
2. Reorient your design thinking away from visual documents and space toward aural events in time. We need to have a shift from how information occupies space to how it occupies time as events. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Flows – call flow diagrams – are the way you work through a voice interface.
series of elements that are moving between elements that we do on a regular basis. shows how we move between elements and how decisions are made.
— Anne Gibson (@perpendicularme) October 12, 2021
https://t.co/eI9BNv0JRT has a very accessible website that also breaks down nicely into categories and a strong hierarchy.
First we need to write a dialog to break down that content.
First we have a topic and what you should know about it. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
If we’re looking at this from a web browser, we just scroll down the page. but we can’t present a whole page in a voice interface. and if you’re building a transactional interaction, you can’t ‘display’ everything on the page. so we have to split this up into elements. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
a single sample dialog represents a single way to go through the flow diagram. multiple sample dialogs make up a single call flow diagram.
key takeaway: two tools for voice dialog. Dialogs and flows. You can’t build one in isolation from another. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
keep your voice onboarding relatively short because your title and intro paragraph are relatively short. Do not cause the user’s eyes glaze over. The user can’t scroll past your voice dialog.
Be very clear about what the user can do and what you do for the user. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Keep it short.
Keep it natural.
Design for ambiguity. The more abilities in a dialog the more difficult it is to conduct the cconversation.
Support corrections.
Timing is important. Silences can sound very unnatural.
#aeaot— Anne Gibson (@perpendicularme) October 12, 2021
Prompts are ways to fill out forms. On the web those are links, buttons, forms, inputs, text areas. in the voice interface it’s questions that the system asks, or directions like “feel free to ask a question”. Giving suggestions like how to respond is great. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
When providing information back, ask “does this sound helpful?”
Intent identification is the process of understanding what the user wants when it’s ambiguous or uncertain.
— Anne Gibson (@perpendicularme) October 12, 2021
Events that occur in a website – what makes up a call flow diagram. Phone hotlines, etc. all use call flow diagrams. Decision states are where the interface presents you with a prompt and then reacts to your response. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Moving from one decision state to the next is how navigation through the system works. Prompts on the left and responses on the right gives a very clear way to read the decision states. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
What do we do with menus and lists? Voice menus are essential for identifying user intent, but they can’t present as many verbal options as visual menus.
[You should probably cut down your visual menus too. I have opinions!]
— Anne Gibson (@perpendicularme) October 12, 2021
Multiple dialogs brought in together allow you to create a flow diagram based on those dialogs. Prompts, responses, and recursive elements all us to bring together a set of use cases and dialogs for users. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
The new design problems in voice:
Perceived identity and implicit biases are a problem. We picture people when we hear Alexa or Siri speak. They’re generally personified as cisgendered white women with standard American accents.
— Anne Gibson (@perpendicularme) October 12, 2021
The conversational singularity will make voice interfaces indistinguishable from natural human conversation.
Websites can fall into very easy set of paradigms for their interactions. At what cost does conversational singularity occur? #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Here’s a PDF of this post (which might not be accessible because I’m using print-to-PDF to generate it, my apologies) in case Twitter kicks it and all the tweets disappear. An Event Apart OT 2021 Elements Heard not Seen by Preston So – Perpendicular Angel Design