4 min read

Factores de diseño de interfaces multimodales: VUI + GUI

¿Qué principios debemos considerar a la hora de diseñar interfaces multimodales? ¿Cómo podemos aprovechar las bondades de las VUI y las GUI para crear experiencias más eficientes y accesibles?
Factores de diseño de interfaces multimodales: VUI + GUI

En el artículo de introducción a las interfaces multimodales vimos cómo la creación de experiencias interactivas con modos de entrada/salida alternativos pueden llegar a ser más eficaces y accesibles para las personas según su contexto de uso.

Interfaces multimodales
¿Qué es una interacción multimodal? ¿Qué beneficios aportan las interfaces multimodales a las experiencias de usuario? ¿Qué elementos debemos considerar para diseñar interacción multimodal con VUI y GUI?

Ahora, nos centraremos en destacar los factores de diseño a tener en cuenta cuando trabajemos con interfaces gráficas de usuario e interfaces de voz para crear esa interacción multimodal.

Para ello analizaremos el ejemplo de SoundHound quienes ofrecen un producto que permite interacción por voz y táctil/visual para hacer un pedido en un restaurante.


No competir por la atención

Sea cual sea el método de entrada/petición/acción iniciada por el usuario para realizar una tarea, la respuesta que debemos dar no debe competir por la atención del usuario, tanto si se usa de forma simultánea la voz como la pantalla.

Captura de pantalla de la interfaz multimodal de SoundHound para pedir comida.

Para no competir con la atención debemos crear un diseño con una jerarquía visual clara.

En el ejemplo, vemos que mientras añadimos los platos al carrito de la compra, tanto la lista de platos incluidos (derecha) como la interpretación de los comandos de voz (izquierda) son más importantes (están en la parte superior y ocupan todo el ancho) que la sugerencia (no solicitada) de 'sides' para el menú (esquina inferior izquierda).

Pensad que la respuesta del sistema (feedback) debe darse en un tiempo oportuno (sin retrasos) para que podamos entender que estamos siendo comprendidos y que se ha procesado correctamente nuestra intención.

Nuestra atención se dirigirá a interpretar el feedback donde exista una representación real de lo que ha sucedido: se ha añadido la comida al carrito tal y como se había solicitado.

Sólo hay un contexto

La voz y la pantalla no siguen dos flujos diferentes ni mantienen dos estados diferentes, en cambio, forman parte de un único contexto de información, funcionamiento y reacción sincronizada.

Nuestra solución debe ser capaz de gestionar el mismo contexto, de interpretar cuál es el método de entrada utilizado por las usuarias y decidir cuál o cuáles serán los métodos de respuesta, todos ellos ofreciendo la misma información de manera coordinada.

Esto, además, nos obliga a mantener los modos de respuesta sincronizados para que exista coherencia entre lo que la persona podría ver y podría escuchar. De modo que el diseño conversacional y el visual deben también hacerse de forma conjunta.

Usa el mejor método para cada cosa

Ya hemos comentado que nuestra manera de gestionar la información desde la vista y el oído requiere de tiempos distintos de atención y procesamiento:

  • Somos capaces de interpretar mayores cantidades de datos con la vista.
  • Leemos más rápido que escuchamos.
  • Hablamos más rápido que tecleamos.
  • Necesitamos menos precisión con el uso de los dedos que con el ratón.

Por lo tanto, se recomienda sugerir e incentivar el uso del modo de interacción más eficiente para cada tarea:

  • La voz para ofrecer respuestas concretas e inmediatas, 
  • La pantalla para representar grandes cantidades de datos, 
  • Lo táctil para lo que no requiere precisión,
  • El ratón para la manipulación y arrastre de elementos visuales más pequeños.

Además, debemos tener en cuenta el entorno físico donde sucede la interacción:

  • Niveles de ruido y luminosidad
  • Espacio físico
  • Distancia con dispositivos
  • Personas que conviven cerca de esos dispositivos
  • Posición o ubicación de la usuaria con respecto al dispositivo

Y a partir de ahí podremos decidir mejor y optimizar tanto los modos de entrada como de salida de información.


Caso de estudio: Android Auto

Android Auto es una aplicación que se conecta a los automóviles y actúa como sistema operativo. Desde ella se pueden usar diferentes aplicaciones (navegador, reproductor, mensajería, llamadas, etc.) y permite la interacción multimodal (por voz con el asistente de Google y la pantalla táctil del salpicadero).

Ejemplo de visualización de navegador y reproductor en Android Auto

La propuesta de Android Auto es interesante desde el punto de vista de la interacción por varios motivos:

  • Es una app que debe ser útil evitando cualquier tipo de distracción. De hecho, tras un número consecutivo de interacciones táctiles, la pantalla se congela (con una barra de progreso inversa) y muestra un mensaje donde se pide a la persona que vuelva a centrar la atención en la carretera.
  • Prioriza la interacción por voz para evitar el uso de las manos (por seguridad).
  • Permite elegir si disponer o no de la salida por voz, así como la reproducción automática de mensajes entrantes, para mejorar la experiencia de viaje.
  • Los elementos gráficos son mayores, tienen más espacio sensible al tacto y los tamaños tipográficos son también más grandes que los de una pantalla móvil convencional para facilitar la falta de precisión del posible movimiento con atención visual reducida. Esta estrategia, en general, es la misma que usa Google Maps en modo navegación ya que tiene en cuenta el movimiento de la persona usuaria.
  • Hay mucha menos densidad de información que una app dispositivo móvil. Como hemos dicho, cuanta menos atención a detalles sin importancia tengamos que poner, más segura resultará.

Además vemos cómo se cumplen los principios de diseño mencionados: la pantalla y la voz están siempre sincronizadas, manteniendo un único contexto y ofreciendo el mejor modo de interacción dependiendo de la tarea.

Es importante mencionar que, a pesar del buen diseño en la propuesta de esta app, los botones físicos son mucho más fáciles de manipular y esto en el contexto de las experiencias con movimiento y la seguridad es clave.