Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

É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

111PARTAGES

14  0 
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 ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de abbe2017
Membre confirmé 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.
13  1 
Avatar de 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 ?
9  1 
Avatar de Mrsky
Membre expérimenté https://www.developpez.com
Le 06/09/2017 à 23:04
Citation Envoyé par abbe2017 Voir le message
C'est le niveau 0 de l'intelligence du développeur web.
Je suis 100% d'accord avec ce que tu dis sauf ce petit morceau. En tant que développeur web je tenais a préciser que c'est rarement de notre ressort, soit les clients ont leurs visuels, soit des graphistes nous filent des psd, soit on à des templates. Les quelques fois où mes collègues front end ont proposés des versions qui tentent de mettre à profit l'espace disponible on leur a expliqué que non ce n'était pas ce que le client souhaitait (comprendre ça prend plus de temps / coûte plus cher).

[troll]Entre ça et l’écosystème frontend/JS qui change tous les 3 mois je suis bien content sur mes technos backend [/troll]
5  0 
Avatar de 4sStylZ
Membre éprouvé 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…
3  0 
Avatar de GordonFreeman
Membre confirmé 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.
2  0 
Avatar de RyzenOC
Inactif 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.
2  0 
Avatar de abbe2017
Membre confirmé 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.
2  0 
Avatar de sirthie
Membre éclairé https://www.developpez.com
Le 07/09/2017 à 10:31
@koyosama

Ensuite, j'ai vu des entreprise qui utilisent sur tablet des sites web non responsible pour des operations de consultations dans les usines. Et je peux te dire qu'ils perdent beaucoup de temps et c'est vachement improductif ou user-friendly pour la personne.
Je n'ai pas voulu dire que les sites web ne devaient pas être responsive, j'ai dit que, pour certaines catégories de sites, ceux que je consulte le plus souvent, en l'espèce des sites non-commerciaux (sites persos de graphistes, photographes, sites d'images, sites à contenus textuels longs ou "pas faciles" à comprendre (sites de dev web), a fortiori dans un contexte d'utilisation "bruyant" (sites de dev web), le responsive, tel qu'il était souvent mis en œuvre (avec suppression de la quasi-totalité des outils de navigation dans un site) me semblait inutile et dégradait l'expérience utilisateur :

Hormis pour les sites commerciaux ou de service public, je pense que le passage au responsive, tel qu'il est souvent réalisé (avec suppression d'outils de navigation) a été une erreur. Doit-on vraiment publier des contenus sur tous les supports au motif que ces divers supports existent ?
Je n'ai pas pensé à d'autres catégories de sites que les sites commerciaux ou de service public, comme les sites de consultation dans des usines que tu mentionnes. Mais pour moi, des sites d'écoles ou autres organismes de formation et des sites de PME sont des sites commerciaux ou de services publics et se doivent donc d'être responsives pour toucher leur public. Là, je partage tout à fait ton point de vue.

Serieux, je savais pas du tout que les gens qui utilisent ce truc. Generelement J'evite ce genre de site qui veut dire theme wordpress par defaut pas assez professionel.
Là, je ne te suis pas bien. WordPress ou pas, ces outils sont très efficaces.

Apres cela depend de l'application mais aujourd'hui je connais personne de la generation Z, ou celle de mes parents qui aiment utiliser un PC. Meme les tablets sont pas aussi populaire. Par contre, ils sont tous mobile a fond.
... et je ne peux que déplorer cette évolution en passant du PC à la tablette et au mobile, on est passé d'un outil de création à des outils de consommation. On prive les gens de la possibilité d'être créateur, à leur niveau, quel qu'il soit.

Car le mobile c'est pas cher, c'est simple et tout le monde en a au moins un par personne.
À ceci près que nombre de gens claquent entre 800 et 1.000 euros pour un smartphone, smartphone qui est donc plus cher que nombre de PC. Je trouve ça triste.

Quand tu fais du SEO, on sait que Google penalise les sites sans support mobile donc on essaie toujours de mettre un support mobile.
Le support mobile n'est qu'un des critères de Google améliorant le positionnement d'un site dans les SERPs. Il y en a des centaines. Donc, éviter de présenter le support mobile comme un incontournable pour le bon référencement d'un site (ce que tu ne fais d'ailleurs pas). À titre d'exemple, un balisage HTML léger et sémantique est aussi un critère de bon référencement (mais quand je vois le balisage HTML pléthorique et non sémantique des CMS...).
2  0 
Avatar de transgohan
Expert éminent 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...
3  2 
Avatar de 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 ...
1  0