Conception des matériaux et problème mystérieux de la navigation dans la viande

En mars 2016, Google a mis à jour Material Design pour ajouter des barres de navigation inférieures à sa bibliothèque d'interface utilisateur. Cette nouvelle barre est positionnée au bas d'une application et contient 3 à 5 icônes qui permettent aux utilisateurs de naviguer entre les vues de niveau supérieur d'une application.

Semble familier? En effet, les barres de navigation inférieures font partie de la bibliothèque d'interface utilisateur d'iOS depuis des années (elles sont appelées barres d'onglets dans iOS).

Les barres de navigation inférieures sont une meilleure alternative au menu hamburger, leur ajout dans Material Design devrait donc être une bonne nouvelle. Mais la version de Google des barres de navigation inférieures a un sérieux problème: la navigation mystérieuse .

Que vous soyez un utilisateur, un concepteur ou un développeur Android, cela devrait vous déranger.

Qu'est-ce que la navigation mystérieuse de la viande et pourquoi est-ce si grave?

Mystery meat navigation est un terme inventé en 1998 par Vincent Flanders du célèbre site Web Pages That Suck. Il fait référence à des boutons ou des liens qui ne vous expliquent pas ce qu'ils font. Au lieu de cela, vous devez cliquer dessus pour le découvrir.

(Le terme «viande mystère» provient de la viande servie dans les cafétérias des écoles publiques américaines qui étaient tellement transformées que le type d'animal dont elles provenaient n'est plus discernable.)

La navigation mystère de la viande est la marque de fabrique des designs qui privilégient la forme à la fonction. C'est une mauvaise conception UX, car elle met l'accent sur l'esthétique au détriment de l'expérience utilisateur. Cela ajoute une charge cognitive aux tâches de navigation, car les utilisateurs doivent deviner ce que fait le bouton. Et si vos utilisateurs ont besoin de deviner, vous le faites mal.

Vous ne voudriez pas manger de viande mystère - de même, les utilisateurs ne voudraient pas cliquer sur les boutons mystère.

Strike 1: Barre de navigation d'Android Lollipop

Le premier problème majeur de navigation dans la viande mystérieuse de Material Design s'est produit en 2014 avec Android Lollipop.

Android Lollipop a été présenté lors de la même conférence qui a fait ses débuts dans la conception de matériaux et propose une interface utilisateur repensée pour correspondre au nouveau langage de conception de Google.

L'un des éléments de l'interface utilisateur qui a été repensé était la barre de navigation, la barre persistante en bas du système d'exploitation Android qui fournit un contrôle de navigation pour les téléphones sans boutons matériels pour Retour, Accueil et Menu.

Dans Android Lollipop, la barre de navigation a été repensée pour ceci:

Vous voyez le problème?

Bien que la conception précédente soit moins attrayante sur le plan esthétique, elle est plus ou moins simple. Les icônes Retour et Accueil peuvent être comprises sans avoir besoin d'étiquettes de texte. La 3ème icône est un peu mystérieuse, mais dans l'ensemble, l'UX de l'ancienne barre de navigation n'était pas si mal.

Le nouveau bar, en revanche, est extrêmement joli. Le triangle équilatéral, le cercle et le carré sont des symboles de la perfection géométrique. Mais c'est aussi extrêmement peu convivial. C'est abstrait et les contrôles de navigation ne doivent jamais être abstraits. C'est une navigation de viande mystérieuse à part entière.

L'icône du triangle peut ressembler à une flèche «Retour», mais que signifient un cercle et un carré par rapport au contrôle de navigation?

Strike 2: Boutons d'action flottants

Les boutons d'action flottants sont des boutons spéciaux qui apparaissent au-dessus d'autres éléments de l'interface utilisateur dans une application. Idéalement, ils sont utilisés pour promouvoir l'action principale de l'application.

Les boutons d'action flottants souffrent également du problème de navigation mystérieuse de la viande. De par sa conception, le bouton d'action flottant est un cercle contenant une icône. C'est un bouton d'icône pure, sans place pour les étiquettes de texte.

La vérité est que les icônes sont incroyablement difficiles à comprendre car elles sont si ouvertes à l'interprétation. Notre culture et nos expériences passées informent sur la façon dont nous interprétons les icônes. Malheureusement, les concepteurs (en particulier, semble-t-il, les concepteurs de matériaux) ont du mal à faire face à cette vérité.

Besoin d'une preuve que les boutons contenant uniquement des icônes sont une mauvaise idée? Jouons à un jeu de devinettes.

Vous trouverez ci-dessous une liste de ce que, selon les directives de Material Design, sont des icônes acceptables pour les boutons d'action flottants. Pouvez-vous deviner ce que fait chaque bouton?

Ok, c'est simple pour vous réchauffer. Il représente les «Directions».

Et ça? Si vous êtes un utilisateur iOS ou Mac, vous pouvez dire «Safari». Il représente en fait «Explorer».

Les choses deviennent amusantes (ou frustrantes) maintenant! Cela pourrait-il être «Ouvrir dans les contacts»? «Au secours, il y a quelqu'un qui me suit»? C'est peut-être un bouton pour votre bouée de sauvetage «Téléphonez à un ami».

Attendez, c'est le bouton pour « Ouvrir dans les contacts. » Droite? Ou s'agit-il de «potins sur un ami» puisque la personne est à l'intérieur d'une bulle de dialogue?

Prêt pour le tour final? Voici la pire icône (et la plus utilisée):

Vous pourriez penser que le bouton «+» est assez simple à comprendre - c'est évidemment un bouton pour l'action «Ajouter». Mais ajouter quoi ?

Ajoutez quoi: c'est là le problème. Si un utilisateur a besoin de poser cette question, votre bouton est officiellement de la viande mystère. Malheureusement, les développeurs et les concepteurs d'applications de conception de matériaux semblent être amoureux du bouton d'action flottant «+».

Précisément parce que le bouton «+» semble si facile à comprendre, il finit par être l'icône la plus utilisée pour les boutons d'action flottants. Considérez comment la propre application Inbox de Google affiche des boutons supplémentaires lorsque vous appuyez sur le bouton flottant «+», ce qui n'est pas ce à quoi un utilisateur s'attend:

Ce qui aggrave les choses, c'est la façon dont les mêmes icônes ont des significations différentes dans différentes applications. Google a utilisé l'icône en forme de crayon pour représenter "Rédiger" dans Inbox et Gmail, mais l'a utilisé pour représenter "Modifier" dans son application photo Snapseed.

Le bouton d'action flottant était destiné à être un excellent moyen pour les utilisateurs d'accéder à une action principale. Sauf que ce n'est pas le cas, car les boutons contenant uniquement des icônes ont tendance à être de la viande mystérieuse.

En savoir plus sur les boutons d'action flottants:

Conception matérielle:

Pourquoi le bouton d'action flottant est une mauvaise conception UX

Material Design est un langage de conception introduit par Google il y a un an et représente la tentative audacieuse de l'entreprise sur… medium.com

Strike 3: La nouvelle barre de navigation inférieure

Cela nous amène à la barre de navigation inférieure, introduite en mars 2016.

Pour les barres de navigation inférieures avec 3 vues, les directives de Google spécifient que les icônes et les étiquettes de texte doivent être affichées. Jusqu'ici, tout va bien: pas de viande mystère ici.

Mais pour les barres de navigation inférieures avec 4 ou 5 vues, Google spécifie que les vues inactives seront affichées sous forme d' icônes uniquement .

Rappelez-vous à quel point il était difficile de deviner ce que signifient les icônes des boutons d'action flottants? Essayez maintenant de deviner une rangée d'icônes utilisées pour naviguer dans une application.

C'est juste une mauvaise conception UX. En fait, le groupe Nielsen Norman soutient que les icônes ont besoin d' une étiquette de texte, en particulier les icônes de navigation (en soulignant la leur):

«Pour aider à surmonter l'ambiguïté à laquelle font face presque toutes les icônes, une étiquette de texte doit être présente à côté d'une icône pour clarifier sa signification dans ce contexte particulier.… Pour les icônes de navigation, les étiquettes sont particulièrement importantes.»

Le dernier composant d'interface utilisateur de Material Design tolère que la navigation mystérieuse de la viande soit non seulement frustrante, mais aussi étrange. Pourquoi les libellés de texte devraient-ils être affichés lorsqu'il y a 3 vues, mais être masqués lorsqu'il y a 4 à 5 vues?

Une réponse évidente serait les contraintes d'espace.

Sauf que les barres d'onglets dans iOS parviennent à contenir 5 icônes et affichent toujours l'icône et l'étiquette de texte pour chacune d'elles. La contrainte d'espace n'est donc pas une raison valable.

Google a soit décidé que les icônes pouvaient représenter suffisamment les actions de navigation (ce qui est mauvais), soit ils ont décidé que la netteté esthétique était plus importante que la convivialité (ce qui est pire). Quoi qu'il en soit, leur décision a empiré l'UX de millions d'utilisateurs Android.

Conception matérielle et forme par rapport à la fonction

Lorsque Material Design a été lancé en 2014, c'était en grande pompe. Il est audacieux et suit (et en un seul coup) la tendance du design plat. L'association de couleurs vibrantes et d'animations le rend joli à regarder.

Mais c'est peut-être un peu trop joli. Peut-être qu'en travaillant sur la conception de matériaux, les concepteurs se sont un peu emportés.

À maintes reprises, les directives de Google pour les boutons et les barres importants semblent donner la priorité à la forme plutôt qu'à la fonction. La beauté géométrique a été choisie plutôt que la reconnaissabilité dans la barre de navigation d'Android. La simplicité esthétique a été défendue dans les boutons d'action flottants, les transformant en énigmes dans le processus. Enfin, la netteté visuelle a été jugée plus importante que les étiquettes significatives dans les barres de navigation inférieures.

Cela ne veut pas dire que la navigation mystérieuse de la viande est un problème uniquement Google. Bien sûr, vous pouvez également trouver de la viande mystérieuse dans les applications iOS. Mais ils n'apparaissent généralement pas dans les contrôles de navigation critiques et les boutons promus. Ils ne sont pas non plus spécifiquement énoncés dans les directives de conception comme étant de la viande mystère.

Si les concepteurs de Google pouvaient consacrer du temps et des efforts à la création de graphiques de vitesse pour les animations, ils pourraient peut-être passer un peu de temps pour s'assurer que leurs conceptions ne sont pas de la viande mystérieuse.

Après tout, un bouton mystère animé est toujours moins agréable qu'un bouton statique mais clairement étiqueté.