#interfaces

Oh, c’est old ça ! Oui il y avait eu de bonnes critiques argumentées du flat design qui, lorsqu’il est trop minimaliste, dégrade l’expérience utilisateur par manque d’affordance (quand un bouton ne ressemble plus à bouton comment deviner que c’est un bouton ?)

mais il y a du faux flat, sobre mais avec des effets discrets de relief et ombre, qui font que ça matérialise bien les choses (dont le material design de google d’ailleurs)

En fait ce n’est peut être pas le flat design ce que j’ai en tête. Alors je vous ai mis des exemples.
C’est peut être un framework qui génère ces horreurs.
Des design avec plein de place perdue, des grands vides qui rappellent la solitude engendrées par ces grands hall à la préfecture, la CAF ou le pole emploi. Cette impression de perte de repères kafkaïenne.
Comment ça s’appelle ?
Je ne vous raconte pas les chargements pendant lesquels les objets sautent, se téléportent ici et là sur l’écran, sont inaccessibles…

https://s4.postimg.org/7maoixpsb/flatedf.png https://s4.postimg.org/pqdp3kngr/flatposte.png https://s4.postimg.org/gssz67v0r/flattranspole.png

C’est souvent à l’image d’un service qui se dégrade, régresse : L’info était là, accessible, pratique mais peut être méconnue sur la précédente version, et disparaît une fois la refonte urbanistique en place.

Je ne vois pas trop où est la place perdue. Le fait que le graphisme soit sobre, surtout pour des sites de « services » où on doit chercher des informations importantes et/ou on doit avoir des interactions (banque, webmail, etc) c’est plutôt une très bonne chose.

Le fait qu’il y ait des bugs ou que des informations utiles aient disparues est un tout autre problème (mais qui peut être juste corrélé car apparu en même temps que la refonte à zéro d’un site/service).

+1 le vide c’est à dire l’espace, c’est bien.

Oui, c’est bien flat ce que tu nous montres. Mais pas si catastrophique. Que ça respire est une bonne chose.

Le dernier écran (Transpole) cause très certainement des difficultés avec ses pictos non légendés — au risque de la recherche passe inaperçue ou soit inutilisable pour certains users ; erreur classique en (mauvais) flat design —, plusieurs boutons trop semblables et des trucs qui semblent être des liens de téléchargement… pas très explicite, tout ça. Pour les deux autres, il faudrait des tests pour révéler les frictions d’usage.

@tetue Si ce sont des bien liens vers de plans en PDF (comme très souvent dans les sites de transport), et bien oui, ce sont des liens de téléchargement, du coup c’est à peu près affordant comme il faut. :)
(Je ne compte pas l’accessibilité de dire le format, le poids du fichier, etc hein)

@rastapopoulos : ça ressemble aussi très fort à des champs de formulaire très flat-minimalistes… Au premier regard et sans la manipulation pour confirmer, la surface d’interaction (ici peut-être du lien se manifestant par changement visuel au survol) est très peu explicite, réclamant un effort cognitif évitable. D’une façon générale, cette interface pêche par manque de guidage. Ou, vulgairement dit : spa intuitif ;)

@rastapopoulos
J’ai l’impression qu’on applique à présent sur l’écran les même approches que pour le print (l’aération, la sobriété). Mais ne serait-ce pas une erreur ?
Un écran fait en valeur minimale optimiste 1600×900 (données Steam). Avoir à scroller pour obtenir une info simple est à mes yeux une erreur de design. Donc perdre des pixels verticalement, c’est se tirer une balle dans le pied (à relativiser avec l’objectif à atteindre).
Bien sûr, il y a l’adaptative design (j’y reviendrai) qui distingue quand c’est bien fait, 3 à 4 formats. Justement pour garder en tête les possibilités (résolution, mais aussi densité de points, mode de pointage…), les utiliser pleinement, sans détruire l’ergonomie sur une bête erreur d’aération de page.

On ne doit pas avoir à chercher des informations de premier niveau sur un site de service . Dans une boulangerie, on ne chercher pas où est planqué le pain en entrant. Donc dans une banque on ne doit pas avoir à chercher pour connaître un solde de compte et enchaîner avec un virement. Sur un site d’électricité, on ne doit pas galérer pour faire un relevé de compteur. Sur un site de transport, on ne doit pas en chier pour trouver l’horaire à un arrêt et se questionner devant le résultat s’il est dans la bonne direction donc devoir retourner au plan (en lecteur pdf intégré à flash si possible pour bien augmenter l’énervement) puis devoir refaire sa cherche (d’où Kafka, vous n’avez pas le papier rose Z452).

