Telerik Scheduler Blazor (partie 3): orienter l'attention de l'utilisateur

Le Telerik Blazor Scheduler vous permet non seulement d'ajouter un calendrier à l'interface utilisateur de votre application, mais également de diriger l'attention de l'utilisateur vers ce qui compte.

Avec son composant Scheduler Telerik UI pour Blazor vous permet d'ajouter facilement un calendrier à l'interface utilisateur de votre application Blazor pour prendre en charge la saisie ou la création de rapports à la fois des rendez-vous et des événements (l'équipe Telerik utilise les termes «planificateur» et «rendez-vous» pour discuter des données liées au temps). Cela vient en partie de l’exploitation des vues intégrées du planificateur . Cependant, une bonne interface utilisateur oriente également les utilisateurs vers où entrer ou trouver les données dont ils ont besoin dans l'interface utilisateur. Pour le dire autrement, une bonne interface utilisateur oriente l'attention de l'utilisateur, et le planificateur vous donne également des outils pour gérer cela.

Voici un aperçu rapide de la configuration d'un projet «compatible avec le planificateur» .

Mettre en évidence les bons moments

La bonne nouvelle ici est que chacune des vues vous offre plusieurs options pour faciliter la gestion de la concentration de l'utilisateur. Toutes les vues (à l'exception de la vue mensuelle), par exemple, incluent les attributs WorkDayStart et WorkDayEnd qui vous permettent de spécifier une plage de temps en surbrillance dans le calendrier.

Cet exemple amène la vue à mettre en surbrillance les heures entre 9h00 et 17 h 00, par exemple:

Lorsque l'utilisateur parcourt les jours, ces deux attributs ignorent l'année, le mois et le jour de la date qui leur est transmise et utilisent le seul composant d'heure de la date pour contrôler la plage horaire mise en surbrillance .

Si vous fournissez plusieurs vues, vous voudrez probablement vous assurer que ces paramètres sont les mêmes pour toutes les vues, donc centraliser ces champs en utilisant des champs est logique en utilisant un champ. Cette version du jour et des vues sur plusieurs jours utilise deux champs nommés StartDateTime et EndDateTime pour mettre en évidence la période "correcte":

Voici le code qui prendrait en charge ce balisage:

 @code  {
    DateTime StartDateTime  = 
           nouveau  DateTime  ( DateTime .  Now .  Year  DateTime .  Now .  Mois  DateTime .  Now .  Day   9  0  0 ) ; 
    DateTime EndDateTime  = 
           nouveau  DateTime  ( DateTime .  Now .  Year  DateTime .  Now .  Mois  DateTime .  Now .  Day   17   0   0 ) ; 

Avec les paramètres WorkDayStart et WorkDayEnd, vous vous retrouvez avec une interface utilisateur comme celle-ci dans la vue Jour:

Alors que la mise en évidence dans l'interface utilisateur guide l'utilisateur vers la partie droite de l'interface, si des zones en dehors d'une plage horaire spécifique sont interdites, la bonne pratique consiste à empêcher l'utilisateur d'accéder à ces heures . Si vous définissez les attributs StartTime et EndTime de la vue, vous limitez l'utilisateur à la plage horaire acceptable dans chaque vue (encore une fois, sauf pour la vue mensuelle). Comme pour WorkDayEnd / Start, bien que vous deviez fournir une date lors de la définition de ces valeurs, seules les restrictions de temps importent lorsque l'utilisateur se déplace d'un jour à l'autre.

Ce code limite l'utilisateur à un jour ouvrable de 9 h à 17 h, centraliser les paramètres pour qu'ils soient identiques dans toutes les vues:

Le code prenant en charge ce balisage ressemblerait à ceci:

 @code  {
    DateTime StartDateTime  = 
       nouveau  DateTime  ( DateTime .  Now .  Year  DateTime .  Now .  Mois  DateTime .  Now .  Day   9  0  0 ) ; 
    DateTime EndDateTime  = 
       nouveau  DateTime  ( DateTime .  Now .  Year  DateTime .  Now .  Mois  DateTime .  Now .  Day   17   0   0 ) ; 

Contrôle du niveau de détail

Vous pouvez également contrôler les incréments que les événements ou les rendez-vous peuvent être enregistrés en utilisant Attributs SlotDuration et SlotDivision. SlotDuration vous permet de spécifier la taille de chaque créneau, en minutes (60 minutes est probablement typique pour une vue quotidienne, par exemple); SlotDivision vous permet de contrôler le nombre de rendez-vous pouvant avoir lieu dans un emplacement. Ainsi, une SlotDuration de 60 minutes avec une SlotDivision de 6 amènera l'interface utilisateur à afficher l'heure par incréments d'une heure avec des rendez-vous potentiels à des intervalles de 10 minutes. Vous devrez décider dans quelle mesure votre utilisateur a besoin de l'interface utilisateur «volumineuse» ou «granulaire» (je suppose, par exemple, que 10 minutes sont trop granulaires pour la plupart des scénarios).

Ces paramètres créent un ensemble plus typique de Emplacements de 15 minutes:

SlotDivision et SlotDuration peuvent être utilisés dans toutes les vues (sauf, comme d'habitude, pour la vue mensuelle) mais avoir les mêmes paramètres d'emplacements pour toutes les vues peut ne pas avoir de sens.

En règle générale, les utilisateurs utilisent les vues hebdomadaires et sur plusieurs jours en mode «compartiment» («à quel point suis-je occupé» / «où ai-je du temps libre»): des compartiments très granulaires peuvent ne pas avoir de sens dans ces scénarios et une vue plus volumineuse peut être plus utile pour prendre en charge les scénarios de l'utilisateur. La vue du jour est généralement utilisée en mode «suivant» («que dois-je faire maintenant» / «qu'est-ce que je fais ensuite»), où des divisions plus granulaires peuvent avoir plus de sens.

Voici une interface utilisateur qui prend en charge très rendez-vous granulaires à intervalles de 10 minutes:

Les SchedulerDay / Week / MultiDayViews ont un ensemble similaire d'attributs. Cependant, MultiDayView comprend un attribut supplémentaire, qui contrôle le nombre de jours affichés côte à côte dans la vue. La valeur par défaut est de cinq (c'est-à-dire une semaine de travail typique) mais, en fonction de la personnalité et des paramètres de vos utilisateurs, vous voudrez peut-être donner à l'utilisateur un horizon temporel plus ou moins long.

Comme pour toutes les décisions UX, ce choix dépend de la compréhension Personnages et scénarios de vos utilisateurs: l'utilisateur trouve-t-il cinq jours «trop d'informations»? L’environnement de l’utilisateur est-il si instable que chercher plus de trois jours à perdre du temps est une perte de temps? Le scénario typique nécessite-t-il deux semaines d'informations? Répondre à ces questions vous permettra de choisir le bon numéro.

Tous ces attributs vous donnent une manière déclarative de créer une interface utilisateur qui a du sens pour vos utilisateurs. Cependant, Telerik Blazor Scheduler vous permet également de prendre le contrôle complet de l'interface utilisateur en exploitant le ItemTemplate. Cette fonctionnalité mérite cependant un message en soi – restez à l'écoute pour celle-ci dans les jours à venir.