Cómo prototipar con Adobe XD para voz

Tras varios acercamientos sondeando cómo prototipar con Adobe XD para voz, me he decidido a trabajar en un ejemplo más completo para ver las posibilidades que nos ofrece. El producto elegido ha sido una versión de Teletexto para navegación por voz en el dispositivo de Alexa Echo Show 5. ¡Maravilloso! Al final del post incluyo un enlace al prototipo para que podáis probarlo.

En este post hago una introducción sobre cómo utilizar Adobe XD para diseñar y prototipar en Alexa o cualquier otra interfaz de voz, las limitaciones que me he encontrado y mis conclusiones.

Enlaces rápidos al contenido:

Guía rápida para empezar a prototipar interacciones con Adobe XD para voz

Cómo funciona Adobe XD y sus funcionalidades para la voz

El programa es similar a cualquiera de los de diseño actuales: barra lateral izquierda con las herramientas y menú contextual a la derecha. Los primeros pasos de transición de programas como Sketch a Adobe XD no tienen gran misterio.

Adobe XD incluye la pestaña “Prototipo” en la barra superior que va a ser la que nos permita trabajar nuestra interacción por voz. Una vez dentro de esa pestaña desaparecen casi todas las herramientas de la izquierda y el menú de la derecha pasa a tener las opciones de interacción.

Desde esta sección podemos seleccionar en nuestro canvas el elemento que queramos (ítem concreto o pantalla entera) y asignarle un desencadenante o trigger de los 5 disponibles en el menú lateral derecho (Tiempo, Tap, Drag, Voz, Teclado/GamePad). A continuación, en ese mismo menú, elegiremos la acción que desencadena de las posibles: Transición a otra pantalla, Animación automática, Superposición, Reproducción de voz, Mesa de trabajo anterior.

Funcionalidades específicas para protipar en Adobe XD por voz tenemos por tanto dos elementos:

  • Trigger de Voz, el cual nos permitirá añadir la palabra o frase (también conocida como utterance) que activa el desencadenante.
  • La reproducción por voz, que leerá el texto que le incluyamos con una voz automática (TTS) de las disponibles en Amazon Polly. En español las opciones son Conchita, Enrique y Lucía.

Ejemplo de interacción de voz

Para hacer un prototipo en el idioma que quieras tienes que tener la herramienta en ese idioma. Puedes cambiarlo en “Ayuda / Idioma”, pero cada vez que lo hagas tendrás que reiniciar el programa para actualizarlo. Si has empezado a trabajar en un archivo en un idioma, el idioma de ese archivo y las voces disponibles se mantendrán, aunque cambies el resto de la herramienta.

Importante: Para prototipado y su visualización en dispositivos Echo, la herramienta nos obliga a que cada pantalla tenga un trigger de tiempo que desencadene una reproducción de voz.

Cómo crear una interacción por voz básica

Los pasos que tenemos que dar por tanto para prototipar una interacción sencilla entre dos pantallas sería:

  1. Crear la pantalla 1 con un trigger de tiempo que desencadene una reproducción por voz. Esto asegura que cuando se abra el prototipo se lea automáticamente un mensaje de instrucciones que guíen la la interacción posterior.
  2. Crear la pantalla 2 con otro trigger de tiempo que desencadena otra reproducción de voz. Al cambiar de la pantalla 1 a la 2 se reproducirá dicho mensaje con información para el usuario.
  3. Crear un trigger de Voz de la pantalla 1, que se active con la palabra o frase que decidamos, y cuya acción sea una Transición a la pantalla 2.

Interacción simple entre pantallas

Cómo previsualizar tu prototipo de Adobe XD para voz

Desde la propia herramienta

Puedes pulsar el botón de Play arriba a la derecha en cualquier momento y se te abrirá un prototipo interactivo en una ventana pop up nueva. El prototipo mantiene todos los elementos y formas de interacción que hayas incluido, ya sea por voz, tap, drag teclado o tiempo.

Desde un enlace web

