Le 08 mai dernier, Figma a levé le voile sur plusieurs nouveautés dont Figma Sites, une fonctionnalité qui promet de révolutionner la création de sites web directement depuis leur interface de design. À ses côtés, Figma Make (AI & Code) , Figma Buzz (composant communautaire à la Canva) et Figma Draw (dessin vectoriel) ajoutent de nouvelles cordes à l’arc de la plateforme.

Pourtant, en tant que designer attentif à l’accessibilité numérique, une chose saute aux yeux dès les premières minutes de test : si l’intention est belle, la base même de l’accessibilité est encore très bancale, voire bâclée. Certes, Figma permet déjà d’utiliser quelques balises sémantiques comme <header>, <footer>, <section> ou encore les niveaux de titres (h1, h2, h3). Mais bien d’autres éléments essentiels brillent par leur absence : pas de balises de liste (ul, ol, li), pas de tableau (table, thead, th, td), pas d’attributs personnalisés (hreflang, lang, dir, etc.) et surtout, pas de formulaire (form, input, label, button, etc.). Côté attributs ARIA ? C’est le désert.

Pour effectuer mon test, j’ai ouvert l’un des exemples fourni par Figma Sites, et j’ai utilisé un maximum d’outils mis à disposition par Figma pour rendre le site moins inaccessible.

Cet article n’a pas pour but de fustiger un outil encore en bêta, mais bien de souligner des priorités essentielles. Car pendant que du temps est investi dans des effets de rotation ou d’animation cosmétique, l’accès à l’information – fondement même du web – est négligé. Il serait dommage que ce nouvel outil, aussi prometteur soit-il, parte sur des bases excluantes dès sa naissance.

Voici donc une lecture critique et constructive de Figma Sites, avec pour ambition d’aider la plateforme à évoluer dans le bon sens : celui de tous les utilisateurs.

L’importance de l’accessibilité en design web

Mais avant d’attaquer sur le sujet même de Figma Sites, revenons un peu sur les bases et fondements du design moderne, et de l’accessibilité.

Pourquoi l’accessibilité n’est pas une option

L’accessibilité, ce n’est pas une “feature” à activer plus tard. C’est un fondement du web, au même titre que la compatibilité mobile, la performance ou la sécurité. L’ignorer, c’est priver une partie de la population de l’accès à l’information ou aux services proposés ; en soit, c’est priver l’individu de son autonomie. C’est aussi une manière de renforcer les inégalités, volontairement ou non.

D’un point de vue légal, plusieurs pays, dont ceux de l’Union européenne, imposent désormais des standards d’accessibilité pour les services publics et les entreprises. Le RGAA, le RAWeb, le WCAG, et le European Accessibility Act ne sont plus de simples recommandations. À partir de 2025, ignorer ces exigences, c’est aussi prendre un risque juridique.

Mais surtout, l’accessibilité est une marque de respect. Respect pour la diversité des usages, des corps, des esprits. Elle est un levier d’inclusion, d’opportunités, une obligation morale et non pas une contrainte technique.

Ce que les designers attendent d’un outil « moderne »

Un outil de création de sites en 2025 ne peut plus faire l’impasse sur l’accessibilité. Ce que les designers attendent d’un outil dit « moderne », ce n’est pas juste une interface fluide ou un onboarding avec des micro-interactions léchées. C’est la possibilité de construire des fondations solides : du balisage sémantique, des formulaires accessibles, une navigation clavier cohérente, des labels visibles et compréhensibles.

En clair, un outil moderne doit être capable de faire émerger de bonnes pratiques, pas d’encourager des effets cosmétiques au détriment de l’essentiel. Nous, designers, proposons des interfaces pour que des êtres humains puissent accéder à un contenu, service ou produit, et pas uniquement pour satisfaire nos egos artistiques. C’est aux outils que nous utilisons de montrer l’exemple.

Les bénéfices pour les utilisateurs

Quand un site est accessible, tout le monde y gagne :

• Les personnes non-voyantes peuvent naviguer avec un lecteur d’écran ;
• Les personnes avec un handicap moteur peuvent tabuler dans les interfaces ;
• Les personnes neuro-divergentes accèdent à une interface plus claire et plus prévisible ;
• Les personnes âgées ou peu technophiles trouvent un site plus lisible et rassurant.
• etc.

Mais plus globalement, l’accessibilité bénéficie à tous les utilisateurs : un contraste bien pensé, une structure claire, un formulaire bien labellisé… ce sont aussi des atouts pour les utilisateurs pressés, distraits, sur mobile, ou dans des environnements bruyants ou instables.

Rappelez-vous que c’est aussi un bénéfice pour vous : en vieillissant, vous perdez certaines de vos facultés. Penser accessibilité maintenant, c’est investir dans votre propre avenir.

Les bénéfices pour les entreprises

Investir dans l’accessibilité, ce n’est pas une perte de temps. C’est un levier de performance :

• Vous touchez un public plus large (vieillissement de la population, situations temporaires de handicap, utilisateurs mobiles) ;
• Vous améliorez votre référencement naturel. Les balises sémantiques et les alternatives textuelles sont aussi utiles à Google ou aux IA qui vont pousser vos contenus et service ;
• Vous réduisez les coûts de maintenance en structurant mieux votre code et vos composants ;
• Vous valorisez votre image de marque en vous engageant sur un sujet sociétal fort.

En clair : un site accessible, c’est un site plus inclusif, plus clair, plus efficace, et plus durable.
Pourquoi s’en priver alors que c’est un gain sûr contre la concurrence ?

Ce que Figma Sites propose aujourd’hui

Voyons un peu ce que Figma Sites propose du côté accessibilité, et le chemin qu’il lui reste encore à parcourir.

Une base sémantique en cours de construction

L’arrivée de Figma Sites introduit une fonctionnalité attendue depuis longtemps par les designers : la génération de sites avec une structure HTML intégrée, sans quitter l’univers de Figma. Dans sa version actuelle (bêta), l’outil permet d’ajouter certains éléments sémantiques directement via l’interface :

• Des balises de structure comme <article>, <header>, <footer>, <section>, <aside>, <main>, <nav> et <section> ;
• Des niveaux de titres jusqu’à h6 (de h1 à h6) ;
• Un attribut alt parfois interprété.

Cette initiative est saluée, car elle permet une première couche de compréhension du contenu par les technologies d’assistance, et donc une approche un peu plus responsable qu’une soupe de <div>. (voir plus loin pour les manques à ce propos)

Ce qui est dommage, c’est de voir cette option rangée dans Accessibility, là où, selon moi, c’est la base d’un web sémantique qui sert bien plus de fonctions que l’accessibilité.
Le HTML et CSS, c’est tellement simple, que la plupart des développeurs front-end aujourd’hui n’ont même plus les bases de connaissances utiles pour éviter leur soupe de <div>.

Ce que cela permet déjà de faire

Avec ces premiers outils, un designer peut :

• Structurer visuellement et sémantiquement une page ;
• Marquer les zones principales du site (navigation, contenu, pied de page) ;
• Hiérarchiser le contenu textuel à l’aide des balises de titres ;
• Anticiper une meilleure indexation et accessibilité des contenus pour le web.

Autrement dit, Figma Sites dépasse le simple prototype : il amorce la création de sites prêts à être explorés par des utilisateurs – humains ou machines. Mais ce n’est pas suffisant.

Ce que cela laisse espérer ? Que Figma Sites est un terrain fertile, mais encore très peu cultivé côté accessibilité. La promesse est là, mais la mise en œuvre ne répond pas (encore) aux exigences minimales d’un web pour tous.

Les manques flagrants dans Figma Sites (à date)

Une fois passé l’enthousiasme des premières heures, un constat s’impose : l’accessibilité est loin d’être au rendez-vous. Beaucoup d’éléments essentiels à la navigation, à l’interaction (pas au sens que Figma lui donne) et à la compréhension du contenu sont encore absents.

Si Figma Sites amorce une structuration HTML bienvenue, il reste encore largement insuffisant pour produire des sites réellement accessibles. Voici une revue des principaux manques, à la fois techniques et fonctionnels, que l’on rencontre dans cette version bêta.

Pas de listes sémantiques

Il est actuellement impossible de structurer un groupe d’éléments en liste (<ul>, <ol>, <li>) de manière personnalisée. Cela empêche :

• de rendre compte d’un contenu répétitif (services, étapes, points-clés, etc.) ;
• de fournir aux lecteurs d’écran une information sur le nombre d’éléments ou leur ordre ;
• de permettre une navigation fluide pour les personnes utilisant un lecteur d’écran.

C’est un manque fondamental pour la lisibilité, la navigation, et la compréhension du contenu.

Bien sûr, vous pouvez utiliser la fonction textuelle de base de Figma créant automatiquement des listes non-ordonnées ou ordonnées, mais il vous sera impossible de définir qu’un ensemble de logo est une liste de logos, ou qu’un ensemble de liens de navigation principale est une liste de liens.

Pas de tableaux pour les données

Aucune possibilité de créer des tableaux structurés (<table>, <thead>, <th>, <td>…). On ne peut donc pas :

• présenter proprement des données chiffrées, horaires, comparatifs ;
• fournir les bonnes associations entre cellules d’en-tête et de contenu ;
• rendre ces informations compréhensibles pour les technologies d’assistance.

L’information reste alors « visuelle », mais perd toute sa logique structurelle.

Créer des tableaux dans Figma a toujours été plus ou moins un challenge suivant les périodes (qui se souvient d’avant auto-layout ? :D), nous restons dans la même trempe, mais avec un problème technique et sémantique ici.

Peut-être que la mise en page en grille (Grid Layout) nouvellement arrivée pourrait proposer cette option.

Formulaires : les grands absents

L’absence totale de composants de formulaires (<search>, <form>, <label>, <input>, <textarea>, <button>, <fieldset>, <legend>, etc.) est un véritable frein à toute interaction :

• impossible de créer une prise de contact accessible ;
• aucune structure pour associer un champ à son libellé ;
• aucune gestion du focus, des états d’erreur, ou des retours utilisateurs.

On ne peut tout simplement pas envisager un site fonctionnel sans formulaire accessible. Même si les formulaires vont venir avec un ensemble d’autres questions, comme « où stocker la donnée envoyée ? » ou encore « quel service traite ou récupère la donnée ? », il va être nécessaire pour Figma de pousser ces fonctionnalités pour être concurrentiels.

D’ailleurs, pour mieux construire vos formulaires, j’ai une checklist et un livre sur les formulaires web pour vous.

Aucune prise en charge des attributs ARIA

Les attributs ARIA (rôles, états, propriétés) permettent d’enrichir la sémantique, notamment dans les cas où le HTML ne suffit pas. Figma Sites ne propose à ce jour :

• aucun moyen d’assigner un role ou un attribut ARIA à un élément personnalisés,
• aucun repère dynamique pour les lecteurs d’écran,
• aucun moyen de cacher certains contenus aux lecteurs d’écrans, notamment les éléments décoratifs ou redondants.

C’est un manque critique pour des composants complexes comme des menus, onglets, accordéons ou modales. Cependant, j’ai vu un label-ARIA sur un composant démo, sans savoir comment il est apparu, ni comment en proposer davantage.

Pas de gestion du focus clavier

Le focus clavier, c’est un peu la base de l’accessibilité en navigation alternative à la souris. Des personnes avec des handicaps moteurs ou visuels, peuvent n’utiliser que des assistants proches du clavier, et jamais de souris.

L’équivalent sur votre clavier, c’est d’utiliser la touche Tab pour prendre le focus sur l’élément suivant dans la page, ou Shift + Tab pour l’élément précédent. Pour savoir où vous vous trouvez, il est donc indispensable de proposer une sorte de focus ring autour de l’élément pour le mettre en exergue.

Cependant, à ce jour :

• impossible de gérer l’ordre de tabulation ; (nécessaire puisque Figma place en fin de code les éléments en position Fixed)
• pas de visibilité d’état actif au clavier (focus ring ou autre) ;
• aucune assurance que les composants soient navigables sans souris puisque beaucoup d’intéraction « lien » sont en fait des role=link avec un href sur un <div> et un événement onlick. (pour les non-techniciens : des éléments non sémantiques, non focusable, ou non activable au clavier)

Cela rend l’usage au clavier (ou avec des aides techniques) très aléatoire, voire impossible.

Titres de pages en doublon

On observe également un manque de contrôle sur les balises de titres, qui peuvent se retrouver dans un ordre incohérent (h1 puis h3, sans h2 par exemple), mais également de contrôle de titre de page (titre de l’onglet) qui doit toujours être unique pour des raisons de repère. Cela nuit à :

• la hiérarchie du contenu ;
• la compréhension globale de la page ;
• la navigation par titres, très utilisée en accessibilité ;
• la compréhension de l’utilité de la page.

Un aspect qui va peut-être au-délà des classiques manques, mais que Webflow gère dans son audit avant publication, dont Figma semble s’être inspiré. D’ailleurs j’ai écrit un article sur Webflow sur ce blog.

Visibilité réduite de la structure HTML

Enfin, l’interface actuelle de Figma Sites ne permet pas de visualiser facilement quelles balises sont utilisées. Il faut cliquer sur chaque élément pour voir sa nature sémantique, sans vue d’ensemble. Cela complique, la vérification rapide de la structure, l’audit d’accessibilité éventuel, la cohérence entre les composants et risque de noyer les efforts dans un ensemble d’autres éléments non sémantiques.

Voici une idée, fortement inspirée de ce que fait WordPress, pour mettre en avant les éléments sémantiques utilisés.

D’autres informations d’accessibilité pourraient alors ainsi être transmises via la représentation graphique du calque.

Quand l’esthétique prend le pas sur l’essentiel

Dites-moi que vous avez ignoré les recommandations de vos spécialistes en accessibilité sans me dire que vous avez ignoré les recommandations de vos experts.

Des effets visuels soignés… mais accessoires

Dès les premières minutes avec Figma Sites, une chose saute aux yeux : l’attention portée aux options d’effets visuels et inversement proportionnelle à celle portée à l’indispensable accessibilité. Transitions soyeuses, composants en “spinning” lors du chargement, animations micro-interactives… on sent que le soin des effets visuels a mobilisé des ressources.

Mais posons-nous une question simple : à quoi servent ces animations si l’information n’est pas accessible ? Ces animations, et non interactions, visent à créer une sensation dynamisme ou de “modernité”, mais ils ne répondent à aucun besoin fonctionnel ou universel.

Les vraies interactions « Hover effect » et « Press effect », qui sont des interactions entreprisent par l’utilisateur, sont un bon début. Il manquerait juste un « Focus effect » pour compléter ces interactions utiles.

Des “interactions” qui n’en sont pas

Autre dérive constatée : l’usage du terme “interaction” pour désigner en réalité… des animations d’entrée ou de scroll, ou de spin.
Ce type de fonctionnalités, bien que séduisant à première vue, peut poser plusieurs problèmes :

• elles ralentissent ou masquent temporairement l’information, ce qui gêne particulièrement les personnes ayant des troubles cognitifs ou de la concentration ;
• elles n’ont pas de sens fonctionnel (aucune action réelle n’est déclenchée) ;
• elles perturbent la navigation si mal gérées (et elles le sont souvent).

Il serait temps de rappeler que l’accessibilité, c’est aussi éviter l’inutile. Une interface efficace ne cache pas l’information derrière une chorégraphie.

Autre chose que Figma peut mettre en place : le respect des préférences utilisateur. Grâce aux API navigateur disponibles aujourd’hui, il est possible de limiter les animations si les utilisateurs ont déclaré ne pas en vouloir. Figma devrait utiliser cette fonction pour limiter les animations.

Vous en saurez plus en lisant mon livre et checklist sur l’accessibilité pour les designers.

Des priorités qui interrogent

Le plus troublant, ce n’est pas qu’il y ait des animations. C’est l’ordre des priorités produit que cela suggère :

• L’équipe a consacré du temps à peaufiner ces effets destinés à un petit pourcentage d’utilisateurs très à l’aise avec le visuel, dans un contexte calme, connecté, sans contrainte.
• Pendant ce temps, trop peu a été prévu pour les 20% de la population mondiale en situation de handicap, qui attendent des fondations minimales : lisibilité, navigation clavier, balises sémantiques, rôle ARIA.

Vous allez me dire que c’est normal, d’un point de vue marketing, c’est plus facile de vendre des animations, plutôt que de vendre les bénéfices direct pour les êtres humains. Si vous pensez cela, alors peut-être qu’il manque une forme d’éducation plus générale sur l’inclusion et les bénéfices que l’accessibilité apportent, même pour les personnes sans handicaps

Peut-être aussi que c’est moins vendeur pour les financeurs ? Mais ça serait dommage de les insulter d’idiots en leur faisant croire que des animations sont plus utiles que l’accès à l’information, non ?

L’accessibilité n’est pas un luxe qu’on ajoute après, c’est la fondation du web sur laquelle nous devrions tous et toutes construire. Créer des effets sans structure, c’est comme peindre un mur avant d’avoir coulé les fondations.

Le problème ici n’est pas d’avoir mis des animations, mais d’avoir oublié d’abord les fondamentaux.
L’accessibilité n’est pas un plugin ou une « option pro » : c’est la base d’un produit responsable, durable, et réellement utile.

Figma, vous tenez quelque chose : suggestions concrètes

Il est temps de penser à une roadmap plus sérieuse sur l’accessibilité, mais la base est déjà là, il faut juste l’étendre un peu et renforcer ces fondations.

Une base est là, mais il manque des briques fondamentales

Si Figma Sites a initié un socle sémantique, il reste incomplet. Voici une liste de compléments essentiels à intégrer dans un court/moyen terme pour ouvrir le champ de l’accessibilité réelle :

Balises HTML structurantes à intégrer

• Listes : <ul>, <ol>, <li>
• Tableaux : <table>, <thead>, <tbody>, <tr>, <th>, <td>
• Formulaires : <form>, <label>, <input>, <textarea>, <select>, <button>, <fieldset>, <legend>
• Ancres internes : <a href=""> aujourd’hui les ancres dans une page sont des liens sans href, ils ne sont donc jamais rendu navigables au clavier.

Attributs (ARIA) et sémantique enrichie

• l’attribut alt est proposé partout dans Figma, mais n’est pas récupéré dans le code source, notamment pour les SVG (qui ne devraient pas avoir d’attribut alt, mais un nom accessible ou une alternative textuelle)
• role (ex: role="navigation" par défaut pour les <nav>, role="dialog", etc.)
• aria-label (pour nommer les différentes navigations par exemple), aria-labelledby, aria-describedby
• aria-hidden, aria-expanded, aria-controls, aria-live
• tabindex, aria-current (pour la page courante d’un site), aria-disabled

Cela permettrait d’aller au-delà des balises HTML et d’assurer un vrai dialogue avec les technologies d’assistance.

Une roadmap d’accessibilité simple et progressive

Figma n’a pas besoin de tout faire d’un coup. Mais il est urgent de structurer une feuille de route crédible, et de la partager avec la communauté. Si un outil de design qui se veut être le pont entre les designers et les développeurs ne peut pas faire cela, ça serait le comble.

 Étape 1 — Complétion sémantique

• Intégrer les balises HTML manquantes (listes, tableaux, formulaires)
• Structuration automatique ou semi-guidée des titres (h1 → h6)
• Avertissement en cas de titres désordonnés ou doublons

Étape 2 — Interactions accessibles

• Navigation clavier cohérente (ordre, focus, visibilité)
• Possibilité de tester les comportements à l’intérieur de Figma Sites

Étape 3 — Enrichissement ARIA

• Ajouter les rôles ARIA de base et une interface pour les manipuler
• Associer labels et inputs de manière explicite
• Créer des composants interactifs accessibles (modales, accordéons…)

Étape 4 — Accessibilité avancée (long terme)

• Intégration de tests automatiques (a11y linter ou axe-core)
• Simulation d’un rendu screen reader (lecteur d’écran virtuel)

Redéfinir ce qu’est un MVP en 2025

Il serait bon que Figma redéfinisse son concept de MVP (“Minimum Viable Product”). Car aujourd’hui, un produit “viable” ne peut plus se contenter d’un rendu esthétique. Il doit aussi :

• être lisible, navigable, compréhensible ;
• s’adresser à tous les publics, pas seulement les plus privilégiés.

Une bêta qui n’intègre pas un minimum d’accessibilité n’est pas un point de départ neutre : c’est une dette déjà créée, et une insulte envers les personnes handicapées.

Et une dette d’accessibilité, on le sait, coûte plus cher à corriger plus tard. Mieux vaut donc prévoir une vraie roadmap inclusive dès la phase bêta, avec des étapes claires, documentées, et ouvertes à la contribution.

En conclusion : une bêta, oui, mais pas une excuse

Figma Sites a des airs de révolution dans l’écosystème design. Pouvoir créer des sites sans quitter son outil de design, avec un rendu HTML/CSS en prime, c’est enthousiasmant. Mais cette révolution ne doit pas être à demi-inclusive.

Oui, nous sommes sur une version bêta. Mais une bêta, ce n’est pas un joker pour ignorer les bases. C’est justement le moment parfait pour poser des fondations solides. Ignorer l’accessibilité dès le départ, c’est créer une dette technique et humaine qu’il sera difficile de rembourser demain.

Ce que Figma Sites a montré jusqu’ici, c’est une volonté de bien faire… mais des priorités produit mal alignées. On a privilégié les paillettes visuelles là où on attendait un sol stable. On a investi du temps pour un effet “spinning” là où des millions de personnes n’ont toujours pas de balises pour lire ou remplir un formulaire.

Cet article n’est pas une plainte. C’est une main tendue.

Pour que Figma puisse devenir un outil réellement moderne, il devra aussi devenir un outil accessible. Et cela commence aujourd’hui, avec l’aide de toute une communauté prête à tester, proposer, documenter.

Il reste beaucoup à faire. Mais il est encore temps de revoir la feuille de route, et de construire un web que tout le monde pourra utiliser, et pas seulement admirer. Nous ne sommes pas des artistes, nous sommes des designers qui souhaitons aller plus loin que de simples concepts agréables à l’œil.

On a tendance à aller de l’avant, sans jamais trop regarder en arrière. Mais je trouve qu’il est important d’avoir du recul sur ses accomplissements, pro ou perso. Parfois, ça fait du bien, et parfois ça permet de voir en face ce que l’on peut améliorer, pour éviter de se voiler la face.

Cela fait un moment que je n’ai pas fait d’article récapitulatif. Mais pour éviter que celui-ci ne me prenne 40h à rédiger, j’ai décidé de prendre uniquement les événements marquants de 2024.

À l’honneur : voyage, publication de livres, création d’un plugin WordPress, activité de maroquinerie, boost de visibilité sur certains réseaux, automation, et mentoring. Aucun rapport, ou presque, entre tous ces sujets.

Voyage au Japon

J’ai fait mon tout premier voyage au Japon avec ma partenaire de vie. En résumé ? C’était fabuleux. J’ai pris une énorme claque culturelle, j’ai découvert des mets qui ont fait vibrer mes papilles.

J’ai redécouvert les classiques sushis, katsudon, yakitori, ou encore célèbre ramen, dans une diversité que l’on ne trouve pas en Europe.

J’ai visité des lieux magnifiques chargés en histoire et en magnificence architecturale.

Depuis tout petit c’était le voyage de mes rêves, étant fan de la japanimation, et j’ai enfin pu accéder à ce privilège de voyager si loin avec la personne que j’aime.

Publication de livres

Pour les personnes qui ont suivi les dernières activités de mes comptes sur les réseaux sociaux (LinkedIn, Bluesky, Mastodon) vous avez certainement vu passer 1 publication en français, et une publication en anglais.

J’écris en ce moment une série de livre sur le Product Design, en allant chercher des sujets nichés, mais variés : Conception de formulaire web, Accessibilité pour les designers, et à venir des sujets comme la conception et maintenance de Design System, les biais cognitifs, l’accessibilité pour les développeurs, et bien d’autres à venir.

Écrire un livre prend du temps, mais l’année dernière fut celle de la publication de 2 livres, une traduction en anglais, et un livre original en anglais, qui est en cours de traduction en français à l’heure où j’écris ces lignes.

Je vous laisse découvrir ou re-découvrir ces livres qui vous permettront, j’en suis sûr, de vous distinguer dans vos compétences professionnelles.

Publications sur Figma Community

J’ai continué à alimenter mon profil Figma pour partager soit des artéfacts de recherche, soit des éléments graphiques utiles à la communauté.

Le marketplace de Figma permet également de vendre des éléments. J’en ai profité pour mettre en vente des éléments qui peuvent avoir un impact sur un business en me disant que c’était logique de les vendre et non de les offrir. Cela reste un gain de temps parfois énorme pour un business, et ne coûte que quelques dollars finalement. (mais pourquoi je me justifie encore ? )

J’en ai également profité pour rejoindre la communauté Friends of Figma Luxembourg pour voir ce qui se trame dans la communauté.

Création d’un plugin WordPress pour Bluesky

Avec l’aide du mascu toxique à la tête de X, j’ai pris de plus en plus de plaisir à utiliser Bluesky. Et comme les plugins sur WordPress pour ce réseau sont peu nombreux ou assez mal notés, je me suis dit que j’allais proposer quelque chose.

Cela tombait tout pile sur mes congés de fin d’année, et à un moment où je voulais tester l’outil Cursor, un éditeur de code conçu sur la base de VS Code gonflé aux LLMs (Large Language Models).

Autant vous dire que j’ai été bluffé : j’avais commencé par un MVP (Minimum Viable Product) avec une fonction très simple, mettant de côté 2 autres fonctions pour vraiment tester la base de l’outil Cursor. Au premier jour de travail, tout été terminé, incluant les 2 fonctions mises de côté. Le deuxième jour, je suis repassé sur ce que l’IA avait oublié : sécurité, accessibilité et performance, mais toujours en utilisant l’IA pour m’aider.

Le plugin est disponible sur le répertoire officiel WordPress et sur Github pour les personnes qui veulent contribuer. Il y a déjà des requêtes de fonctionnalités de la part des utilisateurs et utilisatrices.

Je suis devenu auditeur en accessibilité

Alors non je n’ai pas quitté mon poste actuel, j’ai juste une corde en plus à mon arc. Aujourd’hui, je suis en mesure d’auditer un site web et je le fais dans le cadre de ma mission d’UX Designer dans la société qui m’embauche, Foyer SA.

Après d’excellentes formations d’Access42 en design, développement, audit et rôle de référent, j’assume désormais les rôles de référent et d’auditeur interne. Il y a beaucoup de travail, mais en ce début d’année, nous avons publié le site de Foyer Global Health qui affiche un score de 99%. Des PDF non accessibles nous font la misère encore.

Cet audit a été fait sur la base du RAWeb 1.0, une évolution du RGAA qui s’applique au Luxembourg, et qui se rapproche un peu plus de la directive européenne (UE) 2019/882.

Je suis monté en compétences sur le copywriting

Pour rester dans la thématique de compétences, je suis monté récemment en compétences sur le copywriting. À ne pas confondre avec de l’UX Writing qui est plutôt neutre et peut embarquer d’autres aspects. Le copywriting se concentre sur l’écriture de contenus qui permettent d’amener l’utilisateur ou l’utilisatrice à prendre action.

Mon but n’est pas d’apprendre à manipuler les gens, mais d’apprendre à mettre mieux en avant des aspects essentiels d’un produit, tout en comprenant mieux les « clés psychologiques » de la prise de décision. Un sujet vraiment très intéressant à combiner avec l’UX Writing et la connaissance des biais cognitifs pour de meilleurs résultats, je pense.

Ma lecture du moment, avec quelques années de retard : Web Copy That Sells de Maria Veloso.

J’ai proposé un article pour 24 jours de web

Après avoir proposé 2 sujets à 24 jours de web, j’ai eu l’honneur d’écrire sur le sujet très vaste de centrer les usages sur l’expérience humaine en prenant 3 axes : l’inclusion, l’accessibilité, et les formulaires.

La réalité derrière cet article est que je ne pouvais pas m’adresser à un public large sans parler de ce qui fait que souvent, nous n’incluons par les autres. L’introduction à base de biais cognitifs et de modèles mentaux risque donc d’en larguer plus d’un. J’espère qu’il sera digeste malgré tout. En tout cas les premiers retours sont plutôt très positifs.

Retrouvez également l’article sur ce blog, pour des raisons de paternité, mais également parce que je pensais le traduire en anglais.

J’ai quitté Twitter

Je vais faire court : la manipulation de la réalité, des média, la désinformation et l’algorithme de merde de X m’a fait détester le réseau au possible. Mon compte est toujours présent pour conserver ma « place ». Mais ne vous attendez pas à m’y voir.

À la place, j’ai largement augmenté ma présence sur LinkedIn, Bluesky et Mastodon. Rendez-vous là-bas !

J’ai créé de nouvelles choses en maroquinerie

Vous le savez peut-être pour celles et ceux qui me suivent depuis un moment : j’ai commencé la maroquinerie en 2021 pour m’amuser et sortir un peu la tête de l’écran.

Cette année, je me suis poussé en dehors des sentiers battus pour créer des choses que je n’avais encore jamais faites.

Une aventure palpitante que je partage sur Instagram, YouTube, Tiktok ou encore BlueSky.

J’ai boosté ma visibilité de crafter sur les réseaux

Malgré mon envie initiale de me sortir la tête de l’écran avec le craft, mon envie de partager ma nouvelle passion a rapidement repris le dessus et je me suis lancé sur Instagram pour tester. J’ai ensuite cross-posté sur Tiktok et YouTube les formats « Reels » d’Instagram.

Cette année, j’ai pu atteindre les 6k de souscriptions sur YouTube, 8k sur Tiktok, et 31k sur Instagram. Ce ne sont que des chiffres, la partie intéressante est surtout les interactions et les opportunités créées grâce à ces chiffres.

Comment j’ai fait ? La régularité et le plaisir.

Je partage régulièrement sans me fier à ce qui marche ou pas. Bien sûr j’ai toujours un œil curieux pour observer ce qui marche ou pas, mais ce n’est pas ce qui dirige mes publications.

Grâce à cela, j’ai pu tisser des partenariats avec des marques qui me fournissent en matière première ou en outils à moindre frais.

J’ai créé mes premières (grosses) automatisations

En parlant de régularité, et pour trouver un équilibre entre craft et publications numériques, j’ai automatisé une partie de mes publications sur la toile, notamment sur YouTube et Instagram, en utilisant un outil nommé Make.com.

L’outil me permet de créer des scénarios sur mesure en branchant des modules entre eux. Parfois, un module récupère de la donnée, parfois il fait une action, parfois il filtre ou transforme la donnée, le tout dans un environnement en glisser-déposer vraiment agréable à utiliser.

Grâce à cela, j’ai un scénario qui, par exemple, pioche dans une liste de 120 vidéos, et rentre dans une série de publications sur différents réseaux sociaux, tout seul. Cela augmente ma régularité sur la toile, tout en me laissant du temps pour vivre. Ce scenario m’a pris 4h à mettre en place, incluant le travail en amont sur la préparation des fichiers, mais va me faire gagner une centaine d’heures par an, au moins la première année. Ça sera bien plus les années suivantes.

J’en parlerai probablement plus en détails dans un autre article en donnant des précisions sur ce scénario en particulier. Je construis d’autres scenario en parallèle.

Mentoring

J’essaye de ne pas trop en faire la promotion car je suis très pointilleux sur les personnes que j’accepte de mentorer, et certaines personnes le prennent mal. En effet, je n’accompagne que les personnes non privilégiées, à savoir pas les hommes blancs cis-genre avec un emploi. Le principe est simple : jouer la corde de l’équité jusqu’à ce que l’égalité soit atteinte. Ça me rappelle cette image :

Certaines personnes prennent mal ce choix de ma part. Tant pis. Je pense que chaque individu a des attentes bien spécifiques et je ne suis pas nécessairement là pour les combler toutes, alors un peu de frustration ne fera pas de mal.

Cette année, sur parfois une session d’une heure, parfois sur plusieurs régulières, j’ai pu aider pas loin d’une dizaine de personnes à mettre un pied à l’étrier. Pas toujours dans le domaine du web d’ailleurs, car j’ai également accompagné plusieurs maroquinières débutantes, et ça fait vraiment plaisir de voir les gens prendre en confiance et arriver à leurs fins.

J’ai repris le jeu vidéo

Cela faisait un moment que je n’avais pas repris sur la durée, et cela me fait le plus grand bien de m’évader dans les mondes créés par Hidemaro Fujibayashi (Zelda BoTW) ou Tetsuya Nomura (FF VII).

Je ne sais pas si vous avez joué à un Zelda ou Final Fantasy récemment, mais l’évolution des franchises est juste énorme selon moi. J’ai hâte de continuer à les voir évoluer.

J’ai même remis le nez dans de vieux jeux sur PS3, notamment la série FF XIII que je n’avais jamais terminée car elle tombait dans mes débuts professionnels, quand j’avais complètement lâché le jeu vidéo. Cela devait être une période de quelques mois qui durera alors 10 ans, avant que je me replonge progressivement dans des phases de reprise.

Je sais que le jeu vidéo est assez négativement connoté, mais c’est une activité comme une autre qui a ses bénéfices. Grâce au jeu vidéo j’ai personnellement :

• renforcé ma communication en équipe
• renforcé mon travail d’équipe
• renforcé l’analyse de situation
• décoincé des bloqueurs qui m’empêchaient de progresser en anglais (hey oui !)
• appris à me relaxer et ne pas penser boulot tout le temps (plus récemment).

Je compte donc continuer à trouver un bon équilibre en vie pro, voyages, famille, craft et jeu vidéo.

Et vous, comment était votre année 2024 ?
Une excellent année 2025 à toutes et tous !

Le web, qui se voulait, à ses débuts, être un outil libérateur et inclusif, a vu son potentiel dilué par des pratiques souvent maladroites. Malgré un accès sans précédent à des tutoriels, formations et ressources variées, une majorité de sites restent frustrants à naviguer, exclusifs “by design”, et truffés d’interactions mal pensées et de formulaires impraticables.

Note : cet article a d’abord été proposé sur le site de 24 jours de web 2024, et est disponible ici pour des raisons d’archive et d’audience. Bonne lecture !

Au cours de mes 15 années d’expérience dans le domaine, j’ai observé une constante : les bases enseignées aux développeurs et designers manquent cruellement d’une profondeur indispensable. Comprendre les (ses ?) biais cognitifs, maîtriser quelques notions fondamentales d’ergonomie, intégrer convenablement des formulaires ou encore intégrer pleinement l’accessibilité comme une nécessité éthique, plus que légale, sont autant de compétences trop souvent ignorées.

Dans cet article, nous explorerons en partie les racines de ces lacunes, l’importance d’une autodidaxie éclairée, et les enseignements essentiels pour construire un web qui sert réellement tous ses utilisateurs. La manière d’aborder ces sujets sera forcément via un prisme qui m’est propre.

Cet article se veut provocateur et emploie à plusieurs reprises un ton sarcastique. C’est une forme d’écriture qui m’est propre. Il n’y a aucune animosité à retenir envers un profil ou l’autre, chaque personne faisant du mieux qu’elle peut à un instant T de sa vie.

C’est bien connu, HTML est facile à écrire, apprendre, et lire, et ce n’est pas un langage de programmation, alors inutile de passer trop de temps dessus.

Vous l’aurez compris, je suis sarcastique ici, mais cette attitude rencontrée au sein de ma carrière s’est révélée être présente chez les formateurs comme les étudiants (principalement des hommes, je garde le masculin) de certaines écoles, ainsi que chez beaucoup de professionnels plus avancés dans la pratique.

L’argument “HTML est facile à écrire” ne tient pas plus d’une minute à l’analyse d’un code de ce genre d’individu : une soupe de <div>, un code non sémantique et non accessible. Tellement facile à écrire que la personne a été incapable d’aligner 3 lignes qui ont du sens. Très bien.

Comment en sommes-nous arrivés là ?

J’ai plein d’avis personnels : ego, biais cognitifs, masculinité toxique, fainéantise, manque de remise en question, manque de formation, etc. Mais ce n’est certainement pas aussi simple. Un doux mélange de tout cela et d’autres choses. Vous allez me faire la remarque que j’abuse, que tous les hommes ne sont pas comme ça, que vous avez un cousin qui connait l’accessibilité, ou qu’on ne vous a jamais appris tout ça en formation. Et vous auriez raison. Mais en même temps cela me donne raison

Si vous avez passé cette introduction un peu accusatrice et provocatrice, alors vous avez fait un premier grand pas pour votre profil professionnel. Pourquoi ? Parce que pour remettre les utilisateurs et utilisatrices au centre de nos réflexions, il faut prendre conscience d’un tas de défauts que nous avons tous et toutes. Prêt à sortir de votre zone de confort ?

Passons à quelques aspects souvent oubliés des formations ou de l’éducation des individus.

L’importance des bases en UX Design, ou comment comprendre l’invisible.

L’UX Design, ses méthodologies, ses principes et sa pratique m’ont permis de mieux comprendre quelque chose d’indispensable à tout professionnel : vous, nous, sommes dans une forme d’ignorance constante face aux besoins utilisateurs, aux problèmes rencontrés, et aux solutions adéquates à trouver.

Je force le trait volontairement ici, mais la réalité est bien là : nous ne faisons que nous projeter sur ce qui a bien pu mal se passer, sur ce qu’est le problème, et pourrait être la solution, et nous la retenons bien souvent comme étant La Vérité. à tort.

Pourquoi ? Les modèles mentaux.

Les modèles mentaux

Votre approche au monde, votre manière de penser, de réfléchir, d’aborder une situation, ne sont pas les mêmes sur celles de votre voisin ou voisine. Vous n’avez pas la même expérience, origine, culture, religion, fonctionnement physique ou cognitif, etc. Tous ces aspects forgent un individu sur sa manière d’approcher le monde qui l’entoure.

Un modèle mental est une représentation interne que chaque personne se fait de la manière dont une chose fonctionne. En d’autres termes, c’est une idée ou une image mentale que vous créez pour comprendre et interagir avec le monde qui vous entoure.

Quand vous utilisez un objet ou une interface, vous avez déjà dans votre tête une idée préconçue de comment cela devrait fonctionner. Ces modèles mentaux sont façonnés par vos expériences passées, votre culture, et vos connaissances.

Les modèles mentaux dans la conception web

Les designers et développeurs doivent comprendre les modèles mentaux de leurs utilisateurs et utilisatrices pour concevoir des interfaces qui leur semblent naturelles et intuitives.

Alors comment répond-on à ces différents modèles mentaux via une solution unique sur notre site web ou notre application ?

C’est une bonne question. La réponse se trouve souvent dans des notions de compromis et d’alternatives, mais aussi de normes. Elle se trouve également et surtout dans votre propre éducation et rapprochement à ces notions de modèles mentaux.

Comprendre que vous ne comprendrez jamais tout, comprendre qu’il existe presque une centaine de (groupements de) modèles mentaux principaux (d’après Charlie Munger), et certainement quelques centaines de milliers de modèles en tout, vous fera relativiser sur la place que votre approche, votre ego, peut avoir.

Comprendre cette notion et la petite place que votre avis devrait prendre dans une prise de décision est la première étape vers des conceptions plus inclusives, et plus efficaces.

Exemple d’application sur un de mes projets

Avec l’accord de mon employeur, je vous partage l’expérience que nous avons eu au sein de CapitalatWork pour concevoir leur nouvel outil CRM.

L’objectif d’un CRM est de réunir la connaissance essentielle sur un portefeuille de clients et clientes afin de leur adresser le meilleur service et suivi possible. La conception d’un CRM doit prendre en considération les besoins individuels de chaque utilisateur, leur manière de travailler au contact avec les clients (téléphone, en face à face, par e-mail, etc.) ainsi que des considérations légales (loi informatique et liberté, GDPR, etc.)

Avec notre équipe de design, et notamment Julie, une de mes collègues, nous sommes arrivés sur ce sujet avec un désavantage conséquent : une équipe de développement avait déjà proposé un CRM fait-maison à nos agents, mais celui-ci était tellement horrible à utiliser que ce fut un traumatisme partagé par tous les agents. De fait, les utilisateurs finaux n’ont jamais été consultés ou embarqués dans la conception. Le modèle mental des développeurs est alors entré en conflit avec celui des utilisateurs finaux, aussi bien pour des décisions ergonomiques, que pour des habitudes de travail et la compréhension même du métier.

Soucieux d’apporter une solution qui fonctionne, voilà avec le contexte ce qui devrait vous venir en tête en analysant la situation :

• Nos designers ne peuvent pas venir avec une attitude de conquérants et imposer une solution, il y a déjà un trauma
• Nous devons embarquer des agents que les autres agents apprécient dans la conception. Nos “champions” et “championnes” qui aideront à l’adoption de la solution.
• Nous devons voir et comprendre un maximum des tâches et situations de contact avec les clients et clientes pour couvrir la diversité des usages.
• Nous devrons tester régulièrement les solutions proposées.

Pourquoi ? Parce que si je reprends les différenciants d’un modèle mental : nous n’avons pas la même expérience traumatique, nous n’avons pas leur expertise, et différents agents n’ont pas la même approche vis-à-vis des clients. Certains agents sont même très proches des clients et savent s’adapter à chaque préférence. On parle de traiter avec des clients et clientes VIP ici.

Nous avons donc combiné des techniques d’entrevue utilisateur, de User Task Canvas (atelier créé avec ma collègue Julie), et de tests utilisateur tout au long de la création de la solution, pour correspondre au mieux aux besoins de nos agents, et comprendre leur fonctionnement.

Résultat : la solution est utilisée et plébiscitée, et il y a même des idées d’amélioration que nous implémentons dès que possible. C’est pas trop mal comme résultat après un premier traumatisme, je trouve.

Derrière ce succès, nous avions pas loin de 450 items à analyser et décortiquer en laissant nos biais et avis personnels dans un tiroir. Ces items nous ont servi à nous mettre dans la peau de nos utilisatrices et utilisateurs.

Pour facilement prendre conscience de ces modèles, nous pouvons creuser un aspect qui est pour moi le sous-jacent, et un révélateur de ces modèles : les biais cognitifs.

Quelques sources et ressources complémentaires

• Design et performance, ces cas oubliés – Stéphanie Walter
• Quelques exemples de modèles mentaux et biais cognitifs
• Proposez un design reposant sur les modèles mentaux

Proposer des conceptions plus inclusives

Avec ces notions de biais cognitifs et de modèles mentaux en poche, vous commencez doucement à comprendre qu’à défaut d’éviter votre propres biais, vous pouvez inclure dans des groupes de réflexion des personnes qui ne pensent pas comme vous, des personnes avec une autre culture, une autre expérience, et d’autres capacités, d’autres craintes ou d’autres forces.

C’est là que je vais vous parler de l’accessibilité, un pan de l’inclusivité parmi d’autres, qui me tient particulièrement à cœur, même si ce n’est pas le seul.

Inclure l’accessibilité dans vos travaux

Un des biais cognitifs utilisé pour convaincre de l’importance de l’accessibilité est ce que j’appelle le biais d’identification (ne cherchez pas en ligne je ne crois pas qu’il soit standardisé). Ce serait un mélange de plein de biais, dont celui de proximité émotionnelle et d‘identification avec la victime. Je vous en parle pour ne pas vous manipuler

Je l’illustre pas mon argument qui consiste à vous dire “l’accessibilité concerne les personnes handicapées, mais, qui est proche de vous et possède des handicaps ? Un ou une proche ? Mamie ? Papy ? Ou peut-être vous-même lorsque vous atteindrez l’âge ? Alors finalement, investir maintenant dans l’accessibilité, c’est investir pour vos proches, et investir pour votre avenir.”

Je n’aime pas cette approche, car cette technique—rudement efficace soit dit en passant—cache une grosse partie de la population handicapée alors qu’elle est la première concernée.

Cependant, avant de s’intéresser à un sujet, un individu a besoin d’être embarqué, que ce soit logiquement, ou émotionnellement, pour que son investissement devienne autonome par la suite.

Si l’aspect émotionnel ne fonctionne pas, parce que vous partez du principe que l’être humain ne vous intéresse pas, ou que vous ne vous sentez pas concerné par la vieillesse (déni ?), alors sachez que dans tous les cas vous n’avez plus le choix d’intégrer l’accessibilité à votre domaine de compétence, si vous faites du web, des applications mobiles, des vidéos, ou tout autre contenu numérique.
En effet l’European Accessibility Act (EAA – l’Acte Européen pour l’Accessibilité) impose à ses états membres d’adopter une approche de conception accessible pour 2025. Oui, vous avez, de mémoire, encore 6 mois pour vous y mettre

En somme, si votre profil de designer ou de développeur n’embarque pas des compétences en accessibilité, vous ne serez plus embauchable dans les années à venir.

Bon, entre nous, ce n’est pas comme si tous les professionnels du domaine criaient haut et fort depuis plusieurs décennies qu’il faudrait un jour s’y mettre.

“Oui mais je n’en ai jamais entendu parler avant T.T”— Anonyme.

Ha ! Ne serait-ce pas un biais cognitif qui fait que la personnes ne se souvient pas de quelque chose qui ne la concernait pas à l’époque ? Certainement.

Inclure l’accessibilité dans les formations

Certaines formations présentent l’accessibilité sur un coin de table, en rappelant à des jeunes gens pour la plupart non handicapés et dans la fleur de l’âge que c’est important de penser à tout le monde. Sans illustrer le propos, leur apprendre à se projeter, inviter des personnes concernées pour témoigner ; en somme, sans créer aucune empathie.

C’est donc plutôt “normal” que des personnes non concernées par le handicap ne pensent pas à ce type de population.

Comment pouvez-vous faire, en tant que formateur ou formatrice, pour casser cet immobilisme et embarquer les plus jeunes dans des notions d’inclusivité dans vos formations (design, développement, conception produit, etc.) ?

Il faut rentrer dans un processus pour faire ressentir concrètement les défis rencontrés par les personnes en situation de handicap (notamment numérique) afin de susciter de l’empathie et d’encourager une réflexion durable chez les participants et participantes.

Étape 1 : Une introduction narrative et interactive

1. Raconter des histoires réelles :Commencez la formation en partageant des récits de personnes confrontées à des obstacles numériques liés à un handicap. Par exemple :
   • Une personne malvoyante essayant de remplir un formulaire inaccessible.
   • Un utilisateur en situation de handicap moteur luttant pour naviguer sur un site car la navigation clavier n’est pas prise en charge.
2. Astuce : Utilisez des témoignages audio ou vidéo pour rendre ces histoires vivantes et humaines. Il en existe pas mal sur la toile.
3. Créer un lien personnel : Demandez aux participants de réfléchir et de partager des moments où ils ont été temporairement « en situation de handicap », par exemple une main immobilisée après une blessure.

Étape 2 : Une immersion pratique (atelier expérientiel)

Mettez les participants dans la peau d’une personne confrontée à des défis d’accessibilité grâce à des exercices concrets :

1. Parcours avec obstacles :
   • Naviguer sur un site web avec un lecteur d’écran activé. Fournissez un site non accessible pour qu’ils ressentent la frustration d’un contenu mal structuré.
   • Effectuer une tâche simple (remplir un formulaire) avec la souris désactivée, uniquement au clavier.
   • Essayer de lire une page web en utilisant des simulateurs de déficience visuelle (flou, daltonisme).
2. Temps limité : Proposez une tâche avec une limite de temps et des éléments de stress pour simuler la surcharge cognitive vécue par certaines personnes en situation de handicap. J’aime bien le contre-exemple de userinyerface.com même s’il n’est pas orienté handicap.

Étape 3 : Débriefing émotionnel et discussions

C’est certainement une des étapes essentielles pour vérifier si les exercices prennent et pour inviter les gens à mettre des mots sur leur ressenti.

1. Encourager le partage : Après les exercices, invitez chaque participante et participant à partager ce qu’elle a ressenti : frustration, stress, épuisement ? Ces émotions favorisent la mémorisation et l’empathie.
2. Relier à l’expérience réelle  : Expliquez comment ces ressentis reflètent les obstacles réels vécus par les personnes en situation de handicap, sauf que ces obstacles sont quotidiens et multipliés par 100 à force de répétition.
3. Fournir des solutions concrètes :

• Expliquer comment une bonne structure HTML, un contraste suffisant, et des alternatives texte peuvent transformer l’expérience utilisateur.
• Montrer des exemples positifs d’interfaces inclusives.
• Montrer que ces efforts à leur niveau ne sont pas si complexes, et qu’ils apportent une énorme plus-value pour leurs utilisateurs.

Étape 4 : Création d’un ancrage mémoriel

1. Créer une charte d’engagement personnel : Demandez aux personnes participantes de rédiger une courte déclaration d’engagement, par exemple :
   • « Je m’engage à tester l’accessibilité de chaque interface que je conçois. »
   • « Je garderai toujours à l’esprit les besoins des utilisateurs en situation de handicap. »,
   • Ou un certificat à partager sur LinkedIn les engageant socialement.
2. Matériel souvenir : Fournissez-leur un « kit d’accessibilité » contenant des outils comme :
   • Une checklist des bonnes pratiques d’accessibilité.
   • Une infographie simple expliquant les handicaps numériques et les solutions.
   • Des posters résumant les handicaps et leurs effets.

Étape 5 : Proposer un suivi ou une évaluation

Quelques semaines après la formation, envoyez un questionnaire ou organisez une session de retour pour savoir :

• Quels éléments les ont le plus marqués ?
• Ont-ils mis en pratique ce qu’ils ont appris ?
• Quels obstacles ont-ils rencontrés pour intégrer l’accessibilité dans leurs projets ?

Ce programme est déployable assez rapidement dans n’importe quelle formation de design, de développement, de chefferie de projet, de management, etc. Ce n’est qu’un exemple tiré de certains éléments mis en pratique par moi-même ou certaines consœurs.
Adaptez les contenus à votre cible bien sûr, mais c’est important de retrouver : des témoignages et illustrations, une immersion, des discussions et partage émotionnel, une aide mémoire, et un suivi.

En faisant cela, vous améliorerez la capacité des prochaines générations à penser aux autres, à se projeter dans des situations qu’elles ne connaissent pas (encore) et à penser “inclusivité”.

:is(input, textarea, select, button):focus-visible {
	outline: 2px dashed #004C92;
	outline-offset: 4px;
}

<label for="firstname">Votre prénom</label>
<input type="text" id="firstname" name="firstname">

<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email"
	   aria-describedby="message-email" aria-invalid="true">
<p id="message-email">Votre e-mail semble manquer son arobase (@)</p>

input[aria-invalid="true"] {
	border-color: red;
}

Et si nous devions conclure ?

Construire un web centré sur l’utilisateur exige bien plus qu’une compréhension superficielle des principes de conception.
Il s’agit d’un engagement constant à apprendre, à perfectionner ses compétences, et surtout à écouter ceux pour qui nous concevons. En gardant à l’esprit nos propres biais et l’impact de nos choix, nous pouvons transformer des vies, simplifier le quotidien, et offrir des opportunités sans précédent à des millions de personnes.

Cependant, ce travail commence par une réflexion personnelle : êtes-vous, dans votre pratique, véritablement centré sur les utilisateurs ? Avez-vous intégré l’accessibilité, l’ergonomie et l’inclusion comme des fondements indissociables de votre démarche ? Prenez un moment pour évaluer vos propres pratiques et identifiez les axes sur lesquels progresser.

Que vous soyez formateur, apprenant, étudiant, professionnel curieux, ou déjà expert dans le domaine, je vous encourage à garder ces valeurs en tête et à les promouvoir. Faites au mieux pour intégrer la formation continue et l’inclusion dans votre parcours et celui des autres. Ensemble, nous avons le pouvoir d’améliorer l’expérience web pour tous.

Enfin, pour approfondir ces sujets, je vous invite à explorer mes livres, « Ce que les designers doivent savoir sur l’accessibilité » et « Formulaires Web – Les erreurs à éviter qui vous coûtent cher« , où je détaille ces thématiques essentielles. Avec 24 Jours de Web, on vous offre aussi 25% de remise avec le code 24JDW, valable jusqu’à fin janvier 2025.

Si vous souhaitez aller plus loin, partager vos réflexions, ou engager une discussion, retrouvons-nous sur BlueSky, LinkedIn, ou Mastodon.

Ces échanges sont pour moi le cœur d’une communauté qui construit un web meilleur, un site web à la fois.

Merci à Franck et Natacha pour leur relecture pour 24 Jours de Web.

Si vous avez cherché au moins une fois la différence entre UI (User Interface) et UX (User Experience), vous avez dû tomber sur 2 illustrations très connues : la bouteille de Ketchup, et le chemin tracé dans l’herbe. Ces illustrations sont même parfois partagées par des experts du domaine pour aider à comprendre la différence, mais pourquoi ?

Le meme autour de la bouteille de Ketchup

Voici l’image que vous avez certainement toutes et tous vu :

Derrière cette représentation se cache la volonté de représenter deux choses distinctes, l’une serait l’interface utilisateur brute, peu réfléchie avec la bouteille en verre, et l’expérience utilisateur une fois celle-ci « mise en place », et donc réfléchie, avec la bouteille en plastique.

C’est en tout cas l’objet initial du meme, et cela pourrait suffire pour faire comprendre l’expérience utilisateur à des personnes vraiment novices. Mais ça serait également faire passer un message complètement faux, puisque ces deux bouteilles sont des produits, et non des interfaces ou expériences.

La réalité derrière la bouteille de Ketchup UI vs UX

Je ne suis pas le premier à debunk cette image et cette explication. Bien que sur la volonté d’expliquer à des débutants la différence entre les deux pratique (UI et UX), je peux concevoir que l’illustration soit simple et agréable, elle a le défaut de faire circuler une vision restreinte du design et de sa complexité. Voire de manquer d’inclusivité. (au sens large)

Voici une tentative d’expliquer ce qui ne va pas dans cette représentation initiale, en distinguant un peu mieux les deux produits, les deux UI, et les deux UX possibles.

Hélas, une fois n’est pas coutume, cette représentation est biaisée, et nous fait rentrer dans ce que j’appelle personnellement « la beauté de l’UX ».

« Il n’y a pas de bonne ou de mauvaise » UX… avec le Ketchup

L’UX est un domaine qui inclut une phase de recherche afin de comprendre les individus, leurs usages, le contexte social et les interactions que ces individus ont entre eux ou avec le produit.

L’objectif de cette phase de recherche est de se débarrasser de ses propres biais cognitifs, et de se forcer à retourner à un stade où « on ne sait pas ce qu’on pensait savoir ».

Pour reprendre l’exemple de la bouteille de Ketchup, deux UX sont représentées, l’une semblant représentée un utilisateur énervé sur sa bouteille, et l’autre heureux de se servir. Cette représentation est biaisée puisqu’elle part du postulat que l’une est meilleure, ou moins frustrante que l’autre.

Un bon designer irait observer les usages dans différents contextes, ferait des tests avec les différents produits, ou UIs, pour vérifier que cette vision des usages n’est pas biaisée, voire il tenterait de prouver l’inverse du postulat initial, comme la méthode scientifique invite à le faire.

Lors d’une étude, nous relevons généralement plusieurs aspects, comme : le ressenti, les attentes, les objectifs, et l’accomplissement de la tâche. Il nous arrive aussi de faire des comparaisons et de collecter un feedback associé au souvenir de l’expérience quelques semaines/mois plus tard, mais plus rarement.

L’UI et l’UX de la bouteille de Ketchup en verre

À défaut d’aller embêter des utilisateurs en direct pour ce sujet, j’ai pris le temps de faire des recherches sur les cibles, les objectifs, les accomplissements et attentes, ainsi que sur le ressenti des personnes qui pourraient utiliser une bouteille de Ketchup en verre.

Cibles de la bouteille en verre

• Personnes qui versent une grande quantité de Ketchup sans trop de difficultés.
• Personnes qui cuisinent avec du Ketchup
• Personnes à la recherche d’un ambiance (style Dinner américain)

Objectifs de la bouteille en verre

• Éviter les pertes
• Verser rapidement

Accomplissement avec la bouteille en verre

• Verser du Ketchup (de manière imprécise)
• Verser beaucoup de Ketchup (de manière rapide)
• Récupérer l’ensemble du Ketchup en versant un peu d’eau dans la bouteille. (cuisine)
• Capacité à voir ce qui reste dans la bouteille.

Ressenti

• Old school.
• Souvenirs d’autres années.
• Plus économique.

Risques

• Fragile et risque de casser.
• Moisit plus facilement.
• Maîtrise faible du débit.
• Demande de la force à l’ouverture.
• Demande de la force pour secouer/extraire le contenu

Tout ceci représente des artefacts de l’expérience utilisateur que pourraient trouver ces cibles avec ce produit et cet « UI » sous forme de bouteille de verre.

L’UI et l’UX de la bouteille de Ketchup en plastique

Idem ici, j’ai pris le temps de faire des recherches sur les mêmes aspects que précédemment, mais en observant les usages et les arguments présentés à droite et à gauche.

Cibles de la bouteille en plastique

• Personnes qui ont des enfants.
• Personnes qui ont des difficultés à tenir les objets en main.
• Personnes qui utilisent le Ketchup comme condiment.
• Personnes qui cherchent un côté pratique.

Objectifs de la bouteille en plastique

• Verser précisément la bonne quantité.
• Conserver relativement longtemps la bouteille.
• Avoir un objet plus facile à ouvrir.

Accomplissement avec la bouteille en plastique

• Verser du Ketchup (de manière précise)
• Verser au bon endroit dans l’assiette.
• Fermeture/ouverture aisée.

Ressenti avec la bouteille en plastique

• Sécurisant
• Écologique

Risques de la bouteille en plastique

• Longueurs pour verser du Ketchup en grande quantité,
• Fragile, le bouchon casse en cas de chute et ne se ferme plus, mais moins de risque de perte du contenu.
• Verser trop de contenu en appuyant trop fort.
• Maîtrise relative du débit.
• Demande parfois trop de force de pression.
• Difficulté à connaître le restant du conteneur.
• Suivant les modèles, difficulté à vider l’ensemble du Ketchup.

Tout ceci représente des artefacts de l’expérience utilisateur que pourraient avoir ces cibles avec ce produit et cet « UI » sous forme de bouteille en plastique.

Alors, qui gagne le combat ?

Comme vous le voyez, certains items de ces listes vont à l’opposé l’un de l’autre, et certains ne sont juste pas comparables. Lorsque cela arrive, il s’agit probablement d’un positionnement pour les produits, notamment pour répondre à deux usages différents.

Les expériences utilisateurs sont donc différentes et adressent des problématiques distinctes. Il n’y a donc pas de gagnante à moins de vous positionner sur un usage plutôt qu’un autre.

Ce qui se dessine c’est que la bouteille en verre serait davantage utilisée par des restaurateurs, soit pour créer une ambiance (« dinner« ), soit pour cuisiner. Là où la bouteille en plastique serait plutôt utilisée par des particuliers.

Cela rejoint les discussions que j’ai souvent avec des confrères et consœurs sur l’UX « grand public » VS l’UX « Entreprise ». Les usages et les réponses à un problème donné ne seront pas nécessairement les mêmes en fonction du contexte. Les designers qui n’ont jamais connu l’Enterprise UX ont souvent du mal à considérer les solutions proposées à des utilisateurs experts comme de bonnes solutions, car ils sont biaisés par le besoin de tout simplifier et rendre opaque les interfaces. Un utilisateur expert aura à l’inverse besoin de plus d’information à l’écran, en même temps, pour prendre des décisions en un coup d’œil avec le moins d’opacité possible.

S’il y avait une chose à retenir sur ce Ketchup

Les expériences avec des produits peuvent être multiples, et la multiplication des User Interfaces (UI) permettent parfois de répondre au besoin de multiplicité des expériences (UX).

D’ailleurs, créer plusieurs versions d’une UI pour tester les avantages et inconvénients de chacune permet d’évaluer les usages et parfois trancher sur une interface plus concluante. C’est une petite partie du processus de design.

Dans notre cas, si les deux produits (verre et plastique) sont encore en vente, c’est qu’ils répondent bien à des cibles et usages différents.

Entre les termes à la mode, comme la Product Discovery, et les anciens termes que l’on se traîne depuis des années, comme UCD (User Centered Design) et le Double Diamant, il est temps de faire place au concept de recherche utilisateur que vous rencontrerez forcément dans toutes les sociétés qui pratiquent le design : Y.O.L.O

Y.O.L.O – On ne vit qu’une fois, une approche essentielle

YOLO, de l’expression anglophone « You Only Live Once« , est souvent utilisée pour encourager à profiter pleinement de la vie, à prendre des risques et à vivre des expériences sans regret, car on n’a qu’une seule vie à vivre.

Tiré de l’approche initiale de l’expression, ce cadre de travail retrace ce que chaque designer devrait faire le plus tôt et rapidement possible : arrêter de trop réfléchir, et analyser sur le terrain pour que la théorie rentre en conflit (ou en harmonie) le plus rapidement possible avec la réalité du terrain.

La règle générique derrière cette approche est la suivante : vous allez vous planter, alors autant le faire tôt et revenir sur votre copie pour l’améliorer après avoir tiré des enseignements précieux de vos erreurs. Mieux vaut mettre en production 10 fois, et corriger 10 fois, que tourner un problème 30 fois dans sa tête avant de se décider.

Le framework de design Y.O.LO.

Derrière le nom se trouve un framework dont la nature première est de ne pas forcément le suivre dans l’ordre, exactement comme n’importe quel processus de design.

Vous trouverez derrière chaque lettre un aspect important qui vous permettra de tendre non pas vers l’excellence, mais vers un acceptable au dessus de la médiocrité ambiante du web d’aujourd’hui.

Y – Yodler la Créativité : Cette étape encourage les designers à laisser libre cours à leur créativité sans inhibition. Il s’agit d’embrasser des idées non conventionnelles et d’explorer des solutions originales sans être limité par les normes ou les attentes traditionnelles. Les designers sont encouragés à brainstormer, à esquisser et à idéer sans jugement, permettant l’émergence de concepts innovants.

O – Ouvert aux Retours : Les designers restent ouverts aux retours tout au long du processus de conception. Cela implique de solliciter activement les avis des utilisateurs, des parties prenantes et des coéquipiers à différentes étapes de l’évolution du design. En étant ouverts aux retours, les designers peuvent obtenir des insights précieux, identifier des problèmes potentiels et affiner leurs conceptions pour mieux répondre aux besoins et aux attentes des utilisateurs.

L – Lancer l’Innovation : Cette étape encourage les designers à prendre des sauts audacieux dans l’innovation et l’expérimentation. Il s’agit de repousser les limites, de prendre des risques et d’explorer de nouvelles possibilités qui ont le potentiel de perturber les normes ou les conventions existantes. Les designers sont encouragés à remettre en question les hypothèses, à explorer des territoires inexplorés et à poursuivre des idées ambitieuses qui ont le potentiel de créer un impact significatif.

O – Optimisation Organique : Dans cette étape, le processus de conception est caractérisé par un raffinement continu et itératif basé sur les retours et les insights obtenus tout au long du parcours de conception. Les designers adoptent une approche flexible et adaptative, permettant au design d’évoluer de manière organique au fil du temps. Les itérations sont basées sur des tests utilisateurs, des analyses de données et des prototypages itératifs, garantissant que le design final est informé par l’utilisation réelle et les retours. L’aspect organique ? Vous allez vous planter dans tous les cas, alors autant le faire tôt et corriger le tir rapidement.

Si je devais synthétiser, Y.O.L.O est une approche de conception qui encourage la créativité sans inhibition, l’ouverture aux retours tout au long du processus, la prise de risques audacieuse dans l’innovation, et le raffinement continu basé sur les insights et les retours utilisateurs. En combinant ces éléments, la méthode YOLO vise à créer des designs centrés sur l’utilisateur qui sont à la fois imaginatifs et efficaces, tout en encourageant à profiter pleinement de l’expérience de conception et de la vie elle-même.

Comment appliquer Y.O.L.O au quotidien ?

Voici quelques conseils pour un ou une designer qui souhaite appliquer la méthode YOLO au quotidien dans son travail, ainsi que les points d’attention que cette personne devrait avoir :

1. Cultivez la créativité sans peur : Encouragez, vous et vos collègues, à explorer des idées audacieuses et non conventionnelles. Ne craignez pas de sortir des sentiers battus pour trouver des solutions innovantes.
2. Restez ouvert aux retours et aux critiques : Soyez réceptif aux retours des utilisateurs, des collègues et des parties prenantes. Utilisez ces retours comme des opportunités d’apprentissage et d’amélioration, même s’ils remettent en question vos idées préconçues.
3. N’ayez pas peur de prendre des risques calculés : Cherchez activement des opportunités d’innovation et ne craignez pas de sortir de votre zone de confort. Tout en prenant des risques, assurez-vous de les évaluer de manière réfléchie et de tirer des leçons de vos expériences, qu’elles soient positives ou négatives.
4. Pratiquez l’itération continue : Adoptez une approche itérative de la conception, en faisant des ajustements et des améliorations continus tout au long du processus. Utilisez les retours et les données pour guider vos décisions et affiner votre travail de manière organique.
5. Trouvez un équilibre entre innovation et faisabilité : Tout en encourageant l’innovation, gardez à l’esprit les contraintes de temps, de budget et de ressources. Cherchez des solutions novatrices qui sont également réalisables dans le contexte donné.
6. Restez engagé dans votre passion et votre objectif : Gardez à l’esprit l’importance de profiter pleinement du processus de conception et de rester connecté à votre passion pour créer des expériences utilisateur exceptionnelles.

En appliquant ces conseils et en restant attentif aux besoins des utilisateurs et aux objectifs du projet, vous pouvez intégrer avec succès la méthode Y.O.L.O dans votre travail quotidien en tant que designer.

Quel avenir nous réserve le framework Y.O.L.O ?

Même si certains designers pourraient ne pas être conscients de l’application directe des principes de YOLO dans leur travail, ceux-ci sont souvent présents de manière implicite. YOLO offre un cadre pour encourager l’exploration et la créativité, même dans des contextes où le processus de conception suit des méthodologies plus traditionnelles.

Les designers sont constamment confrontés à des défis uniques et à des problèmes complexes qui nécessitent des solutions originales et innovantes. Même lorsque des approches méthodiques sont utilisées, il est souvent nécessaire de sortir des sentiers battus pour trouver des réponses efficaces et adaptées aux besoins des utilisateurs.

L’idée de YOLO comme cadre exploratoire rappelle aux designers l’importance de rester ouverts à de nouvelles idées, de ne pas craindre l’échec et d’être prêts à prendre des risques calculés pour atteindre des résultats exceptionnels. Cela encourage également à ne pas être trop rigide dans l’application stricte de méthodologies préétablies, mais plutôt à les adapter de manière flexible en fonction des exigences spécifiques du projet et des objectifs de conception.

En reconnaissant l’essence fondamentale de YOLO comme un appel à l’exploration et à l’innovation, les designers peuvent mieux comprendre comment ces principes influencent leur travail, même s’ils ne sont pas explicitement étiquetés comme tels. Cela leur permet de saisir pleinement les opportunités créatives et de repousser les limites de ce qui est possible dans le domaine du design.

Et si on vous avait menti depuis le début ?

Le problème de cet article, c’est qu’il prend du réel (pour les designers qui ont senti un vent de réalité, bienvenue au club) pour tourner le concept de user-centricity en dérision. Vous l’aurez bien compris, même s’il y a plein de bonnes idées dans ce cadre Y.O.L.O, il ne s’agit pas d’un cadre sérieux

Malgré cela, je tiens à vous faire réfléchir sur tous les nouveaux concepts que l’on voit fleurir à droite et à gauche, notamment ceux qui vous font découvrir le principe de « découverte », ou l’ensemble des cadres trop strictes qui vous décrivent des étapes bien précises à suivre. La réalité du terrain est bien autre, et souvent, accepter de faire des erreurs, et faire ces erreurs, vous enseigneront bien plus que tourner le problème trop long dans des phases de réflexion.

Peut-être que le cadre Y.O.L.O n’est pas si caricatural finalement…

Il y a beaucoup de services qui se vendent comme ergonomiques et utilisables. Si vous allez sur chacun des sites web mentionnés dans ce titre, c’est certainement ce que chacun mettra en avant. La réalité est toute autre, surtout si comme moi, vous avez décidé d’être auto-éditeur, et tout faire par vous-même.

Les premières questions que vous vous poserez seront certainement autour de l’organisation de votre projet d’écriture. Mais je vais vous parler surtout de la manière de publier sur ces plateformes.

Navré pour cette fois donc. Cet article va se concentrer sur les formats attendus et les difficultés et spécificités de chaque plateforme. Il s’agit de ma propre expérience lors de ces différentes publications. J’écrirai un autre article sur les outils pour écrire, sous la forme d’une liste non exhaustive.

Auto-édition : y a-t-il un format d’e-book universel ?

C’est la première question que je me suis posé.
La dernière fois que j’avais vérifié avant ma première expérience de rédaction d’un e-book, les formats .epub et .mobi se tiraient la bourre.

En lisant les différentes documentations d’Apple, Google, Kobo et Amazon, je me suis rendu compte que le format accepté par chacun était soit un format .docx, soit un format .epub.

Vous pouvez donc totalement vous lancer dans l’écriture d’un manuscrit avec Word, si le cœur vous en dit. Personnellement, j’avais besoin de pouvoir :

• réorganiser mes contenus facilement en drag & drop de sections et chapitres,
• proposer à des personnes de relire des bouts et commenter.
• prendre des notes sur mes propres contenus.
• créer un thème .epub qui n’explose pas au premier export/import

J’ai donc exploré les outils mettant ces fonctionnalités en avant. Je suis resté sur l’outil Atticus, qui contrairement à ce que vous pourriez penser, ne propose pas toutes ces fonctionnalités. Cependant il présente bien d’autres avantages dont je parlerai dans un autre article.

Le format epub compatible avec Google, Apple, Amazon Kindle, Kobo et Fnac

Le format epub semble être le terrain d’entente entre les différents acteurs les plus connus du marché. J’ai donc décidé de trouver un outil qui me propose ce format en sortie.

J’ai été étonné de découvrir que Word et Google Doc permettaient tous les deux de faire un export sous ce format. Mais je me questionnais de la qualité du document en sortie. Ayant l’habitude des éditeurs « what you see is what you get » qui pondent un code HTML tout moisi, je me suis dit que Microsoft et Google n’étaient pas à l’abris d’un échec.

C’est donc sous ce format epub que j’ai souhaité faire un export de test sur ces deux plateformes. C’est également sur ce format et la qualité du thème que j’ai mis l’accent lors du choix de mon outil.

Prenez le temps de tester rapidement la qualité du rendu sur les plateformes. Le mieux étant d’avoir un thème de base suffisamment fluide pour conserver les possibilités d’ajustement de taille de texte, police d’écriture, espacement, etc.

Bref, tout ça pour vous dire que Google et Microsoft sont un peu à la ramasse là-dessus. J’ai alors décidé de tester plein d’autres outils dont je vous parlerai dans un autre article.

Assurez-vous simplement que l’export soit toujours compatible epub 3.0. Draft2digital propose un outil plutôt efficace pour cela d’ailleurs. Il y a le site officiel du W3C qui propose un outil en ligne de commande également.

De Kobo à Fnac, une affaire qui marche

Kobo appartient depuis un moment maintenant (autour de 2011) au groupe Rakuten qui a racheté la liseuse de la Fnac. Cependant, le lien entre les deux entités n’a jamais été aussi fort du côté de la distribution des ebooks.

En effet, la distribution s’est faite 2 jours après avoir fait valider mon ebook par Kobo. Le site de la Fnac l’a affiché sans avoir besoin de faire quoi que ce soit. Si vous êtes contre cette distribution sur leur site, vous pouvez toujours en faire la demande par e-mail. (vous aurez les informations au moment de soumettre votre livre à Kobo)

Kobo a également été l’outil qui m’a demandé le moins de fil à retordre pour la publication sur leur plateforme. Je l’ai même fait sur mon smartphone en moins de 15 minutes.

Publier sur Kobo (puis Fnac) :

1. RDV sur writinglife.kobo.com et créez un compte
2. Cliquez sur « Créez un nouvel eBook » et laissez-vous guider
3. Au niveau description de l’ebook :
   1. rien de particulier si ce n’est que l’ISBN est optionnel, mais je vous conseille d’enregistrer le vôtre dans votre pays. (FR, LU, BE, CA)
   2. Préparez bien ces contenus qui seront demandés pour toutes les soumissions,
   3. Vous pouvez toujours sauvegarder et revenir plus tard
4. Au niveau de l’ajout du contenu de l’ebook :
   1. Si vous êtes passé par un epub checker sans faute, pas d’inquiétude
   2. Si ce n’est pas le cas, l’outil va vous prévenir des erreurs éventuelles
   3. Corrigez-les car là où Kobo est permissif, Apple le sera bien moins.
5. Enfin laissez-vous guider pour le reste des étapes.
6. Pour une publication sur Fnac, rien à faire, attendez quelques heures ou jours.

Et voilà, c’est tout bon pour le premier.

Amazon Kindle supporte l’epub

On m’a souvent dit qu’Amazon est très stricte sur le format epub attendu. Je n’ai personnellement eu aucun problème pour avancer dans leur formulaire. La publication s’est faite sans encombres.

Préparez un peu de contenu pour créer votre profil auteur. La réclamation de votre profil se fait un peu à l’ancienne en passant par un processus de validation par e-mail. Mais c’est globalement relativement fluide ; juste un poil surprenant.

Dans mon cas, je souhaitais créer une série de livres, et j’ai dû également proposer quelques données que je n’avais pas prévu pour les réglages de cette série. Mais rien de sorcier.

Amazon m’a sorti la même erreur d’analyse de l’epub que fera Apple, mais ne m’a pas bloqué dans la publication, certainement car l’erreur n’était pas critique.

Amazon, la page auteur

Important pour le profil auteur : c’est une démarche indépendante de la publication du livre, c’est à vous de réclamer cette page sur Author.amazon.com. Cependant, après la publication de votre premier livre, Amazon devrait vous envoyer les e-mails utiles pour votre inscription.

Cette page peut être pratique puisqu’elle rassemble vos publications en un seul endroit, et permet de proposer votre biographie dans différentes langues si comme moi vous avez l’intention de publier pour différentes cibles. Prenez un peu de temps pour la peaufiner, quand le reste est fini.

Apple Book, certainement les pires formulaires du monde

Et encore, je suis sympa, car il n’y a pas que les formulaires qui rendent le processus de publication sur Apple Book complexe.

Apple : recherche où publier l’ebook

L’aventure – parce qu’il s’agit vraiment de ça – commence sur une simple recherche « Publier un ebook sur Apple book », sur Google.com. Les résultats étaient tellement inadéquats que je suis passé en Anglais pour tout le reste du processus.

« Publish an ebook on apple books » m’a dont conduit sur le site d’Apple. Vous apprendrez dessus que vous pouvez publier depuis Pages, Word ou Epub, et qu’il faut globalement utiliser iTunes Connect. Personnellement je n’avais jamais entendu parler de ce service.

J’ai dû suivre deux pages différentes pour m’amener enfin à iTunes Connect. Une fois les péripéties de l’identification terminée (environ 15 min car Apple voulait forcer un reset de mot de passe) vous finissez sur le site web suivant.

Ma première question sera : où vais-je pour publier un livre ? Le réponse logique serait dans « My Books » bien sûr, sauf si vous voyez un autre endroit. Je vais donc dans My Books.

Je vous avoue qu’à ce stade là, je me sens un peu stupide et décide d’explorer les autres sections qui n’auront aucune réponse à m’apporter pour mon objectif premier : téléverser mon livre.

Taxes et accords de publication

Je tombe malgré tout sur la section Agreements, Tax and Banking, où nombre de messages m’indiquent qu’il faut que je complète des documents. Ce que je fais non sans peine, notamment sur la partie « banking » où le système bancaire américain vient se mêler à celui de l’Europe.

J’ai passé 2h avec le support d’Apple pour documenter un problème rencontré pour me faire dire que je ne savais pas trouver mon numéro de compte, alors que le problème venait d’un message d’erreur lui-même erroné sur leur interface. C’est pas comme si le bouquin que je voulais mettre en ligne traite justement de la qualité des formulaires web

Je n’ai hélas pas pensé à prendre de captures d’écran à ce moment, mais trouver le « Code Banque » était épique. Je vous conseille très largement d’utiliser le petit lien discret sous ce champ qui ouvre en réalité un formulaire de recherche par adresse et nom de banque. Bon courage.
Les autres documents pour Agreements et Tax sont longs, mais pas contraignants à remplir.

Félicitations ! Une fois ces étapes passées, vous avez fait toute la paperasse utile, mais n’avez toujours aucun indice sur comment upload votre ebook.

La page de publication chez Apple

Par chance, je me suis souvenu que sur la première page visitée le format EPUB figurait quelque part. J’y suis donc retourné.

D’ici, je n’ai même pas lu la documentation et j’ai suivi le premier lien nommé « publishing portal« .

Ce portail affiche un énième formulaire de connexion, puisque utiliser mes identifiants et ma session déjà ouverte semble trop complexe pour Apple.

Ah oui, autant vous dire que ce que vous voyez à l’écran ne sont pas des boutons, mais des choix. Cliquez ensuite sur Continue pour avancer dans le processus. Avec un peu de chance Apple vous reconnait, autrement il faudra vous identifier à nouveau.

Vous avez ensuite accès au seul lien et page que nous cherchons ensemble depuis le début. La page de publication d’un livre, ou de création d’un espace de pré-commande. À ce stade, nous sommes totalement en droit de nous demander pourquoi Apple n’a pas mis un lien de l’espace « My Books » vers cet outil de publication, n’est-ce pas ?

Le reste devrait se faire sans trop d’encombres si vous avez utilisé les outils de publication du format epub de votre outil. De mon côté, j’ai eu un problème de validation du format epub et j’ai dû passer 1h avec le support pour finalement donner la solution au support d’Apple qui s’est avéré être incompétent.

En cas d’erreur sur votre fichier, vous aurez le droit à un rapport technique qui vous donne l’origine de l’invalidation. Utilisez ce rapport pour chercher dans votre fichier grâce à un outil de type Sigil. En général le rapport d’Apple vous donne le nom du fichier et le numéro de la ligne qui pose problème.

Résumons : publier chez Apple Books

Publier votre ebook sur Apple :

1. Connectez-vous ou créez un compte iTunes Connect.
2. Renseignez les informations de banque et autres joyeusetés.
3. Rendez-vous sur l’espace de publication avec votre epub.
4. Vous retrouverez les informations de publication sur iTunes Connect section My Books.

Ne vous étonnez pas si la publication sur les Stores est au rouge partout au début, il leur faut au moins 24h pour publier. Pour les tarifs, je vous conseille de suivre les recommandations d’Apple.

Google Book, des frontières toujours plus épaisses

Google propose un un joli site web plutôt pratique pour mettre en vente un e-book, si comme moi vous n’êtes pas dans un cas particulier entre deux frontières géographiques.

Commencez par vous identifier avec votre compte Google, et passez les deux premières étapes qui vous demandent des informations très sommaires comme votre nom d’éditeur après avoir sélectionné « Self published author » (ou « Auteur auto-publié » en Français, certainement).

Une fois le choix effectué vous aurez une étape de préférence de communication et d’acceptation des termes et conditions. Une redirection vers votre dashboard vide devrait se faire, vous invitant de manière très guidée à compléter votre profil pour anticiper le besoin de déclarations fiscales et toucher vos revenus avec le moins d’imposition possible. Je vous conseille fortement de commencer par cela avant de publier votre livre.

Je ne vais pas rentrer dans le détail de ces trois premières étapes de paperasse, comme chaque cas va être assez particulier, j’imagine. Mon cas l’était particulièrement

Attaquons la publication du livre, il y a quelques astuces cool qui vous permettent de publier rapidement, puis d’améliorer dans un second temps.

Encore une fois à cette étape, je recommande vraiment que vous enregistriez votre livre à votre propre nom auprès de l’organisme adéquat pour l’obtention d’un ISBN. Google peut vous en fournir un, mais vous ne pouvez ensuite plus vendre votre livre ailleurs. Entrez votre ISBN à cette étape

Une fois l’ISBN renseigné, vous allez pouvoir passer au travers de 5 étapes clés, dont certaines iront très vites, notamment si vous n’avez pas prévu de série dans l’immédiat. Personnellement, je n’ai pas eu de difficultés pour l’ensemble de ce formulaire.
Sachez simplement que vous pouvez revenir sur l’ensemble de ces données à n’importe quel moment, même après publication (sauf les dates je crois de mémoire).

Le bonus avec Google, c’est qu’une fois votre livre numérique publié, vous pouvez auto-générer une livre audio avec les voix de votre choix. J’ai trouvé cette fonctionne assez puissante, et j’ai décidé de les tester pour mes livres.

Publication sur mon propre site web

Étonnamment, je n’ai eu aucun problème à publier mon livre et toutes ses ressources complémentaires sur mon propre site web.

Mais je ne vais pas vous expliquer comment faire, juste que c’est vraiment rapide. Pour les personnes qui m’ont demandé, ou qui pourraient passer par là et se poser la question, j’utilise Payhip pour le moment.

C’est un excellent moyen de démarrer rapidement un petit business pour vendre des cours et produits numériques selon moi. Il a ses limites et bugs comme tout produit, mais il a l’avantage d’être gratuit tant que vous ne vendez rien (pourcentage sur les ventes).

Le livre physique sur Amazon

Sur demande d’une partie de mon futur lectorat, j’ai publié le livre en édition physique.
Cette édition demande son propre ISBN, mais Amazon peut vous en fournir un. Attention cependant, si Amazon vous le fournit, vous n’avez théoriquement pas le droit de vendre le livre via une autre plateforme, car elle devient votre distributrice officielle.

C’est là où l’export d’Atticus, logiciel dont je vous parlerai plus tard, est intéressant. Je vous ferai certainement un détail de mon processus de publication dans un autre article.

Mais en gros je me suis fait un petit script en PHP disponible sur Github qui me permet de générer une page HTML à partir du fichier de sauvegarde JSON de l’outil. C’était pour moi logique de partir de ce format pour générer un fichier PDF accessible disponible avec le livre numérique que je vends.

En faisant un simple CTRL+P sur Chrome, je peux exporter un format quasi accessible. Il ne me reste plus qu’à faire tourner une petite moulinette de contrôle sous Adobe Acrobat pour corriger les derniers détails. (Chrome retire la langue déclarée de la page pour une raison que j’ignore, par exemple)

Quelques défauts de la norme ?

J’ai également voulu utiliser cet export pour faire d’une pierre deux coups et préparer le PDF pour l’impression sur Amazon. Autant vous dire que j’ai eu l’occasion de replonger dans les méandres des Paged-media en CSS.

Cependant, à ma grande déception, beaucoup des fonctionnalités prévues par le W3C pour le media print ne sont absolument pas prises en charge par les navigateurs modernes encore aujourd’hui. J’ai donc regardé du côté de JavaScript pour résoudre le problème de support navigateur, et je suis tombé sur Paged.js qui est très prometteur, mais difficile à prendre en main dans mon contexte.

Les guides Amazon

Amazon fournit pas mal d’outils pour faciliter la mise en page et améliorer la qualité du rendu de votre format papier. Il va cependant falloir lire pas mal sur les différences entre les multiples options proposées. Mais globalement vous serez assez bien guidés.

Mais, je préfère vous le dire tout de suite : la préparation des fichiers pour l’impression prend un temps fou, alors je vous conseille grandement de rester sur un format numérique dans un premier temps.

