Thread by @aeris22

Petite anecdote marrante mais pas tant que ça. Qui montre aussi le problème UI/UX versus former les utilisateurs versus le back versus trop de choses. […]

On a une contrainte au niveau bdd dans une base sur un champ, qui est de ne pouvoir contenir que des valeurs correspondants à /^[a-z][a-z0-9]{0,29}$/

Niveau back, l’ORM fait donc sa vérif normalement avec cet regex.

SLUG_FORMAT =

/\A[a-z][a-z0-9]{0,29}\z/.freeze
validates_format_of :slug, with: SLUG_FORMAT

C’est tout niquel. Parfait. […]

Niveau HTML ? Ben on a du HTML 5 maintenant, qui gère ça nativement. Donc

<input required="required" pattern="[a-z][a-z0-9]{0,29}">

Géré nativement par HTML. En JS on fait un input.checkValidity() et c’est marre.

C’est tout niquel. Parfait.

Vous sentez venir la suite ? […]

Vient le designer/UI/UX/whatever utilisateur orienté. « Oui mais quand ça échoue, on dit comment à l’utilisateur ce qui a échoué » ? […]

« Ben comment ça ? »
« Ben faut lui dire si c’est parce que c’est trop long, ou si ça ne commence pas par une lettre, ou si ça contient des majuscules, ou des caractères spéciaux »

Ta regexp, elle te dit si c’est bon ou pas. Pas comment elle a échoué si jamais…
Du coup ton code JS pour gérer ces merdes…

La regex change côté back/db/html ? Ton code JS devient incohérent avec ta regex et l’utilisateur peut se retrouver avec des cas d’erreurs pas bon affiché ou des fausses pistes partout.

Encore une anecdote sur le même sujet. Nos navigateurs ont des boutons précédents et suivants depuis au moins 1970. On m’explique pourquoi on ajoute partout sur toutes les pages des boutons applicatifs « retour » qui sont généralement rempli d’heuristiques à la con pour tenter de

faire un coup de divination de où on est et où il faudrait du coup renvoyer l’utilisateur ?

Plutôt que d’éduquer l’utilisateur à utiliser son navigateur, on plâtre son inculture par de la rustine UI/UX…

Un autre exemple tout con, qui concerne essentiellement les services « qui font propres » et se heurtent à l’incompréhension de ce qu’est une barre d’adresse ou une URL… Au pif chez Cozy, on littéralement galère dans tous les sens pour gérer le cas que ton URL est 100% custom et

associée à toi et toi seul.

L’exemple typique sur lequel on bute…
Vous ne devinerez jamais le code exécuté derrière pour gérer ça…

Vala vala… On a réimplémenter en applicatif ce que la barre d’adresse et un favori aurait fait nativement…

Et c’est une anecdote qui coûte en fait extrêmement cher… Ce process à lui tout seul n’est toujours pas « propre » vu le taux de perte constaté avec un utilisateur sur cette page. On a l’impression d’avoir des poissons devant un vélo.

Donc du coup, on ajoute une page pour lui demander son email. Pour pouvoir lui envoyer l’adresse qu’il aurait du ajouter en favori ou saisir dans sa barre d’adresse.

Mais un email lui-même est compliqué… Donc faut ajouter des boutons pour lui ouvrir son application mail s’il est sur mobile. Sur desktop, il est livré à lui-même.

Donc au lieu de faire « apprend ton URL, ajoute-là en favori, tape-la dans ta barre d’adresse », on a réimplémenté une barre d’adresse logiciel, avec de l’envoi par email de lien « juste à cliquer »… 😭
À cause de l’inculture informatique et de la frilosité de toute la chaîne à

mettre le mot « éducation » quelque part.

Les développeurs en 2000: y’en a marre de faire du formulaire validation en JS, vous pourriez pas nous intégrer nativement ça dans HTML ?
Les designers en 2021: on ne peut pas customiser le tooltip, vous me virer la validation HTML5 et on refait tout en JS à l’ancienne à la place