XD incluye una funcionalidad de Compartir o Share, desde la cual puedes subir tu prototipo a la nube generando un enlace compatible a una dirección web. Igual que en el modo anterior, todos los elementos interactivos funcionarán independientemente de su naturaleza.

Desde tu dispositivo Echo

¡Mágico! XD permite también visualizar tu prototipo en tu dispositivo de Alexa. Para ello necesitas instalar un plugin de XD (Alexa preview) y activar la skill Adobe XD. Para que funcione:

  • La cuenta con la que estás logueado en Adobe tiene que ser la misma que la que asocies en la skill con Account Linking.
  • La herramienta tiene que estar en el mismo idioma que el dispositivo. Debo decir que a mi no me funciona correctamente y aunque los dos están en el mismo, el plugin me dice que el dispositivo está en inglés. La solución para mi es trabajar con el prototipo en español y con la herramienta en inglés para poder mandar a mi dispositivo supuestamente en ese idioma.

Una vez que lo tengas todo bien sincronizado, podrás acceder a la skill y te ofrecerá los diferentes prototipos que tengas activos. Al acceder a uno de ellos comenzará la interacción que hayas diseñado.

Algunos errores detectados:

  • En esta forma de visualización solo funciona la interacción por voz, por lo que todos los otros elementos interactivos no te servirán de nada.
  • El reconocimiento del habla (ASR) desde el dispositivo no es el mismo que el de la herramienta, por lo que algunos utterances que funcionaban dejan de hacerlo misteriosamente.

Limitaciones de la interacción con Adobe XD para voz

Como hemos visto el manejo básico no tiene mucha complejidad más allá de encontrar dónde hacer cada cosa.

Mi opinión general es que Adobe XD es una gran herramienta, pero con ciertas limitaciones que paso a comentar.

SSML en Adobe XD

Adobe XD no soporta oficialmente etiquetas SSML. Extraoficialmente deberían funcionar casi todas según Mark C. Webster, del equipo de Adobe XD:

Por lo que he probado algunas funcionan y otras no, pero como oficialmente no están soportadas no hay una documentación que indique cuales son las que puedes usar 🤦🏽‍♂️ (igual da para post…).

Que no funcionen evita poder modular la voz sintetizada y conseguir entonaciones más naturales.

Audio externo

El audio externo tampoco está soportado, aunque parece ser que están trabajando en ello. No tener la opción limita la posibilidad de trabajar el diseño de audio, que entre otras cosas ayuda en la creación de una identidad sonora y en el uso de elementos de feedback sonoro.

Idioma

Tener que abrir y cerrar la herramienta para cambiar de idioma es bastante engorroso. Que el idioma de tu prototipo dependa del idioma que estaba configurando en la herramienta cuando creaste el archivo, es algo que tardas varios prototipos en interiorizar. Mi plan secreto es tener un archivo matriz en español y partir de él cada vez que empiece un proyecto nuevo. Sí. Lo sé. El futuro ya está aquí.

Además las versiones de idioma que incluye la herramienta son… Ninguna. Si quieres español, olvídate de voces de México, español de US o cualquier otra.

Utterances por trigger

Las personas son impredecibles y normalmente usan diferentes palabras o utterances para referirse a una misma cosa. Es uno de los retos bonitos del procesamiento del lenguaje natural (NLP). Si queremos emular algo así en nuestro prototipo de XD lo vamos a pasar regular, por dos motivos:
La herramienta parece hacer más bien un match exacto de palabras, por lo que solo desencadenará la acción cuando entienda exactamente la frase que tú has definido.
No permite asignar varias utterances a un mismo trigger. Esa opción permitiría que dijéramos a la herramienta que palabras o frases diferentes activen el mismo trigger, por ejemplo para salir de la interacción un usuario podría decir “salir”, “cerrar” o “terminar”

Si queremos lidiar con esa problemática, lo único que podemos hacer ahora mismo es crear disparadores de Voz nuevos con cada una de las utterances, y que todas vayan al mismo destino. Puede parecer sencillo, pero cuando te juntas con varias pantallas y varios destinos, tu canvas empieza a parecer una locura.

Ejemplo de exceso de utterances a una pantalla

Utterances globales

Si por ejemplo quieres que desde cualquier pantalla puedas tener una opción de “Salir”, vas a tener que creas la acción para cada una de ellas, o incluso tantas acciones por cada pantalla como utterances quieras incluir, como comentaba en el punto anterior. Estaría bien poder definir algunas utterances que afecten a toda la interacción para reducir complejidad y limpiar un poco el canvas.

Copiar y pegar acciones

Unido a las limitaciones de los dos puntos anteriores está la imposibilidad de copiar las interacciones de una pantalla a otra. La única manera que he encontrado de hacerlo es copiar y pegar la pantalla entera. ¡Pero ojo!, solo se copian las acciones si estás en la pestaña de “Prototipo”.

Si tu proceso de trabajo implica crear el diseño de todas las pantallas y luego prototipar, vas a tener que crearte cada interacción de cero a mano y lo lo normal es que a la tercera pantalla hayas perdido el norte.

Lo ideal sería que las acciones fueran seleccionables, igual que eran las capas de efectos de Photoshop, y que pudieras pegarlos en cualquier otra pantalla. ¿Y por qué no soñar?

Encadenar acciones

Si pensabas que ibas a poder hacer algo un poquito más complejo, lo siento, pero no.

Imagina que quieres prototipar algo tan clásico de una interfaz de voz como un re-prompt: La interfaz hace una pregunta, espera una respuesta y al no recibir ninguna repite la pregunta. Debería ser tan fácil como tener un trigger de tiempo que lanza el primer mensaje y un segundo trigger posterior que lance el segundo mensaje, pero es algo que no vas a poder hacer en Adobe XD.

Trigger de tiempo

Relacionado con el punto anterior, XD solo acepta un trigger de tiempo por pantalla. Teniendo en cuenta que la herramienta te obliga a usar por cada pantalla con la acción de “Reproducción de voz”, la realidad es que el trigger de tiempo no es algo con lo que podamos contar para nada.

Fallback intent

Me consta que estoy pidiendo máximos, pero sería maravilloso tener una opción para que toda frase no contemplada desencadenará la acción que diseñemos.

Gifs animados

No es que sea algo fundamental para interacciones multimodales (de hecho Alexa no permitía animaciones hasta hace poco) pero es un detalle que siempre es bonito. Además me consta que es una vieja demanda de los usuarios de la herramienta: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12924336-import-videos-animated-gifs-to-show-in-interacti

gif despedida

Conclusión

Adobe XD ha evolucionado mucho desde su lanzamiento como Project Comet. A día de hoy es una gran herramienta de diseño de interfaz y para primeros prototipos multimodales os puede dar muy buen rendimiento. Sin embargo, como herramienta de prototipado puro para voz, creo que aún tiene muchas limitaciones, y tengo dudas de hasta qué punto van a querer evolucionar en esa línea.

Personalmente evitaría meterme en complicaciones de interacción por voz como las que yo he incluido en mi prototipo. Implican un consumo de tiempo alto y los resultados no siempre funcionan como se espera, sobre todo en la visualización en dispositivos Echo.

Me parece una buena opción para:

  • Proyectos donde la imagen sea realmente importante y la parte de interacción por voz nos importe menos a nivel de prototipo.
  • Demos dirigidas en las que el usuario sepa los comandos que debe usar en la interfaz de voz.

Si tienes cualquier duda, ¡nos vemos en los comentarios!

Y si quieres probar mi interacción del Teletexto, aquí está el enlace:
https://xd.adobe.com/view/dad79bc8-8295-4327-4a8a-be32b95daf1e-ace6/

Para conocer más sobre herramientas de diseño y prototipado o sobre cómo diseñar en Alexa, te recomiendo este artículo sobre herramientas de diseño en Alexa, Google y cualquier otra interfaz de voz.

 

Jesús Martín Jiménez

Soy Jesús Martín, y fui el diseñador de Alexa en Francia, Italia y España tras su lanzamiento en esos países. Me enamoré de la tecnología y de sus recovecos hace ya varios años y lo que voy descubriendo lo cuento en esta página.

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *