Herramientas de diseño y prototipado para interfaces de voz

Read in English Design and prototyping tools for voice interfaces

¿Qué sería de los diseñadores sin sus herramientas? Recibo continuamente la pregunta sobre cuáles son mis herramientas favoritas para diseñar interacciones por voz en Alexa, Google Assistant, Siri o Bixby, así que publico este post en el que las resumo y cuento las ventajas de cada una de ellas.

Algunas de las herramientas de diseño y prototipado para Alexa, Google o cualquier interfaz de voz que incluyo tienen más sentido en momentos iniciales, mientras que otras son ideales para el prototipado, pero tal vez no las mejores para crear un diseño desde cero. 

Para la comparativa de herramientas, usaré un ejemplo sencillo y que responde a la siguiente estructura:

Agente: ¡Hola! ¿Qué tal te encuentras hoy?

Agente: Genial, para hoy te recomiendo correr 30 minutos.

Vamos al lío.

¿Qué tipos de herramientas para VUI nos podemos encontrar?

Sobre los tipos de herramientas que nos podemos encontrar, podemos hacer una clasificación bajo dos parámetros: 

• Objetivo de la herramienta: Según su objetivo, podemos diferenciar entre herramientas puramente de diseño, herramientas de prototipado y herramientas que permiten ambas tareas.
• Artefacto de diseño: Aquí encontramos dos formas diferentes de diseñar y tenemos herramientas basadas en diálogos y herramientas basadas en flujos de interacción.

Hay una discusión habitual en relación a las herramientas basadas en flujos frente a las basadas en diálogos que seguramente no quede resulta en este post. Aun así expondré las ventajas e inconvenientes de cada una de ellas.

Herramientas de diseño para Alexa o Google basadas en flujos

Heredadas del diseño de interacción tradicional, se valen de diagramas de decisión para representar visualmente los pasos que un usuario puede dar y las opciones que se le dan en cada caso. El resultado es una especie de árbol con cajas de diferentes formas o colores representando los mensajes del asistente y las posibles respuestas de los usuarios.

¿Qué ventajas tienen las herramientas de diseño basadas en flujos?

Los diagramas de flujos son una gran herramienta y posiblemente la mejor para cualquier diseñador que se inicia en la tarea. 

Para los que vienen del mundo de las interfaces gráficas o cualquier otro proceso de diseño, es una herramienta a la que están acostumbrados y les permite arrancar de una manera sencilla. Los diagramas reducen la problemática de la hoja en blanco al empezar con un tarea conocida: crear cajas e idear caminos posibles.

Además comparte una lógica de navegación que los diseñadores ya conocemos, pudiendo trasladar ese conocimiento al diseño, en el que un usuario empieza por una “home”, se va moviendo por diferentes niveles y eligiendo entre las diferentes opciones presentadas.

El resultado es altamente auto-explicable. Es fácil compartirlo, presentarlo, defenderlo y seguir trabajando sobre él, revisarlo, corregirlo o cambiarlo. Es un documento que incluso a perfiles sin experiencia en VUI le gusta ver, porque lo entiende y puede opinar sobre él.

La mayoría de herramientas de prototipado están basadas en flujos, lo cual hace que sea incluso difícil tener alternativas.

¿Qué problemas podemos tener al diseñar con flujos?

Como ya adelantaba, la herramienta no está exenta de problemas, debates, defensores y detractores.

El problema más evidente es que nos obliga a utilizar una manera de pensar que no es la adecuada para el tipo de experiencia. Llevándolo a la exageración, es como si diseñamos una interfaz gráfica con QuarkXpress o Photoshop (o con los tipómetros que vendían en mi facultad). Se puede, claro que se puede, pero igual arrastramos situaciones que no deberíamos.

El uso de navegaciones complejas es la manifestación más evidente de esos problemas heredados. Distribuciones, que quedan perfectamente representadas en un flujo, como los menús de opciones, no tienen nada que ver con una interacción conversacional. Esta forma de pensar nos lo pone difícil a la hora de pensar en palabras y diálogos, que acaba pagando el usuario, que siente como su carga cognitiva es atacada por niveles de navegación, menús y códigos a los que no está acostumbrado en una relación que debería conocer.

