
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.



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

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


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


A dynamic animation that follows the users voice indicates whether it is listening and processing
After processing, a quick activation button should be present