Le flat design et l’utilisabilité

Dans le cadre du cours d’ergonomie web de la Polytechnique, ma fantastique co-équipière Karine Thériault et moi même avons investigué sur le flat design, question d’y voir plus clair à défaut de pouvoir mettre fin au débat. En effet, le flat design est ouvertement critiqué par les experts en expérience utilisateur comme allant à l’encontre de l’utilisabilité. On lui reproche notamment le manque d’affordance. Peut-on faire appel au flat design tout en respectant l’efficience, l’efficacité et la satisfaction dans les interactions ? Voici un sommaire de notre recherche.

Point de départ et méthodologie

Notre hypothèse de départ était que le flat design est là pour rester et ne pose pas de problème d’utilisabilité s’il est bien employé et maitrisé par le designer. En effet, ce n’est pas le style qui pose problème, mais plutôt la mauvaise utilisation qui en est faite.

En faisant une revue de littérature, notre objectif était de démontrer que les problèmes que peut comporter le flat design ne sont pas inhérents à sa nature ou aux principes le définissant. L’inexpérience serait en cause. Malgré le grand nombre de détracteurs et d’opinions partagées à ce sujet sur le Web, les recherches empiriques sont peu nombreuses et non valides. Comment peut-on espérer à une quelconque validité si les chercheurs construisent une expérimentation basée sur de mauvais paramètres? La plupart des exemples illustrés ne respectent pas les critères ergonomiques définis (Bastien et Scapin, 1993) dès le départ, peu importe le style de design. Après avoir délibéré sur la bonne façon de conduire une expérimentation sur le flat design, nous avons convenu qu’il faut d’abord se prémunir de bonnes définitions, théories et bonnes pratiques.

1. Définition du flat design

Le flat design (design aplat) se résume au « design d’une interface utilisateur définie par une représentation épurée et fonctionnelle visant à en rendre la lecture plus fluide et plus pratique, » (Grand Dictionnaire terminologique). Le flat design se caractérise par les principes suivants :

Absence d’ornement tel que les effets 3D, de texture ou de relief
Utilisation de formes simples et de photos
Emphase sur la typographie
Emphase sur les couleurs
Contenu textuel concis
Approche minimaliste

L’absence d’éléments décoratifs vise à épurer l’interface, alors que l’utilisation des formes, des couleurs et de la typographie servent à créer la hiérarchie visuelle. Par sa nature minimaliste et 2D, le flat design se distingue du rich design, du skeuomorphisme et du réalisme.

Rich Design	Utilisation des effets 3D, d’ombrage et de relief pour donner l’impression qu’un élément peut être utilisé ou manipulé
Skeuomorphisme	Représentation métaphorique d’un élément en s’inspirant d’un objet physique
Réalisme	Utilisation de texture dans le but de rendre un élément le plus réaliste possible

Tableau 1. Comparaison des styles.

Figure 1. Comparaison des styles, flat design (à gauche)
vs skeuomorphisme (à droite).

2. Motivations derrière le flat design

2.1 Réaction à la surutilisation du skeuomorphisme

Alors que le flat design se fait souvent reprocher d’être une tendance destinée à s’essouffler, il s’avère que c’est le cas aussi du skeuomorphisme. En réaction à la surcharge visuelle qu’entraîne souvent le skeuomorphism, la tendance est maintenant à la simplicité. Si le skeuomorphisme nous a permis de nous acclimater à un nouveau langage en reprenant des métaphores du monde physique, l’univers numérique et plus récemment du mobile devient un acquis pour la majorité des gens qui l’utilisent depuis quelques années. On n’a plus besoin de l’effet de page tournée ou de la reliure en cuir pour comprendre l’action requise ou se sentir en terrain connu.

2.2 Solution pour faciliter le responsive design (sites web réactifs)

À l’ère actuelle, où les utilisateurs sont constamment en contact avec le contenu numérique, il est essentiel de faire en sorte que le contenu puisse être accessible et efficace sur différents types de plateformes. Il faut ainsi s’assurer que le contenu puisse s’adapter à différentes tailles d’écran, résolutions et définitions. La simplicité et flexibilité du flat design facilite significativement cette adaptabilité de l’interface utilisateur.

3. Critiques du flat design et contre-arguments

Les critiques les plus courantes à l’égard du flat design en termes d’utilisabilité sont :

le manque d’affordance
l’impact négatif sur l’efficience
difficulté à comprendre la navigation
l’augmentation de la charge cognitive

