… ou une bonne preuve que suivre les règles à le lettre n’est pas toujours la bonne chose à faire.

Un peu de customisation est parfois (souvent) une bonne chose.

Cela dit, je pense aussi que pour arriver à faire un design propre ET customisé, il faut d’abord le faire en suivant les recommandations brutes, et ensuite ajouter une touche perso.

En gros : apprendre les règles pour savoir comment les transgresser correctement.

Je ne sais pas si vous connaissais ce site, mais il râle tous les jours contre les « petits trucs pourris » dans le design sur le web (mais parfois aussi ailleurs).

Il râle sur des détails, mais il faut dire qu’il a très souvent raison.

How many people are blaming their connection because you made them load a 2 Mb image? How many people are blaming their outdated computer because you think a Single Page App is fancy on your latest Macbook Pro? How many people think they are stupid with your innovative mobile design full of anti-patterns?

Caring is accepting that it is your fault. And acting accordingly. Now.

Gros +1

Ce comportement de merde dans les pages-web doit être banni et ceux qui écrivent ça devraient servir de combustible pour le chauffage : https://lehollandaisvolant.net/?d=2012/03/22/21/48/48-css3-un-truc-a-eviter

Après, Firefox n’est pas le premier à outre-passer l’impossibilité de zoomer. Safari-Mobile le fait depuis un moment : https://mobile.twitter.com/thomasfuchs/status/742531231007559680

En gros, non, les utilisateurs mobiles ne veulent pas une version light de votre site (juste un truc adapté au tactile, mais pas forcément vide).

Et un truc pour les guidelines : les suivre à la lettre, c’est pas une bonne chose. Déjà parce que demain les guidelines auront changés, mais aussi parce le créateur de ces règles ne couvrira jamais tous les cas de figures possibles, à la fois pour une app et son dév, que pour l’usager (en gros : allume ton cerveau !).

Holly shit… Un autre top 10 !

Visiblement, certains sites semblent avoir pris ça comme un tutoriel.

J’aurais pu ajouter ça à mon dernier article, dans les formulaires "chiants".

Celui de Mastodon : je sais pas vous, mais moi j’ai déjà un compte. Alors pourquoi le bouton « se connecter » n’est-il pas au moins aussi gros que le formulaire d’inscription ?

Le but c’est rameuter du monde ou bien de permet aux gens qui sont déjà là de pouvoir revenir ?

Je connais un seul site qui fait les choses très bien de ce point de vue, c’est Tumblr.

Le formulaire d’inscription fait les deux. Si on tape notre email + mot de passe dans le champ d’inscription alors qu’on a déjà un compte, alors il nous connecte. C’est pas beau ça ?

Et ça c’est loin d’être spécifique à Mastodon : Paypal aussi fait ça. Le bouton "login" ne ressort pas du tout dans l’interface tout flat.

Là encore, Tumblr fait bien : une page vide, avec juste deux boutons : un pour se connecter, un autre pour créer un compte. C’est si complique que ça ?

Oh, je ne suis plus le seul à me taper la tête contre les murs à cause de ça !

Un seul exemple : le site de la Caf, caf.fr. Ah oui, pardon : c’est www.caf.fr, parce que les redirections .htaccess s’il manque le www, ils ne connaissent pas.
Bref, www.caf.fr, il est où le bouton pour se connecter ? Typiquement, vous avez 5 secondes pour trouver avant de vous énerver. Ici le bouton est à gauche, au milieu, en petit, sans couleur distinctive, sans forme remarquable, bref, perdu dans un océan de bruit.
Ah par contre, le site des impôts est bien plus clair.

J’en avais déjà parlé là : https://lehollandaisvolant.net/?d=2014/03/04/14/09/35-pourquoi-les-sites-des-services-publics-sont-ils-tous-aussi-pourris

(On notera que le site Voyage-SNCF s’est très largement amélioré depuis… que Captain-Train (devenu Trainline) est arrivé avec une interface utilisable)

Éditer des polices (ajouter, modifier, supprimer des caractères).

C’est utile quand on fait des webfonts avec des icônes.
Il suffit d’importer les PNG ou SVG, de choisir celles qu’on veut dans notre fichier de police et il va pondre les fichiers de polices : Woff, Woff2, SVG, etc.

De façon générale, quand vous faites une webfont, je conseille de n’inclure que les icônes dont vous avez besoin.

Par exemple pour les icônes du material design de Google, il y en a des milliers. Tous les inclure ferait une police bien trop lourde à charger.

(ah et l’avantage des polices web sur les PNG par exemple, c’est la gestion des couleurs et des tailles : on peut afficher une icône et lui ajouter couleur, taille, ombre… en CSS comme on ferait avec du texte normal. C’est donc très maléable, et aujourd’hui c’est aussi bien largement supporté dans les navigateurs)

When designing, make it easier for users to make the right choice, whatever you define right choice to be.

