La patience est une vertu.
La patience est une vertu.
Publié le 30 mai 2014 dans Design d'interface
15 commentaires
Cliquez sur l’image pour jouer à un petit jeu
J’arrive sans doute après la bataille, mais j’ai attendu, attendu, et puis, un jour, je me suis enfin décidé à installer iOS7 sur mon iPhone pour goûter enfin aux joies du flat design.
Evidemment, le concept ne m’était pas inconnu, mais pouvoir l’expérimenter au quotidien (je regarde et j’utilise mon smartphone au moins 3 millions de fois par jour :-) ) m’a permis de m’en faire un véritable avis.
Et en fait, pas besoin de passer à iOS6 pour décrier quelque chose qui s’avère comme un pas en arrière dans l’expérience utilisateur.
Je m’explique. Je n’ai rien contre le flat design et je trouve ça très joli, au demeurant, mais il est évident que c’est une régression en terme d’expérience utilisateur. Tout simplement parce qu’en aplatissant les biseaux, les effets de reliefs et les ombrés, vous perdez une dimension d’information, pourtant bien utile pour faire comprendre le fonctionnement d’une interface.
Je comprends que les graphistes n’aient pas envie de faire des ombrages et des « bevels » et qu’ils trouvent ça ringard de mettre un fond bois dans ce qui est censé représenter une bibliothèque. N’empêche, c’est peut être moche, mais ça simplifie quand même grandement la préhension d’une interface par l’utilisateur.
Si je peux me permettre de donner une explication « scientifique » sans me faire taper sur les doigt, voici pourquoi.
Plat ou réaliste ? Quel design vous parait le plus facile à comprendre ?
Pour comprendre à quoi sert un élément d’interface, le cerveau de l’homo sapiens se base essentiellement sur 4 critères : la position, les couleurs, les formes et les tailles. A ces critères, il faut également ajouter le contexte, le vécu ou l’expérience de l’utilisateur, qui ne vient pas de nulle part, mais bien du monde réel. Ce vécu lui constitue un réservoir de connaissances qu’il vient abreuver en permanence de données qu’il rajoute ou met à jour. Ce cette expérience qui permet d’identifier rapidement une poignée de porte sans avoir à essayer de deviner son utilité (les processus cognitifs dont je parle sont extrêmement rapides, donc presqu’inconscient, et vous ne feriez que difficilement la différence en découvrant une nouvelle poignée de porte). Le contexte permet quant à lui de supposer que quelque chose a une probabilité plus ou moins importante d’être ce qu’il est. Pour résumer, un objet de la taille d’un poing attaché à mi-hauteur d’une porte a de fortes chances d’être une poignée et pas une cafetière. Si vous pensiez que c’était une cafetière, il est grand temps de consulter un neuro-psychologue.
Comment devine-t-on alors qu’un bouton est un bouton et pas juste un boudin posé sur l’écran ?
D’abord une chose : l’écran, malgré tout, reste un espace à 2 dimensions. Ce qui réduit considérablement les possibilités d’expression par rapport au monde réel qui est en 3D, lui, au cas où vous ne l’auriez pas encore remarqué.
Alors à quoi reconnait-on un bouton ?
Dans la vraie vie, en général, un bouton a la taille du bout du doigt (au minimum). C’est un élément visiblement rajouté à un élément plus grand et ça se voit, car il est, la plupart du temps séparé de l’élément plus grand par une fente sombre qui montre bien qu’il ne fait pas partie de cet élément. Souvent aussi, il possède une autre couleur (voyante parfois) de manière à le distinguer de l’élément auquel il est attaché. Et enfin, souvent aussi, il est légèrement bombé vers l’extérieur, voire carrément ressorti. S’il est bombé, c’est pour le rendre plus visible (grâce à l’ombre que la forme convexe crée), mais aussi plus préhensile. Voilà à peu près ce qui fait qu’un bouton a l’air d’un bouton dans la vraie vie.
Et alors ? Sur un écran ? Vous l’avez déjà compris, sur un écran, on ne pourra pas bomber le bouton, ni le distinguer des autres éléments d’interface par une fine fente sombre autour. Cela limitera son affordance, terme qui décrit la capacité d’un objet à décrire sa propre fonction par sa position, sa forme, ses couleurs et sa taille. Sur un écran, on perd de l’information. Oui, mais, on peut tricher. Et là, nous disons merci à Photoshop et à ses fonctions d’ombrages et de reliefs qui nous permettent de créer l’illusion d’un objet en relief ou en creux. D’où l’apparition à outrance, il fut un temps, d’horribles boutons outrageusement ombrés et bombés dans les années 2000. Mais ça c’était la préhistoire. Aujourd’hui, les choses se sont nettement améliorées.
Le Flat design suppose une connaissance préalable à une interface (cliquez sur l’image pour lire l’article de Laurent Assouad)
Mais avec l’arrivée des écrans tactiles, elles sont revenues un peu à leur point de départ. Comment représenter des boutons sur des écrans plats que l’on peut manipuler avec le doigt ? Facile, on n’a qu’à mettre des boutons en relief et des ombres. Et c’est exactement le choix qu’avait fait Apple pour l’iPhone jusqu’à iOS7.
Alors pourquoi reviens-je aujourd’hui à la charge contre le flat design avec un an de retard ? Parce que j’en aissez d’entendre dire que le flat design c’est mieux pour les interfaces. C’est manifestement faux et je viens de vous expliquer pourquoi. Cela ne signifie pas qu’il faille totalement revenir en arrière. Mais au lieu de crier au loup dès qu’on voit un bouton ombré, il serait temps de s’interroger si pour une application on veut faire du beau pour du beau ou si on veut que son application soit facilement à prendre en main, à comprendre, à utiliser.
Je vous laisse passer un bon weekend de réflexion là dessus. Vous me rendrez vos copies lundi.
Bon weekend !
point de vue tres interessant.. merci pour cet article !
Par contre, pas sur qu’homo erectus soit bcp gêné par le flat design vu qu’il aurait disparu il y a environ 300 000 ans ;)
En revanche, Homo Sapiens lui peut être embêté effectivement :)
Bonjour,
Le Flat design est arrivé sur iOS avec iOS7, et non iOS6 comme décrit dans le premier paragraphe de l’article ;-)
( http://en.wikipedia.org/wiki/IOS_6 )
Cheers,
Théo
Corrigé, merci !
Je suis impardonnable… Sapiens, sapiens, je devrais le savoir
Article très intéressant même si je ne partage pas vraiment votre avis car je trouve que le flat design est plus performant pour alléger la charge cognitive de certaines page, après je pense qu’il peut y avoir de bons compromis entre le flat et le réalisme.
Bonjour Rémi,
Je suis d’accord avec toi. Chaque système a ses avantages et inconvénients et c’est au trio web designer + ergonome + développeur de faire le bon compromis. Pour moi, toutes ces discussions sont vaines si on ne met pas en face les bonnes personnes et si on ne se sert pas de son intelligence en ne faisant qu’appliquer de bêtes règles.
On est d’accord :)
> Parce que j’en aissez d’entendre dire que le flat design c’est mieux pour les interfaces
Je pense que c’est surtout mieux pour les concepteurs de ces interfaces, moins de temps passé dans photoshop ou à apprendre CSS, on prend 3 couleurs sur dribbble, des coins arrondis, et hop, c’est trendy.
Je me rappelle qu’au début de la mode des RIA en flash tout le monde faisait du flat, pas par souci d’ergonomie, mais surtout parce que en terme de performance vouloir un rendu vraiment chiadé aurait nécessité plein de bitmap et plein de code pour les gérer, et que ça aurais tué les perfs.
On ne peut pas dire que le problème se pose de la même manière aujourd’hui.
Ça me rappelle aussi l’exemple du logiciel Reason des propellerheads, qui avait tellement poussé le skeumorphism que des école d’ingés son s’en servaient pour former leurs étudiants sur du matos qu’ils n’auraient jamais pu acheter. Pas sur que les applis en flat d’aujourd’hui aient le même intérêt.
À corriger dans le troisième et l’avant-dernier paragraphe, du coup ;-)
Bonne journée!
Bonjour,
Une fois n’est pas coutume, je ne suis pas du tout d’accord avec cet article.
Étonnamment, et là encore une fois n’est pas coutume, aucun des arguments ne trouve résonance en moi.
Comparons un clavier classique de portable par rapport à un clavier logitech standard : les touches sont extra plates généralement sur les portables contrairement aux grosses touches bien en épaisseur des claviers standards. Ce sont le positionnement, la forme, l’ombre qui montrent que c’est une touche et qu’on peut appuyer dessus, et ça ne pose de question à personne.
Dans l’image montrée plus haut comparant les deux interfaces, tout me semble plus clair (même si l’icone safari peut être sujette à critiques) sur celle d’iOS7. En cognitif, moins de fioritures = plus d’efficacité au niveau du cerveau, ce n’est pas une nouveauté (la note de musique est bien plus évidente par exemple).
La dernière image utilisée n’apporte rien car les boutons à droite sont du mauvais flat design (ben oui, ça existe…), on peut faire beaucoup mieux (il faut effectivement que le bouton du slider soit plus grand et plus évocateur notamment, et il faut créer un minimum d’ombre et de « prise » pour qu’il soit évident qu’on peut tourner le bouton du dessus)
Pour finir, je crois qu’il ne faut pas sous-estimer Apple : il est impensable pour une entreprise qui a cette culture de l’ergonomie à outrance que cela n’ait pas été testé et retesté dans tous les sens auprès de tous les publics pour trouver le meilleur compromis sur un point aussi clé.
Je suis preneur des contre-arguments.
Salut Romain, merci pour la contre-argumentation.
Mon article ne veut pas dire que le flat design, c’est nul, et qu’il ne faut pas en faire. Au contraire ! Le flat design présente tout un tas d’avantages. Il est plus léger en poids. Il est plus rapide à créer. Enfin, et surtout, il est plus rapide et facile à lire, MAIS (et c’est un MAIS important), encore faut-il qu’il reste compréhensible. Et il ne peut l’être seulement que si certains prérequis sont respectés, à savoir :
– que l’objet représenté en flat design puisse être compris sans ambiguité sans les artifices des ombres et des biseaux (ou par d’autres moyens) qui font croire à un certain relief ou à une certaine réalité plus facile à appréhender.
Donc, que la forme, la couleur, la taille de l’objet et surtout, son emplacement, laissent deviner sa fonction. Mais ça, ça n’est possible que si tes utilisateurs aient déjà une certaine « éducation » informatique. Et c’est là que la flat design peut pêcher : des liens non soulignés, des boutons non ombrés et placés à un endroit non conventionnel, et hop, on crée de la difficulté, croissante au fur et à mesure de l’inexpérience de l’utilisateur.
Cette inexpérience est due dans un cas, à une inexpérience globale avec les outils informatiques : cas qui diminue, mais qui est loin d’être inexistant (je n’ai qu’à prendre ma femme pour m’en convaincre). Ce sont les gens qui n’aiment pas les objets informatiques et ne cherchent pas à s’en servir, mais finissent par l’être tant leur présence devient massive dans notre quotidien.
Dans l’autre cas, au fait qu’un utilisateur se retrouve face à une application nouvelle, qu’il ne connait pas, qui est innovante et ne correspond que peu à des conventions habituelles. Dans ces cas, le flat design peut présenter des difficultés, car il augmentera le temps d’apprentissage.
Ensuite, tu parles de Apple. Oui Apple fait du flat design, mais il ne faut pas oublier que 6 iOS de suite ont formé les gens à l’ergonomie de ces appareils. Et que beaucoup de liens, de boutons, d’artifices d’interface ont pu être dépouillé graphiquement que parce ces millions d’utilisateurs connaissaient déjà l’interface d’Apple et qu’ils n’avaient pas à tout apprendre. Là est la différence.
Pour autant, je trouve que c’est un choix qui crée de la complexité supplémentaire et que même si Apple peut disposer d’armée d’UX designers aguerris et professionnels, elle dispose encore plus d’armées de marketeurs pour qui l’UX n’est pas forcément une priorité. D’où, certainement, un compromis qui, je pense, n’est pas en faveur de l’utilisabilité.
A te lire
Éhéh j’allais le dire: on passe au flat design de la même façon qu’on passe au clavier plat. Il n’en reste pas moins qu’il y a généralement des ombres sous les boutons pour les identifier.
De plus je ne me rappelle pas la dernière fois que j’ai appuyé sur un bouton physique bombé, à part ma sonnette qui a plus de 20 ans, tout est flat aujourd’hui.
@Olivier et @Xorax
alors on est d’accord. Le flat design peut être une bonne chose mais quelques soucis de jeunesse ;-)
pour Apple, je reste sur mon idée, puisqu’à mon sens, le fait d’enlever certaines fioritures sur les icônes les rendent plus évidentes (l’exemple de la note de musique encore, mais on peut faire l’exemple avec bien d’autres icônes), ce qui est intéressant d’un point de vue cognitif (délai perception / compréhension plus faible) et doivent de façon absolue le rendre plus efficace, même pour les nouveaux utilisateurs.
Ce n’est évidemment là qu’une impression forte de mon côté, je ne dis pas détenir la vérité absolue qui, on le sait, est ailleurs :-)
Au plaisir d’échanger encore
Donc pour résumer, le flat design va souvent à l’encontre du principe d’affordance en ergonomie d’interface, car l’épuration va trop loin ;-)
Blague à part, je partage ton point de vue Olivier.
@romain > D’habitude tes arguments sont bons mais là tu compares le design d’une interface 2D avec un clavier qui est un objet 3D. 1dimension en plus ça change beaucoup de chose en terme de perception.
@Ludo bien placée l’ « affordance » :-) c’est effectivement ça !
pour le reste, je maintiens mes arguments, c’est de la pure logique : dans une interface, on essaie de faire ressembler les « call to action » à des « call to action » de la vie réelle. Ce n’est pas pour rien qu’un bouton est bombé !
les touches sont des boutons tout comme les icônes que tu as sur une interface : bombé et/ou ombré, avec le même but : que tu mettes le doigt dessus pour l’activer.
tout l’objectif des interfaces 2D a toujours été, (en témoigne l’aspect du input type=button depuis l’apparition du HTML), de ressembler à un bouton de la vie réelle, donc en 3D. Car effectivement, 1 dimension en +, ça change beaucoup de choses en terme de perception ;-)
A bientôt j’espère !