Ces problèmes, qui sont rencontrés régulièrement dans ce type d’interface, découlent-ils fondamentalement des principes du flat design? Il serait simpliste d’attribuer tous les problèmes d’ergonomie au flat design.

3.1 Affordance

La définition la plus utilisée du terme affordance est celle popularisée par Don Norman et fait référence aux propriétés perçues d’un objet permettant à l’utilisateur de savoir qu’il est utilisable et d’avoir une idée du résultat de son utilisation. Hors, le terme affordance a initialement été proposé par James Jerome Gibson et fait plutôt référence aux « propriétés réelles des objets qui peuvent avoir une valeur utile pour leur observateur. Elles portent sur ce que l’on perçoit en fonction de ce sur quoi on peut agir. » Norman a plus tard clarifié qu’il aurait dû être plus précis et utiliser le terme affordance perçue (aussi appelée affordance cognitive) puisque l’affordance en tant que telle est indépendante de la perception.

Figure 2. Technology Affordances par William W. Gaver (1991).

Ce que plusieurs reprochent au flat design est qu’il peut entrainer :

une affordance cachée (l’élément est non perçu comme cliquable alors qu’il l’est),
une fausse affordance (un élément est perçu comme cliquable alors qu’il ne l’est pas).

Les utilisateurs sont exposés depuis déjà un certain temps au minimaliste. Les utilisateurs d’interfaces numériques sont de plus en plus en mesure de reconnaître un hyperlien par sa couleur (dans une conception cohérente) ou le fait qu’il soit souligné, un bouton par sa forme, un menu déroulant par le flèche vers le bas à sa droite.

Affordance perçue
Mauvais exemple	Bon exemple

Avec Windows 8, ce qui est cliquable n’est pas distinct de ce qui ne l’est pas.	Les éléments interactifs sont identifiés par la couleur orange de façon cohérente à travers le site; les boutons ont une forme appropriée.

Tableau 2. Exemples d’affordance.

3.2 Navigation

La navigation d’un site web est un ensemble de composantes ayant pour but d’orienter l’utilisateur à trouver des informations ou des fonctionnalités et l’inciter à prendre les actions appropriées.

Dans le flat design, la navigation ne se retrouve pas toujours où on la trouve habituellement ou dans le format avec lequel on est familier. Avec le modernisme proposé par le flat design, une vague d’exploration créative a eu lieu au détriment de conventions ou modèles établies.

Les problèmes relevés en terme de navigation vont donc à l’encontre des critères ergonomiques de guidage et de cohérence. Au même titre que tout autre type de conception, le flat design propose de mettre en place une hiérarchie visuelle afin de guider les utilisateurs. Le respect de standards en lien avec le positionnement d’un menu de navigation est inhérent au concepteur, non au langage visuel. Ce n’est pas parce que les éléments de l’interface sont en 2D qu’il n’est pas possible de créer une hiérarchie visuelle ou même de la profondeur.

Le flat design offre des façons de créer une hiérarchie visuelle pour guider les utilisateurs :

utilisation de typographies de différentes tailles,
utilisation d’icônes pour accompagner un libellé et le rendre plus visible,
utilisation d’espace négatif pour mettre l’emphase sur le contenu et non le design.

Navigation
Mauvais exemple	Bon exemple

Tout le contenu est au même niveau, il n’y a pas de menu de navigation, il est même difficile de comprendre la mission du site.	Le menu est à un endroit cohérent avec les standards web, tous les éléments colorés sont cliquables, on distingue la mission et les produits disponibles.

Tableau 3. Exemples de navigation.

3.3 Efficience

L’efficience se définit par le rapport entre les ressources dépensées et la précision et le degré d’achèvement selon lesquels l’utilisateur atteint des objectifs spécifiés.

Une étude empirique (Burmistrov et coll., 2015) a procédé à trois expérimentations d’oculométrie en analysant la longueur des fixations, l’amplitude et la vélocité de pointe des saccades. Le flat design a eu de meilleurs résultats en termes de temps dans l’exécution de la tâche que le design traditionnel pour 2 des 3 tâches effectuées. Dans l’une des tâches, le flat design ait eu un plus haut taux d’erreurs. Près de 28 % des éléments identifiés comme étant cliquables ne l’étaient pas. Ce résultat concorde avec le rapport d’Usabilla (2013) qui arrive à des résultats similaires avec une moyenne de 29 %. Malgré les résultats en faveur du flat design en termes de performance, Burmistrov et coll. associent les données obtenues à une charge cognitive plus élevée pour conclure que le flat design est une tendance nocive pour les interfaces utilisateurs.

