Étude : il est plus difficile de naviguer sur des sites Web avec un design plat
Les internautes mettent 22 % plus de temps à retrouver les contrôles

Le , par Michael Guilloux, Chroniqueur Actualités
ModernUI, l'interface graphique de Windows à partir de la version 8 ; Material Design, l'interface graphique d'Android à partir de la version 5 ; macOS, le système d’exploitation des Macintosh à partir de sa version 10.10 ; iOS depuis la version 7 ; et KDE Plasma 5, avec son thème par défaut « breeze »… Voici des exemples d'interface avec design plat.

Le design plat ou flat design est un style de design d'interface graphique caractérisé par son minimalisme. Il se base sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de typographie. Ce style s'inspire notamment du style typographique international, un courant de design graphique développé en Suisse.

Le design plat peut présenter plusieurs atouts. Il facilite par exemple la conception d'interfaces s'adaptant à la surface d'affichage (sites Web adaptatifs). Son usage d'aplats de couleurs permet aussi de meilleurs taux de compression. En plus, le design plat se prête bien aux images vectorielles, qui rejoignent ces avantages (changement de taille sans perte de qualité et légèreté des fichiers).

Une IHM "Material design", un exemple de design plat

Toutefois, il est souvent critiqué par son manque d'ergonomie. En effet, les éléments de l'interface ont la caractéristique d'être décloisonnés, et plats, ce qui a pour conséquence de prêter à confusion. C'est le cas par exemple de l'interface ModernUI, qui a été mal accueillie sur la version PC du système d'exploitation Windows 8.

Le design plat a été introduit initialement par Microsoft dans certains produits comme son lecteur minimaliste Zune, un clone d'iPod, avant d'arriver sur Windows 8 en 2012. Mais il n'était pas encore assez répandu jusqu'à ce que Steve Jobs décide de l'utiliser dans iOS 7 en 2013. Depuis lors, les designs plats se sont propagés rapidement y compris sur les sites Web.

Historiquement, les contrôles de navigation tels que les boutons étaient ombragés ou en 3D pour permettre de les distinguer du contenu d'une application ou d'une page Web. Mais avec le design plat, cette distinction a été supprimée ou est plus difficile. La conséquence est que les utilisateurs trouvent la navigation plus difficile et passent plus de temps sur une page, un fait qui vient d'être confirmé par une étude de Nielsen Norman Group.