También nos encontraremos con estructuras rígidas en las que proponemos y esperamos que el usuario vaya dando ciertos pasos que rara vez soportan el primer test de usuario. Para solventar el problema, podemos seguir creando caminos posibles en nuestro diagrama, a costa de convertir el mapa en un laberinto ininteligible con flechas que se mueven hacia todas partes.

En muchos casos estos diagramas, a los que hemos podido dedicar mucho tiempo, se acaban quedando obsoletos y no son actualizados. En su lugar son sustituidos por decisiones que se toman en desarrollo y que quedan sin documentar.

¿Qué herramientas de diseño para voz basadas en flujos existen?

Hay muchas, pero os comentaré solo las más habituales. Siguiendo el otro parámetro de la lista inicial, empezaré por las herramientas solo de diseño para pasar a comentar las que permiten prototipado e incluso prototipado interactivo en español.

Xmind o cualquier otra herramienta de mapas mentales

Como buena herramienta de creación de mapas su uso es muy sencillo y está perfectamente optimizado para que te puedas centrar en la tarea de crear cajas, niveles y subniveles, y organizarlo todo rápidamente. La mayoría de ellas funcionan además a golpe de “Intro” y “tabulador”, permitiendo crear nuevas cajas o saltar de nivel desde el teclado y sin despeinarnos.

Si queremos tener un entregable más completo recomiendo usar códigos de colores para diferenciar cada categoría de elemento. También recomiendo no quedarnos en una representación de mensajes del asistente y del usuario, si no que podemos incluir y categorizar intents, entities/slots o incluso variables en nuestros mensajes que puedan ser modificadas con variaciones en los textos.

El resultado de este tipo de herramientas no deja de ser un imagen estática, que podemos exportar en cualquiera de los formatos habituales (jpg, png, pdf…) y que representa un mapa de la navegación a construir.

Adobe XD

Si queréis conocer los detalles, aquí tenéis un post sobre cómo prototipar para voz con XD.

A alto nivel, Adobe XD es la herramienta de diseño de interfaz de Adobe e incluye una opción de prototipado para voz. Su uso es muy agradecido para diseñadores que se hayan dedicado a las interfaces gráficas por sus similitudes con cualquier herramienta de este tipo.

Es bastante flexible y podemos utilizarla en paralelo a la realización de un diseño multimodal o podemos crear toda la interacción enlazando entre unas y otras cajas sin tener en cuenta la parte gráfica. 

Como parte negativa, no es una herramienta que esté pensada para crear diagramas, por lo que tendremos que ir creando los diferentes elementos y sus respectivas conexiones. 

Lo mejor es que podremos crear una versión sencilla interactiva que podremos incluso probar en nuestros dispositivos de Alexa. Eso convierte a Adobe XD en una buena opción para nuestras sesiones de test y mago de Oz.

Si quieres probar el prototipo en Adobe necesitas iniciar sesión.

Botmock

Lleva peleando por ser la herramienta de referencia desde los tiempos del diseño de chatbots, pero siempre parece que hay alguna otra mejor posicionada.

Es una herramienta basada en flujos que nos va a permitir crear prototipos interactivos que podremos testear directamente en un enlace web que genera. Reconoce Intents, entities y variables, lo cual está bastante bien. Lo malo es que entender cómo funciona es bastante complicado, sin que quede muy claro cómo podemos sacar partido a todo el despliegue tecnológico que tienen.

Podemos exportar el resultado como PDF, como CSV, y según su documentación se puede integrar via API con Dialogflow, Watson, Alexa o Jovo. 

Podéis probar el prototipo de Botmock

