Voice prototyping
Designing for Voice is challenging. It involves more than just getting speech input. There needs to be text-to-speech (TTS) capabilities, visual indicators, and audio cues (earcons), as well as a way to define actions to take, depending on what the user said. A functional prototype allows you to experience real-world situations, such as, background noise, mis-interpretations, and simply not knowing what to say - things that are very difficult to see in static mocks!
The following are links to demos and tools that I've created to help make designing and prototyping for Voice easier.
Featured demos
* Courtesy oisinlavery@ using Voice.js. Hint: Try saying, "Take me to pizza".
Identity UX
Magic Carpet (Sign-in)
Magic Carpet is an initiative to "develop a smart, context-sensitive sign-in with low-effort", by improving when and how sign-in challenges are presented (only when needed), as well as moving towards higher proof models (trusted devices) and behavior models of setup, manage, and lock.
The demo below is a motion proof of concept for ways to transition screens and evolve the avatar icon.
Featured items
Blue Apple (SSO on iOS)
Blue Apple is an initiative to bring Single-Sign-On (SSO) to all Google iOS apps, allowing users to seamlessly switch between Google apps and stay logged in - similar to the way Android works.
The below are demos of hybrid app prototypes that I built to support a recent Usability study. Worth noting is that the actual protoypes we used in the study ran natively on an iOS device and allowed us to simulate as real of a scenario as possible (i.e., bypass the extra steps of OTP authentication).
Multi-login
Multi-login provides users with a means of accessing and switching between multiple accounts within the same app (Web or mobile).
For this project, I created a web prototype and also a Chrome extension, which we used to allows us to mimic account switching via the Vasqutte menu and then add variations of toasts to real Google Docs pages, in order to gather user feedback during a research study.
Featured items
Tools
Voice.js
Voice.js is a JavaScript library for enabling speech-based prototypes. It was created based on learning experiences from several iterations of Talk Box. It makes voice prototyping easy and fun and is basically my favorite piece of software that I've created to this point.
Features
- Encapsulates all aspects of a voice UI into a single, easy-to-use library (speech recognition, text-to-speech, audio cues, cursor state changes, micro-templating, event system)
- Well-documented API with several working examples, covering common use cases
- Fully customizable to meet the needs of any UI design
- "Fuzzy" grammar matching for improved accuracy
- Allows easy customization to get data for a voice grammar from multiple sources (JSON file, Drive spreadsheet, etc.)
- Event-driven programming model and modular design
- Supports Chrome on Android and iOS*
* iOS support can be simulated using TTS
Projects using Voice.js
Flow
Gdrive.js
Gdrive.js is a JavaScript client library that provides convenience methods to many common Drive API methods. It supports the following features and more.
Features
- Allows easy and consistent access to file content and metadata from the Drive API
- Batches HTTP requests to improve load time performance
- Well-documented API with working examples
- Client-side OAuth handling built-in
- JavaScript Promise-based interface to make it easy to handle asynchronous data
- Provides an event interface to reliably detect when the library has loaded and OAuth is complete
Projects using Gdrive.js
Knowledge UX
Knockoff
Talk Box
Talk Box is a voice prototyping tool that allows designers to create projects and quickly iterate on speech-based design ideas, preview text-to-speech (TTS) strings, and create conversational demos.
Features
- Voice prototyping with no code!
- Hear and see your speech-based designs on real Android devices
- Reuse existing mocks to evaluate a speech UI
- Easy to create conversational demos
Teams using Talk Box
-
Content UX
-
Android
Other work
Prototyping Toolkit:
This was my very first Google project. It's goal was to provide a easy-to-follow guide and
downloadable package for deploying to AppEngine.
gHire Chrome extension:
A Chrome extension that allows for easier collection of interview candidate information.
Presentation on Voice prototyping
- (Jan. 2014)
Mediaquery.js
Open source JavaScript library to make it easier to build single-page, responsive web apps that are
JavaScript-intensive, and where cross-browser support is a requirement.
My own single-day hackathon to provide information back to the community and to play with tools, like Yeoman and Grunt.
Previous clients
