Antes del anuncio de este mes, Google publicó accidentalmente una publicación de blog que detalla el pensamiento e investigación detrás de Material 3 Expresivo.
La publicación completa del blog fue guardada por Wayback Machine (con las imágenes que no aparecen en la versión de archivo que aparece a continuación). Aquí están las conclusiones clave:
Material 3 Expresivo es la llamada “nueva dirección audaz para el diseño” de Google, que es la “actualización más investigada del sistema de diseño de Google”. Google quiere que las aplicaciones “se muevan más allá de los diseños ‘limpios’ y ‘aburridos’ para crear interfaces que se conecten con las personas en un nivel emocional”. Además del nombre completo, también se conoce como “M3 Expresivo” o simplemente “Diseño expresivo”.
Material 3 Expressive nació de la investigación, no en la forma de 41 tonos de azul, que delegó las decisiones de diseño a los datos, sino en una investigación colaborativa que abarca la investigación, el diseño y la ingeniería.
En 2022, el equipo de diseño de material comenzó a preguntar: “¿Por qué todas estas aplicaciones se veían tan similares? ¿Tan aburrido? ¿No había espacio para marcar la sensación?”
Anuncio – Desplácese por más contenido
En los últimos tres años, hemos explorado las implicaciones de esta conversación, iterando a través de docenas de rondas de diseño e investigación para encontrar la próxima evolución del diseño de materiales. A través de 46 estudios de investigación separados con cientos de diseños, y más de 18,000 participantes de todo el mundo, hemos marcado en un sistema que es hermoso y altamente utilizable. Los principios expresivos del material 3 están enraizados en una investigación sólida y se basan en las mejores prácticas de usabilidad de larga data, por lo que los diseñadores pueden usar con confianza estos nuevos componentes y principios, sabiendo que están construyendo algo que será fácil de usar y con los que las personas pueden conectarse.
Esos estudios de investigación incluyeron:
Seguimiento ocular: analizar dónde los usuarios centraron sus encuestas de atención y grupos focales: evaluar las respuestas emocionales a diferentes diseños experimentos: recopilar sentimientos y preferencias Usabilidad: ver qué tan rápido los participantes podrían entender y usar una interfaz
Google dice que “las partes fundamentales del diseño expresivo son el uso de color, forma, tamaño, movimiento y contención”. Además: “El material 3 expresivo se caracteriza por el uso audaz de la forma y el color, creando experiencias deliciosas del usuario”.
Estos aspectos de diseño también son fundamentales para lo que hace que un producto sea más utilizable al llamar la atención sobre lo que importa en la interfaz: hacer que las acciones clave se destaquen y la agrupación de elementos juntos.
Una “barra de herramientas flotante” es uno de los componentes nacidos del material 3 expresivo. En los diseños conceptuales, vemos una barra inferior en forma de píldora que no abarca todo el ancho de su pantalla. Como tal, vemos una astilla del fondo, con diseños de borde a vanguardia que se vuelven más importantes. Es similar a lo que está disponible en Google Chat hoy.
Google Research descubrió que sus “diseños expresivos son más fáciles de usar” y ayudaron a los usuarios “a detectar rápidamente la acción clave en cada pantalla y navegar más rápidamente”.
… Los participantes pudieron detectar elementos clave de la interfaz de usuario hasta 4 veces más rápido, lo que demuestra que estos diseños funcionan para dirigir la atención de un usuario a la parte más importante de la pantalla. Hemos visto que muchas aplicaciones alcanzan estos niveles de mejoras, y esto se extiende más allá de los tiempos de fijación de los ojos. Hemos visto tiempo para aprovechar las acciones clave disminuyendo en segundos en diferentes diseños que hemos probado también.
Una vez más, es importante enfatizar que estos son solo diseños conceptuales que no reflejan los productos reales. (Para algo más final, un rediseño de Google Clock se filtró durante el fin de semana). Dicho esto, el ejemplo de “antes” a continuación es claramente la interfaz de usuario actual de Gmail.
Cuando observamos diseños particulares, como las pantallas para un estudio de caso de una aplicación de correo electrónico a continuación, podemos ver el beneficio de los principios expresivos directamente. Por ejemplo, el botón de envío en el nuevo diseño es más grande, se coloca justo encima del teclado y usa un color secundario para llamar la atención. Podemos comparar esto con el diseño no expresivo, que coloca el pequeño botón de envío en la barra de herramientas de la parte superior de la pantalla con otros controles como adjuntar un archivo. Cuando se les pidió a los participantes que “enviaran el correo electrónico” en la aplicación, sus ojos vieron el botón 4x más rápido en el diseño expresivo.
Otros diseños conceptuales muestran una aplicación de reloj, entrada de voz, editor de fotos, pagos y billetera:
Mientras tanto, la investigación y las pruebas de usuarios descubrieron que un “diseño expresivo bien aplicado es muy preferido por personas de todas las edades sobre el diseño no expresivo que siguió las pautas de la interfaz humana de iOS”.
Google descubrió que “los diseños expresivos son geniales”, específicamente la frescura de la marca: “Nuestra investigación mostró que el uso de M3 Expressive Design aumentaba cómo la gente” genial “pensaba que era un producto”.
… Encontramos un aumento del 32% en la percepción de la subcultura, lo que indica que el diseño expresivo hace que una marca se sienta más relevante y “en el conocimiento”. … El 34% aumenta en la modernidad, haciendo que una marca se sienta fresca y con visión de futuro … 30% salta en rebeldía, lo que sugiere que el diseño expresivo posiciona una marca como un líder audaz e innovador, dispuesto a romper con la convención.
Gracias Simon
FTC: Utilizamos ingresos que ganan enlaces de afiliados para automóviles. Más.
