Quand le flat design nuit à l’ergonomie

par
   

Dès 18 mois, mon fils était capable de déverrouiller mon iPhone en glissant son doigt sur l'écran. Et il n'était pas le seul. Mais c'était au temps d'iOS 6. Depuis iOS 7, mon petit garçon de 2 ans n'arrive plus à le déverrouiller, malgré le fait que le mouvement à reproduire n'a pas changé, mouvement qu'il avait réussi des dizaines de fois. Pourquoi? C'est le manque d'affordance qui est ici en cause, une qualité qui se fait plutôt rare dans les interfaces qui ont adopté un design "plat" ("flat design").

« Flat design » : une définition

Windows 8 mobile.

Le flat design pourrait se définir comme une philosophie de design qui privilégie l'absence d'éléments de styles tels que des contours, ombrages, gradients ou réflexion optique. Le flat design est donc minimaliste. Un bon exemple est l'interface de Windows 8.

Tout à l'opposé, on retrouve la tendance du skeumorphisme, c'est-à-dire une interface qui fait écho au monde réel, par exemple l'application « Boussole » incluse avec iO6 (Apple).

Application « Boussole » incluse avec iO6 (à gauche) où l'on peut remarquer le faux bois, reflet de lumière sur métal doré et arrondi. À droite, l'application iOS 7, le design reste skeumorphique car y reprend le concept d'une boussole mécanique, tandis que le design est minimaliste.

Le principal écueil du design plat : le manque d'affordance

"We don't need drop-shadows to encourage us to poke at something. All we need is an invitation, in the form of icons or labels or animations which imply functionality, and a consistency of presentation which allows us to make a good guess about what we can interact with." Matt Gemmell

L'affordance, c'est « la capacité d'un système ou d'un produit à suggérer sa propre utilisation ». Par exemple, dans le menu principal sur le site d'Apple.com, l'élément de menu choisi a l'air enfoncé.

L'affordance peut être obtenue en employant des indices visuels qui, par analogie avec le monde réel, nous permette de deviner les éléments avec lesquels on peut interagir et le résultat probable de cette interaction. En ce sens, le skeumorphisme peut accroître l'affordance d'une interface. Un bon exemple est l'interface de déverrouillage proposée sur les versions 1 à 6 de l'iOS, laquelle illustre un bouton qui glisse dans une cavité (ci-dessous). Ce design, skeumorphique, était clairement plus ergonomique que celle proposée dans iOS7.

Interface de déverrouillage sur iO6.

Mais le skeumorphisme peut aussi nuire à l'affordance. Par exemple, dans l'application de podcasting dans iO6, les bobines de rubans magnétiques prennent beaucoup de place sans qu'il soit possible d'interagir avec elles, à côté de boutons qui eux, sont fonctionnels (ci-dessous).

Lecteur de podcast sur iOS 6 (à gauche); et sur iOS 7 (à droite)

Sur le Web

Une bonne affordance peut également être obtenue en suivant les conventions. Par exemple, une flèche vers le bas à côté d'un libellé veut généralement dire qu'une zone va apparaître directement en dessous, sur la même page. Tandis qu'une flèche vers la droite veut généralement dire qu'on serait redirigé sur une page différente. D'un point de vue ergonomique, il serait risqué de ne pas suivre cette convention.

Liens hypertextes, quelques principes pour créer un design affordant

Les liens hypertextes sont l'essence même du Web. C'est pourquoi il faut leur accorder une grande attention lors du design graphique.

Un lien hypertexte doit avoir l'air cliquable. Et inversement, les éléments non cliquables ne doivent pas avoir l'air cliquable. En effet, si l'utilisateur se met à cliquer sur des éléments qui ne permettent pas d'interaction, une perte de confiance s'installera, et l'utilisateur pourrait être tenté d'éviter le site dans le futur ou d'en limiter son utilisation.

L'affordance des liens ci-dessus est inégale.

L'affordance dépendant cependant du contexte. Par exemple, l'internaute sait intuitivement que les libellés placés dans une entête sont des liens, à cause de leur emplacement. Il n'est donc pas nécessaire que la couleur choisie pour les liens soit utilisée dans tous les cas. Aussi, certains liens doivent être plus discrets, soit pour guider l'utilisateur vers l'action recommandée, soit pour éviter de le distraire avec des fonctionnalités secondaires.

Le bleu

