Des méthodes pratiques pour améliorer l’UX dans une startup qui survit sans designer

• Utiliser une bibliothèque de composants comme Material UI est sans doute la voie la plus simple, mais même si elle fournit les briques de base, la conception de l’ensemble du parcours utilisateur reste un travail à part
• Si vous devez investir du temps pour rendre votre produit distinctif, comment définir au plus vite une bonne expérience utilisateur ?

Une page vide est un piège

• Devant une toile blanche, inutile de se demander : « À quoi doit ressembler un champ de saisie d’e-mail ? »
• Il est possible de réutiliser des patterns déjà validés par les grandes entreprises
  • Cela permet de gagner du temps et d’améliorer l’expérience utilisateur

• Approches à éviter

  • Les sites de design awards – originaux, mais sans garantie d’utilisabilité
  • Dribbble – centré sur l’esthétique, pas sur la fonctionnalité

• Approches à privilégier

  • Les sites des concurrents – créez un compte et conservez des captures d’écran
  • Les sites de collections de patterns – consultation rapide sur PageFlows, Mobbin, etc.

• Noter les patterns UI courants

  • Éléments UI communs comme les champs e-mail, mot de passe et les flux de confirmation
  • Règles visuelles et de mise en page :
    • formulaire centré
    • design responsive
    • boutons clairs
    • logo en haut

• Friction intentionnelle

  • Certaines entreprises demandent les informations de carte bancaire → une stratégie pour attirer des utilisateurs sérieux
  • Une expérience rapide n’est pas toujours la meilleure

Définir clairement l’objectif

• L’objectif n’est pas simplement de « créer une page d’inscription », mais de « rendre l’inscription aussi simple que possible »
• Transformez-le en question :

  « Comment faciliter l’inscription pour l’utilisateur ? »

• Exemples de solutions

  • Afficher la solidité du mot de passe au moment de la saisie
  • Expliquer pourquoi le formulaire d’inscription doit être rempli

• Questions supplémentaires

  • Connexion immédiate après inscription vs connexion après vérification de l’e-mail
  • Afficher une page de confirmation après inscription vs afficher un message de réussite

Prendre en compte les edge cases

• Les vrais utilisateurs ne se comportent pas comme prévu → ils sont pressés, ignorent les consignes et font des erreurs
• Vérifiez les risques de problème avec des questions comme :
  • Que se passe-t-il si l’utilisateur fait une erreur en tapant rapidement ?
  • Les erreurs sur les champs de saisie sont-elles transmises clairement à l’utilisateur ?

• Solutions en cas de problème

  • Manque d’attention lors de la création du mot de passe → risque de verrouillage du compte plus tard
    • → ajouter un « champ de confirmation du mot de passe » pour demander une nouvelle saisie
  • En cas de mots de passe différents → afficher un message d’erreur
    • → afficher immédiatement une alerte lors de la saisie du deuxième mot de passe

Utiliser l’IA pour repérer les problèmes UX

• Des outils comme ChatGPT peuvent aider à identifier des problèmes UX
• Ce n’est pas parfait, mais cela permet une vérification rapide et efficace

• Exemples de prompts utiles

  • Red Team vs Blue Team :

    « À quels endroits l’utilisateur risque-t-il de bloquer dans ce flux d’inscription ? »
    « Pourquoi ce design est-il intuitif ? »

  • Standard du secteur :

    « Comment les principales entreprises SaaS conçoivent-elles leur flux d’inscription ? »

  • Edge cases :

    « Que se passe-t-il si l’utilisateur saisit mal son e-mail sans s’en rendre compte ? »

Autres conseils pour améliorer l’UX

• Définir des métriques
  • taux de conversion, rétention des utilisateurs, satisfaction utilisateur, etc. → évaluer les résultats avec des indicateurs objectifs
• Utiliser des couleurs simples
  • couleur principale, couleur secondaire, couleur d’accent → Coolors recommandé
• Utiliser un langage familier
  • au lieu de « erreur de base de données » → « impossible d’enregistrer vos modifications »

Conclusion

• Dans une startup, la vitesse est essentielle → le perfectionnisme est à éviter
• En UX, l’utilisabilité prime sur l’originalité
  • un flux utilisateur intuitif et clair est plus efficace qu’un design complexe et original
• Innover uniquement sur la valeur clé → pour le reste, utiliser des patterns éprouvés
• Suivre des patterns que les utilisateurs connaissent déjà réduit l’effort d’apprentissage

[GN⁺]

Avis Hacker News

• Le pic de l’utilisabilité d’il y a 25 ans correspondait au moment où la plupart des applications avaient des barres d’outils et des menus suivant des modèles standard

  • Les non-spécialistes qui utilisaient souvent l’application passaient par la barre d’outils, et ceux qui l’utilisaient rarement accomplissaient leurs tâches via les menus
  • Les utilisateurs experts mémorisaient les raccourcis grâce aux lettres soulignées dans les libellés des menus
  • Pour modifier les paramètres, on ouvrait une boîte de dialogue de configuration avec des onglets comme « Général » ou « Polices et couleurs »
  • À l’époque, la plupart des gens connaissaient peu l’informatique, mais pouvaient quand même utiliser la majorité des applications presque sans aide
  • L’objectif était alors de minimiser le temps passé par l’utilisateur dans l’application afin qu’il accomplisse son travail efficacement
  • L’UX moderne cherche à « engager » l’utilisateur autant que possible, ce qui peut convenir aux applications grand public mais devient problématique quand on applique cela aussi aux applications d’entreprise
  • Il existe des cas où des employés non techniques de sociétés du Fortune 100 se sont plaints qu’une nouvelle SPA ralentissait leur travail et ont demandé le retour de l’ancien terminal

• Après l’embauche d’un graphiste, le changement le plus visible est généralement que l’app ou le site web devient plus esthétique

  • L’UX couvre un champ plus large, allant des flux d’interaction jusqu’aux widgets d’une fonctionnalité précise
  • La plupart des gens sont mauvais pour anticiper l’UX globale d’un système
  • L’UX se développe soit en copiant des solutions existantes, soit en essayant quelque chose de nouveau
  • Évaluer un système par l’imagination est bien plus difficile que de l’implémenter
  • La conception d’un système backend permet de prévoir et d’éviter des erreurs via des principes de base et du raisonnement
  • Les designers ou ingénieurs dotés d’une intuition exceptionnelle en UX sont extrêmement précieux, mais on ne peut pas attendre indéfiniment d’en trouver un

• Le meilleur outil pour repérer des problèmes d’utilisabilité consiste à partager son écran avec Gemini et à expliquer à voix haute la tâche que l’on veut accomplir

  • Gemini observe l’UI, trouve comment effectuer la tâche et indique oralement où cliquer
  • Si Gemini n’y arrive pas, c’est qu’il y a un problème d’utilisabilité

• Selon la « loi de Jakob », les utilisateurs passent la majeure partie de leur temps sur d’autres sites, donc ils préfèrent qu’un site fonctionne comme les autres qu’ils connaissent déjà

  • Les utilisateurs transfèrent leurs attentes liées à des produits familiers vers d’autres produits similaires
  • En s’appuyant sur les modèles mentaux existants, on peut créer une meilleure expérience utilisateur qui permet de se concentrer sur la tâche plutôt que d’apprendre un nouveau modèle
  • Lors d’un changement, il faut minimiser les écarts en permettant aux utilisateurs de continuer à utiliser, pendant un temps limité, la version à laquelle ils sont habitués

• Si tous les produits fonctionnent de la même manière, c’est pour une raison, et lorsqu’un produit fonctionne autrement, il faut se demander si c’est intentionnel ou si c’est une erreur

  • Il faut trouver un équilibre entre les modèles familiers pour l’utilisateur et les idées nouvelles
  • Par exemple, en essayant d’améliorer l’expérience de paiement d’Amazon, on peut perdre l’avantage de la familiarité
  • En privilégiant les cases à cocher, les boutons radio, les listes déroulantes et les champs texte, on bénéficie gratuitement de modes de lecture et de modification d’état déjà familiers pour l’utilisateur
  • « Non intuitif » peut souvent vouloir dire « je ne suis pas familier avec ce modèle »

• On peut utiliser l’IA pour identifier des problèmes d’UX, et des outils comme ChatGPT peuvent mettre en évidence des problèmes d’UX que l’on pourrait manquer

  • Ce n’est pas parfait, mais c’est mieux que de deviner

• Il est recommandé de se concentrer sur les principes de design généraux et sur une certaine manière de penser

  • Lire The Design of Everyday Things de Donald Norman aide à comprendre la différence entre bon et mauvais design
  • The Art of Game Design de Jesse Schell explique comment créer des expériences immersives, et les jeux sont particulièrement impitoyables à cet égard

• Imiter ce que font les grandes entreprises peut conduire à une mentalité de cargo cult

  • Il faut savoir exactement pourquoi chaque partie du système est construite
  • Ce n’est pas parce qu’un CAPTCHA utilisé par Google est agaçant qu’il faut le copier
  • Il faut réfléchir aux domaines que l’on peut améliorer avec confiance

• Même en mode bootstrap, on peut embaucher un UX designer, et c’est un investissement très rentable

  • Il n’est pas nécessaire de l’embaucher à plein temps : on peut passer par un design sprint pour concevoir quelques concepts, mener des ateliers UX, puis faire évoluer l’option retenue vers un prototype cliquable
  • Cela vaut bien les 5 k$ économisés sur le budget de développement frontend, et rapportera probablement plus de 5 k$ dès la première année grâce à une meilleure rétention des utilisateurs

• Je ne me souviens pas de la dernière fois où j’ai travaillé avec un designer dédié

  • DevOps semble suivre un chemin similaire, comme si l’on s’attendait à ce que les développeurs s’en chargent pendant que leur code compile
  • Les développeurs sont les prochains
  • Embaucher des spécialistes est manifestement très inconfortable