A Voice User Interface (VUI) is a user interface that enables users to communicate with devices or applications through voice commands. All new-age, “smart” voice-activated devices have VUIs. For example, Apple’s VUI is Siri, Amazon’s VUI is Alexa, and Google’s VUI is Google Assistant. A well-designed VUI can elevate device-user interactions. It can also elevate a website’s status.

That is right: in the evolution of website UI and UX design, VUI is the next step. Many apps and smart devices have already taken this step. Now, it is time for website admins to integrate voice-friendly features into their digital platforms. Why? Because many website users want these features.

• In 2022, approximately 50% of the US population used voice search features on a daily basis.
• Up to 16% of these voice search users mentioned nearby establishments (for example, “restaurants near me” or “shops near me”) in their daily queries.
• Websites that are optimized for voice searches and have well-designed VUIs are much likelier to rank higher on Google’s SERPs for all voice searches and queries.
• The global voice-recognition technology market is expected to be worth around $50 billion by 2029. Websites that incorporate VUI design into their web design strategies can capitalize on this budding industry.

In short, if your website has a VUI, it will be much more accessible to tens of millions of daily voice search users. If the VUI is well-designed, your website can potentially become a hub for cool customer interactions and immersive user experiences. However, creating VUIs is a niche skill. It requires a lot of expertise in various areas of UI/UX design, including:

• Conversation design
• Interaction design
• Time linear design

In this article, let us go through these critical aspects of designing VUIs for websites. Before that, let us explore the history of VUIs in brief.

The History of Voice User Interfaces

The birth of VUIs can be traced back to the 1950s. In 1952, Bell Laboratories designed a speech-recognition system called AUDREY, i.e., the Automatic Digit Recognizer. Even though computing systems back then had limited computational speed and memory, AUDREY could identify the sound of spoken digits — 0 to 9, with more than 80% accuracy. This achievement indicated that despite all the difficulties VUIs could be built. Other notable incidents in the world of VUIs between the 1950s and 70s include:

• Japanese scientists from Kyoto University invented spoken-digit and vowel recognizers in the 1960s.
• IBM launched the “Shoebox,” a machine that could understand up to 16 spoken English words at the 1962 World Fair.
• In 1971, DARPA, the US Department of Defense’s official research agency funded a program that led to the creation of HARPY: a machine that could recognize entire sentences.

In the 1980s, the second generation of VUIs began. This era was dominated by Interactive Voice Response (IVR) systems. These machines could decode voice inputs over the phone, respond to voice commands, and initiate automated tasks. In the late 90s, IVRs were everywhere. Banking, insurance, aviation, and other service industries started using IVRs to process inbound calls, direct calls to in-house human agents, and respond to customer queries via recorded messages.

In the 21st century, automatic speech recognition technology has made significant strides. Unlike first and second-generation VUIs, third-generation of VUIs come paired with automatic speech recognition (ASR), natural language processing (NLP), and AI technologies.

These technologies have fortified the quality and usability of third-generation VUIs. They have also made VUIs more accessible. Hundreds of millions of users all across the world use VUIs every day through smartphones, smart assistant devices like Alexa, and car human-machine interfaces (HMIs).

This chart highlights significant achievements in the world of VUI design since 1952:

Why Does Your Website, Web App, or App Need a VUI?

Now that you know the unstoppable potential of VUI technology, you are probably enticed to custom-design a VUI for your own site. But first, what benefits should you expect from such an investment? Here are some of the most notable ways a well-designed VUI can improve your website:

Facilitating Purchases

A well-designed website VUI can optimize the process of users scanning, selecting, and buying products/services. Such a feature will not only please your existing users but will also open up your site to people with disabilities. A website VUI can also help visually impaired users navigate the website, learn about products, or book services in an easy, hassle-free way.

Optimizing Customer Service

An AI-powered VUI can troubleshoot problems and resolve customer issues on its own. As long as it is designed well, it can help your users in many ways: from providing product-related info to clarifying key service-related policies.

Access to Smart TVs

A well-designed website VUI can provide immersive user experiences on smart TVs. Hence websites with VUIs are likelier to be accessed by smart TV owners.

SEO Benefits

A well-designed VUI can also improve the Google rankings of your website. A website VUI that is optimized for SEO will be easier to find for voice search users. It may also boost the overall user experience of your website and improve its user retention rate.

