In today’s digital landscape, a conversational user interface (UI) or voice command functionality is a staple in applications. If you’re tasked with crafting such a user experience (UX) but are uncertain about the initiation process, consider this blog your ideal launchpad. Imagine you’re presented with a design brief stating:
“The X mobile application must possess voice command recognition capabilities, converting phrases like ‘Call Jack’ or ‘Search for Lisa’ into actionable tasks and displaying the corresponding outcomes.”
This is your guide to transforming that brief into a tangible, user-friendly design.
Step 1: Research | Voice Command
Anatomy of a voice command
“A users’ voice command consists of three key factors: the intent, utterance, and slot.”
Key takeaways:
So, a typical user command sounds like “Alexa, play The Beatles songs”.
Understanding how users give voice commands will help us in designing the task flows later on.
Designer should always keep users’ intention behind giving a voice command in mind.
Step 2: Understand | Use Cases
Generally users use voice interfaces when they’re busy doing some other task and their hands are not free. A few examples are: while driving users might ask Maps app to show them the best route to work, or while cooking, a user might ask the recipe for a specific dish.
Popular use cases:
In the context of your application identify what are the top use cases and focus on them while defining the core design principles and task flows.
Step 3: Benchmark | Available Voice User Interfaces
Based on your use cases, identify whether your application is going to be purely VUI or a combination of VUI + GUI.
There are two kinds of voice interfaces:
- Voice interface + Graphic interface
Users can activate the VUI through a phrase like “Ok, Google”, “Alexa” or via their mobile applications (graphical user interface or GUI). Both interfaces can be used together or standalone.
2. Voice interface only
Voice interfaces have only one mode of activation without an application. This maintains users’ voice profiles for distinguishing them. An example would be smart speakers.
Step 4: Define | Principles for Voice User Interface
- Guide users through the capabilities by providing cues and recommendations.
- Employ a combination of visual elements and haptic feedback to communicate the processes occurring in the background.
- Implement re-prompting to obtain user confirmation.
Step 4: Develop | Task Flows
Determine the optimal and fallback scenario outcomes:
Optimal Scenario: The Voice User Interface successfully comprehends and executes the assigned task.
Fallback Scenario: The Voice User Interface is operational but remains unresponsive.
Limit Scenario: The Voice User Interface receives an overload of tasks that surpass its current capabilities.
Step 5: Identify | States of Voice Interaction
Step 6: Decide | Optimal Place to Launch VUI
Based on your use cases choose any one of the following:
- Central Zone (bottom center): The voice functionality here is the app’s primary feature and crucial to the user experience.
- Supportive Zone (bottom left): While voice interaction isn’t central to the experience, it can be advantageous for certain tasks, such as ordering food.
- Accessible Zone (bottom right): This is a convenient spot for frequently utilized voice features that, while not critical, enhance the overall experience.
Step 7: Choose | Interface
- Takeover Interface: This launches on the full screen, use it when you want a focussed voice experience
- Modal Interface: Use this when you don’t want the user to move away from the context of what they’re doing
Step 8: Animate | Motion Design
Animation is key in conveying your VUI’s focus, understanding, and responses. It’s essential to craft designs that accommodate states of anticipation, auditory engagement, and contemplation.
Step 9: Finalize | UI Mockups
Based on your use case, decide which out of the two options would be more suitable for you.
- Presenting VUI in an overlay takeover interface
2. Presenting VUI in a modal interface
Step 10: Test and Iterate
Conduct usability study of designs with your users and iterate based on the feedback received. Make sure your designs are above 80% in the System Usability Scale.
References: