Guider l'utilisateur via un formulaire en plusieurs étapes
Nous construisons une sorte d'assistant piloté par des règles qui aideront l'utilisateur à effectuer un certain nombre d'étapes, chacune consistant en un ensemble d'étapes - j'ai posé une question question à ce sujet plus tôt sur un sujet différent.
Les choses ont évolué depuis lors, et l'interface utilisateur ressemble maintenant à ceci:
Les chiffres rouges indiquent à l'utilisateur le nombre d'étapes qu'il doit terminer dans chaque étape (les autres étapes auront été remplies par les règles en arrière-plan), de sorte qu'une fois Étape 1 a été rempli, le premier numéro rouge à côté de Étape 1 disparaîtrait.
Parce qu'il peut y avoir de nombreuses étapes (peut-être 30 à 40) à chaque étape, les flèches en chevron dans le ruban mèneront l'utilisateur à celles qu'il doit effectuer. Cependant, ce qu'ils font n'est pas immédiatement évident!
Un collègue a suggéré qu'un texte entre les flèches soit inséré, quelque chose comme:
mais alors les deux nombres changeraient au fur et à mesure que l'utilisateur progressait et je soupçonne que ce serait déroutant.
Quelqu'un peut-il me suggérer ou m'indiquer un modèle qui pourrait fonctionner?
L'histoire de l'utilisateur ici serait:
En tant qu'utilisateur, je voudrais facilement localiser le champ suivant où mon action est requise.
Maintenant, il existe de nombreuses façons de satisfaire cela, mais aussi quelques hypothèses sont faites.
Inspection visuelle, quelqu'un?
L'un d'eux, est simplement par inspection visuelle . Si vous en savez un peu sur la cognition visuelle, vous pouvez concevoir l'interface de telle sorte que les utilisateurs puissent facilement repérer ces champs par simple défilement. L'ajout d'un indicateur clair à ce qui nécessite une action (ou ce qui ne le fait pas) signifierait une charge cognitive très faible lorsque les utilisateurs feraient défiler la liste des étapes. (Il existe une recherche à partir de laquelle vous pouvez déduire que ce serait une méthode efficace pour une liste composée d'environ 70 articles.)
Cependant, dans des scénarios spécifiques, même cette faible charge cognitive peut s'accumuler en quelque chose de gênant. Par exemple, il se peut que les utilisateurs utilisent à plusieurs reprises l'assistant chaque jour, et pire - que la manière dont il est rempli n'est pas séquentiel et implique pas mal de sauts d'étape.
Et donc, vous avez opté pour un moyen d'aider les utilisateurs en leur fournissant une action les amenant au champ requis suivant. Maintenant, il y a une supposition cachée ici qu'en effet le prochain champ requis (tel que déterminé par votre flèche) est ce que l'utilisateur veut - peut-il être le cas où l'utilisateur préférera remplir une dernière étape?
Gardez l'utilisateur sous contrôle
Maintenant, voici une métaphore du monde réel: considérez que vous devez parcourir 40 lettres que vous avez reçues. Maintenant, toutes les lettres sont devant vous, bien que certaines soient plus éloignées. Vous pouvez le faire de deux manières:
- Soit il y a un serviteur qui vous donne une lettre à la fois, vous pouvez soit l'ouvrir ou la rendre au serviteur pour l'ouvrir plus tard.
- Vous choisissez une lettre, si vous en avez terminé, vous la mettez dans le bac "terminé", ou vous pouvez la remettre sur la table. Aucun serviteur impliqué.
Le premier, implique un agent externe dont le travail est hors de votre contrôle et peut sembler étrange à la fois. L'utilisateur a moins de contrôle ici.
Ce dernier donne à l'utilisateur un contrôle total.
En utilisant cette métaphore, voici une histoire d'utilisateur révisée:
En tant qu'utilisateur, j'aimerais voir ce qui requiert mon action, afin que je puisse choisir quoi faire ensuite.
La façon dont vous réaliseriez cela sur une interface est un simple filtre au-dessus de la liste des étapes:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
De plus, vous pouvez fournir quelque chose comme "7 étapes restantes" pour indiquer les progrès.
Je pense qu'un défi très similaire se pose sur linkedin lorsque vous modifiez votre profil. Il vous donne une représentation visuelle de ce que vous avez accompli dans votre profil. Pour vous motiver pour plus de saisie, il place constamment une zone de texte proéminente en haut de l'écran, une par une, pour demander plus de saisie.
Pour votre cas, il ne convient pas parfaitement en raison du manque d'informations sur la quantité d'articles manquants. J'ai essayé une courte maquette où l'utilisateur serait guidé à travers la forme des champs de saisie manquants. Afficher seulement 1 champ (1 catégorie) et une progression sur le côté droit, pour donner à l'utilisateur un aperçu de la progression globale et oui, une récompense ("Mi-temps!", "Si proche!", ....) pour continuer à saisir des données. Dès que vous avez toutes les données, la boîte disparaît.
Avantages:
- Son endroit bien en évidence attire immédiatement l'attention. Aucun défilement n'est nécessaire car vous maintenez la progression à plat.
- Un par un: (divulgation progressive). Les gens doivent souvent penser à ce qu'il faut remplir. Donc moins de distractions en raison d'un seul domaine important.
- Récompenses: je déteste les formulaires. Oui. Donnez à l'utilisateur une raison de sourire pendant ce processus et la douleur a disparu. ;)
- Le côté droit donne un aperçu clair de ce qui reste pour le processus actuel (pas de basculement entre les étapes, jusqu'où sommes-nous allés)
J'espère que cette entrée vous donne quelques indices sur la façon de résoudre ce problème. :)
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