Je sais que EDF voudrait ne plus être un simple truc d’électricité et devenir un facilitateur d’initiatives en se donnant des grands airs. Un animateur d’espace, un modeleur de vide. Mais ça restera un électricien, et tant mieux, il en faut.
Je sais que les banques se donnent des couleurs d’assurance, de mutuelle, de location de voiture, de cireurs de chaussures. Mais ce n’est pas à leur site internet donc à leurs clients d’en souffrir.

@tetue
Je suis d’accord que dans les critiques que j’ai émises, il y a à distinguer ce qui est de l’erreur de conception, de réaction cognitive non prise en compte, de suppression de fonctions lors d’une refonte ou de finition ET ce qui est inhérent au flat design épuré et aéré.
Un site pas totalement abouti, OK c’est possible. Mais c’est quand même dommage qu’une version précédente ai été mieux que la nouvelle. Changer pour le fun, c’est un peu con.
Les effets inhérent au Flat design, c’est là où se concentre ma critique. Je crois que c’est un outil à double tranchant à ne pas mettre entre toutes les mains. Certaines répercutions sont simples à voir :

J’ai parlé de là distinction entre supports d’affichage et inputs (souris, tactile…)
– sur smartphone, les écrans sont super détaillés (>150 dpi voire 200), ça peut afficher beaucoup (HD), mais super petit. Souvent pour cliquer, il faut zoomer, car les boutons sont petits (ou les doigts sont gros), seul le texte et la zone sou le widget sont tactiles, donc on perd le contexte à chaque manipulation. Si en plus, le contexte a été éparpillé sous couvert de flat design, c’est pire.
J’ai remis le site de LaBanquePostale où c’est flagrant, entre autre sur smartphone.
(ex : pour voir un solde et effectuer un virement depuis ce compte, il faut Zoomer, lire, Dézoomer, Scroller, Zoomer, Cliquer… Zoomer, remplir une zone texte, Dézoomer, Scroller… c’est pas fini…_vous imaginez, et c’est réel). Sur leur ancienne version, c’était 4 manips puis le formulaire et sa validation.
Après c’est vrai que j’utilise FirefoxOS (et ses forks plus à jour), son navigateur Gaia est à mes yeux génial. Super compatibilité, rapide, mieux que sur Android je trouve.
Le choix de Firefox en lançant ce produit c’était le TOUT WEB, en imaginant que tout serait responsive design et que les applications MacOS et Android seraient amenées à disparaître. J’étais de tout cœur avec eux.
Je veux bien que le monde n’aille pas dans la direction que j’estimerai bonne pour lui, moi, petit dictateur technocrate. Mais j’estime l’approche application mauvaise car c’est à l’utilisateur de s’adapter au contenu désiré et non au contenu de s’adapter à la plateforme de lecture.

– sur PC, les écrans doivent aller du vieux machin (1024×768) à un écran 260ppp 4K (4096×2160). Pas question de tout mettre dans une seule catégorie « écran de PC ». C’est sûrement déjà fait, mais alors pourquoi dois-je forcer la page pour smartphone sur mon netbook qui est plus adapté à cet affichage que le site original ?
La catégorie d’affiche type PC ça n’existe pas, il faut plus de finesse.

Le flat design me semble être une approche avec énormément de contraintes, si on n’y fait pas attention, le résultat est par défaut catastrophique, tandis que pour un résultat idéal, il faut avoir été super méticuleux, proactif, empathe… Alors qu’avec d’autres approche moins contraignantes par leur forme, un meilleur résultat est atteint plus tôt. (mais ce résultat sera plus difficile à faire évoluer vers une meilleure esthétique sans casser).