C’est tout pour le moment, restez en ligne pour les prochaines aventures, et merci pour votre soutien dans mon aventure d’auto-éditeur.

Derrière ce titre racoleur se cache un ouvrage dont le contenu a été rassemblé et structuré sur plusieurs années. Ce livre vous propose de découvrir et redécouvrir les bonnes pratiques et les erreurs encore très courantes qui nuisent à l’expérience utilisateur et peuvent, plus souvent que vous ne l’imaginez, vous faire perdre de l’argent et des opportunités.

Découvrez un monde fascinant où l’ergonomie, l’accessibilité et la performance se conjuguent pour façonner l’expérience de l’utilisateur. Dans ce livre, je vais partager avec vous les secrets pour créer des formulaires qui captivent, convertissent et satisfont vos visiteurs.

Synopsis du livre « Formulaires Web »

Chaque jour, des milliards de personnes naviguent sur le web à la recherche d’informations, de produits ou de services. Au cœur de cette expérience numérique se trouvent les formulaires web, ces petites boîtes de dialogue qui nous demandent de remplir nos informations. À première vue, ils semblent simples, mais détrompez-vous : ils sont le pont entre vos visiteurs et vos objectifs en ligne.

Après 14 ans à plonger dans l’univers complexe des formulaires web, j’ai découvert un monde fascinant où l’ergonomie, l’accessibilité et la performance se conjuguent pour façonner l’expérience de l’utilisateur. Dans cet ebook, je vais partager avec vous les secrets pour créer des formulaires qui captivent, convertissent et satisfont vos visiteurs.

Imaginez un formulaire qui semble anticiper les besoins de l’utilisateur, qui réduit les erreurs de saisie, qui se charge rapidement sur tous les appareils et qui accueille chaque visiteur, quel que soit son handicap. C’est possible, et c’est exactement ce que nous allons explorer ensemble.
Que vous soyez un professionnel du web, un entrepreneur ou simplement curieux de découvrir les coulisses de la conception des formulaires web, ce livre est fait pour vous. Préparez-vous à plonger dans le monde passionnant de l’ergonomie et de la qualité des formulaires web, où chaque détail compte et où chaque amélioration peut transformer l’expérience de vos utilisateurs.

Êtes-vous prêt à découvrir les secrets des formulaires web qui font la différence ? Alors, plongeons ensemble dans ce voyage captivant vers l’accessibilité, la performance et l’excellence !

À qui s’adresse ce livre ?

En écrivant ce livre j’avais pour idée de m’adresser principalement aux designers, développeurs et développeuses, et chefs et cheffes de projet ou Product Owners. Ces profils partagent, pour moi, la responsabilité de l’expérience utilisateur autour du développement de solutions numériques (site web ou application). Certainement parce que je suis passé par les ces profils au cours de ma carrière.

La réalité est toute autre, et tant mieux.

Après une semaine de lancement, mes lectrices et lecteurs m’ont déjà offert des retours de lecture très enrichissants. En dehors des typos restées à droite ou à gauche (ça arrive à tout le monde j’imagine ) j’ai pu avoir le retour de développeurs back-end, d’une Business Owner et d’une experte en marketing qui ont, à la lecture des premiers chapitres, appris des choses intéressantes chacun et chacune à leur niveau.

Le premier feedback qui m’a été partagé sur la cible du contenu est lui suivant :

Je trouve le contenu utile pour tous les professionnels qui cherchent à créer des formulaires orientés client et qui ont aussi une vision « business » puisque tout ce que tu expliques impacte l’expérience, les conversions et donc les chiffres. Tu vises un public très large et ton contenu est adapté/bien expliqué.
—Dondu Karabinar

C’est toujours mieux avec les termes propres aux lectrices et lecteurs, et cela vous aidera peut-être à évaluer si ce livre est fait pour vous. Merci Dondu pour ton honnêteté

Je mettrai à jour cet article au fil des retours.

Contenus, chapitres et taille du livre

En l’écrivant, je n’ai pas compté les pages, les mots, je n’avais pas vraiment d’objectif chiffré, je souhaitais principalement ne pas être trop long, et éviter les débats d’opinion. Mon objectif est d’apporter une approche consistante et cohérente sur le sujet de la création et l’amélioration de formulaires web, simples ou complexes, pour vous donner des clés de réflexion et un retour sur mes 14 ans d’expérience.

Ce livre permet aussi de grandement compléter la checklist de qualité web sur le formulaire publiée fin 2022.

Au final, ce livre représente en chiffres :

• 250+ pages format A4 (356 pages « livre numérique » estimées par Amazon)
• 13 chapitres principaux
• 42 000 mots
• 2 formats : ePub et PDF accessible
• Une version papier est disponible sur Amazon.

Du côté du contenu, vous parcourez ces différents chapitres sur un air de franchise, de discussion et de propositions accessibles, qualitatives et argumentées. Sans vous offrir un plan exhaustif, nous passerons ensemble par :

1. Les définitions possibles d’un formulaire web
2. Les expériences sur un formulaire web
3. Exemples de mauvais usages, de la réalité à l’absurde
4. Autour du formulaire : existant, formation, et service.
5. Retour sur les bases ergonomiques d’un champ
6. Découvrez de nouveaux types de champ et fonctions
7. Formulaires types et solutions types
8. De l’importance de la recherche utilisateur
9. Le suivi et la mesure
10. Rendez vos formulaires accessibles : définition et solutions
11. Quelques cas d’usage : challenges et esprit critique

Pour écarter tous les doutes sur la nature du contenu et sa difficulté d’appréhension, voici un feedback d’une ancienne collègue et experte en marketing.

[…] contenu très accessible (même pour moi qui suis marketer), au début je me suis dis « oula 254 pages, peut-être que ça va être long pour du simple formulaire », au final pas du tout !

Merci beaucoup pour ton partage de retour de lecture de ces premiers chapitres

Découvrir le livre

Un grand merci également à mes contributeurs et contributrices visibles et moins visibles :

• Stéphanie Walter pour la préface,
• Alexis Degryse pour une partie de la relecture,
• Michaël Crofte pour une autre partie de la relecture,
• Et toutes les personnes dont je cite les témoignages et expérience dans ce livre.

Comment acquérir ce livre ?

Le livre vient, pour le moment, en 2 formats si vous l’achetez via ma propre boutique officielle, ePub et PDF. Il peut également venir accompagné de sa checklist au format PDF imprimable, si vous souhaitez l’appliquer dans un contexte professionnel sur un projet en cours ou à venir.

Il peut également, depuis le 21 décembre, être acheté au format Kindle que je n’ai moi-même pas encore pu tester. (Merci Amazon )

Jusqu’au 15 janvier 2024, ma boutique officielle propose un tarif à 11,25 € pour la version avec Checklist, et 7,50 € avec le livre en deux formats. Profitez-en ! Vous pouvez également bénéficier de 15% supplémentaires si vous recommandez le livre ou recommandez le kit à une personne.

Acheter le livre

Ah ! Et une dernière chose : je tiens à proposer ce livre au meilleur tarif suivant votre situation. Si vous êtes dans une situation temporairement désagréable financièrement, contactez-moi pour que je vous fasse une offre plus adaptée (aucun jugement de ma part, je suis passé par là)

Bonne lecture à vous, et n’hésitez pas à me partager vos avis de lecture pour que j’améliore ce livre.

Lorsque la conception et le développement d’une application mobile atteignent leur point culminant, une question cruciale se pose : quand est-il judicieux de solliciter les utilisateurs pour une « In-App Review », cette opportunité tant attendue de recueillir des avis sur les plateformes App Store d’Apple ou Android ? Découvrez dans cet article comment déterminer le moment propice pour cette démarche et les précautions à prendre pour maximiser son impact.

L’importance du bon moment

Trouver le bon moment pour demander aux utilisateurs et utilisatrices de votre application de laisser un avis peut faire toute la différence dans la perception et la popularité de votre application. Lorsque les utilisateurs sont engagés, satisfaits et au cœur de leur expérience, ils sont plus enclins à fournir des avis positifs et constructifs. Cependant, une sollicitation inopportune pourrait entraîner l’effet contraire, générant des avis négatifs basés sur des moments de frustration ou d’irritation. Il est donc crucial d’identifier les moments où vos utilisateurs et utilisatrices sont les plus susceptibles de se sentir satisfaits et d’apprendre à tirer parti de ces instants pour solliciter leurs retours.

A contrario, il est également très important de collecter de manière efficace les retours négatifs, les critiques, et apprendre à les utiliser pour améliorer votre application, version après version.

Quelques aspects techniques concernant l’In-App Review

Apple et Android placent entre les mains des développeurs d’application une fonctionnalité qui permet de faire remonter une fenêtre modale au sein de l’application, qui permet à l’utilisateur de l’app de noter et commenter sur l’Apple Store ou le Google Play Store sans jamais quitter l’application.

C’est un module bien pratique qui améliore grandement l’expérience des joueurs et joueuses ou des utilisateurs et utilisatrices de votre application. Cependant, par mesure de sécurité et de respect des personnes utilisant l’app, les deux constructeurs ont ajouté quelques éléments limitant à prendre en compte :

• iOS comme Android ne donnent aucune information de retour sur les actions de l’utilisateur : vous ne saurez pas si la modale apparait bien, si la personne a abandonné, terminé, et encore moins la note et le commentaire laissé. Vous découvrirez ces derniers une fois validés par le Store.
  
• À l’appelle de la fonction pour demander une review, c’est le système qui décide s’il affiche la fenêtre modale de notation. Autrement dit, évitez de créer une fenêtre modale dans votre application qui dirait quelque chose comme « Acceptez-vous de laisser une commenter ? » avec comme bouton d’action « Commenter sur le store » car potentiellement cette action ne déclenchera tout simplement rien.
  
• Apple limite dans tous les cas le nombre d’occurrences à 3 par an. Vous ne pourrez donc pas harceler les utilisateurs pour obtenir des notes. Mais vous n’en aviez pas l’intention, donc tout va bien ;p

Expérience Utilisateur : le bon moment pour demander une revue sur le store

Tout réside dans l’instant où vous demandez une revue de votre application. Le mieux que vous puissiez faire dans un premier temps, c’est définir ces moments d’expérience, qu’ils soient positifs ou négatifs, pour mieux définir le cheminement potentiel de vos utilisateurs, et donc leur état d’esprit. Rentrons un peu dans le détail.

Expérience utilisateur fluide dans l’application

Assurez-vous que l’expérience utilisateur soit fluide et sans problèmes majeurs avant de demander une In-App Review. Les utilisateurs insatisfaits d’éventuels bugs ou de dysfonctionnements seront moins enclins à laisser un avis positif.

Pour cela, captez les moments négatifs de vie de l’application, ou les bugs, et évitez à tout prix de demander une revue après ces moments. Par exemple, si vous captez les erreurs de chargement, ou les plantages de vos serveurs, désactivez les demandes de revue après ces événements.

Moment de réussite : le bon moment pour demander une review

Identifiez les moments où les utilisateurs ont accompli avec succès une action importante dans l’application, comme la réalisation d’une tâche difficile ou l’atteinte d’un objectif. Ces moments de réussite sont propices à une demande d’avis, car les utilisateurs sont généralement de bonne humeur et satisfaits de leurs accomplissements.

Comme pour les événements négatifs, il est important de créer une cartographie des événements clés positifs de l’expérience utilisateur, et solliciter ce dernier lorsque vous avez l’assurance qu’un de ces événements s’est bien produit.

Enfin, le dernier type d’attention associé au « bon moment », c’est de savoir si votre utilisateur est en train d’effectuer une tâche. En effet, vous ne devez jamais interrompre vos utilisateurs pour leur demander leur avis, vous ne feriez que vous tirer une balle dans le pied.

Pour résumer : préférez un moment en fin de parcours, pour un parcours utilisateur qui s’est avéré positif (réalisation d’une tâche sur un outil de gestion de projet, terminer un niveau dans un jeu, vérifier le remboursement d’une dépense de santé dans une app s’assurance, etc.)

Limiter la fréquence de la demande

Évitez de solliciter trop fréquemment les utilisateurs pour des avis. Une demande répétitive peut agacer et diminuer l’expérience utilisateur et les notes qui vont avec. Tenez compte de la fréquence idéale en fonction de votre public et du rythme d’utilisation de l’application.

Par exemple, demander un avis 1 fois tous les 6 mois peut paraître plutôt bien rythmé pour une application utilisée quotidiennement. Cependant, si votre application est plutôt vouée à être utilisée ponctuellement, cela peut donner un sentiment d’agacement. Le mieux reste d’évaluer le rythme d’utilisation de chaque utilisateur et utilisatrice pour évaluer à quel moment afficher une demande de commentaire.

Dans tous les cas, vous serez limité à 3 demandes par an, ainsi qu’une évaluation propre par le système qui décidera s’il affiche la requête de notation ou non.

Rendre l’évaluation optionnelle

Assurez-vous que la demande d’avis reste optionnelle. Les utilisateurs et utilisatrices doivent sentir qu’ils ont le choix de laisser ou non un commentaire. Forcer les avis peut créer des réactions négatives et une perception de manipulation. (appelée en psychologie « la réactance« )

Le design de l’In-App Review proposé par Android et Apple respecte cette règle, laissant la possibilité d’annuler/fermer la modale qui s’ouvre pour demander un avis. Cependant, il est peut-être déjà trop tard lorsque celle-ci apparait et l’utilisateur pourrait déjà laissé un avis négatif par réactance et agacement.

C’est pourquoi je conseille toujours d’avoir un écran « tampon », qui va collecter les énervements avant publication sur l’app store.

Notez l’utilisation sur cette interface de 2 actions possible : « Pas vraiment » (Not really) et l’équivalent de « J’aime » (I do!). Dans le cas ou l’utilisateur activerait l’un où l’autre bouton, il est important d’enregistrer l’avis pour prendre action. Je propose même souvent la collecte d’un commentaire à l’activation de « Pas vraiment », pour améliorer l’app. L’option « J’aime » devrait en théorie déclencher l’apparition de la modale de notation, mais comme je vous le disais plus haut, vous n’avez pas la maitrise de l’activation de cette modale in-app. C’est pourquoi « J’aime » est une action plus appropriée ici que « Noter sur le store ».

Améliorer votre app grâce aux revues sur les stores

Une fois que les avis commencent à affluer, assurez-vous de répondre de manière constructive aux commentaires, qu’ils soient positifs ou négatifs. Cela montre que vous prenez en compte les retours des utilisateurs et que vous visez constamment à améliorer votre application.

Que ce soit les commentaires que vous captez via votre écran tampon (voir fichier Figma) ou les commentaires disponibles sur l’App Store, assurez-vous d’en faire quelque chose. Les retours utilisateurs sont souvent une mine d’or pour vous améliorez. J’ai même utilisé plusieurs fois les feedbacks clients d’applications concurrente pour améliorer celles sur lesquelles je travaillais :p

En tenant compte de ces points d’attention et en identifiant judicieusement les moments opportuns, vous pouvez maximiser l’impact positif des revues de votre application et améliorer l’expérience utilisateur globale sur votre application.

Fichier Figma « In-App Review » – Android & Apple

J’ai travaillé à coucher sur un fichier Figma les différentes recommandations que je vous donne ici. Vous le trouverez sur l’espace communautaire de Figma directement dans mon profil, mais voici le lien direct rien que pour vous !

Vous retrouverez les recommandations techniques et UX, ainsi que des écrans d’exemple où il ne vous reste plus qu’à changer l’icône de l’application par la vôtre.

En parlant de revue, n’hésitez pas à me faire vos retours sur ce fichier

Autres ressources utiles

• Documentation Apple : https://developer.apple.com/app-store/ratings-and-reviews/
• Suggestion Apple : https://developer.apple.com/documentation/storekit/requesting_app_store_reviews
• Controller Apple : https://developer.apple.com/documentation/storekit/skstorereviewcontroller/
• Documentation Android : https://developer.android.com/guide/playcore/in-app-review

En raison de l’attention médiatique récente suscitée par le succès de ChatGPT, l’IA a acquis une nouvelle image, qui n’est toutefois pas représentative de l’ensemble des IA disponibles. Au-delà de la simple conversation avec l’IA, il existe une pléthore d’outils utilisant l’IA qui peuvent aider à accomplir diverses tâches telles que l’édition vocale, la génération de musique, la manipulation d’images, le nettoyage de photos, le résumé de meetings, et bien plus encore. Rejoignez-moi pour explorer certaines de ces capacités.

Une liste plus complète est disponible à la fin de cet article.

Poised – votre IA-coach en communication

Poised est décrit comme le coach en communication alimenté par l’IA qui vous aide à parler avec confiance et clarté. Il s’agit d’un outil privé et sécurisé pour les lieux de travail numériques.

Il vous donne un score lorsque vous parlez, en fonction de certains indicateurs tels que les mots de remplissage (tic de langage), votre ton et votre confiance.

Il simule une situation de prise de parole en public et utilise GPT-3 (bientôt GPT-4) pour analyser vos résultats.

Pragma – votre assistant IA pour les ventes

Pragma se présente comme un outil qui se connecte à votre flux de travail pour vous aider à rédiger un texte au bon moment avec les informations dont vous avez besoin.

Vous pouvez automatiser votre rédaction et demander à l’outil de reformuler certaines parties de votre texte. Vous pouvez également créer des raccourcis et des snippets pour faciliter votre travail quotidien.

MurfStudio – votre générateur de voix naturelle

Murf est un générateur de voix qui prend du texte en entrée et vous donne une magnifique voix humaine en sortie. Il vous aide à créer des voix off de qualité studio en quelques minutes. Vous pouvez utiliser les voix IA réalistes de Murf pour des podcasts, des vidéos et toutes vos présentations professionnelles.

Je l’ai testé un peu : le Studio est vraiment bon, vous pouvez écrire un script ou l’importer, choisir votre voix parmi les voix gratuites ou payantes, créer un dialogue, corriger la prononciation des mots ou des noms tout au long de votre projet, insérer des pauses pendant le discours, etc.

Il me manque une fonction pour indiquer au logiciel que la pause doit utiliser un ton descendant, neutre ou ascendant. Et je sais que le ton utilisé dans plusieurs langues peut changer le sens d’une phrase.

Cleanvoice.ai – suppresseur de sons de remplissage multilingue

Cleanvoice.ai aide à supprimer tous les sons que vous pourriez faire avec votre voix ou votre bouche : le Uuuhhh agaçant, le Ssss non sollicité, ou les mauvaises habitudes de clic de langue. Il supprime également le « Dead Air », les blancs trop longs, pour un podcast plus fluide.

Il peut s’avérer très utile pour réduire le temps nécessaire au post-traitement de votre enregistrement pour un podcast. Il ne fonctionne pas pendant l’enregistrement, mais comme outil de post-traitement.

Synthesia – générer une vidéo naturelle à partir d’un texte

Synthesia est proche de la solution Murf, mais ajoute une couche vidéo puissante : vous pouvez choisir un personnage, sa voix et sa qualité d’élocution, et ajouter des textes et des images à côté du personnage qui parle.

Ensuite, vous écrivez votre texte et l’acteur virtuel parle à votre place, générant ainsi une vidéo professionnelle.

FlexClip – Éditeur vidéo en ligne renforcé par l’IA.

FlexClip est une plateforme de montage vidéo qui propose une gamme de fonctionnalités d’IA pour simplifier la création de contenu et améliorer l’expérience des utilisateurs. Elle peut générer automatiquement des sous-titres pour vos vidéos dans plus de 100+ langues, les rendant ainsi accessibles à un public plus large. De plus, FlexClip peut convertir du texte en discours dans plus de 140 langues, vous permettant d’ajouter des commentaires vocaux à vos vidéos sans avoir à les enregistrer vous-même.

Comme si ce n’était pas suffisant, FlexClip exploite la puissance de l’IA pour créer des vidéos à partir de contenu textuel, en sélectionnant intelligemment des images appropriées et de la musique de fond pour donner vie à vos idées.

Krisp.ai – retirer les bruits de fond

Krisp.ai est un outil qui analyse le son lorsque vous parlez et supprime tous les bruits de fond tels que les voix de fond, les bruits de fond et les échos.

Vous pouvez combiner cet outil avec n’importe quel autre outil que vous utilisez pour vos réunions, car il s’intègre intelligemment à votre système. La version gratuite vous offre 60 minutes par jour.

Otter.ai – votre assistant de réunion

Otter.ai est votre nouvel assistant de réunion qui enregistre l’audio, rédige des notes, capture automatiquement des diapositives et génère des résumés.

Il est compatible avec Zoom, Google Meet et Microsoft Teams, entre autres solutions de réunion.

Podcastle.ai – un outil multifonction pour les podcasters

Podcastle.ai vous aide à publier de meilleurs épisodes de podcast de plusieurs façons : il ajoute la transcription, nettoie votre audio, apporte des corrections en utilisant des échantillons de votre propre voix et propose la synthèse vocale.

Toutes ces fonctions combinées semblent être surpuissantes.

Soundraw.io – Créez votre propre musique grâce à l’IA