Le bleu est traditionnellement associé aux liens hypertextes, car c'est la couleur par défaut des liens depuis le tout premier navigateur Web en 1992. C'est pourquoi, à cause de l'habitude des internautes, c'est plutôt risqué d'utiliser le bleu pour autre chose que des éléments cliquables.

iOS7 (ici à droite), utilise une seule couleur par application pour représenter les éléments cliquables, la plupart du temps le bleu.

Trouver un style reconnaissable

Le bleu n'est évidemment pas la seule option qui s'offre pour les liens hypertextes. Il s'agit plutôt d'être consistant, de trouver un style reconnaissable. Par exemple, on pourrait utiliser le souligné ou une autre couleur.

Un truc de design ergonomique : utiliser une nouvelle couleur pour mettre l'accent sur des éléments non-cliquable

Pour créer une hiérarchie visuelle capable de guider l’œil de l'internaute,  une bonne approche est d'employer une nouvelle couleur, distincte de la couleur des éléments cliquables.

Le site A List Apart utilise cette technique de belle façon : le bleu a été retenu pour les liens, tandis que le rouge est utilisé pour les sous-titres, les pastilles (nouveau, numéro) et quelques autres éléments non cliquables.

Page d'accueil du site A List Apart

Pourquoi maintenant

Pourquoi le design minimalisme est-il à la mode? L'hypothèse la plus crédible est que dans le contexte où l'ont doit créer un design adaptatif, le minimalisme s'harmonise mieux avec les différents systèmes d'opération (iOS, Android, Windows 8) qui existent sur le marché.

Aller plus loin : revoir l'interface depuis le début

S'éloigner d'un design reprenant les caractéristiques des objets réels est but légitime, mais cela est plus difficile à faire qu'il n'y paraît. Le risque d'accoucher d'un design peu ergonomique est relativement grand.

Croquis d'icônes proposées par Dane Paterson pour représenter la sauvegarde d'un fichier. Personnellement ma préférée.

Par exemple, on parle depuis un moment de remplacer la fameuse icône de disquette pour représenter la sauvegarde de fichier, la disquette étant un objet que bien des utilisateurs n'ont pas connu. De nombreuses propositions ont été faites, entre autres pour tenter de s'adapter à la sauvegarde infonuagique, mais aucune ne s'est imposée jusqu'à maintenant.

Cela dit, rien n'interdit de tout revoir du début. Je pense par exemple à l'application Soulver, qui fait tout ce qu'une calculatrice peut faire, mais en permettant l'usage de langage naturel.

À gauche, la calculatrice incluse avec iOS6, à droite l'application Soulver

En délaissant l'analogie de la calculatrice, les concepteurs de Soulver ont eu l'opportunité de créer un outil de calcul non seulement plus puissant, mais plus facile à utiliser. Par exemple, dans Soulver, on peut voir et corriger une erreur facilement.

Vive le minimalisme, vive les ergonomes!

Horloge vendue par Muji, une entreprise japonaise

Je suis personnellement un adepte du minimalisme. Cependant, le minimalisme représente un réel défi sur le Web, car il faut éviter d'accroître la charge mentale de l'internaute. En d'autres mots, l'internaute nous dit : « Ne m'obliger pas à réfléchir. » C'est pourquoi l'expertise d'un ergonome sera plus que jamais nécessaire pour relever le défi de créer des designs minimalistes, mais offrant une bonne affordance.

