Et donc, comme promis. Je pars du principe d'ergonomie classique qu'il vaut mieux éviter de trop surprendre l'utilisateur à la fois par des conventions spécifiques et inutilisées ailleurs, et par des différences de conventions au sein de la même application.
Les boutons ne ressemblent pas à des boutons. → Le concept « texte avec une bordure épaisse arrondie et seulement cette bordure qui change au survol » n'est pas une représentation habituelle d'un bouton, ça finit par se comprendre mais c'est un élément de confusion. Il vaudrait mieux se rapprocher d'un design plus classique (notamment avec l'intégralité du bouton qui réagit au survol).
Les styles des différents composants est incohérent selon les composants. → Tout est dit, il faudrait harmoniser ton design. Un exemple parmi d'autres : les boutons des select ne ressemblent pas aux autres boutons.
Le système d'onglets, je n'ai pas compris à l'origine que c'était des onglets, et une fois que j'ai compris ça je pensais qu'ils ne s'appliquaient qu'à la première colonne. → Tes onglets ressemblent eux à des boutons classiques en flat design. La barre d'onglets n'a rien qui indique où s'arrête le contenu des onglets (cadre autour du contenu, ou simple ligne pour délimiter la largeur de la zone d'onglets). Il faudrait au mois ça pour que ça devienne évident que ce sont des onglets et quelle zone ils pilotent.
Les marges sont incohérentes : parfois elles sont presque inexistantes (autour du titre, des images, des textes dans les listes), parfois elles sont classiques (onglets), parfois elles sont énormes (boutons de gestion des colonnes). → Tout est dit, les marges n'ont pas besoin d'être identiques, mais cohérentes entre elles : là on a un mélange de design très serré (marges étroites) et aéré (marges larges).
Dans les colonnes, le texte et l'image sont déséquilibrés. → Typiquement dans le flux « NYT > WORLD » : les images sont hautes et le texte petit avec une marge étroite, donc les tuiles pour chaque élément du flux sont principalement constituées de vide. C'est moins choquant avec le flux du Monde (mais l'est d'autant plus que ton écran est grand). Ça contraste bizarrement avec les flux « World News » de la colonne centrale du groupe « news » qui n'ont pas d'images donc sont très serrés.
Pourquoi il y a une grosse bordure pointillée autour des boutons de gestion des colonnes ? J'imagine que s'il y a un élément de design spécifique c'est que ça correspond à un comportement spécifique, non ? → Sémantiquement, un design particulier ↔ une fonction particulière. Là je ne comprends pas si ces éléments ont une fonction spécifique, pour moi le design est donc trop particulier, à harmoniser.
Au survol des éléments de liste, le texte devient rouge sur fond sombre, ce qui est difficile à lire. → C'est plus gênant sur l'ordinateur du boulot. Globalement, le rouge attire l'œil mais est difficile à lire (que ce soit en texte ou en fond)
L'icône « pointillés verticaux » de déplacement d'un bloc-flux n'est ni une icône standard pour ce genre de manœuvre, ni à un endroit habituel pour ce faire. → Je m'attendais plus à une icône avec des flèches dans les 4 directions, ou tout simplement à pouvoir déplacer le bloc en le saisissant n'importe où dans son en-tête, ce qui est un comportement classique.
Pourquoi l'icône de repliement du flux n'apparait qu'au survol du titre à la place de l'icône du flux ? → On a des fenêtres partout dans nos OS, et je ne connais pas d'autre exemple de fenêtre dont la gestion de la taille se trouve au survol de l'icône principale. D'habitude c'est le groupe d'icônes à droite (Windows, pas mal de WM Linux) ou à gauche (Mac, quelques WM Linux).
Les zones d'action sont parfois énormes (bouton d'ajout d'un flux), et parfois microscopiques (suppression d'un onglet) → Une harmonisation de ce point serait moins surprenante pour l'utilisateur.
(onglet « music ») Il n'y a aucune différence claire entre un bloc de flux déplié et un bloc de flux vide. → Avec un indicateur pertinent, l'utilisateur pourrait savoir immédiatement si un bloc est vide ou simplement replié.
Le design est incohérent avec lui-même : par exemple les croix de fermetures sont différentes selon le contexte (celle des onglets, celle des popins). → Il suffirait d'en choisir un et de l'utiliser partout.
Pour ajouter un flux j'ai une icône « lampe torche ». Ce n'est pas un symbole habituel ou évident, il n'y a pas de tooltip pour me dire ce que fait ce bouton, donc je ne sais pas ce que peut faire cette action. → Suite à ton dernier message : le symbole universel pour la recherche, c'est une loupe, pas une lampe torche. En utilisant un symbole spécifique, tu casses le langage commun et rends ton interface moins intuitive.
Les boutons ont une largeur incohérente : parfois le bouton est adapté à une largeur d'interface (ajouts de colonnes, types de flux dans la popin), parfois il est adapté au contenu (boutons d'annulation / validation de la popin). → Là encore c'est une simple question de cohérence : choisir un comportement et l'appliquer partout.
Pourquoi les boutons d'édition / suppression / sélection d'un flux ne s'affichent qu'au survol du bouton « rafraîchir » ? → Suite à ton dernier message : le « ... du bouton "rafraîchir" » était important à prendre en compte aussi. C'est typiquement le genre de boutons qu'il est pertinent de masquer en fonctionnement normal pour éviter de surcharger l'interface, mais que je ne m'attends pas à retrouver au survol de ce bouton en particulier. Ça me semblerais logique de les avoir au survol de l'en-tête du flux, ou sous un bouton « actions ».
D'ailleurs, qu'est-ce que « sélectionner un flux » et pourquoi cette icône ? → C'est une vraie question. J'ai essayé de cliquer dessus, la seule différence que j'ai vu c'est que l'icône carrée (peut-être une case à cocher, mais hors de tout contexte c'est difficile à dire) est devenue une icône « sélectionné ». D'ailleurs, si c'est vraiment une case à cocher, une fois cochée l'icône devrait être « case à cocher sélectionnée » (avec le cadre donc) et pas celle-ci.
Dans les titres des flux, le texte de l'URL est décentré vers le haut, mais les icônes de flux et de rafraichissement sont décentrées vers le bas. → Un alignement cohérent rends immédiatement le design plus propre et lisible. J'en profite pour noter qu'en mode mobile, lesdites icônes sont complètement collées au bord inférieur du titre.
On est vraiment censés lire les prévisualisations du contenu des éléments des flux dans des tooltips (en plus elles ont le design standard du système, qui est incohérent avec le reste de ton style). → Là c'est un problème d'ergonomie : si on passe au survol sur un élément de flux, on a une tooltip qui affiche un résumé. C'est tout petit, dans un style incohérent avec le reste, difficile à lire parce que très vite trop long (cf le flux du Monde) et à ma connaissance inutilisable sur mobile.
Concernant le reste de ta réponse :
Les attaques personnelles ou sur l'orthographe ne sont jamais une bonne réponse, ça ne sert qu'à te décrédibiliser.
Je n'ai jamais critiqué les élément de design qui relèvent des gouts et des couleurs (choix des couleurs, des polices, etc). Le seul cas où je parle de couleur c'est pour signaler un défaut de lisibilité.
« Il suffit d'utiliser un peu le truc (ou carrément lire la doc) pour piger pourquoi c'est comme ça. »→ L'ergonomie, c'est précisément s'arranger pour que le lecteur n'ait pas à utiliser le truc ou pire, lire une doc (protip : personne ne lit jamais aucune doc s'il n'est pas obligé de le faire) pour comprendre comment ça s'utilise. Surtout sur des éléments de vocabulaire graphique qui sont utilisés par absolument tout le monde. C'est d'ailleurs précisément ce que te disent les lecteurs qui te répondent « c'est moche » : ça signifie par là que quelque chose dans ton interface ne leur donne même pas envie d'essayer.
« Il y a un boulot énorme de fait » → C'est un argument de quantité, pas de qualité. Si c'était la même chose, depuis le temps ça se saurait – là encore, sortir ce genre d'argument te dessert plus qu'autre chose.
Une autre combine que j'utilise quand j'ai absolument besoin de faire un design, c'est d'aller voir ce qui se fait ailleurs : sur ce site par exemple, ou sur des sites qui ressemblent à ce que je veux faire, ou sur l'un ou l'autre des innombrables frameworks de composants qui existent. Alors j'ai rarement quelque chose d'original, mais au moins je suis à peu près certain que ça va être clair et compréhensible pour tous mes utilisateurs, et qu'ils ne seront pas perdus, même les nouveaux.
[^] # Re: peut en en deduire
Posté par SpaceFox (site web personnel, Mastodon) . En réponse au journal Libre mais.... moche ?. Évalué à 5.
Et donc, comme promis. Je pars du principe d'ergonomie classique qu'il vaut mieux éviter de trop surprendre l'utilisateur à la fois par des conventions spécifiques et inutilisées ailleurs, et par des différences de conventions au sein de la même application.
selectne ressemblent pas aux autres boutons.Concernant le reste de ta réponse :
Une autre combine que j'utilise quand j'ai absolument besoin de faire un design, c'est d'aller voir ce qui se fait ailleurs : sur ce site par exemple, ou sur des sites qui ressemblent à ce que je veux faire, ou sur l'un ou l'autre des innombrables frameworks de composants qui existent. Alors j'ai rarement quelque chose d'original, mais au moins je suis à peu près certain que ça va être clair et compréhensible pour tous mes utilisateurs, et qu'ils ne seront pas perdus, même les nouveaux.
La connaissance libre : https://zestedesavoir.com