SmartTips : Premiers pas
Aperçu général
Les SmartTips fournissent des conseils à l'écran qui peuvent être utilisés pour fournir des informations supplémentaires sur certains éléments de votre page aux utilisateurs.
Les SmartTips sont particulièrement utiles lorsque vous remédiez aux erreurs fréquentes des utilisateurs lors de processus ou dans des formulaires sur votre site.
Pour plus d'informations sur les SmartTips, consultez la page d'introduction aux SmartTips.
Les SmartTips individuels sont créés dans un Set : un groupe de SmartTips qui apparaissent généralement de la même manière ou sur la même page. Cet article vous guidera tout au long du processus de création d'un SmartTips Set.
Créer un Set de SmartTips
- Dans l'éditeur, cliquez sur l'icône bleue en forme de plus > sélectionnez SmartTips Set.
- Nommez les SmartTips. Conseil : vos utilisateurs finaux ne verront pas le titre, alors choisissez un nom qui vous sera utile pour identifier le Set à l'avenir.
- Définissez l'emplacement où vous souhaitez que le Set s'affiche :
- Affichez l'ensemble sur une page spécifique |Recommandé
- Les SmartTips sont normalement ajoutés à une seule page, comme un formulaire de sortie. Dans ce cas, il est préférable d'utiliser le moteur de règles pour définir la page afin d'optimiser les performances. Cliquez sur Create rule to identify page (créer un règle pour identifier la page) et suivez ces lignes directrices du moteur de règle.
- Afficher l'ensemble sur plusieurs pages
- Affichez l'ensemble sur la section_content_2=' de plusieurs pages. Sélectionnez cette méthode, si votre SmartTip est attaché à un élément qui apparaît dans l'ensemble de votre site (en-tête, pied de page, volet de navigation). Vous n'avez pas besoin d'utiliser le moteur de règles ici.
- Affichez l'ensemble sur une page spécifique |Recommandé
- Cliquez sur Enregistrer.
Créer des SmartTips
Maintenant que vous avez créé un Set de SmartTips, vous pouvez créer un SmartTip individuel.
- Cliquez sur l'icône + bleue dans le SmartTips Set pour ajouter un nouveau SmartTip.
- Sélectionnez l'élément auquel vous désirez joindre le SmartTip.
- Utilisez le pop-up du mini-éditeur pour définir les paramètres initiaux du SmartTip :
- Guidance SmartTips (le SmartTips de conseil) donne des informations supplémentaires sur des éléments particuliers d'une page. C'est le type de SmartTip le plus souvent utilisé.
- Validation SmartTips peut être utilisée dans les champs de texte pour s'assurer que les utilisateurs remplissent correctement leurs formulaires. Pour plus d'informations sur la Validation SmartTips, consultez l'article d'assistance Validation SmartTips.
- Choisissez la date d'affichage de ce message.
- Vous pouvez définir l'apparition de ce Guidance SmartTip quand les utilisateurs passent la souris sur une icône SmartTip. Si vous choisissez cette option, utilisez les flèches directionnelles pour déterminer l'emplacement de l'icône :
- Vous pouvez également choisir d'afficher un SmartTip lorsqu'un utilisateur passe sa souris sur un élément :
- Vous pouvez définir l'apparition de ce Guidance SmartTip quand les utilisateurs passent la souris sur une icône SmartTip. Si vous choisissez cette option, utilisez les flèches directionnelles pour déterminer l'emplacement de l'icône :
- Cliquez sur Done. (terminé) (Si vous créez plusieurs SmartTips, vous pouvez sélectionner Next SmartTip (SmartTip suivant))
Votre SmartTips Set est maintenant créé.
Personnaliser des SmartTips
- Ouvrez le SmartTips Set que vous désirez personnaliser et ouvrez un SmartTip spécifique en cliquant sur le titre.
- Dans la page Interaction, vous pouvez ajuster les paramètres des SmartTips qui ont été créés lorsque vous avez initialement créé l'étape dans le navigateur.
- Pour ajouter Validation to a Guidance SmartTip (validation au conseil), cliquez sur le bouton Add Validation (Ajouter la validation). Consultez le guide sur les SmartTips de validation pour plus d'informations sur la configuration des SmartTips de validation.
- Vous pouvez également choisir ici de déterminer si le message SmartTips s'affichera lorsque l'utilisateur passe la souris sur l'icône SmartTips ou qu'il passe sur l'élément.
- Cliquez sur les options Selected Element (Élément sélectionné) pour ajuster le comportement du SmartTip. Si le SmartTip est joint à un élément qui apparaît et qui disparaît lors du chargement de la page, vous devrez ajuster ces paramètres. (L'ajustement est souvent nécessaire pour les SmartTips qui apparaissent dans une fenêtre contextuelle ou modale.)
- Utilisez le bouton Customize on Screen! (Personnaliser à l'écran) pour ajuster la position et modifier l'apparence de ce SmartTip dans le navigateur.
- Utilisez l'Éditeur de texte enrichi pour créer d'autres personnalisations, y compris ajouter des images qui ont été téléchargées dans la bibliothèque d'éléments :
- Les types d'image suivants sont pris en charge : TIFF, SVG, PNG, JPG, JPEG, GIF.
SmartTips de conseils
Les SmartTips de conseils présentent aux utilisateurs des informations supplémentaires sur le contenu et le format des données qui doivent être renseignées dans le champ de saisie.
Les SmartTips de conseils peuvent être affichés dans une icône et les messages apparaissent lorsque vous survolez l'icône ou cliquez sur l'élément ou être affichés dans un texte de substitution, qui est toujours visible jusqu'à ce que l'utilisateur tape quelque chose dans le champ contenant le texte de substitution.
Comment afficher le SmartTip ?
Avec l'icône. Sélectionnez la position de l'icône. Lorsque cette option est sélectionnée, l'icône de conseil apparaîtra à côté de l'élément et le message s'affiche lorsque l'utilisateur le survole.
Sans icône. Lorsque cette option est sélectionnée, le message apparaîtra lorsque l'utilisateur passe la souris sur l'élément.
Texte de substitution uniquement. Lorsque cette option est sélectionnée, aucune icône ne s'affichera, seulement le texte de substitution.
Texte de substitution
Le texte de substitution, situé à l'intérieur d'un champ de texte, est un conseil, une description ou un exemple de l'information requise pour un champ particulier. Il disparaît lorsqu'un utilisateur commence à saisir quelque chose dans le champ.
Il est possible d'afficher à la fois un texte de substitution et un message au passage de la souris.
Le texte de substitution est disponible lorsque l'élément capturé est un champ de saisie ou si l'élément est défini avec jQuery. Le texte de substitution SmartTip remplacera tous les textes de substitution existants.
L'option de substitution est disponible uniquement pour les conseils. Elle n'est pas disponible si Validation ou Les deux est sélectionné.
SmartTips de validation
La Validation SmartTips vous permet de vérifier l'entrée de vos utilisateurs dans un champ de texte pour vous assurer que les informations données répondent aux exigences du champ. Le SmartTip de validation mettra en valeur le champ en rouge et affichera un message d'erreur si les informations données ne sont pas valides. La Validation SmartTips doit être placée dans un champ de texte.
- Pour créer une Validation SmartTip, vous pouvez ajouter un SmartTip à un SmartTips Set existant ou vous pouvez créer un nouveau SmartTips Set.
Remarque : vous pouvez ajouter une fonctionnalité de validation à SmartTip de conseil existant en cliquant sur le bouton Ajouter une validation dans l'onglet Interaction des options SmartTip. - Dans le SmartTips Set approprié, cliquez sur le signe + orange.
- Cliquez sur le bouton radio Validation pour transformer ce SmartTip en SmartTip de validation :
- Choisissez la date d'affichage du message de validation, puis cliquez sur Terminé. Cela ouvrira la page Options SmartTip dans l'Éditeur.
- Choisissez parmi les options disponibles pour les règles de validation (si aucune d'entre elles n'est applicable, vous pouvez Define valid entries (Définir les entrées valides) en utilisant le Moteur de règles) :
- Champ obligatoire
- Validation de champ numérique
- Validation du format date
- Validation du format heure
- Validation du format numéro de téléphone français
- Validation du format de l'adresse e-mail
- Validation du format de l'adresse Web
- Saisissez le message d'erreur que vous désirez afficher lorsque le texte saisi n'est pas valide.
- Éventuellement, vous pouvez cocher l'indication du succès, ce qui mettra en valeur le champ de texte vert une fois que le texte saisi est valide. Vous pouvez également inclure un message de réussite qui s'affichera une fois que l'information saisie est correcte.