A refined voice experience for your chat bot

dynamic voice ux

man-using-voice-command-recorder-on-smar

For this project, I wanted to redefine the best practice for the voice experience.  

There are countless ways to showcase voice UIs. In many cases, usually it just shows a simple mic flashing on the side

or as a separate overlay the blocks the whole page.

Mic-4_3x.gif
voice cover copy_3x.png
1_g57bxbho2VS4Epg2sn1YXQ.gif

As a user, I had always thought that either practice was very polar - one method is so small that you don't know when to start speaking, while the other method blocks all content

Case Study

unnamed.png

In my opinion, the best practice is in the Google Assistant interface, where both Chat UI and Voice UI are on the same page, as to create a more cohesive experience. The way Google Assistant handles both voice and typing is simply through a change in input fields. Google Assistant is voice-biased and will usually start by recording right away, but also has an icon to immediately call up the keyboard for the user to type their request.

Design

google-pixel-2-xl-mockup-by-roman-kryzha
Group 15.png

The voice should start recording immediately after tapping mic icon the voice so the user does not need to do perform extra steps. A stop button should also be visible at all times to allow the user to take control of the recording

Group 16.png
Group 17.png

A dynamic animation that follows the users voice indicates whether it is listening and processing

After processing, a quick activation  button should be present