Alertes

Une alerte fournit des informations sur l'état de l'application ou demande des informations essentielles sur la manière de réaliser une tâche particulière. Elle se distingue des autres types de fenêtre par le fait qu'elle n'est pas directement demandée par l'utilisateur et qu'elle contient habituellement un message ou une question plutôt que des contrôles modifiables. Comme les alertes sont des intrusions importunes dans le travail de l'utilisateur, ne les utilisez pas à moins que cela ne soit nécessaire pour éviter des éventuelles pertes de données ou d'autres problèmes importants.

Une alerte possède une bordure similaire à celle d'une boîte de dialogue et est un objet modal.

Une alerte ne doit pas apparaître dans la liste des fenêtres du tableau de bord à moins qu'elle ne soit, ou puisse être, la seule fenêtre affichée par l'application. Par exemple, une alerte concernant un rappel de rendez-vous peut être affichée après que la fenêtre principale de l'application calendrier a été fermée.

De plus, une alerte doit apparaître au dessus de l'application lorsque la fenêtre de l'application elle-même est sélectionnée dans la liste des fenêtres.

Figure III.10 Un exemple d'alerte
Format du titre

Les fenêtres d'alerte ne possèdent pas de titre car le titre ne ferait que dupliquer inutilement le texte principal de l'alerte. De cette manière, les utilisateurs peuvent lire et répondre à l'alerte plus rapidement car il y a moins de bruit visuel et de texte confus.

Redimensionnement

Les fenêtres d'alerte ne peuvent pas être redimensionnées. Si l'utilisateur a besoin de les redimensionner, c'est que le texte n'est probablement pas assez concis.

Commandes de la fenêtre :

Aucune

Les alertes doivent être disposées au dessus de leur parent

Les alertes n'apparaissent pas dans la liste des fenêtres du système. En conséquence, prenez bien soin de vérifier que les alertes sont au dessus de leur fenêtre parent. Sinon les utilisateurs perdront probablement l'alerte et trouveront que votre application ne répond plus sans raison apparente. Les fenêtres modales doivent toujours rester au dessus des fenêtres qu'elles bloquent.

III.IV.I. Texte d'alerte

Une alerte peut contenir à la fois un texte principal et un texte secondaire. Le texte principal résume brièvement la situation. Le texte secondaire fournit des informations supplémentaires.

À la fois, le texte principal et le texte secondaire doivent pouvoir être sélectionnés. Cela facilite pour l'utilisateur la copie et le collage du texte dans une autre fenêtre telle qu'un message de courriel.

Figure III.11 Positionnement du texte principal et secondaire
Texte principal

Le texte principal fournit à l'utilisateur en une seule phrase un résumé de l'information ou de l'action suggérée. Ce résumé doit contenir de manière concise les détails essentiels concernant le problème ou la suggestion. Toutes les alertes possèdent un texte principal, affiché avec une police grasse plus grande que celle par défaut. La ponctuation du texte principale est dans le style de celui d'un « titre de journal », c'est-à-dire, il ne possède pas de point terminal mais il peut se terminer par un point d'interrogation.

Marquez le texte principal avec la balise pango :

<span weight="bold"
      size="larger">Texte principal</span>

Texte secondaire

Le texte secondaire fournit une description un peu plus approfondie du problème et de l'action suggérée, y compris les possibles effets collatéraux. Il peut également fournir des informations susceptibles d'aider l'utilisateur à prendre une décision de manière avertie. Dans la plupart des situations, l'utilisateur ne devrait avoir besoin que du texte principal pour prendre une décision rapide, mais il peut lire le texte secondaire s'il n'est pas sûr du moyen d'action correct ou s'il a besoin de détails supplémentaires. Le texte secondaire est optionnel mais, s'il est utilisé, positionnez-le à une distance égale à la hauteur d'une ligne en dessous du texte principal en utilisant la taille et la graisse de la police par défaut.

III.IV.II. Boutons d'alerte

Placez dans toutes les alertes un bouton de confirmation qui ferme l'alerte et réalise l'action suggérée par le texte principal. Mettez un bouton Annuler pour toutes les alertes affichées en réponse aux actions de l'utilisateur, tel que Quitter. Si l'alerte concerne un problème technique ou autre situation qui pourrait provoquer des pertes d'informations, placez un bouton Aide donnant plus d'informations sur la situation particulière et expliquant les possibilités offertes à l'utilisateur. Vous pouvez également mettre des boutons pour réaliser des actions alternatives offrant des variantes possibles, résolvant des problèmes potentiels ou bien ouvrant des boîtes de dialogue ou des programmes en relation.

Figure III.12 Ordre et positionnement des boutons pour les alertes
Rédaction des intitulés de boutons

En anglais, rédigez les étiquettes de boutons avec des verbes à l'impératif, par exemple Save (Enregistrer), Print (Imprimer). Cela permet aux utilisateurs de choisir l'action avec moins d'hésitations. Également, la forme active, contrairement à la passive, est mieux adaptée au rôle du bouton qui est d'initier une action. Par exemple, Find (Chercher) et Log In (Se connecter) sont des boutons plus explicites que Yes (Oui) et OK (Valider).

  • Bouton de confirmation

    Placez le bouton de confirmation dans l'angle inférieur droit de l'alerte. Le bouton de confirmation accepte l'action proposée par l'alerte ou simplement ferme l'alerte si aucune action n'est suggérée (comme c'est le cas pour une alerte informative).

  • Bouton Annuler

    Si l'alerte a été provoquée en réponse à une action de l'utilisateur, placez un bouton Annuler immédiatement à la gauche du bouton de confirmation. Ce bouton d'annulation est un échappatoire pour les utilisateurs ; il permet de stopper l'action en réponse à une nouvelle information ou simplement en cas de clic accidentel. Un clic sur le bouton Annuler remet l'application dans l'état précédant l'action de l'utilisateur.

  • Bouton Aide

    Un bouton Aide peut s'utiliser pour expliciter les alertes qui avertissent d'options potentiellement destructrices. Placez le bouton Aide dans l'angle inférieur gauche de l'alerte. Lorsqu'il est cliqué, une fenêtre d'aide s'ouvre éclairant la situation, détaillant les actions inférées par les autres boutons et expliquant tout effet collatéral induit par chaque action.

  • Autres boutons

    Des boutons supplémentaires peuvent s'utiliser pour fournir une alternative à l'action principale proposée par le texte de l'alerte. Placez ces boutons à gauche du bouton Annuler ou du bouton de confirmation si le bouton Annuler n'existe pas. Un exemple trivial d'action alternative est donné par le bouton Quitter sans enregistrer dans une alerte de confirmation d'enregistrement. C'est une alternative à l'action principale suggérée Enregistrer et au bouton Annuler.

III.IV.III. Espacement et positionnement dans les fenêtres d'alertes

L'utilisation d'un espacement clair et cohérent dans les alertes rend le message plus facile à comprendre et les réponses disponibles plus évidentes.

Figure III.13 Espacement dans une fenêtre d'alerte
Conseils
  • La bordure sur les côtés de la fenêtre d'alerte, de même qu'espacement entre icône et texte, ont une largeur de 12 pixels.
  • L'espacement horizontal entre boutons est de 6 pixels.
  • Ajoutez un saut de ligne de la taille de la police standard au dessous à la fois du texte principal et du texte secondaire, ou bien de 24 pixels si vous utilisez Glade.
  • Alignez le haut de l'icône avec le haut du texte principal.
  • Alignez à gauche le texte du message pour les langues occidentales.
Détails techniques pour un agencement correct

Créez une nouvelle fenêtre GtkDialog en précisant le nombre de boutons que vous souhaitez que l'alerte contienne (et un bouton d'aide si nécessaire). L'objet GtkDialog contient un conteneur GtkVBox avec la ligne du haut vide et celle du bas contenant un objet GtkButtonBox contenant lui-même les boutons. Dans la partie vide du haut, placez un nouveau conteneur GtkHBox. Dans la colonne de gauche du GtkHBox, placez un objet GtkImage. Dans la colonne de droite du GtkHBox, placez un objet GtkLabel. À l'intérieur du GtkLabel, placez le texte principal d'abord (avec la balise Pango appropriée, consultez la Section III.IV.I ― Texte d'alerte), puis deux retours à la ligne (Entrée), puis placez le texte secondaire. Ensuite modifiez les propriétés de chaque contrôle selon ce tableau :

