SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

Why We Think VUIs In Web Design Could Be The Next Big Thing

By Eva Barnes , Mar 24 2017

Featured Image: iStock/elenabs

Artificial Intelligence and smart technology has always been a dream, for not only the science geeks, but also for everyone else. Unless you’ve seen VIKI in ‘I, Robot’, or Marvel’s Arnim Zola, then this would probably be a subject for your nightmares. But what if, instead of the smart homicidal robots and evil computers, there was an intelligent website? Surely that wouldn’t be as threatening.

scientific and technological progress
Image Source

On a side note, AI and super intelligent machines have been the target of several controversies and beliefs; like machines taking over the world or destroying the human race, etc. Most of this is mumbo jumbo, with very little fact-based arguments. But if you strongly believe in those few facts, then you can volunteer with The Future of Life Institute; and join their quest, to alleviate existential risks to humanity (including AI). The FLI team and board, boasts of some very prominent and well-adjusted individuals (no pun intended), including Jaan Tallinn, Elon Musk, Stephan Hawking and Morgan Freeman.

However, their beliefs, haven’t stopped the tech giants from researching and working on, towards making AI a part of our daily lives. You might have heard about Adobe’s new project, which is based on bringing AI to web and graphic design. The details of the venture, right now, are mostly kept ‘hush hush’, but you can check out the basics in this article.

captain america winter soldier arnim zola
Image Source

Yet wouldn’t it be great if your websites and computers could be like JARVIS? You would just have to voice a command or ask it something. It would access the internet or stored data, and give you an appropriate answer. No hassle and very little effort! This for us lazy fanciful beings would be like going on the Polar Express to meet Santa; dreamy, beguiling and unreal.

At this stage you can customize to make your computer function like JARVIS, on an elementary level, but reaching that extent of technological advancement, is still pretty far-fetched.

iron man jarvis
Image Source

We are still at the base level in this field, the farthest we’ve come to talking with machines is by developing Voice User Interfaces (VUIs). VUIs (aka. Conversational User Interfaces or CUIs), are still not that common. They aren’t functional in web design yet, but are at least being employed elsewhere, like in Amazon’s Alexa, Google Assistant, Microsoft’s Cortana and Apple’s Siri.

However, smart VUIs are still a work-in-progress, their existent versions have their fair share of limitations that could sometimes piss off users. The reason you should follow VUI news is because, if VUIs can be employed in apps, then their integration in websites isn’t that far in the future.

voice first devices
Image Source

According to Forbes, ‘there are 8.2 million voice-first devices in homes now, mostly Amazon Echos, and the figure is set to rise to 33 million by the end of this year’. For those of you who are living under a rock, Amazon Echo, is a hand-free speaker that you can connect to your Alexa app and operate by voice.

Image Source

Another article, we read on TechCrunch, shares more insight into Amazon Alexa and the response it is getting. From it, we can safely deduce that VUIs are becoming the current hype, so very soon this technology would become widespread. It states, that at the start of 2016, there were around 130 Alexa apps or ‘skills’, as they are called. The second half of 2016, saw over 500% application growth, elevating the number to above 5,000. And today there are more than 7,000 of these apps.

Amazon alexa app store
Image Source

You might be wondering why we are discussing every technology, machine or app that employs VUIs. The reason we are exploring these and smart tech (AI), as well as their backgrounds, is to understand the VUIs current equation. All this extra matter will not only tells us where it stand now, but it can also help us predict what future VUIs can hold in web design. So suck it up and check out the rest!

apple keynote features
Image Source

History And Evolution Of Vuis:

Rome wasn’t built in day, and neither were VUIs. The VUIs we find today weren’t like that always, having a conversation or even being heard by machines was way harder. This technology improved over the years with great trial and error, but people have been dreaming about this for almost a century. Perhaps the earliest use of voice input people witnessed was in the 1920s, when the first-ever voice activated product, the Radio Rex, toy dog was created.

robotic voice
Image Source

The 1980s was when this technology became somewhat useful to the consumers, after IBM developed the dictation taking computer that had a vocabulary of a few thousand words. This computer had its own drawback; it could only understand English spoken in an unaccented robotic voice. However, research and work was being done on this by IBM since the 1960s, so making this computer then was chalked as a small victory on their part.

Voice recognition
Image Source

The 1990s witnessed significant development in this sector. Voice recognition grew to contribute to a small extent in the everyday lives of people. The example of this would be the voice dialers that could remember up to 10 phone numbers and dial upon hearing the persons’ names.