Soundraw.io est un générateur de musique utilisant l’IA pour créer de la musique Open Source que vous pouvez télécharger. L’outil est vraiment puissant et propose plusieurs options qui vous permettent de régler votre échantillon : tempo, style, thème, et plus encore.

J’ai eu l’occasion de présenter cet outil à plusieurs reprises lors de conférences et de meet-ups, et les gens ont toujours été étonnés par la précision de l’humeur, du genre et du thème proposés par l’IA. Très utile pour les Vlogs, les vidéos d’introduction ou les podcasts, ou même les sons d’ambiance ou l’aide pour commencer votre propre composition.

Si vous souhaitez utiliser le son généré, vous devrez vous abonner au moins pour un mois (14$) pour télécharger et obtenir les droits d’utilisation, mêmes commerciaux. Si vous vous abonnez, utilisez le code geoffrey.crofte dans le champ du code de réduction.

Beatoven.ai – génère des échantillons de musique libres de droits

Beatoven.ai est un outil qui vous aide à générer de la musique en définissant le style, le tempo et d’autres éléments liés à la musique qui généreront un morceau aléatoire personnalisé.

StockAI – une bibliothèque d’images gratuite composée de photos générées par l’IA

StockAI est une bibliothèque composée d’images et de photos de haute qualité générées par l’IA.

Les images générées sont gratuites et vous pouvez les utiliser à des fins commerciales ou non commerciales. Vous n’êtes pas obligé de le faire, mais l’attribution est toujours appréciée.

Cleanup.pictures – supprimer des éléments de vos photos

Cleanup.pictures vous aide à supprimer des éléments sur vos photos en utilisant l’IA et le contexte de votre photo. Je l’ai essayé sur une de mes photos et j’ai essayé de supprimer 2 éléments sur la photo : la montre à l’arrière-plan (ce qui devrait être une tâche facile), et l’une des pièces de monnaie (tâche plus difficile à cause de la texture et de l’ombre).

Comme vous pouvez le voir, la suppression de la montre est un succès, le motif en bois à l’arrière-plan est propre et logique. Le retrait de la pièce de monnaie présente plusieurs défauts : le cuir a une coupe arrondie au lieu d’une forme droite, et l’ombre de la pièce est toujours présente. Mais la texture du cuir est assez bonne.

Lex Page – Une IA qui imite le ton de votre écriture

Lex Page est un outil développé par Every qui imite votre façon d’écrire pour copier votre ton et vos habitudes lors de la génération de textes plus longs.

Je ne peux pas vous en dire plus car je suis encore dans la file d’attente pour être accepté dans la phase de beta test.

Craftly AI – un assistant rédacteur

Crafty AI est un assistant rédacteur doté de plusieurs outils pour vous aider dans votre référencement, la description de vos produits, l’e-commerce, les réseaux sociaux, etc.

Le processus est assez simple : choisissez un outil que vous voulez utiliser, souvent la tâche que vous voulez faire, comme écrire une recommandation LinkedIn, un email de suivi, une description de produit, etc., et suivez les étapes de l’outil, comme ajouter des tags, une petite description, et il vous proposera instantanément un contenu adapté.

Texti – une alternative ChatGPT directement dans votre navigateur

Texti est censé répondre instantanément à votre question.

Pour être honnête, j’ai essayé une ou deux fois, et je n’ai pas été vraiment satisfait de la réponse, comme lorsque j’ai demandé « What’s the most common issue in product design« .

Sembly – transcrit et prend des notes pour vous

Sembly transcrit, prend des notes de réunion et génère des informations pour vos réunions professionnelles.

Il permet notamment de chercher à travers l’ensemble de vos notes de meetings, mais également de profiter d’un résumé de chacun offert par l’IA, qui s’appelle GlanceView.

Il permet de réduire le phénomène de « no-show » lors d’un meeting en faisant suivre ces notes à toutes les personnes, même les absentes.

Thundercontent – pour les créateurs de contenus

Thundercontent est une IA qui aide les créateurs à générer de nouveaux contenus textuels. Ils ont également un concurrent Chat nommé ThunderChat, et bien d’autres outils qui viennent compléter leur suite.

Ce ThunderChat peut recevoir des messages-guides personnalisés pour accélérer l’utilisation de l’outil, et se connecter à d’autres outils pour faciliter la création de contenu.

Browse – Analyser les données de vos concurrents

Browse est conçu pour extraire et analyser les données de plusieurs sites web (potentiellement concurrents) sans avoir besoin de coder.

Il propose des robots pré-construits pour des outils existants.

WordTune – Transformez votre écriture de plusieurs façons

WordTune est là pour vous aider à changer le ton et le style de vos écrits grâce à de nombreux gadgets différents au sein de l’éditeur. Il utilise GPT-3 pour générer des façons alternatives d’écrire la même chose, en proposant d’allonger ou de réduire la longueur de votre texte ou de le réécrire avec un discours plus ou moins formel.

Les outils inclus semblent vraiment puissants et faciles à utiliser, mais le quota gratuit fourni est abusivement consommé chaque fois que vous cliquez sur un onglet ou un bouton.

Je l’ai testé pendant 10 minutes et mon contenu a été perdu 2 fois sans raison apparente. Pour moi, c’est suffisant pour ne pas adopter l’outil, mais peut-être aurez-vous plus de chance que moi.

AssemblyAI – transforme une vidéo ou un audio en transcription

AssemblyAI est un outil qui vous aidera à transcrire de l’audio ou une vidéo (avec du son) en texte. Il se concentre sur l’API pour aider les gens à construire des outils étonnants en utilisant Assembly AI.

« Notre API simple expose des modèles d’IA pour la reconnaissance de la parole, la détection du locuteur, le résumé de la parole, et plus encore. Nous nous appuyons sur les dernières recherches de pointe en matière d’IA pour offrir des modèles d’IA prêts à la production, évolutifs et sécurisés par le biais d’une API simple. Utilisé par des milliers de startups innovantes et des dizaines d’entreprises internationales pour des charges de travail critiques ».

J’adore ce genre d’introduction parce qu’elle rend généralement les gens totalement perdus dans les buzzwords, mais quoi qu’il en soit : il transforme l’audio en texte et il est convivial pour les développeurs

Compose – complète vos phrases

Compose est une IA sous la forme d’une extension Chrome qui vous aide à compléter vos phrases, en essayant de prédire ce que vous allez dire. Elle est censée vous faire gagner 40 % de votre temps de rédaction.

Vous pouvez également l’utiliser pour reformuler certaines phrases.

DALL·E 2 – créer des images réalistes en quelques secondes

Dall·e 2 est bien connue dans ce domaine car elle a bénéficié d’une bonne couverture médiatique ces derniers temps. Cette IA vous aide à créer des images plus ou moins réalistes qui prennent leur source dans un texte, appelé prompt« , qui est fait pour guider l’IA dans la création de la bonne image pour vous.

Il s’agit d’une IA créée par les personnes à l’origine de ChatGPT, qui est également connue pour sa très bonne couverture médiatique au cours des dernières semaines.

Stable Diffusion – un autre outil de génération d’image

Stable Diffusion est similaire à Dall-e et propose un peu le même mécanisme que les points d’entrée, mais je trouve les résultats beaucoup moins qualitatifs, du moins avec les prompts que j’ai utilisés.

MidJourney – Un générateur d’images oniriques

MidJourney est vraiment puissant, et pour moi, c’est le générateur d’images le plus puissant basé sur un texte. Il crée 4 propositions à partir de votre texte et peut prendre plusieurs paramètres pour générer le type d’image que vous souhaitez.

Sur la base des 4 propositions initiales, vous pouvez demander plus d’un certain résultat (4 de plus), ou l’augmentation de la qualité d’un résultat que vous aimez.

DifferentDimensionMe – générer une image « manga » à partir d’une photo

DifferentDimensionMe est une IA créée par les personnes à l’origine de Stable Diffusion qui transforme une photo en une image « manga ».

Vous pouvez utiliser 2 options prédéfinies qui utilisent des paramètres pour ajuster le rendu de votre image animée.

UseGalileo.ai – Idea to design, in an instance

UseGalileo.ai est un générateur d’images IA qui puise ses données dans des « milliers de designs exceptionnels » et transforme les messages textes en langage naturel en designs de haute fidélité.

En tant que designer, je suis étonné par la capacité de cette IA à créer des interfaces assez propres, mais aussi par sa capacité à reproduire des tonnes de biais de conception : les interfaces ne sont pas vraiment utilisables en l’état, ne sont souvent pas accessibles (En lire plus sur l’accessibilité numérique sur ce blog).

Flair.ai – générer des photos de produits pour votre entreprise

Flair.ai est un générateur de photos qui se concentre sur les photos de produits. Importez votre photo de produit, définissez quelques paramètres et photos de base, et laissez l’IA travailler pour vous.

L’outil semble très prometteur, mais lorsque j’ai eu l’occasion de l’essayer, j’ai remarqué une chose : la lumière sur votre produit reste la même, et par conséquent l’image semble vraiment fausse parce que l’avant-plan et l’arrière-plan sont beaucoup trop détachés.

Illustroke – génère des illustrations vectorielles

J’aimerais vous en dire plus sur cet outil, mais il n’y a pas de vidéo de démonstration sur le site officiel, et pas même un token gratuit pour tester l’outil. C’est triste et ça ne donne pas la chance d’apprécier et peut-être d’acheter plus de tokens pour cet outil.

Si vous avez eu la chance de le tester, n’hésitez pas à nous en dire plus dans les commentaires.

GoProd – Suppression de l’arrière-plan et amélioration de la qualité de l’image

GoProd est un outil réalisé par Icons8 qui propose 2 choses simples : améliorer la qualité de l’image ou supprimer l’arrière-plan d’un sujet principal sur une photo.

J’ai testé la fonction de mise à l’échelle qui est assez impressionnante et qui m’a donné un bon résultat sur une image de produit. La fonction de suppression de l’arrière-plan fonctionne également assez bien, mais ne fera pas de miracles : si votre image est floue, n’essayez même pas. Mon conseil serait d’essayer la mise à l’échelle avant de procéder à la suppression de l’arrière-plan.

Patterned.ai – génère des images de motifs

Patterned.ai est un outil qui génère des images de motifs répétitifs utilisables comme arrière-plan ou comme motifs de produits, par exemple.

Entre nous, une recherche d’image sur Google a été plus précise que quatre tentatives avec cet outil. Le tartan écossais n’est pas la chose la plus difficile à générer et il existe des références.

Je suis donc dubitatif sur l’avenir de cette IA

Stockimg.ai – génère des images libres de droits

Stockimg.ai vous aide à générer différents types d’images telles que des illustrations, des photos et des concepts d’interface utilisateur, sur la base d’un prompt textuel.

J’ai essayé d’en générer un avec seulement 1 crédit offert. Ce n’était pas ce à quoi je m’attendais, mais la surface en cuir était tout à fait étonnante. Oui, j’ai un hobby amusant si vous ne le saviez pas.

J’ai essayé le générateur d’interface Web, mais je n’ai pas été convaincu du tout. Rien n’est vraiment utilisable en l’état, et la qualité de l’image est plutôt médiocre.

Prompt2figma – génère des interfaces dans Figma

Prompt2figma génère une interface directement dans Figma en utilisant votre message de prompt comme entrée. Le résultat peut aller d’un écran de téléphone portable à des interfaces de site web, ou simplement de petits composants.

Je n’ai pas eu la chance de le tester, je suis toujours sur la liste d’attente pour la Beta.

Copy.ai – Génère des textes complexes

Copy.ai est conçu pour vous faciliter la vie lors de la rédaction d’un article de blog, d’une description de produit ou de tout autre texte moyennement long à rédiger.

Il aide à générer des idées, mais il génère également une copie complète de tout ce dont vous avez besoin. Je l’ai testé personnellement pour générer des descriptions de produits en anglais, étant donné que je ne parle pas couramment cette langue, et il s’est avéré assez stupéfiant et vraiment utile et précis.

Ocaya.com – Social Media AI

Ocaya.com vous permet de préparer et de publier sur les médias sociaux plus rapidement. Il vous aide à analyser le type de contenu et la formulation qui ont le mieux fonctionné afin de proposer des améliorations au contenu.

Il vous aide également à créer des images attrayantes pour rendre vos posts plus visibles, à sélectionner des hashtags en vogue et à préparer vos légendes.

Vidyo.ai – créer des vidéos courtes à partir de vidéos longues

Vidyo.ai est un outil qui promet de raccourcir intelligemment vos longues vidéos. Je l’ai testé moi-même, et il est loin d’être utilisable. Pour être bref sur ce point -car le produit pourrait évoluer dans les mois/années à venir. Passez votre chemin, ne l’achetez pas, si :

• vous avez plusieurs vidéos à monter
• vous ne parlez pas dans votre vidéo
• vous ne parlez pas anglais

L’IA n’est tout simplement pas en mesure de trouver un moyen de traiter votre source, et ne peut pas prendre en charge plusieurs sources. Et ce n’est pas la fin de la mauvaise expérience que j’ai eue : la quantité d’emails reçus de cet outil est insensée. Et certains d’entre eux sont inutiles : « Félicitations pour avoir généré 0 vidéo ! » Oui, félicitations en effet… Inutile.

QuickChat.ai – un chatbot s’appuyant sur OpenAI

QuickChat.ai est un outil propulsé par OpenAI qui tente de ramener la tendance du chatbot avec un mécanisme plus performant derrière les réponses fournies à l’utilisateur.

Ce chatbot peut reconnaître et parler votre langue maternelle. Vous pouvez l’utiliser pour automatiser votre support client, les applications en ligne, la recherche dans la base de connaissances internes et bien d’autres tâches.

Quick chat Web Widget intégré à votre site web, mais aussi à d’autres applications telles que Facebook Messenger, Discord, Slack, Telegram, ou à un logiciel de chat en direct. Vous pouvez même le connecter à votre propre application en utilisant la fonction Quickchat API.

PuzzleLabs.ai – Glossaire alimenté par l’IA

PuzzleLabs.ai veut apporter plus de clarté dans les guides complexes, la documentation ou tout type de contenu textuel en apportant des définitions directement dans votre contenu.

Je ne sais pas trop où se situe l’IA dans ce type d’outil/widget, mais comme je ne peux pas encore le tester (liste d’attente), il faudra attendre pour en savoir plus.

Looka – Générateur de logo et de kit de marque

Looka.com propose de vous aider à créer vos nouveaux actifs de marque : Logo et kit de marque.

Le logiciel commence par vous demander quelques informations sur votre entreprise et vos préférences personnelles. Le logo généré n’est pas extraordinaire, mais pour une entreprise disposant d’un petit budget, c’est un bon début.

Les actifs de la marque comprennent une présentation, un site web, des cartes de visite, des t-shirts, etc. Mais entre nous, pour un contenu censé être généré par l’IA, cela semble vraiment basique et générique. C’est assez pour me dire qu’il y a des outils un peu « bidons » derrière l’IA ces derniers temps.

Une liste exhaustive d’IA par catégorie

Vous trouverez une liste impressionnante d’IA organisée par catégorie/objectif sur le dépôt GitHub AI Toolbox. Je suis sûr que vous y trouverez des choses étonnantes.

Je me permets de vous rappeler que le contenu généré par l’IA a une grande limite commune : les propres préjugés du créateur et le modèle de données utilisé. Les archétypes et les défauts humains pourraient bien gâcher votre expérience avec ces outils.

N’hésitez pas à proposer une nouvelle entrée si vous travaillez sur un nouvel outil utilisant l’IA.

Dans mon expérience personnelle, je mentionne souvent une expérience d’environ 8 ans en tant que freelance dans mes débuts. Cette mention me vaut pas mal de questions sur comment se lancer en indépendant, monter sa boîte, trouver des clients, etc. Voici quelques conseils issus de mon expérience.

Ce n’est pas évident de revenir dans le temps et se rappeler de tout ce qui a pu fonctionner et ne pas fonctionner. Mais vous avez de la chance, j’ai généralement une bonne mémoire. Notamment parce que faire des erreurs à tendance à ancrer un peu les choses dans le crane. (non je n’ai pas dit que j’avais fait plein plein d’erreurs… quoi que… :D)

Voici quelques conseils que je peux vous donner pour éviter de vous cramer les ailes trop tôt. Ces conseils sont issus de mon expérience personnelle. Peut-être que d’autres freelances ont eu des expériences différentes, n’hésitez pas à lire sur le sujet.

PS. Je tiens à préciser que je ne suis plus indépendant. Mais vous pouvez en lire davantage sur mon parcours personnel sur ce blog.

Table des matières

Des fois que vous souhaitiez sauter à un sujet en particulier :

Définissez vos objectifs en tant qu’indépendant

Avant de vous lancer, identifiez clairement vos objectifs à court et à long terme. Cela vous aidera à rester concentré et à prendre les bonnes décisions pour développer votre carrière.

En effet, en se lançant en indépendant, nous n’avons pas tous les mêmes objectifs, certaines personnes veulent garder du temps pour développer un produit (side project). D’autres veulent pouvoir travailler beaucoup sur une certaine période, puis se reposer longtemps. D’autres encore veulent juste plus de flexibilité dans leurs horaires, ou pouvoir choisir des clients qui ont un sens vis à vis de leurs principes.

Gardez toujours dans un coin de la tête cet ou ces objectifs, et tentez de tout faire pour aménager votre activité pro pour l’attendre. Cet objectif peut bien sûr avoir plusieurs étapes pour être atteint, l’important étant de l’avoir en tête.

Si vous n’en avez pas de clairement défini, peut-être vaudrait-il mieux y réfléchir avant de vous lancer, car ne pas avoir d’objectif clair c’est risquer de se dissiper ou perdre en motivation.

Mes objectifs personnels à l’époque étaient :

• sélectionner des projets et clients cool et qui correspondent à mes principes
• me permettre d’évoluer dans des domaines que je ne maîtrise pas encore
• faire davantage de design que ce que je faisais en agence

Gestion du temps en tant que Freelance

Établissez une routine de travail et gérez efficacement votre temps. Fixez-vous des délais réalistes pour vos projets et utilisez des outils de gestion du temps tels que des applications de suivi pour vous aider à rester organisé.

C’est un aspect très important car cela vous permettra de vous fixer des objectifs hebdomadaires pour mieux gérer vos projets. Cela vous permettra également de vous fixer des limites pour ne pas vous cramer au bout de quelques mois.

Tracker vos activités et le temps passé sur chaque projet vous permet également de mieux comprendre où vous perdez du temps, et ce qui vous coûte vraiment dans vos démarches ou lors de la réalisation de projet.

Personnellement j’utilisais Asana à l’époque, mais je suis passé ensuite sur Trello. Aujourd’hui j’utilise Clockify qui permet d’associer les activités à un centre de coût par exemple, et de re-facturer efficacement des clients pour lesquels vous seriez « au temps passé » et non au forfait. J’avais écrit un article sur les outils pour travailler efficacement. Il faudrait que je le remette à jour soit dit en passant.

La relation client quand on est freelance

La communication est essentielle pour établir de bonnes relations avec vos clients. Soyez professionnel, réactif et à l’écoute de leurs besoins. Comprenez leurs attentes dès le début et tenez-les régulièrement informés de l’avancement de votre travail.

Il n’est pas question ici de faire tout ce que vos clients vous demandent, mais plutôt d’être compréhensif et d’accepter vos erreurs lorsque vous en faites. Mieux vaut un petit détour qui va vous coûter peu, que perdre un client après un combat d’egos. Tout le monde fait des erreurs, c’est normal.

Le relationnel est très important, parfois bien plus que vos compétences techniques. Si vous pensez être limité dans ce genre de compétence, n’hésitez pas à lire sur le sujet, suivre des formations, ou vous aider d’intelligence artificielle (non je ne blague pas) qui peuvent vous aider à comprendre les émotions d’un message, ou résumer un long mail, voire vous aider à répondre de manière plus posée.

Dans mon expérience, j’ai toujours été transparent avec mes clients, au point où j’admettais mes erreurs, leur donnais toutes les contraintes de travailler avec moi. J’avais une phrase d’accroche pour certains contrats qui était « vous allez certainement commencer par me détester car nous ne serons pas toujours d’accord, mais vous finirez par adorer mon travail car il correspondra à ce que VOS clients attendent ». (plus facile à placer quand on est designer je pense)

Gardez du temps pour développer vos compétences

L’informatique est un domaine en constante évolution, il est donc important de continuer à vous former et à développer vos compétences. Restez à jour avec les dernières technologies et tendances, et envisagez de suivre des cours en ligne, d’obtenir des certifications ou de participer à des événements de l’industrie. (conférences comme le DevFest Nantes ou Paris Web par exemple)

Dans votre planning, que ce soit entre 2 contrats ou pendant un contrat, prévoyez toujours du temps pour progresser dans le domaine. Vous former sur un langage ou une méthode est indispensable pour tenir la route sur le long terme.

Lorsqu’un client me demandait un truc que je ne savais pas faire, deux options se présentaient :

• soit je pouvais l’absorber dans le délai imparti,
• soit je l’invitais à contacter un confrère ou consoeur plus expérimenté.

