Serge Vasil incorporated voice commands and speech playback into an interactive TV search app he designed with Adobe XD.

Serge Vasil is a multidisciplinary designer based in San Francisco specializing in user research, digital branding, and interactive experiences. Serge is focused on building products that are intuitive, accessible, and beautiful.

Čo budete potrebovať

This sample file has Adobe Stock images you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file.

Create an introduction

When Vasil was ready to incorporate an audio introduction for the interactive TV prototype he designed, he switched to Prototype mode. He selected the first artboard, then clicked the blue arrow to define the interaction. He selected Time as the Trigger, Speech Playback as the Action, and typed the message that would serve as the voice response to play as the screen loaded.

Adobe XD prototype design of TV app home screen with Interaction dialog; Trigger set to Time and Action to Speech Playback.

To simulate the effect of a user manually searching for shows, Vasil dragged a wire from the search icon on the initial screen to the next artboard. He chose Tap as the Trigger and left the additional interactivity properties to their default values.

Blue wire connects search icon on Home screen to search screen with settings for interactive prototype; Trigger is set to Tap.

Animate an icon

Vasil wanted to animate the microphone icon to provide a visual cue that the search feature also recognizes voice commands. He dragged a wire from the first search artboard to the second one. The two artboards include the design for different states of the microphone icon. He set the Trigger to Tap and the Action to Auto-Animate. The microphone has the same name on each artboard, so XD will animate the changes in the icon design when viewing the interactive prototype.

A blue wire connects the first search artboard to the second. Trigger is set to Tap and Action is set to Auto-Animate.

Loop the animation

The app design called for the microphone icon to pulse while waiting for user interaction. To create this effect, Vasil dragged a wire from the second search artboard to the third. He set the Trigger to Time, the Action to Auto-Animate, and increased the Delay and Duration to get the effect he wanted. To make the animation loop until the user initiated a voice command, he selected the third artboard, clicked the blue arrow, set the Trigger to Time and chose Previous Artboard as the Action.

The second search artboard is wired to the third and the third shows the action is set to Previous Artboard.

Users should be able to search their favorite shows using voice commands. To simulate this interactivity, Vasil wired the microphone on each artboard to the search results. Then he used Shift+click to select all three microphones, set the Trigger to Voice, and typed the command the user can say to show search results when testing the prototype. He chose Desktop Preview at the top of the screen to test the prototype and held the spacebar as he spoke to test the voice command.

Three artboards show microphone icon wired to the final artboard; Trigger set to Voice, Command is action movies.

Interact to enter app

Design prototypes that allow users to interact with an app in a variety of ways.

Big screen TV against a blue wall is set on modern white TV stand with movie results on screen.

Note: Project files included with this tutorial are for practice purposes only.


Artist: Serge Vasil 

Adobe Stock contributor: gerasimov174ArdeaADennis

Bola táto stránka užitočná?