desktop and devices evolution

Image: iStock/elenabs

The 2000s saw the rise of Interactive Voice Response (IVR) which was employed in customer-support centers of banks and airline booking offices.

Howbeit, perhaps the greatest achievement humans observed in voice technology was in 2011; when Siri was launched for the first time by Apple in the iPhone 4S. This is perhaps the closest we’ve come to getting our dreams.

After this in 2015, Mattel released the Hello Barbie doll that supports WiFi and has a microphone integrated in it. This doll can have minimal conversations and can play interactive, voice-enabled games with kids.

Hello Barbie doll
Image Source

With the history out of the way, we can now jump back to the present. GUIs are what have laid foundation to where we stand now with user interfaces in web designing. The websites we see today are basically better versions of GUIs, so without further ado, let’s have a look at GUIs. Also, we’ll explore the difference between GUIs and VUIs, their current state and how they can contribute to designing.

VUIs Vs. GUIs In Web Design:

There are various kinds of UIs; Command Line Interface (CLI), Tangible User Interface (TUI), Text User Interface (TUI), Brain Computer Interface (BCI), Natural User Interface (NUL) and Perceptual User Interface (PUL). Nonetheless, the main thing to remember, is that no matter what kind of user interface we are creating, the main focus should be on the user. Here however, we are just going to discuss the VUI and Graphical User Interface (GUI).

web GUI vs VUI
Image Source

GUI is the window which contains all the software elements. It can be divided into three parts; the operating system window frame around the browser, the browser software components and the page display area. A user can access information in a GUI mainly through a mouse and keyboard, but the menus and buttons on the software window can also be used.

While a VUI is based fully on voice interaction with very little or no use of hands. All interaction here occurs through voice output (speakers) and input (microphone). This proves to be of great convenience, especially while using small devices like mobile phones where there’s a tiny on-screen keyboard for input.

differences between GUIs and VUIs
Image Source

Aside from the difference in hardware and the mode of interaction, there are five other differences between GUIs and VUIs:

processing and memory
Image Source

  • VUIs are invisible, they don’t have a visible appearance. They are designed to put as little demands on the users cognitive processing and memory as possible. GUIs on the other hand, have elaborate visible features.
  • VUIs are frequently used in environments where other factors are also at play in competing for the users’ attention, like while driving, walking, etc. VoiceXML apps are generally created to support the sky-rocketing mobile culture; hence the need for designing less brain activity demanding apps. GUIs however require ample attention and users’ function, not only in accessing the information but also in operating the required hardware.
  • At present there are no standard VUI elements like there are in GUIs e.g. Home, Error dialogues, Back, Next, Main Menu, etc. Thus, you have to integrate correlating structures to support the application processing and VUI elements.
  • VUIs must be task-oriented, their restricting characteristics demand a smooth and simple workflow, and very little to no branching. If this isn’t implemented then the interface very easily gets confused with the commands. Generally, all UIs need to be task-focused for better user awareness and heightened interest, but VUIs go too far. With GUIs, you can multitask; separate windows can be opened to access different information and the users can easily shuffle between them.
  • VUIs in their original sense are single-mode interfaces that only input and output sounds, the perfect example being VoiceXML apps. But this doesn’t mean that they are restricted to one method, they can exist in multimode too. GUIs however, are generally found in multi-mode interfaces such as WIMP GUIs.

Image Source

After covering the differences between VUIs and GUIs, let’s move forward and see what you should focus on while creating a VUI.

Designing A VUI:

Designing a VUI can be divided into two parts; the basic guidelines and the actual process. There are 11 guidelines, which you should pay heed to in the planning phase, they will tell you exactly how your VUI should be.

Steps to designing
Image Source

  • Lengthy prompts – Long prompts take too much of the users time and thereby annoys them.
  • Cut-off conversation – Allow users to issue commands before the computer concludes its long messages, to save time.
  • Elaborate VUI Menus – A VUI Menu should never exceed 5 to 6 items, otherwise it bores and confuses the user, at the same time.
  • Repeat prompts – Allow users to repeat prompts, for better understanding or in case they overheard it. Let them know at the start that they can get the interface to repeat prompts.
  • Audio Breadcrumbs – Integrate ‘Breadcrumb Navigation’ used avidly in GUIs, into the VUIs, as they will prove to be pretty helpful.
  • Long messages – Conclude the conversations quickly. Forcing the users to hear long introductory marketing messages, annoys them and makes them lose interest.
  • Audio Icons – Audio icons can be added to make the users aware of the options that they have at the present moment.
  • Virtual location – Inform users where they are in the interaction, whether in the ‘Main Menu’ or at the ‘End’, etc. This will help them navigate.
  • Provide global hotwords – Hotwords are application level shortcuts that can cut through long menus. They are present in proper responsive VUI systems.
  • Help availability – Provide users the Help options at all times along with any information that is vital to carry out the process.
  • Conversation summary – Give a conclusion of all facts gathered or commands carried out at the end of the interaction.

Voice testing
Image Source

Now let’s get down to the process of creating VUIs; we have published each step that needs to be taken while making a VUI, aside from the coding.

  • Voice testing: Test voices before finalizing because each voice can have a different impact, some voices can give a better VUI, so be careful of what you choose.
  • Dialect selection: If you are targeting users of a particular region then you can take advantage of this. Using a particular dialect can make users feel more comfortable. However, if you are catering to a wider demographic then stick to a standard language.
  • Volume adjustment: Volume can play a major role in persuasion and user experience, too low or too loud can affect both negatively.
  • Pace and pitch tuning: Pace and pitch have the same affects as volume on the speech, so a sharp eye should be kept on the two to avoid providing an unpleasant experience.
  • Tone adaption: The tone of the voice should match the script, a banking software should sound neutral, hospitals representative applications shouldn’t sound overly chirpy or aggressive but they should sound soothing.
  • Voice personalization: Give users the option to choose from different voices depending on their preference of what they find the most audible.

tools and softwares
Image Source

In order to ease up the process of designing and creating successful VUIs, we are stating some tools and softwares that could be of use to all you amateur web designers.

In order to check the VUI’s flow, you can create and connect sample dialogues and prompts with Google Drawing, yEd, Omnigraffle and Visio.

Furthermore, use can employ the assistance of some VUI and Natural Language Understanding (NLU) tools for prototyping such as,, Pullstring’s authority tool, Nuance Mix and Tincan.AL from Conversant Labs.

development stages
Image Source

Future Of VUIs:

We have already said multiple times that VUIs are still in the development stages, work is being done to improve them further. Yet, perhaps the two main setbacks VUIs have, are the same as the core drawbacks in AI; coming up short in replicating the human touch.

While is it obvious that machines could never think nor operate as humans, scientists haven’t given up hope that maybe they could be made smarter. So people spend obscene amounts of money and countless years on research. But what they need to do now to improve VUIs, is to buck up voice recognition which will solve both its issues, to a certain extend.

smart VUI
Image Source

The first lack in VUI is voice authentication, a smart VUI would be able to identify the user and focus only on his voice, blocking out all white noise and talking present in the background.

Secondly, a smart VUI would be able to identify the emotional state of the user by analyzing the undercurrent in the tone, the selection of words, pitch and more. And then it would respond accordingly to that user.

Apart from all this, wouldn’t it be great if all electronics present in our homes could be operated by voice. You would just have to tell your oven to preheat, your air conditioner to lower the temperature, your TV to switch to a particular channel, your phone to dial a number and your computer to visit a particular site to find a specific article. It couldn’t get any better!

assistant commande vocale
Image Source

The question however remains… How can VUIs affect Web Design? Read on and find out!

VUIs In Web Design:

VUIs are a relatively new tool in web designing, but it has great potential and can effectively shape the future of the web.

Imagine if you could surf the web just by commanding your inanimate computer; hopping from page to page, switching from site to site. Not only would it require lesser effort, but it would also cut the need of operational hardware by half. You wouldn’t need a mouse or keyboard attached to your desktop or laptop; speakers and microphones are already integrated in most devices now so that’s no issue.

illustration dictee vocale sur mac
Image Source

Plus it would be something that is heaven-sent for the blind. Instead of a few sites, now they’ll be able to access and understand most of the sites, that is, if this becomes an active trend.

We wouldn’t have to read long articles on the news sites if we didn’t want, instead our computer could read it out to us like a bedtime story. And this isn’t even the best part, creating websites and developing content would become so much easier. Let’s just hope VUIs become active participles in designing soon!

Image Source

What do you think; are VUIs the next big thing in Web Design? Comment and let us know your thoughts on this matter.

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

Leave a Reply