Gros +1

Certains l'ont très bien compris. Google par exemple. Comment ont-ils réussis à imposer un navigateur comme Chrome, alors que celui-ci n'a aucun point fort par rapport aux autres ? En forçant l'installation en même temps que d'autres programmes. L'installation s'y fait en opt-out, donc elle est faite par défaut. Résultat, en 5 ans, Chrome domine le marché.

Je suis d’accord : un truc que le responsive design fait, c’est qu’il réorganise à la vertical les éléments d’une page, faisant en sorte que la page est super longue, y compris simplement un article (juste par le fait des éléments qu’il contient).

Pour modifier ça, et mettre comme il propose, certains élements spéficique en ligne et d’autres en dessous en colonne, il faut utiliser du JS (pour déplacer physiquement les éléments au sein du HTML).

Une autre solution peut être le CSS avec Flex et Grid.
Le premier est largement supporté, mais le déplacement des éléments reste (selon moi) une fonctionnalité relativement secondaire des Flexbox (qui permet avant tout de faire des boîtes flexibles). Grid commence tout juste à pointer le bout de son nez, il n’est pas encore bien implémenté partout.

Une petite critique du Material Design, et de certains de ses problèmes récurrents.

Concernant le « mystery button » y a un truc qu’il faut pas oublier, c’est qu’une même icône a une signification basée sur le contexte, de l’application. Et ça, ce n’est pas un bug, c’est bien une feature !

Je fais également partie des gens qui préfèrent une interface jolie pour ses logiciels.

À côté de ça, je préfère bien souvent passer par la ligne de commande aussi. Est-ce contradictoire ? Non : on peut styliser les lignes de commandes avec des espaces et des couleurs. Ça en devient très clair avec quelques tweaks.

Pour les GUI, faut pas non plus tout mélanger : un logiciel peut-être très complet avec une jolie interface, tout en étant impossible à utiliser efficacement. S’il faut 15 actions pour changer un truc, c’est perdu…

Je reste néanmoins convaincu qu’on peut concilier tout ça et avoir une interface efficace, jolie le tout pour un logiciel qui offre plus que 2 fonctionnalités.

Je suis d’accord : les interfaces ultra-épurées ne sont pas la solution à tout. C’est écrit dans l’article : quand les contrôles disparaissent sans arrêt, ça demande plus de temps pour les faire réapparaître quand on en a besoin.

C’est le cas pour Word par exemple. Quand on écrit dans Word, on n’écrit pas pour écrire du texte brut, on écrit pour écrire dans Word avec tout ce qui va avec (formatage, etc.). Le ruban avec les outils de formatage doit donc faire partie de l’interface, zen ou pas zen.

Si il faut un mode zen à votre application, c’est qu’elle est de base inutilement surchargée.
La vider toute son interface ne servira à rien : faites des choix et virez ce qui doit être viré tout en gardant ce qui doit rester.

Il y a des trucs qu’on n’a tout simplement pas besoin d’avoir constamment sous les yeux. Ce qu’on a besoin d’avoir sous les yeux dépend fortement du contexte.
C’est exactement ce que Steve Jobs a reproché aux tout premiers smartphones avec les claviers physiques. Dans son iPhone (le premier) il a fait en sorte que le clavier soit tactile, justement pour ne l’afficher que quand c’est nécessaire, et ainsi profiter d’un écran plus grand pour les autres applications.

Bref, c’est pour ça que je préfère une interface efficace mais "fancy" plutôt qu’une interface épurée mais où il faut toute une myriade de manœuvres pour faire quoi que ce soit.
En exemple je citerai ici Gnome 2 versus Gnome 3. Le premier était efficace mais vieillot, le second est joli mais je ne le trouve pas pratique du tout. Je peux même faire une remarque similaire avec XP versus W10. La dernière version de Windows est certes retravaillée, simplifiée, mais pour un usage vaguement poussé, c’est tout de suite le bordel (et il suffit de voir que là aussi ils ont fait un écran avec les paramètres de base (mode zen) tout en conservant l’accès à l’historique "panneau de configuration" bien plus complet.

Je digresse en disant que c’est la même chose pour tout ce qui est "kiss" : à quoi ça sert d’avoir 15 programmes indépendants quand, de toute façon, ils seront constamment emmenés à être utilisés ensembles ? Autant tout fusionner sous une seule interface (gui ou cli, hein) et gagner en performance et en puissance.

Là encore je préfère et ait toujours préféré faire des choix motivés et raisonnés plutôt qu’appliquer une conduite et une mécanique stricte dictée par des règles qui ne couvrent jamais tout..

Très intéressant, à propos des illusions dans le design.

Exemple simple : le symbole « lecture » () dans un cercle ne doit pas être centré.
À cause de son assymétrie, il aura l’impression d’être plutôt à gauche. La solution est de l’excentrer un peu.

Il y a plusieurs autres exemples.