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.
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.
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.
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.
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.
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.