Avant l'annonce très attendue de ce mois-ci, Google a accidentellement publié un article de blog détaillant la réflexion et la recherche derrière Material 3 Expressive Design, la dernière orientation de conception de l'entreprise.
L'article complet a été archivé sur le blog par Wayback Machine (Avec des images non présentées dans la version archivée ci-dessous.) Voici les principaux points :
Material 3 Expressive représente ce que Google appelle une « nouvelle direction audacieuse pour le design » et est « la mise à jour la plus recherchée du système de conception de Google à ce jour ». Google souhaite que les applications aillent au-delà des conceptions « propres » et « ennuyeuses » pour créer des interfaces qui se connectent aux gens sur le plan émotionnel. En plus de son nom complet, il est également appelé « M3 Expressive » ou simplement « design expressif ».
Material 3 Expressive est né de la recherche – non pas à la manière de 41 Shades of Blue, qui déléguait les décisions de conception aux données, mais dans le cadre d’une enquête collaborative impliquant la recherche, la conception et l’ingénierie.
En 2022, l'équipe Material Design a commencé à se demander : « Pourquoi toutes ces applications se ressemblent-elles autant ? Sont-elles si ennuyeuses ? N'y avait-il pas de place pour plus de sensations ? »
Au cours des trois dernières années, nous avons exploré les implications de ce dialogue, en répétant des dizaines de cycles de conception et de recherche pour trouver la prochaine évolution du Material Design. Grâce à 46 études de recherche distinctes portant sur des centaines de conceptions et plus de 18000 3 participants du monde entier, nous avons mis au point un système magnifique et hautement utilisable. Les principes de Material XNUMX Expressive sont fondés sur des recherches solides et s'appuient sur les meilleures pratiques d'utilisabilité établies, afin que les concepteurs puissent utiliser ces nouveaux composants et principes en toute confiance, sachant qu'ils construisent quelque chose de facile à utiliser et avec lequel les gens peuvent se connecter.
Ces études de recherche comprenaient :
- Suivi oculaire : Analysez où les utilisateurs concentrent leur attention. Le suivi oculaire est un outil puissant pour comprendre le comportement des utilisateurs et identifier les domaines d’amélioration de la conception.
- Enquêtes et groupes de discussion : mesurer les réponses émotionnelles à différentes conceptions. Ces méthodes aident à comprendre comment les utilisateurs perçoivent les designs sur le plan émotionnel.
- Expériences : Recueillir des sentiments et des préférences. Les expériences sont essentielles pour déterminer les designs que les utilisateurs préfèrent et pour évaluer l’impact des différents éléments sur l’expérience utilisateur.
- Facilité d'utilisation: Découvrez à quelle vitesse les participants comprennent et utilisent l’interface. La convivialité est une mesure essentielle du succès de toute conception, déterminant la facilité et l'efficacité avec lesquelles les utilisateurs peuvent atteindre leurs objectifs.
Google déclare : « Les éléments essentiels d’un design expressif sont l’utilisation de la couleur, de la forme, de l’échelle, du mouvement et du confinement. » De plus : « Material 3 Expressive propose une utilisation audacieuse de la forme et de la couleur, créant ainsi des expériences utilisateur agréables. » L'utilisation de couleurs et de formes audacieuses est un élément clé de Material Design 3 Expressive, visant à créer des expériences utilisateur engageantes et mémorables.
Ces aspects de conception sont également essentiels pour rendre le produit plus convivial en attirant l’attention sur les éléments importants de l’interface, tels que la mise en évidence des actions clés et le regroupement d’éléments similaires. Cela améliore l’expérience utilisateur et la rend plus fluide et plus efficace.
La barre d'outils flottante est un composant généré par Material 3 Expressive. Dans les conceptions, nous voyons une barre inférieure en forme de pilule qui ne couvre pas toute la largeur de l'écran. En conséquence, nous voyons une petite partie de l'arrière-plan, les motifs bord à bord devenant plus proéminents. C'est similaire à ce qui est disponible dans Google Chat aujourd'hui.
Les recherches de Google montrent que « les conceptions expressives sont plus faciles à utiliser » et aident les utilisateurs à « découvrir rapidement l’action principale sur chaque écran et à naviguer plus rapidement ».
…Les participants ont pu identifier les éléments clés de l’interface utilisateur jusqu’à 4 fois plus rapidement, démontrant que ces conceptions dirigent l’attention de l’utilisateur vers la partie la plus importante de l’écran. Nous avons vu de nombreuses applications atteindre ces niveaux d’amélioration, et cela va au-delà des simples temps de fixation des yeux. Nous avons également constaté une diminution du temps nécessaire pour cliquer sur les actions clés de quelques secondes sur différentes conceptions que nous avons testées.
Encore une fois, il est important de souligner qu’il ne s’agit que de concepts et qu’ils ne reflètent pas des produits réels. (Pour quelque chose de plus définitif, cela a été divulgué. Refonte de l'horloge Google (Au cours du week-end.) Cependant, l’exemple « avant » ci-dessous est clairement l’interface utilisateur actuelle de Gmail.
Lorsque nous examinons des conceptions spécifiques, telles que les écrans d’une étude de cas d’application de messagerie électronique présentée ci-dessous, nous pouvons constater de première main l’avantage des principes de conception expressifs. Par exemple, le bouton Envoyer dans la nouvelle conception est plus grand, positionné directement au-dessus du clavier et utilise une couleur secondaire pour attirer l’attention sur lui. Nous pouvons comparer cela à la conception non expressive, qui place un petit bouton « Envoyer » dans la barre d’outils en haut de l’écran avec d’autres commandes comme joindre un fichier. Lorsqu'on a demandé aux participants d'« envoyer l'e-mail » dans l'application, leurs yeux ont vu le bouton 4 fois plus vite dans la conception emoji. Cela reflète l’importance du « design expressif » pour améliorer l’expérience utilisateur.
D'autres concepts montrent une application de montre, une saisie vocale, un éditeur de photos, des paiements et un portefeuille :
Le succès ou l’échec de l’adoption de la nouvelle interface utilisateur dépend de sa facilité de mise en œuvre et de la fluidité de sa mise à jour à partir de M3. Jetpack Compose semble être dans une bien meilleure position ces jours-ci, donc je suis prudemment optimiste.
Entre-temps, des recherches et des tests utilisateurs ont révélé que « les personnes de tous âges préfèrent fortement une conception expressive bien implémentée à une conception non expressive qui respecte les directives de l'interface utilisateur humaine d'iOS ».
Google a constaté que « les designs expressifs sont excellents », en particulier pour l'attrait de la marque : « Nos recherches ont montré que l'utilisation du design M3 Expressive améliorait le côté « cool » d'un produit pour les gens. »
- …Nous avons constaté une augmentation de 32 % de la perception des sous-cultures, ce qui suggère qu’un design expressif donne à une marque une apparence plus pertinente et « au courant ».
- …34 % d’augmentation de la fraîcheur, donnant à la marque une apparence fraîche et innovante.
- …une augmentation de 30 % de la rébellion, indiquant que le design expressif positionne la marque comme un leader audacieux et innovant, prêt à rompre avec la norme.
Les commentaires sont fermés.