L’étude empirique de Burmistrov démontrant les problèmes d’efficience d’éléments en flat design adresse plutôt des éléments 2D hors contexte. Or, le flat design s’appuie beaucoup sur le contexte pour communiquer son message. Chercher un mot dans un texte de 3 paragraphes ou identifier une icône dans une matrice de 9×9 n’offre pas une bonne validité écologique pour évaluer l’utilisabilité du flat design. De plus, les deux études, Burmistrov et Usabilla, ne considèrent pas si les critères ergonomiques sont respectés ou non indépendamment du style.

Efficience
Mauvais exemple	Bon exemple

Tout le contenu est au même niveau, il n’y a pas de menu de navigation, il est même difficile de comprendre la mission du site.	Le contenu est minimal, l’emphase est mise sur la fonction principale (c.-à-d. voir la programmation).

Tableau 4. Exemples d’efficience.

3.4 Charge cognitive

L’addition des problèmes que nous avons abordés jusqu’ici (manque d’affordance, difficulté à comprendre la navigation et impact sur l’efficience) amène les critiques du flat design à suggérer que ce dernier entraîne conséquemment une charge cognitive plus élevée. La charge cognitive est une composante de la charge mentale et fait référence à la quantité d’effort mental mobilisé dans l’accomplissement d’une tâche.

Entre autres, l’étude de Burmistrov rapporte de plus longues fixations et de plus courtes saccades lors des exercices de recherche de texte et d’icône pour le flat design. Cette combinaison de facteurs permet de supposer qu’il y a une hausse de la charge cognitive. Ceci dit, cette combinaison de facteurs a aussi été observée lors du 3e test de recherche d’éléments cliquables pour le design traditionnel et ne peut donc être interprété comme exclusif au flat design.

Une des raisons d’être du flat design est la simplification de l’interface dans le but d’en faciliter l’utilisation en se limitant à ce qui est pertinent et fonctionnel. La critique est donc en lien avec les critères ergonomiques d’actions minimales et de densité informationnelle alors qu’ils font partie des principes mêmes du flat design.

Charge cognitive
Mauvais exemple	Bon exemple

Les interactions possibles et la navigation ne sont pas claires. L’interface est simple, mais demande de la réflexion.	La navigation est évidente et le contenu concis. L’utilisateur connait ses possibilités sans avoir à réfléchir.

Tableau 5. Exemples de charge cognitive.

Devant l’enthousiasme et l’adoption massive du flat design, il est vrai que dans plusieurs cas, les critères d’ergonomie semblent avoir été oubliés. Ceci dit, ce n’est pas une ligne directrice du flat design de les mettre de côté. Comme pour tout autre type de design, un site devrait se munir d’une charte graphique cohérente offrant des signifiants clairs. C’est pourquoi il serait hâtif de conclure que le flat design et l’utilisabilité ne vont pas de pair.

4. Pistes de solution ou le flat design 2.o

Le principal problème exposé par la critique du flat design est que tous les éléments se retrouvent soudainement au même niveau. Une bonne façon de régler ce problème est d’explorer la notion de profondeur. Comme expliqué par Sacha Greif dans son billet sur les lavabos, avec ses lignes modernes et un fond plat, le lavabo de salle de bain pose un problème d’utilisabilité. Parce qu’il est peu profond, l’eau éclabousse à l’extérieur. En contrepartie, l’évier de cuisine au fond plat est très utile. En général beaucoup plus profond, ce genre de lavabo n’éclabousse pas et permet de contenir plusieurs assiettes empilées. Comme quoi, ce n’est pas temps le style qui est remis en cause, mais où et comment il est utilisé.

Figure 3. Les lavabos de salle de bain de Sacha Greif (2012).

La profondeur, c’est exactement ce que proposent les lignes directrices d’Apple avec l’arrivée de iOS 7 et de Google avec leur Material Design. Ces guides de style offrent le meilleur des 2 mondes, un compromis, qui a donné naissance au flat design 2.0 : l’affordance du réalisme et des repères visuels combinés à la pureté et la simplicité du flat design.

4.1 Le design suisse

