Home > UI Design and Prototyping > A UXers Guide to Voice UIs

The ultimate guide to designing a voice user interface that will delight your users again and again

Everyone’s talking about voice user interface (VUI). Advances in machine learning mean that voice recognition is becoming more accurate, and more mainstream. In fact, last year 20% of mobile queries were voice searches, according to Greg Sterling at Search Engine Land. With the use of voice recognition technology – such as Apple’s Siri, Microsoft’s Cortana, Google Now, Amazon’s Echo – on the up, UX designers need to be thinking more about creating VUIs.

A VUI allows people to interact with computers and devices through voice/speech input. It’s used to initiate an automated service or process and is fast becoming one of the most popular ways for users to interact with computers and devices. Let’s take a look at why and how designing for voice will improve user engagement and sales.

Why design user interfaces for voice?

“Humans have been developing the art of conversation for thousands of years. It is a skill adults draw upon instinctively, every day, for most of their lives.” Cheryl Platz

So, why design interactions for voice? Well for starters, voice is the most natural machine-human input method available. As Jared Benson over at Punchcut puts it, voice UI reflects “the efficiency of speech in communicating complex and emotionally rich thoughts with the people around us.”

But let’s take a look at why voice interaction has really taken off:

Mobile-first design: user experience

Voice UI is going to be huge on mobile. When we’re on the go, leveraging already learned behavior can take the stress out of interacting with a UI. Why is this? Because speech can be a more accessible and delightful way to interact with a small screen, compared with touch, which requires more concentration.

According to a recent experiment performed at Stanford University, speech recognition (dictation) writes text messages more quickly than the average thumb. And, when trying to multi-task, speaking can be more efficient and less risky than typing. What a boost for user experience!

Mobile first design: the business pitch

In an age where technology is coming at us mobile-first, designing for voice makes great business sense. According to Nate Dame on SearchEngineland, major mobile operating systems are already featuring personal assistants as default. Chat app WeChat processes around $550 billion every year – that’s twice the rate of Paypal according to Cooper. And when we look at voice UIs, the case is just as strong. CIRP has it that Echo more than doubled last year, up from 20% in 2015 to 50% in 2016.

Improved communication between users

Voice interaction can improve communication between mobile users. It provides empathy, which can help to avoid misunderstandings or miscommunication when users aren’t speaking face to face. How many times have you read a text message and wondered exactly what the other person meant by it? With quick and direct communication with the other person, there is an immediate understanding of their intention. Think Scarlett Johansson’s voice in the movie Her.


Map out your voice UI flow with Justinmind

Download free

How do UX designers create VUIs?

The key to winning voice user interface design is to think realistically. Users need to understand what can be done, as well as the limitations of the voice UI. Note that current voice UIs can’t produce a meaningful dialogue, or be a natural conversation partner. That’s why it’s important to include the right amount of information.

Start off by designing the navigation flow of information and dialogue. What will the user need to hear to get from point A to point B? Mapping out your user flow will help you to visualize what the user needs to do to reach their destination in the user journey.

To create your flow, start by sketching out – or prototyping out – all the possible branches a user can go down to get to their end goal in a diagram. Make sure you list all the different paths the user could take to get to the next stage in their journey and group them as it makes sense in the diagram. For instance, you could group them by touch point.

Sample flow with complete branching, Image credit: Cathy Pearl

Keep users informed about their possible interactions

Once you’ve defined the main touch points, work on the specific instructions the user will need to follow in order to progress through the UI.

Try limiting instructions to two-sided options or yes/no questions so as not to complicate the process. Amazon recommends that the maximum number of options for a single interaction be limited to 3. For instance, say you’re designing a music playback app service, similar to Spotify. Your options might be: listen to this album in alphabetical order of songs or turn on shuffle play.

Additionally, ensure that the user always has a way to exit the UI so that they can start over or get back to an earlier set of options if they’ve gone down the wrong path.

Improve usability with clear instructions

In any kind of UX design, keep things simple. The user can’t see where they are in the UI, so the VUI needs to tell them what functionality they are using. With your music app, once the user is within a playlist, it should offer up relevant information. For example: “this playlist has 3 hours and 35 minutes’ worth of audio”.

Plan for the unknown

As much as you plan for user responses to your VUI, you’re always going to get some oddballs who challenge the system or flat out just don’t understand what’s going on. Cathy Pearl offers some great insight into good conversational design, as well as crafting clever user prompts in her book “Designing Voice User Interfaces”. She suggests that you only offer questions that you’ll understand the answer to. She quotes Google’s Interaction Designer, Margaret Urban: “don’t ask a question if you won’t be able to understand it.”

Having said this, sometimes the VUI just won’t understand the answer. What to do then? Plan an appropriate response, such as asking the user to repeat their answer, speak more slowly, or even create a new branch of questions if the last answer was incomprehensible.

Use visual cues for extra guidance if possible

Finally, consider using a visual cue or feedback. Visual feedback in voice UI design lets the user know that the system is on and listening to them. The feedback doesn’t need to be anything too dramatic, it could be as simple as a lit up LED to acknowledge a request. For instance, Amazon Echo’s Dot produces a blue swirl that acknowledges the user saying ‘Alexa’.

When not to use VUIs:

Sometimes voice recognition does not help user engagement with a UI. Some users won’t feel comfortable using a voice UI, such as an older web user or perhaps a user with a speech impairment or the hard of hearing. And then there are other users who simply prefer a visual UI, for privacy, because they prefer visual interaction. Know your audience and design right by them.

The takeaway

With more demand for voice technology, designers should be looking for create innovative new experiences for the more natural type of user interface.

Designing for voice isn’t so different from designing visual interfaces. Both need careful planning, designing and testing. So before you get Scarlett Johansson on the line, get your VUI ideas down on paper, or in an interactive prototype, and test on real users.

Emily is Marketing Content Editor at Justinmind


Your email address will not be published. Required fields are marked *