COMMENTAIRES

  1. Designer, c'est l'heure du Flat Design

    […] Le flat design pourrait se définir comme une philosophie de design qui privilégie l’absence d’éléments de styles tels que des contours, ombrages, gradients ou réflexion optique. Le flat design est donc minimaliste. Un bon exemple est l’interface de Windows 8. adviso.ca […]

    Répondre
  2. Designer, c'est l'heure du Flat Design

    […] Le flat design pourrait se définir comme une philosophie de design qui privilégie l’absence d’éléments de styles tels que des contours, ombrages, gradients ou réflexion optique. Le flat design est donc minimaliste. Un bon exemple est l’interface de Windows 8. adviso.ca […]

    Répondre
  3. Julianoe (@Julianoe_ )

    Merci pour cet article.
    Je suis en partie d’accord avec ce que vous y dites. En effet le flat design peut mener à un manque d’appel à interaction de la part des utilisateurs et nuire à l’ergonomie… Mais comme vous le dites très bien c’est aussi le cas d’autres formes de design.

    Je pense que le défi est justement de ne pas penser « DESIGN » dans le sens esthétique, qui est sujet à des modes qui vont et viennent… mais bien de créer et de penser des « ERGONOMIES »… L’origine de cette ‘mode’ de flat design vient d’un besoin de lisibilité, et d’épuration, de minimalisme. Privilégier l’information avant l’esthétique. Mais quand on perd de vue cet objectif, on perd par la même les avantages du flat design… qui redevient alors un style esthétique comme les autres.

    Répondre
  4. Julie

    Très bon article. Comme toujours les modes sur le web se succèdent à grande vitesse avec parfois des surprises dans la navigation. Entre les concepteurs qui cèdent à une nouvelle mode et les utilisateurs qui vont nécessiter un temps d’adaptation, je trouve que les designs devraient parfois être plus équilibrés.
    Il me semble que le principe de flat design est intéressant pour l’affichage général des sites et applications. Cela décharge un peu les arrières plans, les délimitations entre contenus, les bas de page… Par contre, c’est moins approprié pour les boutons, les formulaires ou autres éléments interactifs. C’est sur qu’avec le temps, l’utilisateur développe une habitude… Jusqu’à la prochaine mode ?!!

    Répondre
  5. L.

    Je dois analyser des entreprises dans le cadre de mes études et pendant le checking des sites webs, je demande l’avis de mon coloc américain, qui me parle de « flat design », sauf que j’en avais jamais entendu parler!!

    Direction Google.
    Merci pour cet article, simple et super intéressant.. Même pour quelqu’un qui n’y connait rien en design 😉

    Répondre
  6. Christophe BENOIT

    Céder aux sirènes de la mode OK mais ne pas hésiter à faire machine arrière et apprendre de ces erreurs. Le web n’est pas encore assez piloté par les tests utilisateurs et les tests de conversions. Pourtant les technos sont là et leur mise en place relativement aisée.
    Les principaux problèmes sont à mon sens :
    – le budget (on aime pas mettre de l’argent dans des « tests », et pourtant…)
    – l’état d’esprit « refonte » plutôt que « amélioration permanente ».

    Répondre
  7. Sami

    Merci pour votre article très intéressant. Nous l’avions nous même traité il y a quelques temps, en arrivant à la conclusion que le pari du flat design était celui de l’expertise de ses usagers, reposant l’expérience utilisateur sur des stéréotypes d’utilisation plutôt que sur le guidage implicite de l’interface.
    Un pari un peu risqué, et parfois complètement raté, comme pour la refonte de l’application Météo France par exemple.

    Répondre
  8. momo-fr

    Dans le Web, ce qui pousse au Flat Design c’est, outre le responsif qui gagne du terrain, la possibilité d’alléger le design (en Ko) pour alourdir le Javascript (en Ko aussi) car tout ce qui va devenir pratique découlera de la gestion de l’interface, sa dynamique et son comportement, tout ceci à grands coups de programmes en javascript (et Ajax combiné à d’autres applicatifs web…), il n’y a qu’à regarder l’évolution du BootStrap Twitter par exemple.

    Répondre
  9. plebailly

    J aime beaucoup votre article et les reactions qu il suscite.

    Un peu d accord avec tous, passionné par la facilité d utilisation iOs inférieur a 7, j étais un fervant defensseur du savoir faire de apple bien qu ayant été au PC. Et il n y a pas si longtemps, bien que possedant un smartphone samsung je critiquait certains choix ergonomique et ssurtout graphique d android.
    Force est de reconnaître que le flat sur Android et surtout sur les applis Google est parfaitement géré avec le « almost flat » tout ne peut pas être sans vie ni profondeur et qu apple a complètement loupé son virage…tant de personnes de mon entourage s en plaignent. …changer de paradigme n est pas chose facile

    Pour ce qui est de la boussole est ce le contour qui est skeumorphomique (pour moi c est purement flat)….ou est ce l aiguille qui est skeuomorphique ou je dirais plutot affordante…car une flèche seule avec une lettre d orientation a sa pointe suffit a indiquer la direction….sans compter que d ici 5 a 10 plus personne n aura vu de boissole en bois….comme pour le cas des disquettes. ..

    Répondre
  10. plebailly

    J aime beaucoup votre article et les reactions qu il suscite.

    Un peu d accord avec tous, passionné par la facilité d utilisation iOs inférieur a 7, j étais un fervant defensseur du savoir faire de apple bien qu ayant été au PC. Et il n y a pas si longtemps, bien que possedant un smartphone samsung je critiquait certains choix ergonomique et ssurtout graphique d android.
    Force est de reconnaître que le flat sur Android et surtout sur les applis Google est parfaitement géré avec le « almost flat » tout ne peut pas être sans vie ni profondeur et qu apple a complètement loupé son virage…tant de personnes de mon entourage s en plaignent. …changer de paradigme n est pas chose facile

    Pour ce qui est de la boussole est ce le contour qui est skeumorphomique (pour moi c est purement flat)….ou est ce l aiguille qui est skeuomorphique oj je dirais plutot affordante…car une flèche seule avec une lettre d orientation a sa pointe suffit a indiquer la direction….sans compter que d ici 5 a 10 plus personne n aura vu de boissole en bois….comme pour le cas des disquettes. ..

    Répondre
  11. Jean-Baptiste DE BORMAN

    Le passé d’Apple n’est pas un argument : ce n’est pas parce que Pablo Picasso rate une eau forte que cette technique est mauvaise. Comme d’autres l’ont dit ici, les exemples de flat design réussis ne manquent pas. En la matière, Apple a fait moins bien que Google et Microsoft, sans doute parce que le design de Google n’est pas absolument flat (il conserve des hombres et des dégradés légers) et que Microsoft a une palette de couleurs contrastée.
    Apple a appliqué le concept à la lettre. Il a produit du super-flat design, archi-minimaliste, sur un beau fond blanc uniforme. Du coup, il n’y a plus moyen de distinguer les éléments les uns des autres… sauf en variant les graisses et les typos, ce qui augmente encore l’impression de confusion. iOS7, c’est une application mécanique (et, à mon avis: mal testée) du concept de flat design.

    Répondre
  12. Etienne Delagrave

    @Jean-Baptiste iOS7 est justement un bon exemple dans le sens suivant : Si Apple (reconnu mondialement pour son design graphique et industriel, avec un budget probablement énorme), n’a pas réussi à créer un flat design vraiment facile à utiliser, je crois que ça démontre justement la difficulté d’y arriver.

    Répondre
  13. Jean-Baptiste DE BORMAN

    Avec d’autres, je pense que cet article tire trop de conclusions à partir d’iOS7, qui est raté. Les écrans iOS7 se présentent comme un fouillis trop compact et sans hiérarchie, où les variations typographiques s’accumulent. Je n’ai pas ce problème avec mes applications Android dans le style « flat design ».

    Répondre
  14. Vincent Panaye

    Très bel article.
    D’une manière général, le flat design enlève une couche importante à la compréhension de l’utilisateur : un effet 3D. Cet effet 3D a l’avantage de permettre la correspondance entre l’objet apparaissant sur l’écran et la vie de tous les jours, le rendre plus réel.
    Pour ne parler que d’un bouton, plus il ressemblera un bouton avec du relief, plus on l’identifiera comme un bouton.
    Donc, avec un flat design, c’est plus difficile d’associer un objet design à une action bien déterminée. C’est un défi supplémentaire pour le designer et l’ergonome.
    Dépendant de la cible à laquelle on s’adresse, dans certains cas le flat design pourrait devenir un défi pas forcément payant.

    Répondre
  15. David Massiani

    Je suis d’accord avec GraphikoPhil, IOS7 pour base n’est pas un très bon exemple pour argumenter le fond de l’article.
    Je suis convaincu que le minimalisme du flat design accroit l’ergonomie. Mais que pour les petits écrans où le nombre d’interaction est plus important puisque par exemple le clavier est intégré dans une surface identique à la vue, le gain du skeuomorphisme est évident.
    D’où mon point de vue identique avec GraphikoPhil.

    Répondre
  16. Marie

    Bonjour, merci pour cet article.

    Tu écris :

    Pour créer une hiérarchie visuelle capable de guider l’œil de l’internaute, une bonne approche est d’employer une nouvelle couleur, distincte de la couleur des éléments cliquables.

    Or, les couleurs seules ne sont pas suffisantes pour distinguer les liens du reste du contenu. Je te renvoie à la bonne pratique Opaquast 85 pour des alternatives :)

    Répondre
  17. Mox Folder

    Après la secrétaire du patron c’est maintenant un gamin de 2 ans qui va servir de mètre étalon pour savoir si un design est réussi ou non ?!

    Vous semblez oublier une chose essentielle : la courbe d’apprentissage et les points de références qu’on possède. Je me suis retrouvé bien con l’autre jour lorsqu’il ma’ fallu plusieurs dizaines de secondes pour comprendre comment créer une tâche dans le nouveau iOS 7. Mauvais design ou tout simplement mauvaises habitudes ?

    Répondre
  18. Etienne Delagrave

    @GraphikoPhil iOS7 est loin d’être le seul à avoir des problèmes avec leur flat design. Microsoft a aussi de sérieuses difficultés avec Windows 8 (http://www.nngroup.com/articles/windows-8-disappointing-usability/) Les exemples de flat design ergonomique sont plutôt l’exception à mon avis.

    L’engouement est une chose, mais le fait qu’un enfant de 2 ans puisse comprendre une interface est un résultat tangible et c’est ce qui compte ultimement.

    Répondre
  19. GraphikoPhil

    Là encore, je ne suis pas d’accord. C’est surtout iOS 7 qui n’a pas réussi à surmonter le défi du Flat Design.
    Beaucoup de flat design et de design minimalistes sont très qualitatifs en terme de design et d’ergonomie.
    Et, d’ailleurs, si tel n’avait pas été le cas, pensez-vous sincèrement qu’ils auraient pu connaitre un tel engouement ?

    Répondre
  20. Etienne Delagrave

    @GraphikoPhil Je donne des exemples tirés de iOS7 parce que c’est probablement l’interface à laquelle le plus de gens sont exposée (Android étant fragmenté).

    L’objectif principal de l’article est de faire prendre conscience des défis du flat design, que très peu ont réussis à relever.

    Répondre
  21. GraphikoPhil

    Ce qui me dérange dans votre article, c’est que vous vous basez sur le design de l’iOS 7 (complètement raté, osons le dire) pour argumenter votre démonstration anti flat design.
    Déjà, pour commencer, le flat design est bien antérieur à iOS 7 et découle de la vague minimaliste qui avait été longtemps à la mode, juste avant.
    Or, votre article sous-entend que flat design = iOS 7.
    De plus, il existe des flat design particulièrement réussis et qui servent sa fonction : la simplicité, le besoin d’aller rapidement à l’essentiel, sans fioriture, sans design superflu. Ces design sont souvent adaptés au mobile, où la taille d’écran ne permet pas toujours d’afficher autant de détail.

    Répondre
  22. Cynthia Savard

    Beaucoup de personnes se demande quel terme devrait être utilisé pour « le contraire de skeuomorphisme ». Cette discussion est très pertinente : http://branch.com/b/flat-design-needs-a-new-name

    Faire une boussole sans le compas autour serait certainement un défi interessant. Le nouveau niveau est très bien réussi à ce point. Je crois que certaines métaphores figuratives sont nécessaires lorsqu’on présente une réalité physique (les points cardinaux par exemple). Cela représente un défi de design très intéressant :)

    Répondre
  23. Etienne Delagrave

    @Cynthia. Merci ton commentaire. La définition de Gibson est intéressante, mais le fait d’utiliser deux concepts (l’affordance version Norman et celui de convention) est à mon avis plus facile à comprendre.

    Bon point pour ce qui est de la boussole dans iOS7 : elle est effectivement encore skeumorphique, mais avec un design minimaliste. J’ai d’ailleurs ajouté mise à jour la légende. Je serais d’ailleurs curieux de voir des interfaces de boussole qui laisse tomber le canevas d’une boussole magnétique.

    Par ailleurs, j’aime beaucoup ton schéma opposant photoréalisme et minimalisme. Ceci dit, je me demande si « flat » est conceptuellement opposé à « skeumorphique ». Pourquoi pas skeumorphique vs abstrait?

    Répondre
  24. Cynthia Savard

    Bel article Étienne sur le fond, je suis plus que d’accord que le flat peut créer un manque d’affordance. Je t’invite à découvrir une définition différente de l’affordance (celle de Gibson plutôt que celle de Norman à laquelle tu fais référence) qui supporte le point de l’habitude que tu soulèves. Selon-lui, un bouton est cliquable, non pas parce qu’il est arrondi et bombé, mais parce qu’il est placé en bas du texte, etc. Celle de Gibson est beaucoup plus inclusive dans un contexte web. Par ailleurs, je ne suis pas certaine d’être d’accord sur le fait que la nouvelle boussole ne soit pas du skeuomorphisme, bien au contraire! Je t’invite à te référer à cet article . Aussi, nous avons tenté d’expliquer le mélange entre le skeuomorphisme et le photoréalisme dans un tableau. Voir la page 13 de ma présentation.

    Cela ton analyse est intéressante :)

    Répondre

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>