Tipos de herramientas de diseño de interfaces de voz y cómo utilizarlas

Read in English: Types of design tools for voice user interfaces and how to use them

Si quieres diseñar para Alexa, Google Assistant o cualquier otro asistente de voz o interfaz conversacional, en este artículo repaso los diferentes tipos de herramientas de diseño que vas a poder utilizar para tus proyectos y cómo trabajar con cada una de ellas.

Si lo que buscas son programas de diseño de interfaces de voz concretos, te recomiendo este otro artículo donde hablo sobre herramientas de diseño y prototipado en VUI (Voice User Interface).

A la hora de diseñar nuestra interfaz de voz podemos utilizar tres tipos de herramienta o artefacto de diseño diferentes: guiones, tablas y diagramas de flujo. ¿Cómo diseñamos una interfaz dominada por palabras con cada una de ellas?

Tipo 1. Los guiones.

¿Cómo diseñar conversaciones con guiones?

También conocidos como Scripts o Sample Dialogs en inglés, los guiones pueden ser el equivalente a los wireframes de las interfaces gráficas. Los guiones son la herramienta con la que deberíamos empezar siempre un proyecto de voz.

La gran ventaja de trabajar con diálogos es que nos permite mantenernos cerca de las palabras y de las conversaciones, centrándonos en crear diseños que tengan sentido en una situación conversacional y evitando crear estructuras complejas.

Con el uso de guiones podemos plantear diferentes interacciones de forma rápida, probar cuáles suenan y fluyen mejor, e incluso empezar a validarlas en test de baja fidelidad.

¿Cuáles son los pasos para diseñar una interfaz de voz como Alexa o Google Assistant con guiones?

1. Plantea el contexto bajo el que se da la conversación. Por ejemplo, uno de los primeros contextos para el que diseñaremos será el siguiente: Nuevo user interactuando con un dispositivo fijo sin pantalla.
2. Escribe la conversación por turnos entre el usuario o usuaria y tu interacción, desde la invocación inicial hasta el mensaje de despedida. Empieza con lo que conocemos como Happy Path o “Camino feliz” considerando a quien nos usa como un colaborador perfecto que siempre hace lo que la interfaz de voz le propone.
3. Revisa que las respuestas que esperamos de las personas que nos usan sean realistas con relación a los mensajes que les hemos dado. Ponernos en sus zapatos es un buen ejercicio para empezar a plantearnos si nuestros mensajes dirigen a donde queremos, o si pueden resultar confusos y producir respuestas inesperadas.
4. Revisa cada uno de los mensajes de la interacción y hazte las siguientes preguntas:
   ¿Para qué sirve cada paso que incluimos en la interacción? ¿Hay algún paso que sea innecesario?
   ¿Para qué sirve cada frase que estamos usando? ¿Podemos quitar alguna frase sin que eso evite que se pueda interactuar de forma comprensible con nuestra interfaz de voz?
   ¿Qué tal es la selección de palabras para cada frase? ¿Podemos hacer que la frase se entienda mejor cambiando o quitando palabras?
5. Lee el guión en voz alta y escucha cómo suena. ¿Puedes hacer cambios para que sea más comprensible o suene mejor?
6. Lee el guión a otra persona y anota el tipo de respuestas que da a tus mensajes. ¿Entendió los mensajes? ¿Las respuestas estaban relacionadas con lo que esperabas?
7. Si la interacción va a sufrir grandes cambios dependiendo de las respuestas que se den durante el uso, plantea el diálogo para las posibles variantes.
8. Una vez hayamos planteado los diferentes Scripts con las mejoras encontradas para la situación especificada en el punto 1, podemos plantear una nueva situación y repetir todos los puntos anteriores. Por ejemplo, si la primera situación cubría una interacción con un asistente en un altavoz fijo, ¿cómo sería la interacción en un dispositivo que se puede sacar de casa y que tiene geolocalización?
   Como imaginas, se trata de un proceso iterativo, donde debemos cubrir todas las situaciones que sean relevantes y que vayan a implicar un cambio de interacción importante.
9. Con todos nuestros guiones escritos, ¿qué unhappy paths podemos esperar? ¿Qué interacciones o respuestas pueden darse y cómo cambia eso nuestro diseño? Hay ciertos casos comunes a todas las interfaces de voz y para los cuales podemos plantear respuesta, mientras que otros surgirán a lo largo de los diferentes test que iremos realizando. Algunos de los casos que puedes esperar y para los cuales debemos preparar una respuesta son: No hay respuesta, pedir repetir, pedir ayuda, solicitud no contemplada.

Ejemplo de guión

U: Asistente abre MyVoiceUI
A: ¡Hola! Esto es MyVoiceUI. Te puedo decir los programas en la tele que ponen ahora o los de esta noche. ¿Qué prefieres?
U: Los de ahora
A: Ahora mismo: A: ¿Puedo hacer algo más por ti?
U: No, gracias.
A: Muy bien. ¡Ten un buen día!

Tipo 2. Las tablas.

¿Cómo diseñar conversaciones para interfaces de voz con Tablas y hojas de Excel

Una alternativa muy popular a los diálogos o Sample dialogs son las tablas. Para ello puedes utilizar cualquier herramienta que utilice este elemento, como Word, Excel, o incluso Airtable, como desarrollo en este artículo.

Es una herramienta que nos permite seguir trabajando haciendo foco en las palabras y en la naturaleza de la conversación, pero que además, gracias a su organización en filas y columnas, facilita la inclusión de notas, comentarios y variables. Esa claridad resulta muy interesante a la hora de compartir el trabajo con el equipo de desarrollo o con otros miembros del equipo.

Personalmente, las tablas y hojas de Excel me parecen la mejor herramienta de diseño para interacciones de pocos turnos y en las que el contexto de la interacción puede ser muy relevante.

¿Cuáles son los pasos para diseñar una interfaz de voz como Alexa o Google Assistant con tablas?

1. Crea una tabla con al menos las siguientes columnas: Contexto, Usuario, Asistente, Comentarios. Puedes adaptar esta estructura base a tus gustos y necesidades, pero en mi experiencia esas cuatro columnas me han sido siempre muy útiles.
2. Añade una línea a tu tabla por cada turno de interacción entre el usuario y el asistente.
3. Documenta el primer turno de la conversación, especificando cual es la situación y cualquier cosa que defina el contexto de uso. Una vez definido el contexto, añadimos la frase del usuario o utterance y a continuación la respuesta del asistente.
4. Si se trata de una experiencia multiturno, continúa con las sucesivas líneas de tu tabla, documentando el contexto si fuera necesario y el comportamiento esperado entre el usuario y el asistente. Al igual que en el caso de los Sample Dialogs, debemos empezar definiendo el Happy Path.
5. Una vez documentado el Happy Path, crea una segunda tabla o deja una línea libre para documentar desviaciones de esa primera interacción. Utiliza la columna “Contexto” para explicar en qué difiere esta interacción de la anterior.
6. Al igual que con los diálogos, valida que las palabras que estás utilizando son las correctas, tanto de forma individual como con personas externas, siguiendo los pasos 4, 5 y 6 del diseño con diálogos.
7. Realiza el ejercicio para diferentes contextos al igual que en el punto 8 del diseño con diálogos.
8. Prepara la interacción para desviaciones típicas al igual que en el punto 9 del diseño con diálogos.

Ejemplo de diseño con tabla

Tipo 3. Los diagramas de flujo.

Cómo diseñar conversaciones con diagramas de flujo o flowcharts

Ampliamente utilizados en el diseño de interfaces gráficas, son seguramente el artefacto más popular también en el diseño de interfaces conversacionales e interfaces de voz. Hay un gran número de programas que podemos utilizar para ello, desde algunos tradicionales como Xmind, Omnigraffle o draw.io, a otros más orientados a asistentes como Voiceflow o fabble.io.

La gran ventaja de las herramientas basadas en diagramas de flujo, es que permiten representar en un espacio más reducido y de forma visual todas las posibles alternativas y caminos que previsiblemente puede tomar la conversación entre el usuario y el asistente.

¿Cuáles son los pasos para diseñar una interfaz de voz como Alexa o Google Assistant con diagramas de flujo?

1. Crea una primera caja, en la que defines un mensaje de bienvenida o Welcome message. De alguna manera, el mensaje de bienvenida se asemeja a la home de una página web, a la que las personas acceden y desde la cual navegan a las diferentes opciones.
2. Crea un segundo nivel, normalmente por debajo o a la derecha del mensaje de bienvenida. En ese segundo nivel, plantea las posibles respuestas al mensaje de bienvenida. Utiliza una caja diferente para cada una de esas intenciones diferentes y une cada caja con la caja principal. En el interior de cada caja puedes tener varias respuestas esperadas que persiguen una misma intención. En el conector puedes especificar cual es la intención con la notación que prefieras. Algunas herramientas de diseño como Voiceflow, omiten este segundo nivel, juntando el paso 2 con el paso 3 e incluyendo esas frases posibles como parte del entrenamiento de la intención.
3. Para cada una de esas posibles respuestas del segundo nivel crea una respuesta del asistente y situala en una caja en un tercer nivel.
4. Para cada respuesta del asistente del tercer nivel crea las posibles respuestas que recibirás, de la misma manera que hiciste en el paso 2.
5. Continúa creando niveles, cajas y conectores entre ellas, definiendo las posibles situaciones con las que tu usuario puede enfrentarse. En ocasiones los conectores pueden dirigir a cajas de niveles anteriores, creando un entramado que puede resultar algo complejo, por lo que es importante utilizar espacios amplios y anotaciones claras, para conseguir una mejor visualización.
6. Revisa las palabras igual que en los pasos 4, 5 y 6 del diseño con diálogos.
7. Realiza el ejercicio para diferentes contextos al igual que en el punto 8 del diseño con diálogos.
8. Tu diagrama contempla tanto el happy path, como los caminos más probables o las desviaciones más típicas. Si el espacio te lo permite, no necesitas crear diagramas adicionales para representarlos, como sí hacíamos en el punto 9 del diseño con diálogos.

Ejemplo de diseño con flowchart

Cuándo usar cada herramienta de diseño de interfaces de voz

Como hemos visto, podemos trabajar nuestras interfaces conversacionales con tres tipos de herramientas diferentes: guiones, tablas o diagramas de flujo. La elección de un tipo de herramienta frente a las otras depende del tipo de interacción que estemos diseñando, pero también suele depender de las dinámicas de trabajo de quien diseña y del equipo de desarrollo con el que se trabaja.

Seguramente una combinación de herramientas sea lo ideal en la mayoría de los casos. Particularmente recomiendo empezar todo proyecto diseñando con guiones, y dependiendo del caso de uso y de su complejidad, continuar con tablas o diagramas.

Aviso

Los pasos expuestos en este artículo son mi aproximación personal con cada tipo de herramienta. Si tu proceso de diseño, o la forma en que usas estas herramientas, difiere de la que aquí presento o se te ocurren posibles mejoras, estaré encantado de leerte en los comentarios :).

Cover Photo by Tamanna Rumee on Unsplash