Je ne sais pas si c’est du Hype Driven Development (voir ►https://seenthis.net/messages/546498 @marcimat) cette marée de flat design partout sur les sites institutionnels ; de quel esprit tordu, non ingénieur sort cette idée de renouveau, mais la contrainte esthétique mise entre de mauvaises mains donne un résultat passable (et même EDF, La Poste, une société de transport n’ont visiblement pas fait un sans faute).

Le flat design me fait penser à ça :

https://s18.postimg.org/kwdasah0p/assiette.jpg

WEB

https://s9.postimg.org/als02s6kf/flatposte_comment.png

https://s3.postimg.org/anhkj8or7/flatpostesmart.png

Et au fait, je ne m’arrêterai pas causer, même si ma pensée est à contre courant de ce qui se fait. Apparemment, j’ai un profil développeur IHM, alors j’aiguise mes armes dans ce sous domaine. Je publie mes avis pour avoir ceux des autres (démarche artisan).

Je réitère un peu : moi j’ai l’impression que tu mélanges des choses et les diagnostiques.

Là le dernier exemple que tu montres, le site n’est PAS intégré de manière responsive. Il ne s’adapte pas à la largeur en modifiant les menus, etc. Et cela n’a strictement aucun rapport avec le flat design, qui est une tendance graphique (mais qui a aussi des implications ergonomiques).

Les problèmes du flat design se concentrent dans le fait de perdre la matérialité de certains éléments d’interaction, et donc de ne plus reconnaître au premier coup d’œil ce qui est un input de texte car il n’est pas entouré comme il faut, ou un bouton car on ne voit pas le relief, etc. Ça se sont des problèmes connus du flat design.

Le fait d’utiliser des pictos sans label humain, n’a pas de rapport avec le flat design.
Le fait de ne pas avoir rendu le site réellement responsive, n’a pas de rapport avec le flat design (et ça comprend les histoires de « qu’est-ce qu’on veut absolument voir au-dessus de la ligne de flottaison »).
Etc.

Pour ce qui est de la largeur des écrans, cela dépend des interfaces, si c’est un site, de la lecture, une appli web, des services. L’œil humain n’est pas fait pour suivre des lignes hyper longues, donc dans de nombreux cas il faut limiter la largeur du contenu, et ne pas prendre tout l’écran même s’il est grand. Une autre méthode, grace aux outils responsive, c’est de grossir la taille du texte et des contenus, et donc de prendre plus de place, donc avoir moins de vide (l’œil humain n’est pas fait pour lire tout petit non plus). Mais c’est moins souvent utilisé, et donc quand un site bloque le contenu à 1100px de large sur un écran de plus de 2000, bah oui ça fait du vide autour (mais c’est toujours mieux que d’avoir un truc fluide qui resterait écrit tout petit avec des lignes hyper longues).
Mais bref, ce point là encore n’a pas de rapport avec le flat design.

Ok , oui. J’ai fait mes mélanges, même si en fait, je suis déjà conscient de ces distinctions (symboliques moins codifiées car épurées…).
Je n’ai fait aucune remarque sur les blancs horizontaux, je n’ai critiqué que les blancs verticaux.
J’ai parfois l’impression qui les objectifs divergent entre
– ce que les commanditaires du site voudraient voir au dessus de la « ligne de flottaison » (publicité, autres services vendus…)
– ce que les utilisateurs voudraient obtenir en un clic (donc pourquoi pas placer le plus près possible de la dernière information lue ou du dernier bouton utilisé [c’est la loi de Fitts, c’est ça ?])

Donc j’arrête mes attaques contre le flat design et je reconcentre mes attaques contre tous ces sites institutionnels qui ont perdu en fonctionnalité, en utilisabilité lors de leur refonte (apparemment sur un coup de tête) en 2016 ou 2017.

Mes remarques sur le site de labanquepostale côté smartphone sont :
– à prendre avec des pincettes car leur site n’est pas responsive
– valables également en navigation PC

Juste un petit rappel sur le « vide » : aérer la composition facilite la compréhension et il est recommandé de laisser 25 à 50 % d’espace « blanc » sur chaque page. Point illustré dans cette prez (slides 26, 28 et 29) : ►http://romy.tetue.net/ameliorer-lisibilite-typographique

Le flat design n’est qu’une tendance graphique, qui signifie qu’il n’y a pas d’effet de relief. Ce n’est pas mal en soi ni « par défaut catastrophique ». Lorsque c’est nécessaire, l’absence d’effet de relief est compensée, entre autre, par l’espacement des éléments, pour permettre de les mieux appréhender, ce qui n’est pas mal non plus.

Après, c’est comme tout, y’a du flat design réussi et du flat design raté. Les défauts que tu pointes sont multiples, mais sans lien de cause à effet direct avec le choix graphique, flat, de ces interfaces.