Maîtrisez les processus UX avec les composants Blazor Stepper & Wizard

Voici comment reconnaître ce que vos utilisateurs considéreront comme une « tâche difficile », comment vous devez la gérer dans votre interface utilisateur et les deux composants de l’interface utilisateur pour Blazor qui vous aideront à le faire.

L’objectif d’une bonne conception de l’expérience utilisateur n’est pas d’éliminer les tâches difficiles – des tâches difficiles existent, et vos utilisateurs et votre application doivent les gérer. L’objectif (citant la première règle de conception d’interface utilisateur de Vogel) est « de s’assurer que les utilisateurs savent toujours ce qu’ils doivent faire ensuite pour atteindre leurs objectifs ».

En utilisant le Composant pas à pas du Interface utilisateur Telerik pour les composants Blazor vous permettra de créer une interface utilisateur aussi simple ou sophistiquée que nécessaire pour atteindre cet objectif. En utilisant le Composant Assistantd’autre part, vous permettra d’ajouter un assistant efficace en très peu de temps – et le temps dont vous avez besoin sera consacré à la logique métier de l’assistant, et non à l’amener à faire ce qu’il faut.

Mais, pour bien utiliser l’un ou l’autre des composants, vous devez comprendre le problème.

Qu’est-ce qui rend une tâche « difficile » ?

Ce qui rend le plus souvent une tâche « difficile », c’est que l’utilisateur n’est pas familier avec la tâche – tout ce qui est nouveau sera plus difficile que quelque chose que l’utilisateur a déjà traité. Malheureusement, ce n’est pas le seul critère pour une « tâche difficile » – même les tâches familières peuvent toujours être difficiles.

L’armée américaine, par exemple, définit une « mission dure » comme ayant cinq caractéristiques, résumées dans l’acronyme VUCAD, désormais intégré au langage des affaires. Ces caractéristiques sont :

• Volatilité: La tâche change pendant son exécution.
• Incertitude: L’utilisateur ne peut pas être sûr de ce qui va se passer ensuite.
• Complexité: Il est difficile pour un utilisateur de garder à l’esprit un modèle de tous les composants de la tâche.
• Ambiguïté: Les entrées peuvent signifier plusieurs choses.
• Rétroaction différée: L’utilisateur ne connaît les résultats d’une action que bien après que l’action a été entreprise.

Pour résumer : dans une tâche difficile, l’utilisateur doit constamment décider quoi faire ensuite sans les informations nécessaires pour prendre de bonnes décisions.

Réduire la difficulté

Si nous assemblons la familiarité avec VUCAD, nous pouvons avoir une idée de ce que nous pouvons faire dans nos interfaces utilisateur pour réduire la difficulté d’une tâche dans l’esprit de l’utilisateur.

De toute évidence, un bon début pour réduire la difficulté d’une tâche est de rendre la tâche familière : créez une UX qui correspond au modèle mental de l’utilisateur sur la façon dont la tâche doit être traitée et qui ressemble à quelque chose que l’utilisateur connaît déjà. Un exemple évident de « rendre les choses familières » consiste simplement à diviser une tâche compliquée en plusieurs étapes distinctes : la plupart des utilisateurs ont l’habitude de travailler sur un ensemble d’étapes.

L’adoption d’un processus étape par étape vous permet également d’aborder les caractéristiques qui composent VUCAD :

• Volatilité: les étapes fournissent un chemin prévisible tout au long de la tâche.
• Incertitude: L’affichage des étapes à l’avance offre une visibilité sur « ce qui va suivre ».
• Complexité: Décomposer la tâche en tâches plus petites réduit la complexité à n’importe quelle étape.
• Ambiguïté: Décomposer la tâche vous permet de définir clairement ce qui se passe à chaque étape.
• Rétroaction différée: Montrer à l’utilisateur le résultat de ses actions à chaque étape aide l’utilisateur à comprendre les résultats de ses décisions.

Au lieu que les utilisateurs aient à se demander « Que dois-je faire ensuite ? » les utilisateurs effectuent simplement l’étape 1, sont automatiquement dirigés vers l’étape 2, effectuent l’étape 2 et continuent jusqu’à ce qu’on leur dise qu’ils ont terminé le processus.

Si cela ressemble à un sorcier… eh bien, ça l’est. Et, puisque vos utilisateurs ont presque certainement déjà vu un assistant, ce chevauchement vous donne une autre occasion de rendre votre tâche familière.

Objectifs de conception pour des assistants efficaces

Les trois principaux objectifs de conception pour la création d’un assistant qui aide réellement les utilisateurs sont :

1. Ne rien faire tant que l’utilisateur n’a pas atteint la dernière étape. Ce n’est que lorsque l’utilisateur clique sur le bouton Terminé à la dernière étape que vous devez agir.

La raison du premier principe est d’éviter d’avoir à annuler les modifications si l’utilisateur revient à une page antérieure et apporte une modification susceptible d’invalider les mises à jour « prématurées » que vous avez effectuées. Au lieu de cela, lorsque l’utilisateur clique sur le bouton Terminé à la dernière étape, vous validez les entrées de l’utilisateur dans les étapes précédentes et (si tout est complet et cohérent), effectuez toutes les mises à jour requises et fermez l’assistant.

2. Arrivez à la dernière étape avec toutes les données de l’utilisateur complètes et cohérentes.

Le but premier du deuxième objectif est, bien sûr, d’éviter d’ennuyer l’utilisateur. Si vous ne trouvez pas de problème tant que l’utilisateur n’a pas atteint la dernière étape, l’utilisateur doit revenir à une étape précédente et résoudre le problème. Personne ne considérera cela comme une caractéristique lorsqu’il s’agit d’un problème compliqué.

Mais il y a une deuxième raison à cet objectif : si l’utilisateur revient, par exemple, à l’étape 2 et apporte une modification, cette modification peut invalider une entrée que l’utilisateur a faite à l’étape 3 lorsqu’il a parcouru votre assistant pour la première fois. Désormais, les utilisateurs doivent non seulement résoudre leur problème d’origine, mais également résoudre tous les conflits créés par le correctif. Il est préférable pour tout le monde que tous les problèmes d’une étape soient détectés avant que l’utilisateur ne quitte l’étape.

3. Rendez toutes les étapes de l’assistant indépendantes les unes des autres et, à défaut, les étapes ultérieures ne seront pas affectées par les modifications apportées aux étapes précédentes.

L’idée derrière le troisième objectif est précisément d’éviter les problèmes créés lorsque l’utilisateur revient à une étape précédente. Même s’il n’y a pas de problème, les utilisateurs reviennent aux étapes précédentes car, au fur et à mesure qu’ils travaillent dans l’assistant, ils comprennent mieux le problème, vos utilisateurs deviennent plus intelligents. La raison pour laquelle les assistants ont un bouton Précédent est que les utilisateurs se rendent compte, tard dans le processus, qu’ils ont fait une entrée « malheureuse » lors d’une étape précédente. Atteindre le troisième objectif réduit l’impact que les modifications apportées aux étapes précédentes ont sur les étapes ultérieures.

Mais reconnaissez : Ce sont des objectifs que vous visez et qui peuvent ne pas être réalisables dans tous les assistants que vous créez. Lorsque vous ne pouvez pas les atteindre, le moins que vous puissiez faire est de mettre en œuvre le « modèle d’ardoise vierge” à la dernière étape de votre assistant et donnez aux utilisateurs la possibilité de revoir ce qui se passera lorsqu’ils cliqueront sur le bouton Terminé (ce modèle est également un bon choix pour une page de présentation qui présente votre assistant).

Composants de l’assistant et du stepper

Les composants Wizard et Stepper de Telerik UI pour Blazor vous permettront d’atteindre ces objectifs et d’aider vos utilisateurs à gérer des tâches complexes, mais ils ciblent différents niveaux de complexité/personnalisation.

Le composant Blazor Wizard vous offre toute l’assistance dont vous avez besoin pour créer un processus standard étape par étape qui guide l’utilisateur tout au long d’un processus, notamment en commençant par une vue d’ensemble du processus et en signalant à l’utilisateur où il se trouve dans le processus. Le composant Assistant comprend les boutons Suivant, Précédent et Terminé par défaut (bien que vous puissiez les personnaliser) et s’intègre au composant Formulaire afin que l’utilisateur ne puisse pas passer à l’étape suivante tant qu’il y a des erreurs dans l’étape. En réalité, le composant Assistant s’occupe de presque tout ce qui est nécessaire à la création d’un assistant afin que vous puissiez vous concentrer sur la logique métier implémentée par votre assistant.

Le composant Blazor Stepper est le plus simple des deux composants et vous donne le plus de place pour la personnalisation : le Stepper construit simplement l’interface utilisateur pour la liste des étapes qui composent l’assistant – le modèle de conception de l’interface utilisateur appelé « pas à gauche” ou “steps on top” (en fait, le composant Wizard utilise le composant Stepper pour construire sa liste d’étapes). Le composant Stepper vous laisse le soin de créer et d’intégrer l’interface utilisateur pour les étapes que le composant montre à l’utilisateur. Mais cela signifie également que le composant Blazor Stepper vous offre le plus de flexibilité lorsque vous créez un processus qui ne rentre pas dans le format standard de l’assistant.

Ce qui s’en vient, alors, ce sont deux séries approfondies – une pour le Stepper et une pour l’Assistant – qui vous montreront comment exploiter ces deux composants pour aider vos utilisateurs à travers n’importe quel processus compliqué.