Maîtrisez les processus UX avec Blazor Stepper 1 : Gestion de l’interface utilisateur

Si votre utilisateur est confronté à une tâche difficile, vous pouvez utiliser le composant Blazor Stepper à la fois pour aider votre utilisateur à comprendre le problème et pour le guider. Voici comment le faire correctement.

Dans un post précédent, j’ai décrit ce qui compte comme une « tâche difficile » aux yeux de l’utilisateur et comment le modèle de conception de l’assistant (ou tout processus étape par étape) résout ces problèmes. La bibliothèque Telerik UI for Blazor comprend deux composants pour la mise en œuvre de solutions « de type assistant »: Pas à pas et le Magicien.

Le Blazor Stepper, bien que plus simple, est le plus flexible des deux composants car il en fait le moins : il implémente simplement le modèle de conception d’interface utilisateur appelé « pas à gauche” (également connu sous le nom de “steps on top”). Le Stepper vous laisse le soin de créer l’assistant pour les étapes que le Stepper montre à l’utilisateur, ce qui en fait le choix idéal soit lorsque votre processus ne correspond pas au modèle standard de l’assistant, soit lorsque vous n’avez pas besoin de tout l’assistant. motif. Que le composant Blazor Stepper soit vraiment facile à configurer n’est que la cerise sur le gâteau.

Configuration du stepper

Dès sa sortie de l’emballage, le Stepper vous offre un moyen simple de montrer aux utilisateurs qu’ils font partie d’un processus en n étapes, ainsi que leur position dans le processus et la visibilité des prochaines étapes du processus. Voici un exemple de conception la plus simple possible : un processus en quatre étapes, dont l’utilisateur a réalisé les trois premières.

Pour ajouter un Stepper à votre page, il vous suffit de :

• UN TelerikStepper élément avec son attribut bind-value défini sur une propriété ou un champ entier
• UN StepperSteps composant pour retenir vos pas
• Deux ou plus StepperStep éléments (un pour chaque étape de votre processus)

<TelerikStepper @bind-Value="@currentStep">
    <StepperSteps >
            <StepperStep></StepperStep>
            <StepperStep></StepperStep>
            <StepperStep></StepperStep>
            <StepperStep></StepperStep> 
   </StepperSteps>
</TelerikStepper>

Si vous préférez que votre Stepper parcoure la page plutôt qu’à travers, ajoutez simplement le Orientation attribuer à la TelerikStepper élément et réglez-le sur StepperOrientation.Vertical:

<TelerikStepper Orientation="StepperOrientation.Vertical" @bind-Value…

En plus du code Razor qui définit votre Stepper, dans votre zone de code, vous avez besoin d’un champ ou d’une propriété auquel le Stepper est lié et qui détient la position de l’utilisateur dans le processus (dans mon exemple, c’est le currentStep dans l’attribut bind-value). Vous pouvez utiliser ce champ (et certaines autres fonctionnalités du Stepper) pour contrôler la façon dont l’utilisateur travaille à travers les étapes. Mon exemple de Stepper dépend de la présence d’un champ (ou d’une propriété) comme celui-ci, par exemple :

int currentStep = 0;

Pour que le Stepper déplace l’utilisateur à l’étape 3, tout ce que j’ai à faire est de définir le currentStep champ à 2 (le Stepper représente l’index du pas et compte les pas à partir de 0, pas 1).

Affichage du processus

Numéroter les étapes à elles seules ne sera pas très utile pour aider votre utilisateur dans une tâche difficile – vous devez vraiment nommer et marquer les étapes. La clé est de le faire d’une manière qui aidera l’utilisateur à comprendre le processus (idéalement, en montrant à l’utilisateur comment le processus correspond au modèle mental de l’utilisateur de la tâche).

Par exemple, imaginez un processus dans lequel l’utilisateur doit assembler un ensemble d’occurrences consignées dans un cas qui constituera la base d’une enquête/résolution ultérieure. Ce processus peut consister en :

1. Sélection d’une plage de dates
2. Sélection des événements qui se sont produits dans cette plage
3. Définir le cas (attribuer un nom au cas, ajouter des informations supplémentaires)
4. Enregistrer le résultat

Pour ce processus, une interface utilisateur plus utile qu’un ensemble de nombres peut inclure des icônes et des étiquettes comme celle-ci :

Il est facile de configurer cela en utilisant le Attributs Label et Icon de StepperStep. Voici le balisage Razor qui a généré cette interface utilisateur :

<StepperSteps>
            <StepperStep Label="Pick Date Range" 
                         Icon="calendar" ></StepperStep>
            <StepperStep Label="Select Occurrences"
                         Icon="link" ></StepperStep>
            <StepperStep Label="Define Case"
                         Icon="folder-open" ></StepperStep>
            <StepperStep Label="Save Changes"
                         Icon="save" ></StepperStep>       
</StepperSteps>

Vous pouvez trouver une liste complète des icônes disponibles sur le Site Telerik. Si vous n’aimez pas les icônes qui y sont répertoriées, vous pouvez remplacer l’attribut Icon par le
ImageUrl attribuer et utiliser le graphique de votre choix (ou vous pouvez utilisation IconClass pour les icônes externes). Si vous préférez que votre étiquette s’affiche à l’intérieur de l’étape plutôt qu’en dessous, utilisez la StepperStepl’attribut Text au lieu de Label. En fait, si vous n’êtes pas satisfait du code HTML généré pour les étapes de l’interface utilisateur du Stepper, vous pouvez remplacez-le par le vôtre.

Mais cela suppose que les icônes décorant les étapes soient utiles à l’utilisateur, ce n’est pas forcément le cas. Certaines icônes seront certainement utiles à votre utilisateur : un processus d’achat comprendra généralement des icônes de panier, de signe dollar et de camion pour les étapes qui impliquent la sélection des produits, le paiement de la commande et le choix d’une méthode d’expédition. Un utilisateur typique les reconnaîtra probablement tous et, par conséquent, comprendra mieux le processus.

Cependant, si vous vous étirez pour trouver une icône qui aidera réellement l’utilisateur, vous n’avez pas à en fournir une – laissez votre texte et/ou étiquette communiquer le but de l’étape. Si, en fait, vos étiquettes font tout ce dont votre utilisateur a besoin, vous pouvez afficher le texte de l’attribut Étiquette à la place de l’icône. Tout ce que vous avez à faire est de régler le Stepper StepType attribuer à StepperStepType.Labels:

<TelerikStepper StepType="@StepperStepType.Labels" @bind-value="currentStep" >

Cela donne cet affichage :

La question essentielle que vous devez vous poser pour prendre ces décisions n’est pas « Que fera le composant ? » mais « Qu’est-ce qui aura du sens pour l’utilisateur? »

Garder le processus simple

L’interface utilisateur de Blazor Stepper vous permet également de marquer les étapes du processus comme facultatives. Tout ce que vous avez à faire est de régler le Optional attribut sur le StepperStep à vrai :

<StepperStep Label="Define Case"
                         Icon="folder-open"
                         Optional="true" ></StepperStep>

L’interface utilisateur de vos étapes signalera l’étape facultative.

Mais, en termes de « meilleures pratiques pour les assistants », cela peut ne pas être utile – en ajoutant des informations supplémentaires sur le processus, vous pouvez en fait compliquer la compréhension du processus par vos utilisateurs.

De nombreux premiers assistants incluaient des étapes qui avaient des boutons qui offraient des choix supplémentaires (souvent étiquetés quelque chose comme « Options avancées »). En effet, ces boutons augmentaient la complexité du chemin à travers l’assistant car le chemin ressemblait maintenant à ceci :

La dernière chose dont l’utilisateur a besoin lorsqu’il s’agit d’une tâche difficile est Suite complexité, de sorte que ces boutons « Options avancées » ont presque complètement disparu. Ces jours-ci, ces « étapes de choix supplémentaires » ne sont plus que des étapes d’un chemin direct :

Mais il y a une exception à cette règle : la première étape du processus. Il est souvent utile, dans la première étape d’un assistant, de fournir à l’utilisateur un contexte et une vue d’ensemble/explication du processus afin de réduire la « méconnaissance » de l’utilisateur avec le processus. Cependant, si l’utilisateur interagit fréquemment avec le processus, le processus cessera d’être « inconnu » et cette première étape ne fera que gêner l’utilisateur.

Marquer cette première étape comme facultative et l’étiqueter quelque chose comme « Intro » a du sens (tout comme donner à l’utilisateur la possibilité de sauter complètement l’étape – un sujet dont je parlerai dans un article ultérieur).

Le Blazor Stepper vous donne la possibilité de fournir une description utile du processus – votre prochaine étape (et mon prochain article de blog) consiste à intégrer votre interface utilisateur au Stepper.