Lors de mon stage dans une start-up toulousaine, j’ai été amené à développer un formulaire de validation de petites annonces. Un formulaire était déjà en place. Voyez ici un aperçu :
Formulaire précédent
Cette présentation, bien que cohérente pour une boite email, ne correspondait pas du tout aux besoins de l’entreprise. En effet, les informations qui s’affichaient directement étaient :
- le titre de l’annonce
- le mail de l’auteur
- le nom de l’auteur
- la date d’écriture
Pour avoir le contenu il fallait laisser le curseur deux secondes sur la ligne correspondante. Ensuite, il fallait cliquer sur la checkbox si on désirait supprimer l’annonce ciblée
Plusieurs défauts sont ici nommés.
- Le formulaire demande la précision pour le clic
- Si on déconnecte son esprit du formulaire, comment savoir où on en était ?
- Les informations ne nous sautent pas aux yeux
- On a pas toutes les cartes en main pour juger une annonce
Du coup, je me suis penché là dessus et j’ai pondu un nouveau système.
Voici les grandes lignes, et un aperçu.
- Une annonce à la fois
- Validation au clavier (flèche gauche : valider, flèche droite : supprimer). Les boutons Valider et Supprimer sont toujours présent au cas ou le JavaScript soit désactivé.
- Les informations les plus importantes mises en valeur
- Présence de toutes les informations
Validation de petites-annonces
La personne pour qui j’ai fait ce petit soft a apprécié le travail. Gain de temps et de précision. Comme quoi, l’ergonomie …
Un dessin qui résume parfaitement ma pensée :
Apple Google Vous
Un livre à conseiller pour l’ergonomie plus générale d’un site web sur le blog de Méthylbro.
J’ai pas encore chronométré le temps qu’il me faut pour modérer des annonces avec ce formulaire.
Mais dés que j’aurais 5min je le ferais.
C’est vrai que ce petit dessin humoristique résume pas mal ce qu’une vrai étude ergonomique peut apportée
Étant en plein dans la lecture d’un livre sur l’ergonomie Web, je me permets de faire une suggestion d’amélioration : il faudrait espacer les deux boutons de Suppression et Validation car ils sont assez proches l’un de l’autre et une erreur de clic est si vite arrivée… (dans la même idée, il faudrait même les distinguer visuellement, ex. couleur différente)
@Méthylbro : Oui tiens moi au courant lorsque tu le fais
@BW HadèS : Tu as raison pour les boutons, mais en fait ils ne sont pas utilisés normalement. Il y a un doublage en JS qui fait utiliser le clavier (flèches ou autre) plutôt que les boutons, donc pas de déplacement de souris –> gain de temps
@R. Kueny : Navigation intéressante, mais les utilisateurs l’utilisent-ils justement ? Ce pourrait être instructif (bon ce n’est sûrement plus d’actualité car tu parles d’un stage) de faire une étude pour savoir laquelle des deux méthodes est la plus utilisée.
En fait je l’ai fait pour Méthylbro. Celui-ci l’utilise oui (il fait mumuse avec ? noooooon ;D )
Donc j’attends de voir s’il gagne du temps avec ou pas.
Ah yes, j’avais lu un peu trop en diagonale le premier commentaire, toutes mes excuses…
Nous sommes deux à modérer les annonces en question.
Mon collègue préfère encore l’ancienne méthode mais pour ma part j’utilise le formulaire développé par R.Kueny.
Pour info ; voici la tronche de l’ancien formulaire : http://methylbro.titaxium.org/portfolio/methylbro/public/images/tw-form.jpg
A noter que l’affordance de la checkbox est limitée à la checkbox elle même par exemple.
Ou que pour lire le contenu complet d’une annonce il faut cliquer sur le titre de celle-ci pour la voir apparaitre dans une popup … etc.
L’ancien formulaire demande alors une précision sur le pointage de la souris (ou une longue manipulation avec le clavier ; car les indexkey ne sont bien sur pas définis) ainsi qu’une concentration folle pour ne pas mélanger chaque lignes du tableau.
En tout point, je préfère de loin la version de R.Kueny moi.
Et vous, vous en pensez quoi ?
Même sans avoir utilisé les deux versions, je suis complètement d’accord avec Méthylbro.
Pour revenir à mes précédents commentaires, je m’interrogeais sur la navigation par les flèches du clavier pour valider ou supprimer les annonces plutôt qu’avec la souris, sur les boutons du (nouveau) formulaire. En tant qu’utilisateur, Méthylbro, pourrais-tu nous renseigner là-dessus ? Utilises-tu le « raccourci clavier » ?
Bien sur !
C’était l’idée de départ de ce formulaire.
Comme je viens de l’aborder ; l’ancien formulaire faisait appel à une dextérité et une concentration impressionnante.
Imaginez ; vous avez 40 annonces à modérer et pour ce faire vous devez aller chercher la petite checkbox et cliquer dessus. Tout ca sans perdre le fil et savoir a quelle ligne vous en êtes rester.
Bien évidement, pour compliquer l’affaire il faut compter sur le scroll vertical. Toujours sans point de repères pour savoir quelle est la dernière annonce qu’on viens de lire.
Bref, cet ancien formulaire était exténuant. Il fallait fournir un véritable effort de concentration.
Alors que désormais, ce n’est plus le cas. On traite les annonces une par une. Simplement en bougeant deux doigts sur le pavé directionnel du clavier.
Flèche de gauche je valide, de droite je supprime. Rien de plus simple.
Je peut même m’atterrer en cours et reprendre sans perdre le fil.
C’est pour le moment la meilleure solution que j’ai trouvé. Et malheureusement je ne suis pas un ergonome. La conception d’IHM, l’expérience utilisateur … tout ca c’est pas ma spécialité.
Si vous avez de meilleures idées, je suis preneur !!
Surtout que c’est un jolie cas d’école en plus
Merci de la réponse, moi je me demandais simplement si le traitement clavier était juste un gadget en plus par rapport à l’utilisation des boutons ou non.
Apparemment ce n’est pas le cas, bien au contraire.
Effectivement, ça paraît une interface très simple d’utilisation (d’autant qu’apparemment il n’y a pas de possibilité de modifier le contenu des annonces avant validation [ex. : fautes de frappe, modération...]), pas besoin de plus de deux actions, alors pourquoi pas au clavier ?
Je n’ai pas d’autres idées en tout cas, mais je ne suis pas spécialiste (même si j’essaye de m’intéresser à l’ergo Web). De toute façon l’un des utilisateurs principaux est pleinement satisfait : le travail est donc bien fait !
« La personne pour qui j’ai fait ce petit soft a apprécié le travail. »
L’ergonomie d’une application est un sujet difficile à aborder. A lire les problématiques initiales, les solutions apportées sont cohérentes.
Mais quelques remarques s’imposent selon moi :
- utiliser le clavier comme raccourcis est une excellente chose, mais quand cela s’inscrit dans une cohérence général connu de tout un chacun. « Flèche gauche pour supprimer, Flèche droite pour valider » est selon une étrangeté indescriptible. Certes quand on a à faire à une seule personne, ça passe. J’ai eu, dans ma jeunesse, à manipuler des applications administratives (fonction publique, etc) dans lesquelles les développeurs avaient inventé des raccourcis clavier. Les fameux F10 pour passer au champ suivant, F2 pour le précédent, F4 pour vider le contenu, j’en passe est des meilleures. Alors fut inventés les papiers à découper et à incruster sur son clavier, pour faire un pense-bête hyper complet… Mon principe est de dire qu’une ergonomie doit être suffisante à elle-même. Un utilisateur lambda doit pouvoir s’en sortir sans qu’on lui explique. Apple sont plutôt bons dans ce domaine.
- Une annonce à la fois.
Là c’est un point de vue autant défendable qu’une liste d’annonce. Dans cette solution on trouve comme principale critique « on n’a pas de vision d’ensemble ». Ainsi le choix qui a été fait en ergonomie ici se base sur les besoins d’une personne qui a sa manière de travailler. Quand on a à réaliser une application destinée à plusieurs centaines de personnes aux besoins et expériences différentes, c’est une autre affaire.
- Présence de toutes les informations
J’ai discuté avec une personne que je respecte énormément et qui a travaillé sur des logiciels informatiques depuis de nombreuses années, sans être lui-même informaticien. Il me parlait de deux points de vue différents et contradictoire.
* Tout d’abord pas plus de 20 informations à l’écran.
* Toute les informations possibles et imaginables du logiciel accessibles en 3 clicks maximum.
En résumer, une application doit être capable de gérer et organiser jusqu’à 8000 actions de façon cohérente, ergonomique. Loin d’être facile.
A la solution « Tout afficher à l’écran » un utilisateur répondra « PARFAIT » parce qu’il attend d’avoir toutes les informations, alors qu’un autre dira « C’est pas très clair » car il cherchait l’information synthétique et rapide.
Ton « exercice » d’amélioration ergonomique est je pense réussi, mais il manque ici le contexte de travail visé : cet écran est destiné à une validation une à une des annonces. Un travail répétitif, fastidieux, qui demande un esprit d’analyse. Il fallait donc fournir le maximum d’information de manière rapide (les mises en évidence, toutes les info sur un écran), et actions simples (clavier ou souris).
Le listing initial était peut être adapté aux besoins initiaux : avoir un aperçu rapide de plusieurs annonces, en sachant que les critères affichés étaient déjà suffisants pour en connaître la validité.
Pour revenir enfin aux besoins initiaux, voici ce que je retiens :
- on se perd dans le listing à savoir où on en est.
- la checkbox est difficilement accessible
Les solutions suivantes ont elles été abordées sérieusement (c’est à dire proposées et testées)?
- Diminuer le nombre d’annonce à l’écran, et agrandir la hauteur des lignes pour pouvoir voir plus d’info à l’écran, tout en conservant l’accès aux informations supplémentaires de façon optionnelle
- accès aux informations plus rapide, plus simple. Exemple : mettre une zone cliquable pour agrandir la ligne de l’annonce et voir ainsi toutes les info restantes
- intégrer le clavier à cette écran : sûrement la chose la plus sensible à faire et pas la plus simple. Parcours d’une ligne à l’autre avec « Fleche haut et fleche bas, page up, page down », voir les détails avec une touche (à déterminer? la touche + ? ENTREE?)
- mettre de bons gros boutons « VALIDER » (en vert) et « REFUSER » (en rouge) qui sont grisés/dégrisés selon le choix de l’utilisateur. Intégrer les raccourcis claviers. Mettre un bouton « Tout valider » « Tout refuser »
En ergonomie on peut partir vers de nombreuses solutions.
Merci pour ce sujet très intéressant.
Un plaisir de lire Guile. Je prends le temps de revenir sur ton commentaire.
- flèche gauche, flèche droite : ceci est paramétrable dans un fichier de conf. C’est méthylbro qui m’avait demandé ces deux touches précisément.
- une annonce à la fois : l’utilisateur sait toujours où il en est. Il peut répondre à un coup de fil puis revenir et ne pas être perdu.
- les informations les plus importantes sont mises en valeur, les autres sont présentes au cas où.
« Toute les informations possibles et imaginables du logiciel accessibles en 3 clicks maximum. » —> je pense que méthylbro te répondra mieux que moi. Je le pensai aussi et je me suis heurté à une dure résistance de sa part ^^ il t’expliquera mieux que moi, je vais lui dire de venir faire un tour ^^
en tout cas merci de ton commentaire fort intéressant