There are several other subtle ways that website VUIs benefit brands and businesses. But, these benefits only come to fruition if the VUI is well-designed. So, let us assess the key design principles that will make your website VUI “well-designed.”

Designing VUIs for Websites

A common misconception that many new VUI designers have is that designing a VUI involves taking a functional graphical user interface (GUI) and then “giving it a voice.” That’s like saying anyone with drawing skills can become an expert conversationalist.

Creating a VUI is not the same as delivering a “voice version” of your website’s existing GUI. It is a whole different art with its own principles and fundamentals. Now that we have cleared up that misconception, here are the real principles of VUI design that web designers must apply:

Design with Time Linearity in Mind

Unlike GUIs, VUIs are linearly joined with time. To understand what that means, imagine reading text on a webpage. Your eyes will probably skip toward the sections you’re interested in or the sections that are most visually appealing.

Now, imagine navigating that same webpage via a VUI. There is no scope for skipping sections. You must patiently listen to the words on the page in the order they are presented in. In other words, breaking the rules of time linearity is not possible on VUIs.

Since your target users cannot skip time, there are some concrete design guidelines that you must adhere to while creating a VUI for a website, a web app, or a mobile app. One of the main ones is never to use long prompts.

Do not test your target user’s patience by presenting them with long prompts. For example, your VUI should not present users with a 3-minute long prompt explaining how the voice bot works, every time they access your website/app. Design the VUI to be compatible with short, to-the-point prompts. Similarly, you should:

• Design short menus
• Always place vital product-related information first
• Do not annoy the user by having them listen to unnecessary noise for the information they need. Give them what they want upfront.
• Allow users to give their responses even when your voice bot is not finished talking. In other words, allow interruptions.
• Allow pauses as well. For example, imagine a user submitting a confirmation code containing a long series of numbers on your website VUI. Your VUI should be designed to be patient in such situations.

Use Earcons

Earcons, i.e., auditory icons are the voice equivalent of GUI icons. An icon is a tiny graphic that conveys something very specific in the context of a user interaction. For example, a dart icon pointing to the left may mean go to the previous page. Just like GUIs have auditory icons, your VUI must have earcons.

For example, a clicking sound could be used to indicate that the voice bot is completing a specific task. For example, the sound of one click may indicate that the voice bot is sorting through products whereas two clicks can indicate purchases being registered. Earcons are essential for informing users that certain types of actions are being undertaken on the website.

Focus on Conversation Design

At its core, all forms of VUI design, be it for wearables, IoT devices, or websites, are rooted in conversation design. Carefully designing the flow of conversations is the essence of excellent conversation design. Here are some key conversation design principles that your website VUI must feature:

Design for Human Language

If your VUI is designed for human conversations, your users will not require a ton of instructions on how to use it. So, make sure that your VUI is optimized for the vocabulary of your target users. Add simple phrases/sentences to the VUI’s response system.

Do Not Teach Commands

Let users interact with the website VUI in their own words using the phrases they prefer. Avoid sharing or asking for technical terms or explanations. Use simple user-friendly dialogs to subtly facilitate positive conversations.

Design for Spoken Conversation

Never write dialog in a way that sounds odd when people speak it. Do not use long, well-structured, and formal-sounding dialogs. Design simple dialogs that sound natural.

Ideally, your web design team should regularly collect feedback on all user interactions. Your design team should also collaborate with professional conversation designers who can make your VUI sound more natural and intuitive.

Prototype and Test Your Designs

Tools like Voiceflow, Dialogflow, Speechly, and Alexa Skills have simplified the process of designing VUI prototypes for web apps, websites, mobile apps, bots, and smart devices. Use these tools to create and test multiple prototypes of your website VUI before you move on to the final product.

Some other key aspects of VUI design that are in lockstep with all types of UI/UX design practices include:

• Conducting user research
• Understanding the needs of target users
• Understanding the device persona
• Conducting competitor analysis
• Defining user pain points
• Creating a strong error strategy
• Adding strong layers of strong security to the VUI

VUI designers must keep all of these principles in mind while creating custom solutions for websites. The job is not easy. But, for brands that are in search of high-utility user interactions, adding well-designed VUIs to their websites is an essential business requirement. That is why VUI in web design is set to be a hot topic in 2023 and beyond. Hopefully, this guide has helped you understand the basics of Voice User Interface in web design!