Tableau III.1 Propriétés du GtkDialog
Propriété Valeur
Titre (aucun)
Largeur de bordure 6
Type Premier niveau
Redimensionnable Non
Possède un séparateur Non
Tableau III.2 Propriétés du GtkVBox (inclus par défaut dans la boîte de dialogue)
Propriété Valeur
Espacement 12
Tableau III.3 Propriétés du GtkHBox
Propriété Valeur
Espacement 12
Largeur de bordure 6
Tableau III.4 Propriétés du GtkImage
Propriété Valeur
Alignement Y 0.00
Taille d'icône Dialogue
Tableau III.5 Propriétés pour le GtkLabel
Propriété Valeur
Utilisation de balise Oui
Retour à la ligne du texte Oui
Alignement Y 0.00

III.IV.IV. Alertes informatives

Utilisez une alerte informative lorsque l'utilisateur doit prendre connaissance d'informations affichées avant de continuer ou lorsqu'il a précisément demandé des informations. Présentez les informations moins importantes par d'autres biais tels qu'un message de barre d'état.

Figure III.14 Une alerte informative
Une alerte informative...
  • utilise l'icône information de la collection (stock icon),
  • présente un message qui peut être sélectionné et un bouton OK (Valider). Le bouton est placé dans le coin inférieur droite de l'alerte. Un appui sur Entrée ou Échap ferme l'alerte.
  • peut être munie d'un bouton pratique qui donne accès à un objet pertinent. Par exemple, un bouton Détails dans une alerte de rappel de rendez-vous qui ouvre une fenêtre des caractéristiques du rendez-vous. Placez ce bouton à gauche du bouton de confirmation.
Commandes de la fenêtre :

