Fonctionnalité dynamique pour les éléments de l'interface utilisateur

La conception d’une interface utilisateur dynamique (dynamic UI design) est la pratique consistant à concevoir une interface utilisateur capable de s’adapter à la saisie de l’utilisateur. Lorsque vous concevez une interface utilisateur (UI) dynamique, vous contrôlez les champs que les utilisateurs voient et avec lesquels ils interagissent, selon des conditions précises. Le contenu d’une UI dynamique est une composante essentielle de la conception d’une interface utilisateur basée sur l'intention. Les choix effectués par les utilisateurs définissent les contrôles qui s’affichent, de sorte que seuls les champs pertinents sont présentés.

Par exemple, lorsqu’un client effectue une demande de prêt, il doit indiquer son état civil. Si le client indique être marié, l’application affiche des champs de saisie pour son/sa conjoint(e).

Au centre de l’image suivante, faites glisser la ligne verticale pour afficher la demande de prêt avec l’option Single (célibataire) ou Married (marié) sélectionnée.

Pour configurer un comportement dynamique pour les éléments de l’UI, vous pouvez choisir quand afficher et désactiver les éléments.

Visible

Configurez la visibilité d’un champ ou d’une mise en page (layout) pour l'afficher lorsqu’une condition spécifique est remplie.

Par défaut, le paramètre de visibilité des éléments de l’UI est Always, ce qui signifie qu’ils s’affichent toujours à l’écran. Le tableau suivant contient d’autres options de paramétrage de la visibilité.

Paramètre de visibilité	Comportement de l’élément de l’UI	Exemple	Description de l'exemple
Always	S’affiche toujours.		Vous souhaitez que le champ Name, dans lequel l’utilisateur saisit son nom, soit toujours visible.
Condition (expression)	S’affiche lorsqu’une expression (qui peut être une règle When) renvoie la valeur vrai. Utilisez cette option pour les expressions courtes que vous n’avez pas besoin de réutiliser tout au long du dossier.		Lorsqu’un utilisateur sélectionne l’option Special meal (Repas spécial), la liste déroulante Type of meal (Type de repas) s’affiche. Autrement, la liste déroulante ne s’affiche pas. Vous indiquez que c’est le seul endroit où cette expression doit apparaître ; l’utilisation de l’option Condition (expression) est donc appropriée.
Condition (when rule)	S’affiche lorsqu’une règle When renvoie la valeur vrai. Utilisez cette option pour des règles When plus complexes ou que vous réutilisez à plusieurs reprises dans un type de dossier.		Vous créez une règle When, quand Marital Status = Married, que vous prévoyez de réutiliser. Vous référencez cette règle When de sorte que, lorsque l’utilisateur sélectionne Married pour Marital Status, le champ Name of Spouse (nom de conjoint) est visible. S’il n’indique pas être marié, le champ Name of Spouse n’est pas visible.
If not blank	S’affiche si le champ contient une valeur.		Lorsqu’ils confirment un rendez-vous médical, les patients peuvent choisir la date de leur prochain rendez-vous. Si le patient sélectionne une date, le champ Next appointment date (date du prochain rendez-vous) est visible. Si le patient ne sélectionne pas de date, le champ Next appointment date (date du prochain rendez-vous) est masqué.
If not zero	S’affiche si le champ contient une valeur autre que zéro.		Lorsqu’un client réalise un achat en ligne, le montant total de la commande est calculé. Si le champ Order total est supérieur à zéro, il s’affiche. Si le montant de la commande est égal à zéro, le champ Order total est masqué.

Disabled

Configurez ce paramètre lorsqu’un champ ou une mise en page (layout) est désactivé(e) pour limiter l’accès d’un utilisateur à un champ. Un champ ou une mise en page est désactivé(e) lorsqu’une condition spécifique est remplie.

Par défaut, les éléments de l’UI ne sont jamais désactivés, ce qui signifie que les utilisateurs ont toujours accès aux éléments de l’UI. Le tableau suivant présente les options permettant de désactiver les éléments de l’UI.

Paramètre Disabled	Comportement de l’élément de l’UI	Exemple	Description de l'exemple
Never	Jamais désactivé		Un utilisateur doit toujours pouvoir saisir son nom dans le champ Name.
Always	Toujours désactivé		Un client choisit le type de compte lorsqu’il ouvre un compte bancaire. Une fois le compte créé, le client peut voir mais ne peut plus modifier le type de compte. Pour que l’UI se comporte ainsi, vous devez configurer le champ Account type de sorte qu’il soit toujours désactivé.
Condition (expression)	Désactivé lorsqu’une expression (qui peut être une règle When) renvoie la valeur vrai.		Lorsque l’utilisateur choisit Email pour Preferred Contact Method (méthode de contact préférée), le champ Mobile number (numéro de téléphone portable) est désactivé. Lorsque l’utilisateur choisit Text (SMS) pour Preferred Contact Method (méthode de contact préférée), le champ Email est désactivé. Vous indiquez que c’est le seul endroit où cette expression doit apparaître ; l’utilisation de l’option Condition (expression) est donc appropriée.
Condition (when rule)	Désactivé lorsqu’une règle When renvoie la valeur vrai.		Vous référencez une règle When, when age is greater than or equal to 21 (âge égal ou supérieur à 21 ans) de sorte que lorsqu’un client âgé de 21 ans ou plus demande une carte de crédit, le champ Cosigner information (coordonnées du cosignataire) est désactivé.

Required

Configurez ce paramètre lorsqu’un champ ou une mise en page (layout) est requis(e) pour obliger l’utilisateur à préciser une valeur. Un champ ou une mise en page est requis(e) lorsqu’une condition spécifique est remplie.

Par défaut, les éléments de l’UI ne sont jamais requis, ce qui signifie que l’utilisateur peut poursuivre le traitement du dossier sans préciser de valeur. Le tableau suivant présente les options permettant de rendre obligatoires certains éléments de l’UI.

Paramètre Required	Comportement de l’élément de l’UI	Exemple	Description de l'exemple
Never	Jamais obligatoire		Vous souhaitez que le champ Email soit facultatif.
Always	Toujours obligatoire		Quand un client ouvre un compte bancaire, il doit choisir le type de compte. Le champ Account type (type de compte) est toujours requis.
Condition (expression)	Requis lorsqu’une expression (qui peut être une règle When) renvoie la valeur vrai.		Lorsque l’utilisateur choisit Email pour Preferred Contact Method (méthode de contact préférée), le champ Email est requis. Lorsque l’utilisateur choisit Text (SMS) pour Preferred Contact Method (méthode de contact préférée), le champ Mobile number (numéro de téléphone portable) est requis. Vous indiquez que c’est le seul endroit où cette expression doit apparaître ; l’utilisation de l’option Condition (expression) est donc appropriée.
Condition (when rule)	Requis lorsqu’une règle When renvoie la valeur vrai.		Vous référencez une règle When, when age is less than 21 (âge inférieur à 21 ans) de sorte que lorsqu’un client âgé de moins de 21 ans demande une carte de crédit, le champ Cosigner information (coordonnées du cosignataire) est requis. Autrement, la saisie des coordonnées du cosignatare est facultative.

Vérifiez vos connaissances avec l’interaction suivante :