fabble.io (antes tortu.io

Fabble (o Tortu hasta la semana pasada), es una agradable sorpresa que descubrí hace pocos meses. Infinitamente más sencilla de usar que otras, solo tenemos que click derecho sobre el canvas y elegir entre crear un mensaje de usuario o de asistente. Podemos enlazar y organizar los diferentes bocadillos arrastrando desde una caja a la que queramos vincular.

Lo realmente interesante es la posibilidad de testeo que nos ofrece, ya que genera automáticamente una versión online que podemos utilizar mediante texto, voz o clicando en los elementos que hemos creado. Hasta la fecha, la mejor herramienta que he encontrado para hacer un mago de Oz.

A nivel de exportación nos va a permitir sacar un PDF o un PNG, así como un json, para que intentamos llevarnos la magia a una plataforma de desarrollo.

Aquí tenéis el prototipo que he hecho con fabble.

Voiceflow

Para muchos es la única que existe. Es probablemente la más popular y entre sus funcionalidades incluye la posibilidad de acabar publicando el desarrollo en las plataformas de Google o Alexa. Haciendo el símil con las interfaces gráficas, Voiceflow es el WordPress de las interfaces de voz.

El funcionamiento es similar al de Tortu, permitiéndonos añadir de entre tres elementos básicos: speak (asistentes habla), choice (el usuario elige entre varias opciones) e intent (el usuario solicita algo fuera de lo planteado en las opciones anteriores). El potencial de Voiceflow explota al permitir que no nos quedemos en esa mera interacción, si no que añadamos todo tipo de integraciones, desde llamadas a APIs propias a conexiones con plataformas de terceros como Zapier, Google Sheets y un larguísimo etcétera.

Enlace aquí para probar el prototipo de Voiceflow.

Si queréis ver un tutorial muy completo os recomiendo este video de Marina Guillarte.

Herramientas de diseño para Alexa, Google y otras VUI basadas en guiones

Frente a las herramientas heredadas del diseño de interfaces gráficas, nos encontramos las basadas en guiones. Con un formato más cercano al editor de texto e incluso a la redacción de guiones de teatro o cine, pretenden tener una mayor cercanía con el producto conversacional final.

Qué ventajas tienen las herramientas de diseño basadas en guiones

La primera gran ventaja es que nos cambian el soporte y nos ayudan a pensar en conversaciones y no en navegaciones. El hecho de trabajar con palabras desde el inicio nos obliga a plantearnos cómo el usuario reaccionará ante esas palabras y nos permite entender mejor cómo funciona la relación conversacional.

Gracias a esa cercanía con el producto final, vamos a poder crear propuestas más naturales y vamos a poder entender mejor los diferentes caminos que un usuario va a poder querer tomar, aunque no los señalemos con flechas, y cómo podemos usar las palabras para evitar que el usuario se pierda.

Por último, la facilidad de trabajar con una herramienta más cercana a la edición de texto es mucho más eficiente para el creador que las herramientas basadas en cajas y estructuras.

Qué problemas podemos tener trabajando con guiones

La primera es la falta de costumbre. Frente a la herramienta anterior ante la que nos sentimos muy cómodos, nos encontramos con una herramienta que solemos tener más asociada con los UX writers o redactores de contenido. Caer en la falacia de mantenernos en lo que nos funciona hace que nos perdamos un cambio de mentalidad que nos haría mejorar mucho.

Al no tener una “fotografía” total de la interacción, nos va a exigir un mayor nivel de abstracción para cubrir los diferentes casos posibles.

Relacionado con lo anterior, el resultado va a ser una serie de documentos en diferentes páginas que desarrollen las diferentes interacciones. El hecho de no haber un documento único puede resultar más complicado a la hora de compartirlo y explicarlo.

Por último, hay menos herramientas disponibles basadas en guiones o diálogos. Sobre todo a la hora de crear un prototipo para no desarrolladores. Tortu anunció una versión de su herramienta sin diagramas llamada x.tortu.io, pero desapareció a los meses y el proyecto nunca vio la luz.

Herramientas para trabajar guiones en diseño VUI

Como ya he comentado son menos numerosas que las basadas en diagramas y hay varias que en realidad son herramientas de procesamiento de textos e información que podemos utilizar para diseñar.

Notepad

En esta categoría incluyo todas las herramientas de procesamiento de texto, desde documentos de Word, aplicaciones de notas, aplicaciones para escribir como Omnwriter, o para guiones. También hay extensiones para Google Docs, como Screenplay Formatter que lo convierten en una herramienta para escribir guiones muy completa.

La curva de aprendizaje en nula para todos los que han puesto alguna vez (o podrían poner) “ofimática nivel usuario” en su curriculum. Con utilizar algún tipo de tabulación o formato para diferenciar los mensajes que dice nuestro agente frente a los que dice el usuario, tenemos una herramienta de diseño perfecta y centrada en las palabras.

Personalmente, siempre empiezo mis diseños desde el bloc de notas. Me ayuda a centrarme en la interacción pura y a entender cómo un usuario puede asimilar mejor los mensajes que se le presentan.

Hojas de Excel

Desde las versiones de Microsoft o Google hasta el novedoso Airtable, las hojas de Excel son un gran artefacto de diseño de conversaciones. Además de permitirnos trabajar con texto de manera sencilla, su distribución en filas y columnas nos ofrecen la posibilidad de estructurar la conversación de forma más visual, facilitando la creación de diferentes variaciones.

Me parece la herramienta ideal cuando manejamos diferentes slots para un intent, y queremos plantear las diferentes combinaciones posibles. También es muy interesante si trabajamos con diferentes contextos y queremos plasmar cómo el asistente se comporta frente a ellos.

Aquí podéis ver un ejemplo de diseño con una hoja de Excel.

Storyboard

El uso de storyboards se ha extendido gracias al uso que hace de ellos Situational Design. Ya hablé largo y tendido sobre ello en mi post Cómo diseñar para voz con Situational Design y Airtable.

Este artefacto, sustituye flowchart o guiones por tarjetas de conversación. La idea que subyace es la de plantear una herramienta propia para las interfaces conversacionales, centrada en los diálogos y los turnos, que además pueda contener información útil para el desarrollo, como es la especificación de la situación. 

Aunque el planteamiento es muy interesante, hay que reconocer que no parece tener toda la popularidad que al equipo de Alexa (creadores del mismo) les gustaría.

En esta plantilla podéis ver un ejemplo desarrollado de diseño con Storyboards.

Botsociety

Botsociety es una herramienta de prototipado que nos lleva acompañando desde el inicio de la moda de los chatbots. Particularmente creo que la interfaz es mejorable, pero es una herramienta muy buena para crear un prototipo (sin NLU ni ASR) en cuestión de minutos y basada en los turnos que se dan en la conversación. (Edito: acaban de mejorar la herramienta y ha quedado mucho más limpia).

Vais a poder exportar el resultado en formato video o como un enlace para compartir.

Aquí podéis ver un ejemplo de resultado con Botsociety.

Dialogflow

No es propiamente una herramienta de diseño ni prototipado, si no de desarrollo. A pesar de ello, su interfaz gráfica permite a cualquiera con un poco de interés crear un prototipo interactivo con NLU y ASR sin tener que hacer uso de ningún lenguaje de programación.

Lo bueno de trabajar con Dialogflow es que obliga a los diseñadores a pensar en intenciones, entidades y contextos, lo cual nos permite entender mejor la tecnología.

Con Dialogflow vamos a poder probar nuestro prototipo en diversos canales, incluyendo los propios dispositivos de Google, aunque lo más rápido será el enlace web que generan.

Podéis acceder aquí al prototipo en Dialogflow.

¿Cuál es el stack de herramientas ideal?

Seguramente lo ideal es una combinación de las diferentes herramientas, haciendo uso de unas u otras dependiendo del proyecto. En mi caso mi proceso ideal incluye:

• Bloc de notas para iniciar todo nuevo diseño y para lidiar con los detalles de una interacción concreta.
• Botsociety para plantear el diseño en un prototipo que puedo compartir con un cliente y obtener feedback
• Excel o storyboards para plantear las diferentes variaciones que nos podemos encontrar. En este punto entiendo que haya quien prefiera cualquier herramienta tipo flowchart.
• Tortu.io para test y magos de Oz.
• Prototipo en dialogflow para empezar a capturar nuevas intenciones y utterances para cada intent.

Conclusiones sobre herramientas de diseño y prototipado para interfaces de voz

Como hemos visto, tenemos herramientas de diseño para Alexa, Google, Siri o Bixby de diferentes tipos, con enfoques distintos y finalidades diversas. Utiliza la que te resulte más cómoda, sin olvidar que lo importante es entender cómo funcionan las conversaciones y cómo podemos replicarlas para que el usuario tenga una mejor experiencia.

Si quieres compartir alguna herramienta, o si tienes dudas de cómo manejar alguna de ellas escríbeme en los comentarios.

Si te ha gustado este post aquí puedes leer más artículos sobre interfaces de voz.