Diseño de Interfaces Multimodales: Elementos y Consejos Prácticos

Clase 22 de 28Curso de Diseño de Interfaces de Voz

Contenido del curso

Introducción

Resumen

Diseñar experiencias donde la voz y lo visual trabajan juntos es fundamental para crear productos más naturales e intuitivos. Las interfaces multimodal combinan más de un sentido en la interacción, y entender cómo aprovecharlas marca la diferencia entre una experiencia fragmentada y una realmente fluida.

¿Qué es una interfaz multimodal y por qué importa?

Una interfaz multimodal es aquella en la que el usuario interactúa con más de un sentido al mismo tiempo [0:18]. Los ejemplos más conocidos son Siri y Google Assistant, donde conviven una interfaz de voz con una interfaz gráfica. Este enfoque se acerca mucho más a la conversación humana real, que no se limita a la voz: también incluye elementos visuales como las expresiones corporales [0:42].

Una recomendación clave es comenzar siempre por el diseño de la conversación hablada. Solo después de haberla testeado, evaluado e iterado, se debe adaptar a la experiencia multimodal [0:56]. Esto asegura que la base conversacional sea sólida antes de añadir capas visuales.

¿Qué elementos visuales se usan en una interfaz multimodal?

Entre los componentes gráficos más comunes encontramos [1:14]:

  • Cards para mostrar información puntual.
  • Carruseles para presentar opciones deslizables.
  • Listas para organizar resultados.
  • Reproducción de media como video.
  • Tablas para datos estructurados.

¿Cuáles son los mejores tips para una experiencia multimodal?

Existen cinco recomendaciones prácticas que ayudan a construir experiencias multimodal efectivas.

Comunicar el mismo mensaje en ambas interfaces. La voz y la pantalla no deben sentirse como experiencias separadas [1:30]. Por ejemplo, si un usuario pregunta por la temperatura en Lima, la voz responde "la temperatura actual en Lima es de dieciocho grados" y la interfaz gráfica muestra lo mismo, pero puede agregar información extra de valor como pronósticos adicionales [1:48].

Permitir versiones condensadas en la interfaz gráfica. Lo que se dice con la voz puede ser más extenso que lo que se muestra visualmente [2:06]. Un ejemplo claro es cuando Siri cuenta un chiste: la voz lo narra completo, mientras la pantalla muestra una versión más breve del mismo contenido [2:14].

No asumir que todos los usuarios pueden escuchar o leer. Es fundamental que el mensaje sea comprensible tanto si el usuario no está viendo la pantalla como si no puede escuchar [2:38]. Si alguien está en un lugar donde necesita silencio, la interfaz gráfica debe bastar. Si no está mirando la pantalla, la voz debe transmitir toda la información necesaria. Un ejemplo es la cuenta regresiva de quince minutos, donde el mensaje se entiende por cualquiera de los dos canales [3:05].

¿Cómo evitar la redundancia y fomentar la interacción?

Evitar ser redundante es otro principio importante [3:20]. Cuando el usuario pregunta qué hora es en Tokio, la voz responde la hora y la interfaz gráfica la muestra, pero además agrega un dato extra, como la diferencia horaria. Ese pequeño detalle visual evita que la experiencia se sienta repetitiva.

El último tip consiste en animar al usuario a interactuar con la pantalla, pero siempre permitirle continuar con la voz [3:44]. Un caso real: al preguntar a Google Assistant "¿qué puedes hacer?", la respuesta incluye un listado con cards seleccionables. El usuario puede tocar una opción en pantalla o simplemente decir con la voz lo que quiere, como "la calculadora" [4:02]. Ofrecer estos dos caminos hace la experiencia más flexible y accesible.

Con estos principios claros, el siguiente paso es refinar y evaluar la conversación antes de llevarla a producción. ¿Has probado alguna interfaz multimodal que te haya sorprendido por su fluidez? Comparte tu experiencia.