Antes del anuncio tan esperado de este mes, Google publicó accidentalmente una entrada de blog que detalla el pensamiento y la investigación detrás de Material 3 Expressive Design, la última dirección de diseño de la compañía.
El artículo completo ha sido archivado en el blog por Wayback Machine (Con imágenes que no se muestran en la versión archivada que se muestra a continuación). Estos son los puntos principales:
Material 3 Expressive representa lo que Google llama una “nueva y audaz dirección para el diseño” y es “la actualización más buscada del sistema de diseño de Google hasta la fecha”. Google pretende que las aplicaciones vayan más allá de los diseños “limpios” y “aburridos” para crear interfaces que conecten con las personas a nivel emocional. Además del nombre completo, también se le conoce como “M3 Expressive” o simplemente “diseño expresivo”.
Material 3 Expressive nació de una investigación, no al estilo de 41 Shades of Blue, que delegaba las decisiones de diseño en los datos, sino en una investigación colaborativa que involucró investigación, diseño e ingeniería.
En 2022, el equipo de Material Design empezó a preguntarse: "¿Por qué todas estas aplicaciones se parecen tanto? ¿Son tan aburridas? ¿No había espacio para más estilo?".
Durante los últimos tres años, hemos explorado las implicaciones de este diálogo, iterando docenas de rondas de diseño e investigación para encontrar la próxima evolución de Material Design. A través de 46 estudios de investigación separados con cientos de diseños y más de 18000 participantes de todo el mundo, hemos perfeccionado un sistema hermoso y altamente utilizable. Los principios de Material 3 Expressive se basan en una investigación sólida y se basan en las mejores prácticas de usabilidad establecidas, por lo que los diseñadores pueden usar estos nuevos componentes y principios con confianza, sabiendo que están creando algo que es fácil de usar y con lo que la gente puede conectarse.
Estos estudios de investigación incluyeron:
- Seguimiento ocular: Analizar dónde centran la atención los usuarios. El seguimiento ocular es una herramienta poderosa para comprender el comportamiento del usuario e identificar áreas para mejorar el diseño.
- Encuestas y grupos focales: medición de respuestas emocionales a diferentes diseños. Estos métodos ayudan a comprender cómo los usuarios perciben los diseños a nivel emocional.
- Experimentos: Recoge sentimientos y preferencias. Los experimentos son esenciales para determinar qué diseños prefieren los usuarios y evaluar el impacto de los diferentes elementos en la experiencia del usuario.
- Facilidad de uso: Descubra con qué rapidez los participantes comprenden y utilizan la interfaz. La usabilidad es una medida crítica del éxito de cualquier diseño y determina con qué facilidad y eficiencia los usuarios pueden lograr sus objetivos.
Google dice: “Las partes esenciales del diseño expresivo son el uso del color, la forma, la escala, el movimiento y la contención”. Además: “Material 3 Expressive se caracteriza por un uso audaz de la forma y el color, lo que crea experiencias de usuario encantadoras”. El uso de colores y formas atrevidos es una parte clave de Material Design 3 Expressive, cuyo objetivo es crear experiencias de usuario atractivas y memorables.
Estos aspectos de diseño también son esenciales para hacer que el producto sea más fácil de usar al dirigir la atención a elementos importantes de la interfaz, como resaltar acciones clave y agrupar elementos similares. Esto mejora la experiencia del usuario y la hace más fluida y eficiente.
La barra de herramientas flotante es un componente generado por Material 3 Expressive. En los diseños conceptuales, vemos una barra inferior en forma de píldora que no abarca todo el ancho de la pantalla. Como resultado, vemos una pequeña porción del fondo y los diseños de borde a borde se vuelven más prominentes. Es similar a lo que está disponible hoy en Google Chat.
Las investigaciones de Google muestran que “los diseños expresivos son más fáciles de usar” y ayudan a los usuarios a “descubrir rápidamente la acción principal en cada pantalla y navegar más rápidamente”.
…Los participantes pudieron identificar elementos clave de la interfaz de usuario hasta 4 veces más rápido, demostrando que estos diseños dirigen la atención del usuario a la parte más importante de la pantalla. Hemos visto muchas aplicaciones lograr estos niveles de mejora, y va más allá de los tiempos de fijación de la mirada. También hemos visto una disminución en el tiempo que lleva hacer clic en acciones clave en segundos en los diferentes diseños que probamos.
Nuevamente, es importante enfatizar que estos son solo diseños conceptuales y no reflejan productos reales. (Para algo más definitivo, se filtró. Rediseño del Reloj de Google Durante el fin de semana.) Sin embargo, el ejemplo “antes” que aparece a continuación es claramente la interfaz de usuario actual de Gmail.
Cuando observamos diseños específicos, como las pantallas de un estudio de caso de una aplicación de correo electrónico que se muestra a continuación, podemos ver de primera mano el beneficio de los principios de diseño expresivo. Por ejemplo, el botón Enviar en el nuevo diseño es más grande, está ubicado directamente encima del teclado y utiliza un color secundario para llamar la atención sobre él. Podemos comparar esto con el diseño no expresivo, que coloca un pequeño botón “Enviar” en la barra de herramientas en la parte superior de la pantalla junto con otros controles como adjuntar un archivo. Cuando se pidió a los participantes que "enviaran el correo electrónico" en la aplicación, sus ojos vieron el botón 4 veces más rápido en el diseño del emoji. Esto refleja la importancia del “diseño expresivo” para mejorar la experiencia del usuario.
Otros diseños conceptuales muestran una aplicación de reloj, entrada de voz, editor de fotos, pagos y una billetera:
El éxito o el fracaso de la adopción de la nueva interfaz de usuario depende de lo fácil que sea implementarla y de lo fluidamente que se actualice desde M3. Jetpack Compose parece estar en una posición mucho mejor estos días, por lo que soy cautelosamente optimista.
Mientras tanto, la investigación y las pruebas de usuarios revelaron que “las personas de todas las edades prefieren fuertemente el diseño expresivo bien implementado al diseño no expresivo que sigue las Pautas de Interfaz de Usuario Humano de iOS”.
Google descubrió que los diseños expresivos son excelentes, especialmente para el atractivo de la marca: "Nuestra investigación demostró que usar el diseño M3 Expressive mejoraba la percepción que la gente tenía de un producto".
- …Encontramos un aumento del 32% en la percepción de la subcultura, lo que sugiere que el diseño expresivo hace que una marca parezca más relevante y “más informada”.
- …34% de aumento en la frescura, haciendo que la marca luzca fresca e innovadora.
- …un salto del 30% en la rebelión, lo que indica que el diseño expresivo posiciona a la marca como un líder audaz e innovador, listo para romper con la norma.
Los comentarios están cerrados.