Dans tous les cas, j’en parlais avec mon client, en toute transparence. Et surtout, j’aménageais mon planning pour prévoir cette monté en compétence.

Créez votre portfolio

Constituez un portfolio solide pour présenter vos projets passés et démontrer vos compétences. Mettez en avant vos réussites et les résultats obtenus pour vos clients. Cela vous aidera à gagner la confiance des prospects et à vous démarquer de la concurrence.

Dans votre portfolio, ne montrez pas uniquement le résultat, mais aussi la problématique initiale à laquelle votre intervention a pu répondre. Essayez de ne pas être trop technique et jargonné dans vos explications.

Une fois que vous avez quelques références, n’hésitez pas à trier ce que vous affichez dans votre folio. 3 projets que vous adoreriez refaire valent mieux qu’un étalage de 10 projets trop diversifiés. (ou pour lesquels il y a des choses que vous avez détesté faire) Les clients vont vous contacter pour des choses qui sont généralement affichées sur votre site. Il est donc sain de faire le tri.

Entretenez votre réseau en tant que freelance

Le réseautage est crucial pour trouver des opportunités de travail en tant que freelance. Participez à des événements locaux, rejoignez des groupes en ligne, et connectez-vous avec d’autres professionnels de l’industrie qui peuvent compléter votre offre (exemple : entourez-vous de développeurs si vous êtes designer).

Utilisez également les médias sociaux pour promouvoir votre expertise et élargir votre réseau, mais n’oubliez pas : un réseau prend du temps à se former, ne soyez pas trop oppressant et agressif pour créer des liens, faites-le le plus naturellement possible.

Nous en avons déjà parlé avant dans la monté en compétence. Les conférences sont également un bon moyen de créer un réseau et rencontrer des professionnels. Vous pouvez lire les avantages à participer à des conférences sur ce blog.

Trouver des contrats en tant que freelance

Trouver des missions risque fort d’être très chronophage dans vos débuts, et peut-être parfois par vagues au fil du temps. En théorie, lorsque votre travail commence à être reconnu, votre réseau solide, et vos clients fidélisés, vous devriez passer moins de temps à chercher. Mais au début, cela peut être différent.

Il existe de nombreux sites spécialisés pour trouver des missions en tant que freelance dans le domaine de l’informatique. Parmi les sites populaires, et en essayant d’écarter au mieux mes a priori personnels, on peut citer Upwork, Freelancer, et Fiverr sur la scène internationale. Sur la scène française, vous avez Freelance Informatique pour trouver sa mission en tant que freelance informatique, Free-work, ou Malt. Créez un profil attrayant, proposez des tarifs compétitifs au début et recherchez activement les offres correspondant à vos compétences. Je dis « au début », car au fil de l’eau je vous invite à monter vos prix, on en parle juste après.

Parler de votre expertise sur un blog qui vous appartient peut également être une bonne stratégie marketing : partagez vos trouvailles, vos méthodes, vos pensées, etc. C’est un bon moyen de donner de la visibilité à votre portfolio également. Le blog est un bon moyen de combler les phases de creux si vous en avez, c’est un investissement sur le moyen/long terme.

Fixez des tarifs appropriés

Déterminez des tarifs appropriés en fonction de vos compétences, de votre expérience et des normes du marché. Faites des recherches pour connaître les tarifs pratiqués par d’autres freelances dans votre domaine. Évitez également de sous-évaluer votre travail.

Si vous proposez des tarifs trop compétitifs dès le début, vous risquez d’afficher une image de trop faible qualité. Restez dans les normes du marché, et ne descendez jamais en-dessous de 350€ par jour. C’est un conseil pour votre survis :p

Mes prix variaient en fonction des tâches à faire, des clients (oui je facturais à la tête du client et alors ?) et de mon expérience. En fin d’activité freelance, un de mes contrats s’est soldé avec une facture à 7k€ pour environ 8 jours effectifs de travail. Je vous laisse calculer.

Pour aller plus loin, j’avais écrit un article de fond intitulé « le premier qui donne un prix a perdu« . Il est toujours d’actualité et pourrait vous servir.

Soyez fiable et respectez vos engagements

Respectez les délais et les engagements pris avec vos clients. La fiabilité et la qualité de votre travail sont essentielles pour maintenir une bonne réputation en tant que freelance. La confiance se gagne en gouttes et se perd en litre.

Une de mes règles appliquée à l’époque et qui me suit toujours est de : « dites ce que vous faites, et faites ce que vous dites ». Cela implique transparence et fiabilité dans votre processus, même s’il vous arrive de faire des erreurs. Si vous en faites, assumez-les, cela ne fera que vous rendre plus humain, et exposera un peu la dureté et valeur du travail effectué. Votre client sera parfaitement capable de comprendre cela.

N’oubliez pas la gestion administrative

En tant que freelance, vous serez responsable de la gestion administrative de votre activité. À moins que vous ne la déléguiez à une autre personne bien sûr. Assurez-vous de tenir des registres précis de vos revenus et dépenses.

Renseignez-vous pour respecter au mieux les obligations fiscales et les réglementations liées à votre activité. Mon but n’est pas de lister tous les cas possibles ici, mais renseignez-vous sur les contraintes de déclaration suivant le status juridique que vous retenez pour votre activité.

Pensez également à l’aspect financier : même si votre status vous engage individuellement, il peut être bon d’avoir un compte professionnel dédié à votre activité de Freelance.

Où allez-vous travailler en tant que Freelance ?

C’est une question à laquelle vous allez devoir répondre. Dans les options :

• directement chez le client, cela va dépendre de vos missions,
• chez vous, mais est-ce que vous avez un emplacement dédié ? (je déconseille le canapé)
• en espace de coworking ? C’est une option, mais il faut prévoir le budget.
• en co-homing ? Aller travailler chez un autre freelance peut être fun.

Il existe pas mal d’option, que vous pouvez bien sûr combiner. J’ai une collègue qui travaille chez elle, dans des bars adaptés (anti-café par exemple) ou en co-homing parfois. Tous ont leurs avantages et inconvénients.

Dans tous les cas, vous allez être dans une situation de télétravail (pas directement chez le client) pour la plupart des missions. Je vous raconte mon expérience à travers l’article pourquoi j’ai arrêté le télétravail. Ou encore un autre article sur les avantages du télétravail que j’avais co-écrit avec mon frère. Ce dernier reste totalement d’actualité malgré mon arrêt de ce mode de travail. Comme ça vous avez toutes les cartes en main.

Et si vous bossez de chez vous, passez voir quelques conseils sur votre éclairage de bureau ou d’espace de travail.

Quelques autres conseils pour gérer vos projets Freelance

J’écris régulièrement sur ce sujet car je profite des questions que vous me posez pour rebondir et réfléchir avec vous. Je me dis que cette réflexion peut servir à tout le monde, alors n’hésitez pas à partager cet article autour de vous.

Sur la gestion de projet, j’avais écrit quelques conseils pour gérer vos projets, beaucoup sont encore très d’actualité et valides.

Bonne chance dans votre aventure, et surtout, ne restez pas seul·e

Dans mon éternelle quête d’un web meilleur, une question m’a été posée récemment sur LinkedIn. Cette question était la suivante : connais-tu un plugin WordPress qui permette de créer un formulaire accessible ? Je ne me suis jamais posé la question car j’utilise Contact Form 7 qui permet de faire un peu ce qu’on veut. Mais creusons ensemble.

Cette recherche d’accessibilité sous WordPress n’est pas nouvelle. Vous pouvez lire le retour de Julie sur l’accessibilité du back-office de WordPress (2017). Hélas, il y a bien des choses qui n’ont pas changées, et heureusement bien d’autres qui ont évoluées dans le bon sens.

Message de service aux développeurs de plugins : pensez à vous mettre à l’accessibilité et vous former, car cela va devenir un critère de sélection dans beaucoup de pays d’Europe les prochaines années (voir cet Acte Législatif Européen sur l’Accessibilité).

Dernière mise à jour : 19 nov. 2025
Je vais mettre à jour le plus régulièrement possible certaines de mes analyses. Regardez bien la date au-dessus, ainsi que la date d’analyse de chaque plugin.

Un formulaire accessible sous WordPress ? Méthodologie de tests

Voici mon environnement au moment des tests, et surtout les quelques éléments que j’ai testé avant de décider si le plugin de formulaire WordPress valait le coup.

Environnement de test

Pour ces tests, j’ai mis à jour mon installation sous Local avec la dernière version de WordPress :

• Nginx + PHP 8
• WordPress 6.1.1
• Retrait de tous les plugins
• Activation du thème TwentyTwenty Three
• Notez également la date des tests

Puis j’ai installé les plugins de formulaire lorsqu’ils étaient gratuitement. Pour certains j’ai pu tester sur un environnement mis à disposition par l’éditeur du plugin.

Méthodologie de test

Dans mon analyse, je souhaite tester 2 aspects : la facilité d’utilisation en back-office pour créer des formulaires, et l’aspect accessibilité en front-end pour les utilisateurs et utilisatrices finaux. Je n’ai pas cherché à tester l’accessibilité en back-office pour des raisons de gain de temps pour le moment, mais je le ferai peut-être ultérieurement.

Dans chaque test je vise :

• Back-end (sur 5 points) :
  • La facilité de prise en main,
  • L’accompagnement et les aides,
  • La structure de l’espace d’administration,
  • L’utilisation de langage technique en anglais ou français,
  • L’ergonomie globale.
• Front-end (sur 5 points) :
  • La qualité du code source (accessibilité technique)
  • La qualité du design des champs (accessibilité visuelle)
  • La qualité des interactions (accessibilité technique et visuelle)

Je ne suis pas allé jusqu’au test de retranscription au lecteur d’écran (VoiceOver sous Mac), sauf rares exceptions, encore une fois pour des raisons de gain de temps, et surtout parce que souvent il n’y a pas besoin d’aller jusque là pour disqualifier un plugin. Hélas.

Comment lire mes notes et langage technique ?

Pour faire simple, un 3/5 en accessibilité, ce n’est pas suffisant, vous pouvez commencer à réfléchir à l’utilisation du plugin à partir de 4/5.
En terme d’utilisabilité, je conseille à partir de 3/5 pour une personne avec peu de connaissance technique, les points au dessus de 3 sont plutôt attribués à du contrôle et réglage.

Dans les lignes suivantes, je vais forcément devoir aborder un peu de langage technique. HTML est un langage de développement (code) qui permet de structurer les pages que vous naviguez. Lorsque le code est mal fait, l’affichage visuel de la page peut être bon, mais pour autant sa structure mauvaise. Une mauvaise structure va ajouter de la difficulté pour des outils utilisés par des personnes en situation de handicap, notamment pour retranscrire le contenu de la page, et par conséquent utiliser votre formulaire.

ARIA, est une “technologie” permettant théoriquement d’améliorer le HTML. Mais comme tout outil, s’il est mal utilisé, il peut très bien faire plus de mal que de bien.

Qu’est-ce qu’un formulaire accessible ?

Sans trop rentrer dans les détails, c’est un formulaire qui remplit les critères de conformité des WCAG, dont une traduction en français de la version 2.1 se trouve ici : WCAG 2.1 en Français.

Dans mes tests, je passe en revue quelques critères sans rentrer dans les détails, mais qui pour moi sont primordiaux avant de pouvoir aller plus loin dans les tests. S’ils ne sont pas valides, je m’arrête.

Les plugins de formulaire WordPress testés

Passons maintenant aux différents plugins de création de formulaire que j’ai pu tester jusque là, et regardons où ça pêche et si nous tombons sur un formulaire accessible sous WordPress.

Accessibilité de Fluent Forms

Dernière mise à jour du test : 24 déc. 2022

Fluent Forms est un plugin de création de formulaires que je ne connaissais pas avant qu’on m’en parle récemment. Je découvre donc, peut-être en même temps que vous.

Je vais commencer par l’interface d’admin, puisque j’ai dû l’installer. Celle-ci reprend les codes de WordPress en lissant un peu les styles. Personnellement je les trouve plutôt agréables, mais c’est mon avis personnel.

La structure de la page d’édition du formulaire est proche de celle de Gravity Forms qui est le suivant que j’évalue, peut-être en un poil plus simple. Peut-être trop simple pour moi par exemple, qui ai vu les “placeholders” (ces textes présents dans les champs qui se retirent quand vous écrivez) par défaut qu’il ne semble pas possible de retirer. Cela fera un point de moins pour l’aspect facilité d’utilisation/contrôle, mais également pour l’accessibilité en front-end puisqu’il est déconseillé de les utiliser.

Du côté du front-end justement, nous avons les libellés et champs qui sont bien reliés pour les cas classiques (select, input, checkbox, radio, etc.) et la navigation clavier est aisée grâce à des styles avancés pour le focus clavier. Même les widgets plus avancés semblent assez facile à utiliser au clavier.

On reprochera par contre que les points positifs s’arrêtent là pour ce plugin. Les messages d’erreurs ne sont pas annoncés (aria-describedby), les champs requis ne le sont techniquement pas non plus (aria-required), aucune utilisation de fieldset et quelques très mauvaises utilisations des label. J’arrête donc le test ici.

Note de facilité d’utilisation
3/5

Note d’accessibilité
2/5

Accessibilité de Gravity Forms

Dernière mise à jour du test : 19 nov. 2025

Gravity Forms fait maintenant partie des plugins les plus vieux et connus sur WordPress. Il est également complètement payant et ne propose plus de version gratuite comme il le faisait au début (me semble-t-il, j’ai un doute en écrivant cette phrase).

Il propose cependant un espace de tests gratuit en ligne qui permet de contrôler l’aspect des formulaires avec une multitude d’exemples, mais également de tester l’administration d’un formulaire.

Du côté ergonomie, Gravity Forms a pris la décision de se rapprocher de celle de Gutenberg, probablement pour ne pas perturber à l’utilisation. Il n’est pas évident d’offrir plein de possibilités de personnalisation et contrôle, et en même temps rester facile d’utilisation sur l’interface proposée. Mais ces options sont plutôt bien gérées.

Vous pourrez monter en compétence à votre rythme puisque certaines décisions sont prises par défaut pour vous, et vous pouvez bidouiller des options si ça vous chante. Quelques infobulles d’accompagnement sont présentes pour nous aider à monter en compétences.

Sur quelques champs, Gravity Forms a pris la décision d’adopter une découpe des labels étrange (voir le screenshot au-dessus) proposant un label principal comme “Name” puis des sous-labels “First” et “Last”. C’est un principe très anglophone (voire américain) qui ne me semble pas très ergonomique pour bien des raisons. Mais encore une fois, ce ne sont que des options.

J’ai parcouru les classiques manques de ce type de formulaire d’un point de vue code : tout est là, les informations sur les champs requis, la bonne utilisation des labels, des fieldsets et legends, la notion d’aria-live pour les messages qui se mettent à jour, les descriptions de champs riches reliées à leur champ respectif.

Bref, un bon travail côté code, qui semble avoir été validé par Level Level, une société spécialisée dans WordPress et l’accessibilité. Lisez l’article sur le sujet.

J’ai poussé les tests sur les contrastes de couleur en 2025, puisque ce critère n’était pas valide en 2022 lors de mon premier test. C’est agréable de constater que mes critiques ont été prises en compte, et le design poussé par défaut mis à jour par l’équipe.

Le plugin était également problématique sur la gestion du focus, sa visibilité, voire son absence sur certains types de champs (select, radio, etc.), mais c’est désormais corrigé.

Les seuls défauts que j’ai pu y voir, qui seraient les derniers éléments à corriger, en date (fin 2025) :

• Les « chained selects » n’ont pas de logique qui permet d’associer sémantiquement les éléments entre eux. Ils mériteraient l’utilisation d’un <label>  caché, d’un <fieldset> + <legend> ou d’attributs ARIA, adaptés.
• Le champs « Produit » est étrangement balisé, offrant des étiquettes reliées à aucun champ (non invalidant) et proposant une prise de focus sur un élément non éditable, qui actionné  par la touche entrée valide le formulaire.

Je n’ai pas retrouvé les champs historiquement non conformes de type progress ou offrant du drag & drop.

Un autre aspect à débattre serait la proposition de reCaptcha comme méthode de contrôle anti-spam. De mémoire cette solution est inaccessible, même si elle n’est pas directement développée par Gravity Forms.

Note de facilité d’utilisation
4/5

Note d’accessibilité
4.5/5

Accessibilité de Ninja Forms

Dernière mise à jour du test : 24 déc. 2022

Attaquons Ninja Forms, et commençons par l’interface d’admin : celle-ci est bien plus épurée que les précédentes et propose un mode développeur que j’ai découvert en l’utilisant. De quoi allier le besoin de simplicité pour les moins experts, et passer sur un mode plus avancé pour les personnes qui ressentent le besoin de bidouiller.

Ninja Forms était un de mes préférés à une époque, mais je me souviens avoir été déçu par la qualité du code et les nombreuses erreurs du validateur HTML. Il faut croire qu’ils se sont un peu amélioré sur cet aspect car le côté code est vraiment plus qualitatif.

La base est là, à savoir : les labels sont connectés à leurs champs, les messages d’erreurs sont annoncés comme tel, ainsi que les champs requis et erronés.

Les descriptions associées aux champs ne sont par contre pas du tout pris en compte et déclarés comme tels. Il y a même un truc bizarre avec ces descriptions : elles apparaissent avant le champ mais sont déclarées dans le code après le champ, ce qui est une contre-indication. (l’ordre de lecture du code doit être proche de l’ordre d’enchaînement des éléments à l’écran)

Les labels sont très mal utilisés sur les groupes de checkbox et radio, et il y a même un aria-describedby qui mène vers un message d’erreur qui n’existe pas lorsque le champ n’est pas encore erroné.

La surabondance d’éléments très mal utilisés en fait un plugin pour créer des formulaires plutôt de mauvaise qualité côté code.

Côté interaction et aspect visuel, le contrast proposé par le style des bordures par défaut n’est pas bon pour un contrast sur fond blanc. Il est de 1.74:1 contre une recommandation de 3:1.

Du côté des interactions au clavier, le style à la prise de focus est passable (meilleur contraste), mais totalement invisible sur les cases à cocher et les boutons radio.

Un plugin que je ne peux donc pas conseiller globalement.

Note de facilité d’utilisation
4/5

Note d’accessibilité
2/5

Accessibilité de WPForms

Dernière mise à jour du test : 24 déc. 2022

Du côté de l’ergonomie sur WPForms, on est vite noyé sous les informations lorsqu’on installe ce plugin : une grosse page dédiée digne des solicitations de la boutique Aliexpress, et on se demande comment on va bien pouvoir démarrer son premier formulaire. Une fois qu’on a trouvé le bon bouton ou page de menu, il faut encore comprendre la différence entre la création avec ou sans template. Un peu laborieux pour si peu, mais passons à la suite.

L’interface de création ressemble beaucoup aux concurrents, mais il y a une navigation à 3 niveaux d’onglets. Très surprenant et perturbant au début. L’interface reste simple lorsqu’on se plonge dans la création des champs, et quelques aides un peu trop discrètes (faible contraste encore) sont dispo pour chaque champ de contrôle.

Côté code, les champs requis ne sont pas correctement annoncé par une phrase de type “les champs requis sont libellés d’une astérisque” ou quelque chose similaire. Les astérisques sont bien dans les labels et les champs déclarés en required. Il manque un aria-required cependant.

Il y a une utilisation étrange de 2 labels avec le même attribut for pour les champs à base de label principal et de sous-labels (que je ne justifie pas d’un point de vue ergonomique non plus). Ne connaissant pas l’effet je ne m’exprimerai pas là-dessus.

Le label a encore une drôle d’utilisation sur les checkboxes et radios avec un label dont l’attribut for le lie à une liste HTML. La console Firefox a l’air de comprendre le lien, mais je ne suis pas certain que ça soit valide. L’utilisation de fieldset et legend est manquante dans ces cas. (doc)

Les descriptions des champs sont ajoutés après les champs et ne sont jamais liés aux champs qu’ils décrivent.

Dans les étrangetés, WP Forms propose un range-slider utilisant le bon élément HTML. Cependant la mise à jour de la valeur juste en dessous n’est jamais annoncées explicitement soit par l’attribut aria-valuetext soit par une mise à jour de la description et un attribut aria-live.

Du côté interaction, une erreur dans le formulaire me permet d’avoir le focus sur le premier champ erroné ce qui est une bonne pratique. Une chose étrange se passe par contre : le premier champs erroné se retrouve avec 3 labels, un pour le principal, un pour le sous label, et un pour le message d’erreur.

Il est également à nouveau impossible de savoir où je me trouve à la navigation clavier sur des éléments radio ou checkbox, ou encore le fameux range-slider.

Côté visuel, le contraste est à nouveau insuffisant, mais cela commence à être une constante au fil des audits.

Un plugin que je ne conseillerai donc pas non plus. L’accueil sur le plugin est laborieux et les aides peu visibles. Le code est une bouillie d’éléments HTML mal utilisés. Next!

Note de facilité d’utilisation
2/5

Note d’accessibilité
1/5

Accessibilité de Formidable

Dernière mise à jour du test : 24 déc. 2022

J’ai découvert Formidable un peu par hasard en cherchant quelques alternatives aux extensions de création de formulaire accessible. Je me suis dit que j’allais le tester puisqu’il est annoncé par ses créateurs comme “The most powerful and versatile form builder for WordPress”.

Dans un de leurs articles, ils annoncent aussi n’avoir aucune erreur d’après WAVE, et être conforme aux WCAG. Voyons s’il répond aux besoins d’accessibilité donc, et repassons sur les arguments offerts par leur propre annonce. (article ci-dessus)

Côté découverte, à l’installation, une page proposant des actions cohérentes est affichée, largement meilleure que celle de WPForms par exemple. Je me dirige donc sur les templates pour ne pas construire le formulaire depuis 0.

Le bouton découvre une modale qui propose quelques templates classiques, mais également une liste énorme de templates rangés par catégories. Ok, pas mal. Je vais faire simple et faire un formulaire de contact. Ha ! Et bien non, pour faire un formulaire de contact je dois donner mon mail pour avoir 10 templates gratuits… Allez, un point de moins sur la facilité d’utilisation.

On repart sur un blank form alors. C’est parti.
Le drag & drop est aisé et je remarque à l’utilisation que l’on peut créer des colonnes à la volée, c’est pas trop mal pour des formulaires un peu complexes.

L’organisation des onglets et des options m’a cependant l’air chaotique contrairement à le concurrence, il n’y pourtant pas beaucoup d’options en plus, mais ça semble très chargé et mal organisé. Il y a en fait des choses qui n’ont rien à faire dans les options de base et devraient se trouver dans les options avancées.

Du côté du code, c’est plutôt appréciable comme les bonnes blagues de la famille racontées lors des repas de Noël : si vous aimez le mauvais goût, on est en plein dedans.

La capture d’écran ci-dessus vous montre un méli-mélo très “intéressant”. Ce code représente visuellement ce qui suit :

Ici on va dire que c’est de leur faute : comme tous les autres form builders, ils ont décidé qu’à la demande d’un nom et prénom, le label serait découpé en “Name”, “First”, “Second”, trois labels, 2 champs. Côté ergonomie, on repassera donc.

Côté code, ça aurait pu être bien, mais c’est une horreur : Le premier “Name” sera lu par un lecteur d’écran sauf si la personne saute sur le champ directement, uniquement “First” sera lu (celui du label) en effet, la legend du fieldset au-dessus est en display: none;ce qui a pour effet de ne pas être lu par un lecteur d’écran (semble être retranscript malgré tout par VoiceOver). Une fois le champs remplit, le second “First” devrait être ignoré en cas de navigation séquentielle par champ de formulaire. Autrement il sera lu juste après le remplissage du premier “First” ce qui est totalement inutile.

Et là on est dans les champs “simples”…

Sur les autres champs, la description du champ est bien annoncée avec un aria-describedby. Les libellés des groupements de checkboxes et radio sont ignorés puisqu’ils n’utilisent aucun moyen de connexion avec les groupes de champ, le fieldset mal utilisé précédemment aurait pu servir ici.

En cas d’erreur un message global est proposé, ainsi qu’un message contextuel par champ. Les deux types d’erreur utilisent un role="alert". Le problème avec cette technique, c’est que la valeur implicite de aria-live pour un role alert est “assertive” ce qui veut dire qu’une alerte va en annuler une autre (pour faire simple). Le message d’erreur global ne sera donc jamais lu, et il est fort possible que seul le dernier message contextuel le soit en cas d’erreurs multiples…

Les champs sont bien annoncés en erreur par contre, ce qui fera un point positif peu utile dans toute cette bouillie. Leur analyse WAVE n’annonce donc aucune erreur de code, mais l’analyse experte ici me laisse très très perplexe.

Une fois n’est pas coutume, le contraste de la bordure sur fond blanc n’est pas suffisant, à 1.77:1 contre la recommandation de 3:1. Ce que WAVE ne détecte pas. (pour une raison que j’ignore)

Du côté des interactions clavier, la bordure change de couleur au focus et propose un halo plutôt bien voyant. Petit bonus pour la prise de focus visible sur les radios et checkboxes et également select.

Je me demande quand même où est passé le respect des WCAG.

Note de facilité d’utilisation
2/5

Note d’accessibilité
2/5

L’accessibilité de Happy Forms

Dernière mise à jour du test : 24 déc. 2022

On ne se connait pas encore, mais Happy Forms me demande tout de suite mon adresse e-mail à l’activation. Intrusif et agressif.

Pour le reste de l’interface, Happy Forms veut réutiliser la plupart des styles propres à l’administration de WordPress, ce qui permet aux éditeurs de site web de ne pas être perdus. C’est plutôt une bonne pratique.

Les options pour chaque champ sont cependant très riches et peu expliqués. Mais vous vous plairez certainement après une montée en compétences à pouvoir proposer des formulaires riches avec enchaînements de conditions, par exemple.

Du côté du code, nous retrouvons les erreurs classiques : le formulaire n’a pas de nom, un champ caché servant de piège pour les robots n’est pas bien annoncé/caché, les champs obligatoires ne sont pas annoncés, ni textuellement, ni dans le code source (aria-required), les descriptions des champs ne sont pas réliée aux champs qu’elles décrivent, et les groupements de boutons radio et checkboxes ne sont pas annoncés correctement. Les messages d’erreur ne sont également pas connectés aux champs erronés et les champs ne sont pas annoncés erronés non plus.

Aucun effort spécifique pour l’accessibilité ne semble être fait, si ce n’est connecter les libellés à leur champ.

Du côté des interactions notamment à la navigation clavier, l’ensemble des champs de base ont bien une prise de focus visible, sauf le bouton principal du formulaire. Après avoir cherché dans les options du formulaire, vous pouvez cependant paramétrer vous-même la couleur de fond du bouton à la prise de focus. Une option d’accessibilité qui sous-entend “démerdez-vous”. Ce qui va un peu dans le sens de leurs réponses quand leurs utilisateurs demandent plus d’inclusivité.

Au niveau des couleurs et contrastes, en dehors des labels, rien ne va : les bordures ne sont pas suffisamment contrastées sur fond blanc (1.38:1) et les messages d’erreur proposent un contraste texte:fond qui n’est pas assez élevé également avec un score de 3.59:1.

Note de facilité d’utilisation
3/5

Note d’accessibilité
1/5

L’accessibilité de Piotnet Forms

Dernière mise à jour du test : 24 déc. 2022

À l’activation du plugin, Piotnet redirige automatiquement vers la liste des Forms. Qui est vide. Normal.

J’ajoute donc un formulaire pour lequel l’interface est vraiment… sommaire. Un titre, et mes champs par défaut pour des Custom Fields (Fields WordPress, par des champs de formulaire).

Étrange, rien ne se passe, je retourne à l’accueil de la liste, rien de nouveau.

Je vais dans les settings, tout semble payant pour compléter les fonctionnalités du plugin. J’allais finir cette revue ici et mettre une note de 0 partout, quand j’ai vu dans la liste des fonctionnalités au survol de l’item Contact Form que je viens de créer, une fonction “Edit with Piotnet Forms”.

En cliquant dessus : magie !

Pourquoi cette décision de cacher l’édition du formulaire, qui est littéralement la fonction principale, dans un lien à peine visible, au lieu de charger immédiatement l’interface du formulaire ? Cette décision vaudra −2 points sur la note d’ergonomie et facilité d’utilisation, car j’ai failli abandonner et que c’est loin d’être évident.

Sur l’ergonomie des options, ce plugin a pris la décision de ne pas exposer tous les champs sur son panneau principal, mais d’en faire une option au sein du type de contenu “Field”. Cela ne facilite pas nécessairement la découverte ou compréhension par l’image, mais c’est un choix de design.

J’ai cherché à créer du colonnage, et j’ai eu énormément de difficulter à comprendre qu’il faut utiliser le type d’item “Section” et le dupliquer sur place pour en faire une division. Mais attention, il ne faut pas utiliser la fonction Dupliquer qui est sur le controleur en haut du bloc, mais à gauche du bloc. Même icône, 2 fonctions différentes. Très mauvais pattern de design qui en fait un plugin dont la courbe d’apprentissage est très longue et lente.

J’ai également cliqué sur un item payant dans la liste pour voir ce que ça propose. Cela m’a fait quitter la page sans sauvegarder et fait perdre mes modifications. Bien joué.
D’ailleurs en parlant de sauvegarde, lorsque je sauvegarde le formulaire, je n’ai aucune validation de la sauvegarde, juste un bouton qui clignotte bizarrement.

Tant d’efforts dans une interface custom au mauvais endroit (édition) alors que pour le coup le développeur du plugin aurait mieux fait de se reposer sur les codes de design de WordPress ici.

Passons un peu côté code. Enfin si je trouve comment quitter ce mode… Ah, il faut cliquer sur l’icône WordPress tout en bas à gauche. Décidément, ce plugin est un jeu de piste.

Les labels sont connectés à leurs champs. On retrouve l’erreur classique du label qui est relié à rien du côté des boutons radio et checkboxes. Les champs obligatoires sont annoncés dans le code, mais il n’y a pas de message global annonçant les obligatoires comme étant porteurs d’une astérisque.

Petit nouveauté dans la liste des “esprits créatifs des développeurs”, le bouton Submit n’est pas un bouton, mais une div avec du JavaScript dessus. La navigation clavier s’arrête donc au remplissage, le formulaire est impossible à envoyer. Ce simple fait va faire tomber sa note drastiquement.

Du côté des interactions, Piotnet ne se mouille pas puisque les styles des champs sont dépendants du thème activé, ou des options de styles que les utilisateurs et utilisatrices peuvent choisir par eux mêmes. Ce qui représente un potentiel d’inaccessibilité malgré tout.

À la validation du formulaire, ou à l’envoie plutôt, rien ne se passait, jusqu’à ce que je complète dans l’admin le champs Form ID qui est requis. Il permet en effet de connecter les champs à valider du même formulaire ensemble. Un aspect technique très handicapant pour un non-technicien.

À la validation, les champs erronés ont une erreur qui disparait à la moindre interaction, et le champ n’est pas noté comme invalide dans le code source. Un problème qui va bien plus loin que l’accessibilité, là nous sommes sur la base de l’ergonomie.

Note de facilité d’utilisation
1/5

Note d’accessibilité
0/5

Accessibilité de Contact Form 7

Dernière mise à jour du test : 24 déc. 2022

Contact Form 7 est un plugin réputé et installé sur bien des sites web. Cependant là où il peut être très puissant à bien des niveaux, il en est pas moins très, voire trop technique pour le commun des mortels.

Le formulaire brut que l’on obtient juste après l’installation du plugin est à peu près ok sur sa structure, mais le moindre ajout de champ vous met dans une situation délicate et inaccessible si vous n’avez pas de connaissance technique : les champs ne sont pas identifiés (techniquement) par leurs labels, et la structure est bien trop pauvre.

Si je m’arrêtais là, le plugin serait certainement l’un des moins bien classés de la liste. Et je vais m’arrêter là, tout simplement parce que rendre le formulaire accessible requiert des connaissances techniques dans le domaine, or je cherche à mettre à disposition un classement pour non-techniciens. Je cherche un plugin facile d’utilisation et accessible “par défaut”, dans le sens où les utilisateurs et utilisatrices n’ont pas de souci à se faire sur leurs connaissances techniques ou leur besoin de monter en compétence.

Note de facilité d’utilisation
1/5

Note d’accessibilité
1/5

L’accessibilité de Simple Accessible Form

Dernière mise à jour du test : 24 déc. 2022

L’accueil de Simple Accessible Form propose un formulaire très étrange où je dois moi-même renseigner des informations techniques dont je ne sais pas forcément à quoi elles vont servir ni l’impact sur mes utilisateurs.

De plus, à la validation du formulaire, j’ai une erreur PHP qui s’affiche, de quoi me faire désinstaller un plugin par crainte d’autres erreurs en public…

Une fois le formulaire créé, il faut que je vois que je peux l’éditer : action uniquement visible via une icône. Décision de design risible pour un plugin qui se veut accessible. Le lien “view form” (icône planète) m’envoie vers une page sur laquelle le formulaire n’est pas présent.

En cliquant sur l’icône d’édition, je reste sur la même page avec l’erreur PHP. Rien ne me permet d’éditer un formulaire.

Ok je crois que je n’ai rien compris à ce plugin, et vais devoir arrêter le test ici. Passez votre chemin.

Note de facilité d’utilisation
0/5

Note d’accessibilité
0/5

L’accessibilité de Forminator

Dernière mise à jour du test : 24 déc. 2022

L’accueil du plugin Forminator est inexistant, mais affiche un menu direct dans l’administration. La création d’un premier formulaire peut se faire sur la base d’un template existant, ce qui facilite la prise en main.

Le mise en page est quelle que peu perturbante en comparaison aux concurrents, et les réglages de chaque champ vont se faire dans des fenêtres modales. Leur changement de hauteur à chaque onglet me stresse tout particulièrement, mais c’est une préférence personnelle.

Je découvre rapidement en drag & drop que je peux faire des colonnes, puisque j’ai même du mal à placer un nouveau champ sur une ligne différente.

Les différents types de champs sont plutôt explicite et les options proposées assez riches. En dehors de l’aspect “modales” les options offrent pas mal de possibilité de personnalisation.

Du côté du code, il y a pas mal d’oublis. On notera que les labels sont bien connectés à leurs champs, mais que les libellés des groupements de checkboxes ou boutons radios ne sont pas annoncés correctement. (manque d’utilisation de fieldset et legend)

Les erreurs ont toutes un aria-hidden="true" ce qui les rend invisibles à un lecteur d’écran, et les descriptions de champ n’utilisent pas correctement l’attribut aria-describedbyen inversant la position de l’ID et de cet attribut.

Au niveau des interactions, la bordure des champs change de couleur à la prise de focus, mais pas sur les boutons radios, les checkboxes et les selects.

D’un point de vue visuel, les contrastes sont suffisants tant que nous n’entrons pas dans l’affichage d’erreurs. Les erreurs proposent en effet un contrast texte sur fond insuffisant. (attendu : 4.5:1)

Note de facilité d’utilisation
3/5

Note d’accessibilité
2/5

Construire un formulaire accessible sur WordPress : compte-rendu

Et bien, apparemment, ce n’est pas demain la veille que l’on pourra jouir de formulaires accessibles sur WordPress.

Le plugin qui tire son épingle du jeu à l’air d’être Gravity Forms. Cependant, malgré un audit de la société Level Level, on y trouve encore quelques petits défauts qui ont dû être oubliés pendant l’audit, ou le plugin a pu évoluer entre temp.

Si vous devez choisir dans le lot, Gravity Forms est le seul plugin qui propose un niveau d’accessibilité suffisant pour les formulaires de base, même si on aurait apprécié un peu plus de contrôle sur certains aspects ergonomiques.

Un aspect que je ne comprends pas également, et que j’explique par la maladie du plagia : pourquoi est-ce que les champs “noms” de ces plugins sont découpés en “Name > First, > Last”. C’est un comportement typiquement américain qui ne s’exporte pas très bien, et qui est surtout inutilement complexe à rendre bon d’un point de vue code et ergonomie.
C’est comme si ces développeurs avaient décidé de se tirer une balle dans le pied.

Enfin, on remarque que les erreurs sont basiquement toujours les mêmes :

• Les fieldset/legend sont sous utilisés, ou très mal,
• La notion de messages complémentaires à associer au champ n’est pas comprise,
• Le contraste de bordure sur fond de page n’est jamais correct ou laissé à la charge d’un utilisateur non formé,
• La navigation clavier est très rarement prise en considération,
• Les interactions en cas d’erreur sont presque toujours absentes.

Si jamais vous souhaitez créer un plugin WordPress qui tâcle ces problèmes d’ergonomie et d’accessibilité, il y a clairement une opportunité en Europe, puisqu’une Directive Européenne au doux nom de “European Accessibility Act” va être effective courant 2025.

Il y a un créneau à prendre pour le bien être de vos utilisateurs et utilisatrices, mais également pour un business sur WordPress. Si jamais vous êtes motivés, comptez-moi dans votre team qualité avec grand plaisir.

En attendant, je mets à dispo à nouveau ma checklist pour améliorer l’expérience utilisateur de vos formulaires web, qui tombe plutôt à pic compte tenu du sujet de cet article

Merci à Rémi qui se reconnaîtra d’avoir posé la question sur LinkedIn, et qui m’a dégoté quelques noms de plugins que je ne connaissais pas.

Comme je l’annonçais dans l’article à propos du DevFest de Nantes de 2022, j’ai travaillé récemment sur la réalisation d’une checklist afin d’accompagner product designers, product owner, développeurs et designers dans la réalisation de meilleurs formulaires web.

La rédaction vient d’un constat assez simple : après ce nombreuses recherches sur ce sujet des formulaires web, il s’avère que ces derniers ont des impacts de plus en plus forts sur notre quotidien. Et pour cause, de plus en plus de processus avant « physique » se font maintenant numériquement, souvent par l’intermédiaire de formulaire web.

Beaucoup se sont improvisés créateurs de formulaire du jour au lendemain sans forcément avoir les connaissances adéquates du web, et lorsque c’est le cas, les connaissances de l’accessibilité numérique, d’ergonomie, ou des capacités même des navigateurs modernes ne sont pas toujours bien connues. Et c’est normal, le web a évolué très vite, et ses usages avec.

Une checklist évolutive pour améliorer l’expérience utilisateur de vos formulaires

C’est sur ce constat et l’élan apporté par un sujet que je traite depuis des années que j’ai souhaité partagé avec vous gratuitement cette checklist de 67 points (à l’écriture de ces lignes) à vérifier avant, pendant, ou après la réalisation d’un formulaire.

Pour résumer cette checklit en quelques chiffres :

• 14 pages d’items et conseils
• 67 items à vérifier avec des exemples, conseils et liens
• 1 fichier PDF importable ou imprimable
• Note de 5/5 (merci au 2 notes actuelles )

Télécharger cette checklist

Pourquoi cette checklist sur la qualité des formulaires ?

Malgré notre professionnalisme et notre volonté de bien faire, il nous arrive de prendre des raccourcis dans nos méthodes et nos décisions. Cette checklist est un outil d’auto-contrôle pour vous assurer que vous n’avez rien oublié.

Vous pouvez également l’utiliser comme base de travail pour définir des règles d’équipe, et rappeler aux product owners, aux managers, ou encore à vos directeurs et directrices que la qualité prend du temps et de l’attention, et que prendre des raccourcis, c’est prendre des risques de perdre de l’argent. (j’en parle un peu dans mon sujet de conférence)

Comment utiliser cette checklist qualité ?

Chaque entrée de cette checklist est censée vous aider à apporter une meilleure qualité globale à votre formulaire web, peu importe son niveau de complexité initial. Chaque item ignoré risque de rajouter une friction à l’usage.

Il vous appartient cependant de considérer le contexte et votre propre cas d’usage afin de vous assurer de l’interprétation de chaque item. Par exemple, si je vous dis “La hiérarchie d’information est cohérente”, c’est à vous de définir et vérifier cette cohérence dans votre contexte et avec l’aide de vos utilisateurs et utilisatrices (et designers, et développeur, et toute autre personne utile).

Utilisez cette liste pour dialoguer avec vos paires et vos collègues lors d’une collaboration. L’objectif est l’alignement des forces vives du projet, casser les silos et garder en tête l’objectif final : un formulaire avec une utilisabilité irréprochable, ou presque.

Télécharger la checklist

Gagner de l’argent grâce à cette checklist sur la qualité des formulaires web ?

Derrière ce dernier titre racoleur, puisque vous auriez le droit de vous dire que c’est difficile de gagner de l’argent avec une liste distribuée graphiquement, il y a une réalité malgré tout.

Gumroad Payhip (j’ai changé de service après le foutage de gueule en public de Gumroad) permet de définir un prix de base à 0€ pour un objet distribué gratuitement. Cependant j’ai laissé libre la possibilité de mettre un prix personnalisé à partir de 4€ (oui cette liste était gratuite quelques mois pour la beta). Certaines personnes ont mis jusqu’à 20€ pour cette checklist, et je ne peux que remercier chacun des contributeurs et contributrices (mesdames vous êtes biens plus généreuses d’ailleurs) qui évaluent et gratifient le temps passé sur cette checklist qualité web.

La moyenne fin 2022 (lorsque le produit était gratuit) était de 0,52€ par téléchargement. Il est donc possible pour vous, si vous souhaitez relayer plus activement cette ressource, de peut-être gagner 50% des dons et paiements. Je ne peux rien promettre bien sûr, cela dépendra des achats de chaque personne. Pour devenir affilié·e, c’est par ici : Devenir affilié·e

Vous pourrez également partager et toucher un revenu pour mes prochaines publications, notamment l’e-book que je suis en train d’écrire qui ne sera pas distribué gratuitement.

Merci pour vos contributions, quelles qu’elles soient.