Read in English: Design tips for Alexa multimodal devices.
Desde el lanzamiento del Alexa Echo Show en 2017, Amazon ha ido llenando poco a poco el mercado de dispositivos con pantalla o multimodales. La existencia de nuevos productos multiplica las opciones de los usuarios, pero puede resultar algo complejo para los que nos dedicamos al diseño multimodal.
Si hace poco publiqué un post sobre los diferentes roles de diseño que hacen falta en interfaces conversacionales, en el que se incluía el de diseñador multimodal, en este post hago un análisis de cada uno de los tamaños disponibles de Alexa Echo con pantalla. En todos los casos empiezo con las especificaciones técnicas, pero bajo al nivel de mis recomendaciones personales en cuanto a diseño multimodal, tamaños de elementos concretos (tipografías, imágenes…) y número de elementos para cada uno de ellos.
Si lo que te interesa es el diseño conversacional puro y quieres saber cómo diseñar para voz, te recomiendo este artículo sobre herramientas de diseño para Alexa, Google y demás interfaces de voz.
El número de elementos interactivos que recomiendo en cada Alexa Echo está pensando en el uso habitual del mismo y para una experiencia voice first. De esta manera, no se tiene en cuenta excepcionalidades como pueda ser la inclusión de un teclado de letras completo, como la experiencia nativa incluye al hacer login, configurar la red wi-fi, etc.
Al final del artículo incluyo un archivo en Adobe XD, con los diferentes tamaños y 4 propuestas de pantalla, que os podéis descargar y usar para vuestros proyectos.
Resumen de los diferentes dispositivos multimodales de Alexa
Antes de empezar, conviene tener a mano todos los dispositivos existentes hasta la fecha y sus especificaciones técnicas. La información se encuentra dispersa en las diferentes páginas de producto, plataformas de desarrollo y blogs, por lo que aquí os resumo lo más importante:
| Device | Width | Height | Ratio | Screen | dpi |
|---|---|---|---|---|---|
| Echo Spot | 480 | 480 | 1/1 | 2,5” | 271 dpi |
| Echo Show 5 | 960 | 480 | 2/1 | 5,5″ | 195 dpi |
| Echo Show 8 | 1280 | 800 | 16/10 | 8” | 188 dpi |
| Echo Show v1 | 1024 | 600 | 16/9 | 7” | 169 dpi |
| Echo Show v2 | 1280 | 800 | 16/10 | 10” | 151 dpi |
| Extra large TV | 1920 | 1080 | 16/9 | – | – |
Tabla de especificaciones de los dispositivos multimodales Alexa Echo
Consejos de diseño multimodal para pantallas de Alexa
No todos los dispositivos Echo están disponibles en todos los países en los que Alexa está presente, por lo que habrá que tener en cuenta en qué marketplace estará publicada nuestra Skill de Alexa a la hora de priorizar los diferentes dispositivos.
Diseñando para Echo Spot
Es el pequeño de la familia Echo y aunque parece sin stock desde octubre, muchos usuarios adoran su diseño de aspecto retro futurista con forma de esfera.
Su pantalla circular de 2,5 pulgadas (resolución 480×480) puede quedarse corta para muchos usos y desde luego no es la ideal para reproducción de vídeos, visualización de fotografías, o lectura de textos.
El tamaño de la pantalla hace que sea útil a distancias de 2-3 metros como máximo y siempre y cuando se haga un uso adecuado de ella. En esa línea, mis recomendaciones de diseño multimodal son:
- El logo de la skill a toda pantalla.
- Una imagen sencilla que ilustre la información compartida por voz.
- Una frase en tamaño de letra 42, alto de línea 1.4, un máximo de 117 caracteres y texto alineado al centro para aprovechar mejor la pantalla esférica. A este tamaño puedes tener una lectura aceptable a 2-3 metros. Aunque podamos usar el efecto karaoke para que el texto vaya apareciendo por la pantalla o permitir a tus usuarios hacer scroll, deberíamos aceptar que este dispositivo no es ideal para leer textos largos.
- De 1 a 4 elementos interactivos. El número dependerá de si los acompañamos de más elementos elementos visuales o si es el único elemento en la interfaz.
Diseño de pantalla para Echo Show 5
El siguiente en tamaño es el Echo Show 5, parecido a un móvil en horizontal pero con un altavoz trasero que imposibilita que lo puedas girar o guardar en el bolsillo
Con una resolución de 960×480 y una pantalla de 5,5 pulgadas, parece el sustituto natural para el Echo Spot. Es un dispositivo que pide a gritos que se le ponga en la mesilla de noche.
La pantalla es el doble de grande que la del Echo Spot y sus esquinas cuadradas permiten un mejor aprovechamiento de los espacios. A pesar de ello sigue siendo un dispositivo para manejar de cerca. Mi recomendaciones para este dispositivo son las siguientes:
- El logo a toda pantalla.
- Una o dos imágenes con opciones de mostrar parcialmente una tercera en el uso de carruseles y secuencias de imágenes.
- Una frase de las mismas características que en el Echo Spot, con tamaño de letra 42, alto de línea 1.4 y que usar mucho mejor el espacio permite hasta 299 caracteres. Igual que en el caso anterior no es un dispositivo ideal para leer textos, por lo que no deberíamos abusar de ellos.
- A pesar de tener más tamaño disponible, mi recomendación se mantiene en un máximo de 4 elementos interactivos presentes al mismo tiempo.
Claves de diseño multimodal en Echo Show 8
Es el último dispositivo en salir el mercado y para muchos ya es el dispositivo multimodal perfecto. Su pantalla de 8 pulgadas (resolución 1280×800) permite al usuario tener más libertad de movimientos e interactuar con él desde mayores distancias sin perder las ventajas de la información visual.
Utilizarlo de manera habitual para ver la televisión o una serie empieza a no parecer tan descabellado con el Show 8. Seguir utilizando a 4 metros de distancia tampoco.
Mis recomendaciones de diseño para la pantalla multimodal son:
- El logo y un pequeño texto que le acompañe (4 o 5 palabras).
- 3 imágenes y opción de una cuarta parcialmente visible.
- La resolución aumenta más que el tamaño de la pantalla, por lo que subiría el texto a 48 y aumentaría un poco los márgenes para facilitar la lectura a mayor distancia. Con ello conseguimos un texto sin scroll de hasta 416 caracteres.
- El tamaño nos permite incluir muchos más elementos interactivos. Teniendo en cuenta que las interacciones deben plantearse para voice first y que no queremos empujar al usuario a acercarse a la pantalla, mantendría los elementos en un máximo de 4 principales y 2 secundarios.
Diseño multimodal para Echo Show Generación 1
El dispositivo ha sido sustituido por el Echo Show Generación 2, pero podemos encontrar usuarios que lo tienen en casa (sobre todo en EEUU).
A pesar de ser un dispositivo de mayor tamaño que el Echo Show 8 la pantalla es muy similar e incluso algo más pequeño, al bajar hasta las 7 pulgadas.
Mis recomendaciones se mantienen igual que para el Echo 8, corrigiendo la diferencia de aspect ratio, ya que con su resolución de 1024×600 pasamos de un dispositivo multimodal de 16/10 a uno de 16/9.
Diseñando para Echo Show Generación 2
El sustituto del dispositivo anterior mejora mucho en prestaciones a su predecesor. Tanto en calidad del sonido como en pantalla, al saltar hasta las 10 pulgadas. La resolución de la pantalla es la misma que la del Show 8, 1280×800, pero al tener más pulgadas perdemos un poco de definición.
Con un aspecto muy similar al de una tablet, los usuarios pueden hacer muchas más cosas con él y puede ser un sustituto perfecto a la clásica televisión de la cocina.
Las recomendaciones de multimodalidad son:
- El logo con un texto mayor (hasta 50 caracteres).
- 4 imágenes al mismo tiempo, aunque para carruseles en principio 3 y parcialmente la cuarta puede ser una mejor solución.
- Aumentando el texto a 48 y el padding a 90 para marcar más distancia con los bordes, podemos facilitar la lectura e irnos hasta los 416 caracteres por pantalla sin ningún tipo de scroll.
- En cuanto a elementos interactivos, dependiendo del caso de uso y luchando siempre con la carga cognitiva, podemos llegar hasta los 9 elementos interactivos e incluso tener alguno secundario extra.
Diseñando para Fire TV
El Amazon Fire TV como dispositivo multimodal tiene dos particularidades interesantes. Por un lado no vamos a contar con una pantalla táctil, por lo que la interacción se realiza a través de los botones del mando. Por otro, vamos bastante a ciegas en cuanto a tamaño de pantalla y resolución, ya que dependemos de la televisión que cada usuario tenga en su casa. Amazon incluye el tamaño Extra Large TV en su plataforma de desarrollo pensado para dispositivos de 1920×1080, pero en general es un tamaño problemático y por ahora no hay demasiadas experiencias optimizadas para su uso en televisión.
Siguiendo el uso que Amazon hace del Fire TV con su propia plataforma, podemos tener ciertas consejos sobre diseño multimodal, que serían:
- Logotipo con un texto de hasta 50 caracteres.
- Hasta 10 imágenes a la vez en la pantalla.
- Textos no demasiado largos. Parece que los usuarios no van a la tele para leer.
- El número de elementos interactivos se pueden disparar, aunque hay que recordar que en este caso la interacción no es táctil, si no a través del mando, por lo que el usuario se desplaza por la pantalla pulsando arriba, abajo, izquierda y derecha. Ante la fricción que eso puede suponer, limitaría los elementos a uno 10-12 siempre y cuando estén bien ordenados y se pueda llegar a ellos en un máximo de 4-5 clicks.
Ejemplos de Skills de Alexa multimodales
Algunos ejemplos interesantes de Skills de Alexa que hacen un buen uso de la pantalla son:
- Palabras británicas. Esta Skill para aprender inglés incluye diferentes elementos interactivos y se adapta bien a todos los dispositivos Echo.
- Iberia. La Skill de Iberia te permite hacer varias cosas y, através de la pantalla, podrás elegir entre las opciones de sus diferentes menús.
- Stream Player. Es la Skill para ver la televisión, por lo que parece ideal para Fire TV y Echo Show generación 2.
- Cookpad. Es el ejemplo de Skill multimodal más completo. Por el caso de uso seguramente el Echo Show de generación 2 es el dispositivo que mejor le viene.
Cierre
Lo prometido es deuda, en este enlace podéis descargar el template de Adobe XD, y aquí la versión en PDF.
Espero que estas recomendaciones os resulten útiles, y os animo a que os adentréis en el diseño multimodal, experimentando con diferentes formatos, tamaños y elementos, y que me deis vuestro feedback.