Enrouler/Dérouler, Minimiser (si l'alerte ne possède pas de fenêtre parent), Fermer

III.IV.V. Alertes d'erreur

Affichez une alerte d'erreur lorsqu'une opération demandée par l'utilisateur ne peut pas être réalisée avec succès. Présentez les erreurs causées par des opérations non demandées par l'utilisateur d'une autre manière à moins que l'erreur ne puisse provoquer des pertes de données ou d'autres problèmes sérieux. Par exemple, une erreur rencontrée pendant une vérification de présence de courriels initiée par l'utilisateur en cliquant un bouton de la barre d'outils doit être affichée à l'aide d'une alerte d'erreur. Cependant il est plus approprié de présenter une erreur rencontrée dans une vérification automatique et périodique du courriel par un message dans la barre d'état.

Figure III.15 Une alerte d'erreur
Une alerte d'erreur...
  • utilise l'icône erreur de la collection (stock icon),
  • présente un message qui peut être sélectionné et un bouton OK (Valider). Le bouton est placé dans le coin inférieur droit de l'alerte. Un appui sur Entrée peut fermer l'alerte d'erreur.
  • peut être muni d'un bouton pratique pour permettre la gestion immédiate de l'erreur. Par exemple, un bouton Format... dans une alerte « Le disque n'est pas formaté ». Placez ce bouton à gauche du bouton de confirmation.
Commandes de la fenêtre :

Enrouler/Dérouler

III.IV.VI. Alertes de confirmation

Présentez une alerte de confirmation lorsque la commande de l'utilisateur peut supprimer des données, créer un risque au niveau de la sécurité ou nécessiter plus de 30 secondes de travail de l'utilisateur pour retrouver l'état initial si la commande résulte d'une erreur.

Figure III.16 Une alerte pour confirmation
Une alerte pour confirmation...
  • utilise l'icône avertissement de la collection (stock icon),
  • présente un message pouvant être sélectionné avec, soit un bouton étiqueté d'un verbe ou d'une phrase verbale décrivant l'action à confirmer, soit le bouton OK (Valider) si l'étiquette nécessite plus de trois mots. Ce bouton est placé dans l'angle inférieur droit de l'alerte.
  • présente un bouton Annuler qui empêche l'exécution de la commande de l'utilisateur. Ce bouton est placé immédiatement à gauche du bouton OK (Valider) ou du bouton équivalent.
  • peut présenter un bouton d'action alternative ou un bouton pratique. Positionnez ce bouton à gauche du bouton Cancel (Annuler).
Commandes de la fenêtre :

Enrouler/Dérouler

III.IV.VI.I. Alertes pour confirmation d'enregistrement

Les alertes pour confirmation d'enregistrement aident à s'assurer que les utilisateurs ne perdent pas les modifications de leur document lorsqu'ils ferment les applications. Cela rend l'opération de fermeture moins risquée.

Figure III.17 Une alertes pour confirmation d'enregistrement
Texte principal

Enregistrer les modifications du document Nom du document avant de fermer ?

Vous pouvez remplacer « document » par une description plus exacte, par exemple « image » ou « diagramme » si le document en question n'est pas principalement du texte.

Texte secondaire

Si vous fermez sans enregistrer, les modifications effectuées lors de la dernière session seront définitivement perdues.

Le texte secondaire indique à l'utilisateur un contexte à propos des modifications qui pourraient être perdues.

Boutons

Fermer sans enregistrer, Annuler, Enregistrer

Lorsqu'une alerte de confirmation est nécessaire, affichez-la immédiatement. Si l'utilisateur confirme la fermeture sans enregistrement, masquez l'alerte et le document ou la fenêtre de l'application immédiatement avant de faire le ménage interne nécessaire. Si l'utilisateur choisit d'enregistrer avant de fermer, masquez l'alerte immédiatement, mais affichez la fenêtre du document jusqu'à ce que l'enregistrement soit terminé au cas où des erreurs apparaîtraient. Masquez la fenêtre du document immédiatement après qu'il a été enregistré avec succès.

III.IV.VII. Alertes d'authentification

Les alertes d'authentification demandent à l'utilisateur les informations nécessaires pour obtenir l'accès à des ressources protégées, telles que le nom d'utilisateur ou le mot de passe. Les alertes pour authentification sont un type spécial d'alerte : elles sont à la fois habituelles et grandement inévitables. Tout doit être tenté pour retenir aussi longtemps que possible les informations saisies dans une alerte d'authentification tout en respectant les contraintes de sécurité.

Figure III.18 Une alerte d'authentification

Conseils
  • Utilisez l'icône authentification de la collection (stock icon),
  • Affichez un champ de saisie avec étiquette pour chaque élément d'information requis. Les champs suggérés sont Nom d'utilisateur et Mot de passe (dans cet ordre) si besoin.
  • Si le fait de retenir le nom d'utilisateur plus longtemps que le mot de passe n'affecte pas la sécurité, pré-remplissez le champ nom d'utilisateur et donnez le focus au champ du mot de passe à l'affichage de l'alerte.
  • Affichez, soit un bouton étiqueté à l'aide d'un verbe ou d'une phrase verbale décrivant l'action d'authentification, soit le bouton OK (Valider) s'il n'y a pas d'expression appropriée ou si la longueur de la phrase excède trois mots. Ce bouton est placé dans l'angle inférieur droit de l'alerte.
  • N'activez pas le bouton Valider ou son équivalent tant que tous les champs requis ne sont pas saisis par l'utilisateur. Souvenez-vous cependant qu'il est possible que tous les champs ne soient pas nécessaires, par exemple un mot de passe vide peut être accepté dans certaines applications.
  • Affichez un bouton Annuler qui empêche l'authentification et ferme l'alerte. Placez ce bouton immédiatement à gauche du bouton Valider ou de son équivalent.
  • Placez tout bouton d'action alternative ou bouton pratique à gauche du bouton Annuler.
  • Lorsque l'utilisateur appuie sur la touche Entrée dans le dernier champ, activez le bouton par défaut. Lorsque l'utilisateur appuie sur Entrée dans tout autre champ, placez le focus dans le champ suivant.

Commandes de la fenêtre :

Enrouler/Dérouler