Year
2021
Category
VUI Guide
Voice User Interface Guide is a living style guide and design pattern library for designing Voice User Interfaces, created with an open-source mindset.
VUI Guide is a living style guide and pattern library for Voice User Interfaces aimed at designers. It is an open-source web application and was developed using GatsbyJS based on React. The guide was built to help designers create voice-controlled user interfaces and allow experts or others to share their knowledge on one platform. In addition to just reading the VUI Guide, there are also several ways to contribute to the guide independently. These include, for example, adding knowledge to existing articles, creating new chapters, or adding entirely new categories.
My Role
- Concept and research
- Development of the static web application
- User Interface Design
- User Experience Design
What was achieved
- An open-source approach that allows others to independently contribute their own knowledge to the guide
- A fully functional static web application
- For the backend setup, I used markdown written data hosted on the GitHub Repository. The frontend is GatsbyJS a React-based, GraphQL powered, static site generator. VUI Guide is hosted on GitHub Pages and deployed with GitHub Actions. The application is MIT licensed and public.
Unfortunately, the content of the guide became deprecated over time. But No worries, ideas are already in the works to breathe new life into it.
Why did I create the VUI Guide?
I was fascinated by the emergence of voice-controlled user interfaces and how they represents a significant change in the interaction between humans and computers. Controlling devices by touch is taking a back seat or disappearing altogether when user interfaces are operated by voice. The design and especially the user experience of voice-controlled user interfaces is very different from traditional user interface designs.
This brings a new challenge for UI/UX designers and led me to ask questions like:
- How do designers create Voice User Interfaces for an optimal User Experience?
- What visual elements are available to me as a User Interface Designer to visually support the acoustic elements?
- How does the user’s environment influence my design and User Experience?
Structure of the guide
I focused on keeping the structure of the guide very simple and created two main categories for it: “Documentation” and “Resources”. Documentation is divided into four subcategories: “Fundamentals”, “Behaviour”, “Design Patterns”, and “Resources”. Under Resources are external links to tools and a subcategory with checklists for a step-by-step approach to creating a voice-controlled user interface.
Fundamentals
The Fundamentals is a collection of ten heuristics adapted for Voice User Interfaces that provide a basic understanding of the pros and cons of a voice-controlled user interface. The Fundamentals is designed to make the reader think about whether a Voice User Interface is really the right choice.
Behaviour
This section helps the reader understand when, how, and why a voice-controlled user interface should talk to the user.
Design patterns
In this section, the reader will learn when to use the right design patterns and how to customize them properly.
Resources
In this section the reader will find a collection of useful tools for designing a Voice User Interface.
Optimized for reading
One of the goals of the guide was to create a pleasant reading environment. To achieve this, I focused on typography and chose a serif font, set a balanced text width, and reduced the possible number of characters per line.
Another measure was to reduce reader distraction by hiding the table of contents and navigation while reading and only showing them again when the user needs them.
Insights into the development
The setup with GatsbyJS, React and GitHub as the backend allowed me to create a blazing fast web application. A detailed documentation can be found on the VUI Guide GitHub Repository or it is also possible to dig deeper into the code there.
Even after a long time without maintaining the web application, it still ranks high in Google’s web.dev page quality measurement tool. Thanks to GatsbyJS, the website meets most of the criteria for modern web applications.
Open-source contribution
The entire guide is open-source, meaning anyone can copy, edit, or contribute to it as long as the source is acknowledged and mentioned. Since the web application itself and all content data is hosted on Github, it is very easy to add new content. Basically, each documentation page gets its data from a simple Markdown file stored in the GitHub Repository.
Component-scoped thinking
I used component-specific SCSS with additional global variables, which allowed me to write traditional, portable SCSS with minimal side effects: such as worrying about selector names colliding or affecting the styles of other components.
This also allowed me to write in pure JSX for the component and load the styling from a separate SCSS file into the component Javascript file.
Design
Challenges
Information diversity
Problem
Besides the big companies, there are only a few that offer a standalone solution, let alone a good problem solution or documentation for their product. Therefore, it was difficult to gather enough information about design patterns and user behaviour, since most of what you can find about Voice User Interfaces is specifically for the big companies like Apple, Google or Microsoft. The challenge was not to simply copy the big guys, but to define a general solution for how users should experience Voice User Interfaces and how designers should design them.