Le flat design est fortement influencé par le design suisse. Certains principes ont d’ailleurs été repris par Apple et Google dans leur guide de style. Suivre les principes de cette théorie peut donc s’avérer utile pour bien exécuter le flat design. Le design suisse a comme principe la forme qui suit la fonction. Ses partisans préconisent la simplicité pour atteindre l’esthétisme. Mais l’esthétisme n’est jamais la motivation principale, c’est la conséquence d’un bon design de solution. Le design suisse prend plusieurs visages dans l’histoire du design : constructivisme, Bauhaus, gestalt, etc. La hiérarchie d’information, grâce à des variations dans la typographie, est le fer de lance de ce courant et le contenu est mis en vedette. D’autres moyens sont utilisés : la taille des éléments, leurs emplacements, la gestion de l’espace et des blancs, la couleur, etc.

Quant à la gestalt, en voici quelques principes :

Fermeture. Notre regard cherche à compléter l’information manquante et recréer le patron.
Symétrie. Notre regard cherche à compléter la forme, remettre de l’ordre.
Similitude. Notre regard cherche à regrouper des éléments ayant les mêmes caractéristiques.
Continuité. Notre regard tend à continuer un chemin imaginaire.
Proximité. Notre regard perçoit l’espace comme une forme de regroupement.

Figure 4. Les lois de perception de la Gestalt.

4.2 La symétrie

Weyl (1952) définit la symétrie comme suit : « A thing is symmetrical if there is something we can do to it so that after we have done it, it looks the same as it did before. » Il y a 2 symétries possibles : l’objet peut être réfléchi dans un miroir ou pivoté sur lui même sans subir de changement.

La symmetry-affordance, qu’on pourrait traduire par l’affordance de symétrie, est une théorie introduite par Cairns et Thimblebly (1995). La symétrie comme telle est une notion mathématique très puissante qui régit les lois de la nature. Les visages symétriques sont perçus comme plus attirants et plus aptes à la reproduction. À l’inverse, l’asymétrie est perçue comme un signe de faiblesse, de maladie ou d’anomalie. Le traitement humain de l’information est étroitement lié à la reconnaissance de patrons dans la nature pour une question de survie. Notamment, ce qu’on appelle le fight-or-flight qui nous permet de détecter les anomalies et fuir le danger au besoin. Une forme géométrique représente un coût cognitif moins élevé parce que la moitié de la forme est nécessaire pour être traitée. L’hexagonal, la forme des alvéoles dans la ruche d’abeilles, est plus solide et plus efficient.

Dans les interactions humain-machine, la symétrie suggère l’action. L’utilisateur perçoit les propriétés et les transformations correspondantes d’un système comme étant inchangeables. Par exemple, un bouton de radio demeure inchangé lorsqu’on le tourne. L’affordance de symétrie, quant à elle, suggère les actions qui transforment d’autres actions. Par exemple, la barre de défilement transforme l’apparition du contenu. Dans le cas d’un bouton d’interface, on parle plutôt de cohérence du modèle (ce qui ressemble à autre chose fonctionne de la même façon) ou ce que Norman appelle aussi une convention (ce qui ressemble à ce qui a été vu juste avant se comporte de la même façon).

4.3 Le no interface

Cette approche revendique que parfois la meilleure solution de design — efficiente, élégante et sans distraction inutile — est pas d’interface du tout. Alors que le flat 2.0 nous amène à un compromis, qui se situe à mi-chemin entre le flat et le skeuomorphisme, le no interface est plus radical dans son minimalisme et remet en question la nature même de l’interface. Encore une fois, ce mouvement est en réaction à une autre tendance : la surutilisation de l’écran.

D’après Krishna (2015), les cinq dernières années, avec la démocratisation des téléphones intelligents et l’émergence de l’internet des objets, ont vu naitre une grande quantité de designers graphiques convertis en designers d’interface qui ne connaissent pas l’utilisabilité, le design centré sur l’utilisateur ou l’expérience utilisateur. Ces designers solutionnent un problème de design avec les outils qu’ils connaissent : plus de visuels, plus de design graphique et donc, plus d’interfaces. En découle une multiplication d’applications douteuses et d’objets sur lequel on vient placarder un écran comme les réfrigérateurs avec intégration des réseaux sociaux.

Les exemples du no interface démontrent une démarche d’expérience utilisateur où l’interaction est repensée pour être minimale, non intrusive, voire absente. Notamment, le hayon du Ford Escape qui s’ouvre grâce à un léger coup de pied sous le parechoc arrière. Cette solution ingénieuse répond à un problème simple : l’utilisateur qui a les bras pleins d’emplettes ne peut utiliser ses clés pour déverrouiller les portes à moins de faire quelques acrobaties. D’ailleurs, la solution envisagée jusqu’à maintenant dans l’industrie automobile pour éliminer les clés, soit une application sur téléphone intelligent, est dans ce cas d’utilisation précis la pire des solutions. Déverrouiller avec une application requière au moins 10 étapes où la clé n’en requière que 2 ou 3. Les capteurs Bluetooth nous permettront dans les prochaines années de créer ce genre d’interaction intelligente et sans friction où les besoins de l’utilisateur sont anticipés. Krishna résume bien le tout en disant : « The best design reduces work. The best computer is unseen. The best interaction is natural. The best interface is no interface. »

Conclusion

Ce rapport de recherche nous a permis de confirmer notre hypothèse et infirmer la conjecture : le flat design ne pose pas de problème d’utilisabilité. C’est plutôt la mauvaise utilisation et l’inexpérience du designer qui est en cause. Windows 8 est un exemple flagrant de l’utilisation du flat design au détriment de l’utilisabilité. Si la plupart des sites web ne respectent pas les critères ergonomiques dès le départ, le style ne devrait pas être remis en question. Spécialement maintenant que le style prend de l’importance et est propulsé par des compagnies comme Google et Apple.

Les principaux enjeux ou désavantages sont :

La difficulté d’exécution
L’inexpérience, le style n’est pas encore mature
L’interprétation des lignes directrices ou guides de style
La nouveauté, les utilisateurs ne sont pas encore habitués
Le manque de personnalité si trop minimaliste

Les avantages du flat design sont :

La clarté
La lisibilité
Une apparence moderne
L’adaptabilité notamment pour le responsive design
Temps de chargement optimisé

Pour faire du bon flat design, il faut :

Faire appel à un designer professionnel et expérimenté
Mettre l’accent sur le contenu d’abord
Des accents de couleurs qui jouent un rôle sémantique dans l’interactivité
Les espaces blancs et les espaces négatifs sont un outil puissant
Une typographie prépondérante

Références

Bastien, J.M.C., Scapin, D. (1993). Ergonomic Criteria for the Evaluation of Human-Computer interfaces. Institut National de recherche en informatique et en automatique, France.

Burmistrov, I., Zlokazova, T., Izmalkova, A., & Leonova, A. (2015). Flat Design vs Traditional Design : Comparative Experimental Study. In Human-Computer Interaction–INTERACT 2015 (pp. 106-114). Springer International Publishing.

Cairns, P., & Thimbleby, H. (2008). Affordance and symmetry in user interfaces. The Computer Journal, 51(6), 650-661.

Gaver, W. W. (1991). Technology affordances. Dans Proceedings of the CHI Conference on Human Factors in Computing Systems, ACM Press : New York, 79 – 84.

Gibson, J. J. (1977). The Theory of Affordances. Dans R. E. Shaw and J. Bransford (eds) Perceiving, Acting, and Knowing (Hillsdale, NJ: Lawrence Erlbaum Associates).

Hartson, R. (2003). Cognitive, physical, sensory, and functional affordances in interaction design. Behaviour & Information Technology, 22(5), 315-338.

Krishna, G. (2015). The Best Interface is No Interface: The Simple Path to Brilliant Technology, Pearson Education.

Koffka, K. (1935). Principles of gestalt psychology (New York: Harcourt, Brace & World).

McGrenere, J. et Ho, W. (2000). Affordances : Clarifying and evolving a concept. Dans Proceedings of the Graphics Interface 2000, Canadian Human-Computer Communications Society : Toronto, 179 – 186.

Norman, D. A. (1999). Affordances, conventions, and design. Interactions, 38 – 42.

Norman, D. A. (2008). THE WAY I SEE IT Signifiers, not affordances. Interactions, 15(6), 18-19.

Oshlyansky, L., Thimbleby, H., & Cairns, P. (2004, October). Breaking affordance: culture as context. In Proceedings of the third Nordic conference on Human-computer interaction (pp. 81-84). ACM.

User Experience Report: Flat Web Design Is Here To Stay. Usabilla publication, juin 2013.
http://cache.usabilla.com/press/2013_06_Usabilla_UX_Report_Flat_Design.pdf

https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/affordances

http://sachagreif.com/flat-pixels/

http://sachagreif.com/the-flat-sink/

http://www.vandelaydesign.com/why-the-flat-design-trend-is-hurting-usability/

http://vanseodesign.com/web-design/swiss-design

https://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant

http://vanseodesign.com/web-design/flat-design-usability/

http://medialoot.com/blog/flat-vs-usable/

http://www.hongkiat.com/blog/flat-20/

http://www.nngroup.com/articles/flat-design/

http://www.nngroup.com/articles/flat-design-long-exposure/