La société a mené une expérience quantitative en utilisant un équipement d'eyetracking et un ordinateur de bureau. Elle a fait appel à 71 utilisateurs Web généraux pour participer à l'expérience. Chaque participant a reçu une version des 9 sites et a reçu une instruction quant à la tâche qu'il devait accomplir pour chaque site. L'exécution de ces tâches impliquait d'identifier certains éléments cibles de l'UI pour chaque site, par exemple des boutons. Lorsque les participants identifient l'élément UI cible sur lequel ils doivent cliquer pour terminer la tâche, ils doivent alors déclarer qu'ils l'ont trouvé et s'arrêter. Il faut noter que pour chacun des 9 sites, il y avait deux versions : une version avec design plat et une version avec un design traditionnel (par exemple, des boutons ombragés ou en 3D qu'on peut facilement distinguer du contenu de la page).

Par exemple, l'image suivante donne deux versions du site d'un hôtel. La version à gauche comprend des boutons de style 3D, et la couleur violette était utilisée uniquement sur des éléments interactifs, alors que la version à droite avait plutôt des boutons plats fantômes. Pour cet exemple, la tâche était : « Vous verrez une page du site Web de l'hôtel. Réservez cette chambre d'hôtel. Veuillez nous le dire quand vous aurez trouvé où vous devez cliquer. »


Chaque participant a vu une seule version de chaque site et la version était attribuée au hasard. L'ordre dans lequel les pages ont été montrées à chaque utilisateur était également aléatoire. Pour s'assurer que les participants comprennent bien les instructions avant de commencer les tâches, ils se sont exercés sur des tâches similaires.

La société a suivi les mouvements des yeux des participants alors qu'ils accomplissaient ces tâches et compté le nombre de fixations sur chaque page, ainsi que le temps d'exécution de la tâche. Il faut noter qu'il y a fixation lorsque le regard de l'utilisateur persiste sur un point d'intérêt sur la page. « Ces deux mesures reflètent l'effort des utilisateurs : plus les fixations et le temps d'exécution de la tâche sont élevés, plus l'effort de traitement est élevé et plus la tâche est difficile », explique Nielsen Norman Group.

Les résultats indiquent qu'en moyenne, « les participants ont consacré 22 pour cent de plus de temps (c'est-à-dire une performance plus lente dans l'exécution des tâches) en regardant les pages avec [design plat] ». La société explique cela par le fait qu'ils mettaient plus de temps à chercher les indices de navigation. En ce qui concerne le nombre de fixations, il faut retenir qu'en moyenne, les utilisateurs avaient « 25 pour cent de plus de fixations sur les pages avec [design plat] ».

On pourrait plutôt interpréter ces résultats en disant que c'est parce que les utilisateurs ont plus de plaisir à naviguer sur les pages avec design plat. Mais la société écarte cette possibilité : « Étant donné que cette expérience consistait en des tâches de recherche, plus de temps et d'efforts déployés sur la page ne sont pas bons. Ces résultats ne signifient pas que les utilisateurs étaient plus "engagés" avec les pages. Ils suggèrent plutôt que les participants ont eu du mal à localiser l'élément qu'ils recherchaient, ou n'étaient pas sûrs quand ils l'ont vu pour la première fois. »

Nielson Norman Group conclut donc que les éléments UI plats attirent moins l'attention et provoquent de l'incertitude. À une grande échelle, on peut alors dire que cela pourrait faire perdre beaucoup d'argent à certains sites, comme ceux de commerce en ligne.

Source : Nielson Norman Group

Et vous ?

Qu’en pensez-vous ?
Avez-vous déjà été dépaysé sur des sites et applications avec design plat ?
Quelle est votre préférence en termes de design graphique pour les sites Web et applications ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de gstratege gstratege - Membre habitué https://www.developpez.com
le 06/09/2017 à 15:36
N'importe quoi. Ce n'est pas un problème de Flat Design, mais de couleurs. Flat Design, signifie que tu met juste un simple rectangle pour un bouton, sans ombres, dégradés, bords adoucis, ... le problème viens quand on met des boutons sans couleurs, et qu'il faut le survoler pour qu'il en ai une. C'est ça le plus problématique, et ça n'a rien à avoir avec le Flat Design...
Avatar de transgohan transgohan - Expert confirmé https://www.developpez.com
le 06/09/2017 à 15:51
Je suis d'accord avec mon VDD.
Déjà les boutons ne sont pas mis en valeur, ils ne sont pas centrés mais surtout ils ne sont pas colorés correctement dans la version flat design.
Tout ceci n'est aucunement imputable au flat design mais au webdesigner...

Il est très facile de le remarquer.
Fixez votre regard sur les oreillers et vous verrez que dans la version normale vous voyez sans souci les boutons sur la périphérie de votre champs de vision.
Alors que dans la version flat design la couleur est tellement mal utilisée qu'ils se mélangent avec le texte...
Avatar de Iradrille Iradrille - Expert confirmé https://www.developpez.com
le 06/09/2017 à 15:56
A-t'on vraiment besoin d'une étude pour savoir que les boutons blancs sur fond blanc ne sont pas très visibles ?
Avatar de 4sStylZ 4sStylZ - Membre confirmé https://www.developpez.com
le 06/09/2017 à 16:04
Je suis d’accord avec plus haut, les exemples fournis sont très clairements mal conçu du coté de la version flat car il y a un changement de couleur.

Pourtant, il y a bien une différence entre la navigation flat et avec des ombres portés. Les boutons représentes sans ombres portés ne sont pas forcément identifiés comme des boutons cliquable par certains publics car ils sont confondus avec des encadrés…
Avatar de abbe2017 abbe2017 - Membre actif https://www.developpez.com
le 06/09/2017 à 16:14
depuis l'apparition des sites "optimisés" pour les apapreils tactiles, la naviguation web viea un ordinateur à souris est de plus en plus horrible à chaque fois qu'un site est "refait".

dernier exemple :
france TV, adecco, les numériques, les principaux journaux.

tout est fait pour scroller, encore scroller, toujours scroller...comme si c'était fait exprès histoire de voir les pub au passage.
plus rien n'est accessible simplement à partir du haut de manière efficace.

les normes et les standards d'ergonomie disparaissent au fur et à mesure comme par exemple l'abandon du logo en haut à droite qui servait à revenir à la homepage, des fois je passe un temps fou à trouver la page contact.
les liens de bas de page sont remplacés par des pubs.

même le boncoin est devenu une tard maintenant.
il n'y a quasiment que Amazon qui n'a pas changé en mal et reste "fidèle" à lui (et developpez.com !).

je ne sais pas d'où viennent ces fausses idées d'évolutions, mais à chaque fois, j'abandonne le site et je vais chez la concurrence ou j'arrête la lecture online et revient au papier !

Le mec qui a inventé le "responsive design" a du pensé que d'un seul côté de son cervau, laissez moi devenir ,c'était un auto-proclamé directeur artistique, directeur de lui tout seul.
Avatar de youtpout978 youtpout978 - Membre expert https://www.developpez.com
le 06/09/2017 à 17:14
Citation Envoyé par abbe2017 Voir le message
Le mec qui a inventé le "responsive design" a du pensé que d'un seul côté de son cervau, laissez moi devenir ,c'était un auto-proclamé directeur artistique, directeur de lui tout seul.
Je ne pense pas que le problème vienne de la personne qui à inventer le responsive design mais plutôt de ceux qui l'implémente, certains veulent garder une identité commune entre la version mobile et bureau même trop commune ...
Avatar de GordonFreeman GordonFreeman - Membre du Club https://www.developpez.com
le 06/09/2017 à 17:49
Bonjour,

Personnellement je pense plutôt à une autre raison.
Avant, tous les sites possédaient des boutons au design identiques. (Hormis ceux qui faisaient l'effort de modifier le rendu, ce qui n'était pas forcément la majorité..)

Avec le nouveau flat-design les boutons sont différents d'un site à un autre, du coup je pense qu'il est plus difficile de les distinguer rapidement.

Ça vaut ce que sa vaut mais je me dis que ça doit aussi avoir un certain impact...

Cordialement.
Avatar de youtpout978 youtpout978 - Membre expert https://www.developpez.com
le 06/09/2017 à 17:55
Je sais que sur certains site flat-design je n'arrive pas à identifier les boutons je pense que c'est du simple texte dans un bloc même si celui-ci à une couleur différente du reste du site.
Avatar de RyzenOC RyzenOC - Membre expert https://www.developpez.com
le 06/09/2017 à 18:37
Pour moi le probleme du flat design c'est de se retrouver qu'avec 3 gros boutons/pages... sur mobile c'est bien, sur pc sa l'est moins.
Pourquoi ce qu'il était possible de faire 2 clique hier il faut le faire en 6 clique aujourd'hui ?

évidement avec le flat design on peut créer une bonne ui sur pc avec pleins de petits boutons. Mais dans la réalité on sais tous que la politique est le "mobile first"

Il est important de différencier le design plat théorique qui est très bien avec le design plat dans la réalité qui est un design optimisé pour du tactile et osef du pc.

Pour ma part je ne suis un partisan de l'ihm gogo de windows vista/7 avec pleins d’animations 3D de parlous et vas y que je te balance de la transparence de partout, mais je ne suis pas non plus convaincue par Windows 8. Avec Windows 10 y'a du mieu, mais les apps modernUI reste horrible à utiliser à mon sens. Du coté d'android c'est encore pire, pas pratique avec en prime de belles pubs der partout, pour au final des applications qui vont 4 fois rien. Rien a voir avec la qualité des logiciels dispo sur un pc, la version desktop de vlc, la version desktop de MS Office, gimp, photoshop, sony vega... sur android on a juste des ersatz qui font a peine 1% de ce l'on a sur pc.
et je parle pas des jeux vidéos qui sont de magnifique retours en arrière. Les jeux android c'est l'équivalent des jeux pc des années 2000, avec les meme techno, ils gèrent tous juste le sons stéréo, l’occlusion ambiante meme doom 1 faisait mieux alors oui sa tourne dans la paume de sa main mais quand je suis habitué a de la qualité je peut pas revenir en arrière.
Avatar de abbe2017 abbe2017 - Membre actif https://www.developpez.com
le 06/09/2017 à 22:43
je complète mon commentaire du haut.

avant quand les résolutions standards des écrans augmentaient ,les web designeur avait prévu plus d'infos, plus de n'avigation sur les sites.
Du coup quand on passait d'un moniteur 15p à 17 puis 22, on trouvait les sites de plus en plus agréable car on voyait plus de chose d'un seul coup, c'était hyper pratique, on y gagnait en temps.

Maintenant, les designeurs ont abandonné ça (encore un coup de l'auto proclamé Directeur Artiste..), quand la résolution augmente, bun rien change, tout est juste grossi. C'est le niveau 0 de l'intelligence du développeur web.

Maintenant, tu scrolles, scrolles encore, scrolles toujours.....

même la notion/mise en forme différent des "liens visités" a disparu !

Pourtant les bons modèles ne manquent pas, quand je vois les thèmes par défaut dans les cms principaux (wordpress, joomla..), ils sont bien ergonomiques.

La liste des sites "revampés" ne cessent de s'allonger....sérieusment, quelle "nouvelle" version d'un site vous a fait dire "ouahh c'est bien plus pratique comme ça maintenant" ?

Même le site google de recherche ne s'améliore pas en ergo : avant il présentait des captues d'écran des sites en résultat : dispari
avant les descriptions des résultats s'étllaient sur la longeur, maintenant ya une grande zone blanche en pleine écran

Tout fout le camp sauf Amazon et developpez.net.
Offres d'emploi IT
Chef de Projet Web (H/F)
Ionis - Ile de France - Paris
CONSULTANT SHAREPOINT
AS INTERNATIONAL GROUP - Ile de France - Paris (75000)
Chef de Projet SAP FI-CO H/F
Michael Page - Ile de France - Hauts-de-Seine

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil