L’Ergonomie dans la Conception No Code : Application des Critères de Bastien et Scapin

Introduction

À l’ère du développement No Code, qui permet à des utilisateurs de créer des applications fonctionnelles sans coder ou de façon facilité contrairement à du développement informatique, l’ergonomie joue un rôle plus crucial que jamais. Les plateformes No Code comme Airtable, Bubble, ou Webflow promettent de démocratiser la création d’applications, mais sans une attention particulière à l’ergonomie, les solutions créées risquent d’être difficiles à utiliser et donc contre-productives.

Vous le savez (ou peut-être pas), je suis issue d’un Master Ergonomie et Ingénierie des facteurs humains. L’ergonomie IHM (Interactions Homme Machine), entre autre, a donc une part importante dans ma formation. C’est pour cela que je fais des petits bonds, régulièrement, sur les réseaux lorsque je lis des posts de pseudos spécialistes de l’utilisabilité ou de l’UX, qui n’ont aucune formation réelle sur le sujet et oublient de prendre en compte des critères d’utilité publique. 

Les critères ergonomiques de Bastien (mon ancien professeur d’université que je salue) et Scapin, établis dans les années 1990, restent étonnamment pertinents pour évaluer et améliorer l’expérience utilisateur des applications, des interfaces et donc des créations en No Code. Dans cet article, nous explorerons comment ces critères peuvent être appliqués spécifiquement dans un contexte de développement sans code pour créer des applications plus intuitives, efficaces et agréables à utiliser.

Qu’est-ce que les Critères Ergonomiques de Bastien et Scapin ?

Dominique Scapin et Christian Bastien ont développé une liste de huit critères ergonomiques principaux (et sous-critères associés) pour évaluer les interfaces homme-machine. Ces critères, issus de recherches approfondies, constituent un cadre d’évaluation systématique pour identifier les problèmes d’utilisabilité et améliorer la conception des interfaces.

Les huit critères principaux sont :

1. Le guidage
2. La charge de travail
3. Le contrôle explicite
4. L’adaptabilité
5. La gestion des erreurs
6. L’homogénéité/cohérence
7. La signifiance des codes et dénominations
8. La compatibilité

Examinons maintenant comment chacun de ces critères peut être appliqué dans le contexte du No Code.

1. Le Guidage dans les Plateformes No Code

Le guidage concerne tous les moyens mis en œuvre pour orienter l’utilisateur dans son interaction avec le système. Dans un contexte No Code, où les utilisateurs peuvent ne pas avoir d’expertise technique, ce critère devient fondamental.

Incitation

L’incitation consiste à fournir des informations qui aident l’utilisateur à comprendre où il se trouve et quelles actions sont possibles.

Application au No Code :

• Intégrez des tutoriels interactifs dès la première utilisation de l’application
• Utilisez des messages contextuels pour expliquer les fonctionnalités complexes
• Proposez des modèles prêts à l’emploi pour guider les débutants
• Incluez des info-bulles explicatives sur les éléments d’interface moins évidents

Exemple concret : Dans une application Airtable, ajoutez des champs d’exemple pré-remplis et des descriptions de champs détaillées pour montrer aux utilisateurs comment structurer leurs données.

Groupement/Distinction entre Items

Ce sous-critère concerne l’organisation visuelle des informations pour faciliter leur repérage et leur compréhension.

Application au No Code :

• Organisez les éléments similaires en sections clairement délimitées
• Utilisez un système de couleurs cohérent pour distinguer différents types d’éléments
• Employez des espacements et alignements cohérents pour créer une hiérarchie visuelle
• Regroupez les fonctionnalités connexes dans des menus déroulants ou des onglets

Exemple concret : Dans un tableau de bord créé avec Notion, utilisez des bandeaux de couleur différents pour séparer les sections « Données », « Paramètres » et « Rapports ».

Feedback Immédiat

Le feedback concerne les réponses du système aux actions de l’utilisateur.

Application au No Code :

• Implémentez des animations subtiles pour confirmer les actions (comme l’enregistrement de données)
• Utilisez des confirmations visuelles pour les actions importantes
• Intégrez des barres de progression pour les opérations longues
• Affichez des messages de confirmation clairs après chaque action significative

Exemple concret : Dans un formulaire créé avec Typeform, montrez une animation de « coche » verte lorsqu’un utilisateur soumet correctement ses informations, accompagnée d’un message de remerciement personnalisé.

Lisibilité

La lisibilité concerne les caractéristiques lexicales de présentation des informations qui facilitent la lecture.

Application au No Code :

• Maintenez un contraste élevé entre le texte et l’arrière-plan
• Limitez-vous à 2-3 polices maximum dans votre application
• Utilisez des tailles de texte suffisantes (minimum 14px pour le corps du texte)
• Évitez les longues lignes de texte (idéalement 50-75 caractères par ligne)

Exemple concret : Dans une application créée avec Glide, utilisez une hiérarchie typographique claire avec des titres à 18-22px, des sous-titres à 16px et du texte courant à 14-15px.

2. La Charge de Travail

Ce critère concerne l’effort cognitif et attentionnel requis pour utiliser l’application.

Brièveté

La brièveté vise à réduire la charge de travail au niveau des actions individuelles et de l’ensemble du parcours utilisateur.

Application au No Code :

• Minimisez le nombre de clics nécessaires pour accomplir une tâche
• Créez des raccourcis vers les fonctions fréquemment utilisées
• Utilisez l’autocomplétion et la sélection par défaut des valeurs les plus probables
• Supprimez les étapes superflues dans les processus

Exemple concret : Dans une application de réservation créée avec Adalo, présélectionnez la date du jour et l’heure la plus demandée pour accélérer le processus de réservation.

Densité Informationnelle

Ce sous-critère concerne la quantité d’informations présentées simultanément à l’utilisateur.

Application au No Code :

• Adoptez une approche « progressive disclosure » : ne montrez que ce qui est nécessaire à chaque étape
• Utilisez des accordéons ou des onglets pour organiser les informations en sections accessibles à la demande
• Évitez de surcharger les écrans avec trop d’options ou de données
• Créez des vues filtrées ou personnalisées selon le contexte d’utilisation

Exemple concret : Dans un tableau de bord réalisé avec Softr, présentez uniquement les KPIs essentiels sur la page principale, avec la possibilité d’accéder à des analyses plus détaillées via des boutons « En savoir plus ».

3. Le Contrôle Explicite

Ce critère fait référence au degré de contrôle que l’utilisateur a sur le traitement de ses actions par le système.

Actions Explicites

Les actions explicites concernent la relation entre les actions de l’utilisateur et les réponses du système.

Application au No Code :

• Assurez-vous que les boutons d’action ont des libellés clairs et sans ambiguïté
• Différenciez visuellement les boutons selon leur importance et leur fonction
• Évitez les actions automatiques qui pourraient surprendre l’utilisateur
• Confirmez les actions irréversibles avant exécution

Exemple concret : Dans une application de gestion de projet créée avec Monday.com, utilisez des boutons distinctifs « Enregistrer brouillon » et « Publier » pour clarifier l’impact de chaque action.

Contrôle Utilisateur

Ce sous-critère concerne la capacité de l’utilisateur à contrôler le déroulement de ses interactions.

Application au No Code :

• Implémentez des fonctions d’annulation (« undo ») facilement accessibles
• Permettez de sauvegarder des versions et de revenir à des états antérieurs
• Offrez des options de personnalisation de l’interface
• Permettez d’interrompre ou d’annuler des processus en cours

Exemple concret : Dans une application créée avec Bubble, intégrez un historique des modifications avec la possibilité de restaurer des versions précédentes en cas d’erreur.

4. L’Adaptabilité

L’adaptabilité concerne la capacité du système à s’ajuster aux besoins et préférences des utilisateurs.

Flexibilité

La flexibilité fait référence aux moyens disponibles pour personnaliser l’interface selon les habitudes de travail de l’utilisateur.

Application au No Code :

• Permettez de personnaliser les vues et les tableaux de bord
• Offrez différentes options d’affichage (vue liste, vue calendrier, vue kanban, etc.)
• Autorisez la création de modèles et de raccourcis personnalisés
• Intégrez des options de filtrage et de tri avancées

Exemple concret : Dans une base de données Airtable, offrez plusieurs vues préconfigurées (grille, kanban, calendrier, formulaire) que les utilisateurs peuvent sélectionner selon leurs besoins actuels.

Prise en Compte de l’Expérience Utilisateur

Ce sous-critère concerne l’adaptation de l’interface au niveau d’expertise de l’utilisateur.

Application au No Code :

• Proposez un mode débutant avec plus d’assistants et d’explications
• Offrez un mode avancé avec des fonctionnalités plus complexes et des raccourcis
• Permettez aux utilisateurs expérimentés de sauter les étapes introductives
• Intégrez un système d’aide contextuelle qui peut être activé ou désactivé

Exemple concret : Dans une application créée avec Webflow, implémentez un système qui révèle progressivement des fonctionnalités avancées à mesure que l’utilisateur maîtrise les fonctions de base.

5. La Gestion des Erreurs

Ce critère concerne les moyens permettant d’éviter ou de réduire les erreurs, et de les corriger lorsqu’elles surviennent.

Protection Contre les Erreurs

La protection vise à détecter et prévenir les erreurs avant qu’elles ne se produisent.

Application au No Code :

• Implémentez des validations de formulaire en temps réel
• Utilisez des menus déroulants ou des sélecteurs pour limiter les choix à des options valides
• Désactivez temporairement les options incompatibles avec l’état actuel
• Fournissez des exemples de formats corrects pour les champs complexes

Exemple concret : Dans un formulaire créé avec JotForm, intégrez une validation immédiate du format d’email et du numéro de téléphone pendant la saisie, avec des indicateurs visuels pour guider l’utilisateur.

Qualité des Messages d’Erreur

Ce sous-critère concerne la pertinence et la clarté des informations fournies en cas d’erreur.

Application au No Code :

• Utilisez un langage simple et non technique pour décrire les erreurs
• Expliquez clairement la cause de l’erreur
• Suggérez des actions correctrices spécifiques
• Évitez les messages génériques comme « Erreur système »

Exemple concret : Au lieu de « Erreur 404 », affichez « Nous ne trouvons pas la page que vous cherchez. Vérifiez l’URL ou utilisez notre menu de navigation pour trouver ce que vous cherchez. »

Correction des Erreurs

Ce sous-critère concerne les moyens disponibles pour corriger les erreurs.

Application au No Code :

• Conservez les données déjà saisies en cas d’erreur
• Mettez en évidence les champs problématiques
• Offrez des suggestions de correction automatiques quand c’est possible
• Permettez de revenir facilement à l’état précédent l’erreur

Exemple concret : Dans une application de gestion d’inventaire créée avec AppSheet, si un utilisateur entre un code produit invalide, suggérez les codes similaires existants dans le système.

6. L’Homogénéité / Cohérence

Ce critère concerne la cohérence de présentation et de comportement de l’interface dans des contextes similaires.

Application au No Code :

• Maintenez une palette de couleurs et une typographie cohérentes dans toute l’application
• Utilisez les mêmes termes pour désigner les mêmes actions partout dans l’interface
• Positionnez les éléments d’interface de manière consistante d’un écran à l’autre
• Assurez-vous que les interactions similaires produisent des résultats similaires

Exemple concret : Dans une suite d’applications créée avec Glide, utilisez systématiquement le même bouton bleu pour les actions de confirmation et le même bouton gris pour les actions d’annulation.

7. La Signifiance des Codes et Dénominations

Ce critère concerne l’adéquation entre les termes et symboles utilisés et leur signification pour les utilisateurs.

Application au No Code :

• Utilisez un vocabulaire familier à vos utilisateurs cibles
• Évitez le jargon technique sauf si votre public le maîtrise
• Choisissez des icônes standard dont la signification est largement reconnue
• Maintenez une cohérence entre les termes utilisés dans l’application et ceux du domaine métier

Exemple concret : Dans une application médicale créée avec Retool, utilisez la terminologie spécifique au domaine médical pour les professionnels de santé, mais proposez des infobulles explicatives pour les patients ou utilisateurs moins familiers.

8. La Compatibilité

Ce critère concerne la correspondance entre les caractéristiques des utilisateurs et celles du système.

Application au No Code :

• Assurez-vous que l’application fonctionne sur tous les appareils utilisés par votre public cible
• Tenez compte des contraintes techniques de vos utilisateurs (vitesse de connexion, taille d’écran, etc.)
• Respectez les conventions de la plateforme (iOS, Android, web)
• Tenez compte des habitudes et des attentes des utilisateurs issues d’autres applications similaires

Exemple concret : Si vous créez une application de commerce électronique avec Shopify, respectez les conventions établies comme le panier en haut à droite et le processus de checkout en plusieurs étapes que les utilisateurs connaissent déjà.

L’Ergonomie comme Avantage Compétitif dans le No Code

Dans l’écosystème No Code en pleine expansion, l’ergonomie peut constituer un avantage concurrentiel décisif. Les applications qui suivent les critères ergonomiques de Bastien et Scapin présentent plusieurs bénéfices tangibles :

1. Réduction de la courbe d’apprentissage : Les utilisateurs peuvent prendre en main l’application plus rapidement, ce qui accélère le déploiement.
2. Diminution des erreurs : Une interface bien conçue réduit les erreurs utilisateur, améliorant ainsi la qualité des données et la satisfaction.
3. Augmentation de la productivité : Les utilisateurs passent moins de temps à chercher des fonctionnalités ou à corriger des erreurs.
4. Amélioration de la satisfaction : Une expérience utilisateur fluide et intuitive favorise l’adoption et la fidélisation.
5. Réduction des coûts de support : Moins de problèmes signifie moins de demandes d’assistance, réduisant ainsi les coûts opérationnels.

Méthodologie d’Application des Critères Ergonomiques en No Code

Pour intégrer efficacement les critères de Bastien et Scapin dans votre processus de développement No Code, voici une méthodologie en quatre étapes :

1. Analyse des Besoins et du Contexte

• Identifiez précisément votre public cible et ses caractéristiques
• Analysez les tâches que les utilisateurs devront accomplir avec l’application
• Étudiez le contexte d’utilisation (environnement, contraintes techniques, fréquence d’utilisation)

2. Conception Itérative

• Créez des prototypes rapides en tenant compte des critères ergonomiques
• Testez ces prototypes avec des utilisateurs représentatifs
• Itérez en fonction des retours

3. Évaluation Systématique

• Utilisez les critères de Bastien et Scapin comme grille d’évaluation
• Identifiez et priorisez les problèmes ergonomiques
• Documentez les problèmes pour faciliter leur résolution

4. Amélioration Continue

• Corrigez les problèmes identifiés
• Surveillez l’usage réel après déploiement
• Collectez régulièrement les retours utilisateurs pour identifier de nouvelles opportunités d’amélioration

Conclusion

L’application des critères ergonomiques de Bastien et Scapin dans un contexte No Code représente une démarche structurée pour créer des applications véritablement centrées sur l’utilisateur. Alors que les outils No Code continuent de démocratiser la création d’applications, l’attention portée à l’ergonomie devient un facteur différenciant crucial.

En intégrant ces principes dès les premières phases de conception, les créateurs No Code peuvent développer des applications non seulement fonctionnelles mais aussi agréables à utiliser, efficaces et adaptées aux besoins réels de leurs utilisateurs. Dans un marché de plus en plus concurrentiel, l’ergonomie n’est plus un luxe mais une nécessité stratégique pour assurer le succès de vos projets No Code.

Ressources Complémentaires

Pour approfondir vos connaissances sur l’ergonomie appliquée au No Code, voici quelques ressources utiles :

• « Critères Ergonomiques pour l’Évaluation d’Interfaces Utilisateurs » – J.M.C. Bastien et D.L. Scapin
• « Don’t Make Me Think » – Steve Krug
• « The Design of Everyday Things » – Don Norman
• « 100 Things Every Designer Needs to Know About People » – Susan Weinschenk