Partager via

Principes de l’interface utilisateur

Cette rubrique explique comment implémenter des principes de conception intuitifs de l’interface utilisateur et de l’expérience utilisateur dans des applications Windows.

Présentation

Les développeurs ne prennent souvent pas en compte la perspective de l’utilisateur final. Ils travaillent dur pour faire fonctionner l’application. Les clients s’attendent simplement à ce que cela fonctionne et à leur perception des centres logiciels autour de cette exigence. Cela est particulièrement vrai si vous développez des logiciels destinés à la vente au détail, ou quelque chose qui sera utilisé par des personnes non techniques. Les développeurs doivent connaître les besoins de l’utilisateur final tout au long du processus de conception de logiciel.

Une application logicielle doit être aussi facile à naviguer et à utiliser que possible. Avec la quantité de logiciels en cours de création, environ 4 sur 10 applications logicielles ont une interface utilisateur vraiment géniale que l’utilisateur final aime vraiment et avec laquelle il est instantanément à l’aise.

Une quantité massive de logiciels d’utilisation interne est créée pour les entreprises. Qu’il soit développé en interne ou par le soin d’un consultant, souvent un minimum de temps, d’effort ou d’argent est investi dans la création d’une meilleure interface utilisateur. Le rôle de « concepteur » est rare dans le cycle de développement, en particulier dans le monde des applications Windows.

Il existe quelques règles de base à suivre pour avoir une interface utilisateur beaucoup plus agréable et plus fonctionnelle pour votre application. Cela ne nécessite pas trop d’investissement de temps ou d’argent de votre part, et ajoute un bon retour sur investissement.

Avant d’aller plus loin, nous allons différencier l’interface utilisateur et l’expérience utilisateur, au moins pour le cadre de cet article. L’interface utilisateur ou IU fait référence aux visuels et aux contrôles de votre application, tandis que l’expérience utilisateur, ou XU, englobe à la fois l’interface utilisateur et le comportement de l’application liée à l’interface utilisateur, ainsi que le « sentiment » que l’utilisateur ressent face à votre application. Il ne s’agit pas seulement de concevoir une interface utilisateur de très belle apparence, mais de s’assurer qu’elle fonctionne aussi bien.

Ici, nous aborderons 20 points de conception d’expérience utilisateur que vous pouvez intégrer facilement à votre phase de conception d’application. Le résultat sera des applications plus riches avec des fonctionnalités plus intuitives : une expérience utilisateur humaine. Comme nous savons tous que la génération d’applications Windows Vista devra se présenter et se comporter différemment. Cette rubrique vous aidera à préparer les applications futures tout en donnant à vos utilisateurs actuels un aperçu de l’avenir.

Les sections suivantes décrivent les principes de base de la conception appropriée d’une interface utilisateur.

Principes de base de l’interface utilisateur appropriée

L’expérience utilisateur d’aspect professionnel dépend de ces quatre facteurs :

  • Espacement et positionnement
  • Taille
  • Regroupement
  • Intuitivité

Avec les versions de Microsoft Visual Studio antérieures à la version 8.0, l’espacement et le dimensionnement n’étaient pas optimaux. Une grille 4x4 ou 8x8 ne fonctionne pas toujours. Avec l’inclusion de SnapLines, le processus a été considérablement simplifié. L’alignement d’un libellé avec une zone de texte, voire pire, l’alignement de plusieurs libellés avec leur zone de texte correspondante était extrêmement difficile dans les versions précédentes de Visual Studio. Les lignes de magnétisation (SnapLines) ont considérablement simplifié ce processus.

Les sections suivantes décrivent quatre des aspects les plus importants de la conception d’une expérience utilisateur professionnelle.

Espacement et positionnement

L’espacement entre deux contrôles est important. La capture d’écran suivante illustre un formulaire de saisie d’informations utilisateur mal conçu : les deux premières zones de texte sont trop proches, la liste sous ces zones est trop éloignée et il y a beaucoup d’espace inutilisé sur le formulaire.

capture d’écran d’un formulaire mal conçu.

Dans la capture d’écran suivante, vous pouvez voir une boîte de dialogue d’aspect plus professionnel avec un espacement correct et des contrôles de taille appropriée. Il s’agit du même formulaire que celui de la capture d’écran précédente, mais il a été modifié pour utiliser l’espacement recommandé par les lignes de magnétisation. Il est toujours recommandé d’aligner un libellé avec la ligne de base de texte de la zone de texte ou d’un autre contrôle en regard de celui-ci, plutôt que la bordure inférieure courante du contrôle. Les lignes de magnétisation adoptent une couleur différente lorsque cet alignement est atteint, généralement quelques pixels au-dessus de la bordure inférieure.

capture d’écran d’un formulaire mieux conçu.

Bien qu’il n’existe aucune règle exacte pour l’espacement, les lignes de magnétisation fournissent des guides extrêmement utiles pour l’espacement approprié. D’autres outils pour vous aider à conserver l’espacement approprié sont les contrôles de disposition sous le groupe de boîtes à outils Conteneurs. TableLayoutPanel est également très utile pour créer des boîtes de dialogue de style de formulaire de saisie.

Taille

Les mêmes considérations s’appliquent à la taille. Lorsque vous faites glisser un bouton de la boîte à outils sur votre formulaire, il a la hauteur et la largeur parfaites. La largeur maximale recommandée (sauf raisons sérieuses) consiste à doubler la largeur d’origine.

Si vous examinez la fenêtre Exécuter dans le menu Démarrer ou la boîte de dialogue Propriétés d’un objet Explorateur Windows, les tailles de bouton sont « juste correctes ». Si vous avez une fonction très importante que vous avez besoin que votre utilisateur final remarque sans faute, il existe d’autres méthodes que l’utilisation d’un bouton volumineux ou de couleurs non standard (d’autres détails seront fournis plus tard).

Sur l’image suivante, vous pouvez voir trois boutons. Le premier bouton a la taille la plus recommandée et adopte la taille créée par défaut lors du déplacement (ou double-clic) à partir de la boîte à outils. Parfois, un texte supplémentaire vous oblige à agrandir le bouton. Le deuxième bouton affiche une grande taille encore acceptable. Il ne créerait pas de problème pour la disposition d’autres contrôles. Le troisième bouton, cependant, a une taille totalement inacceptable. Vous pouvez voir qu’il déforme même légèrement les bitmaps de thème que Windows utilise pour dessiner des contrôles thématiques. Il sera également difficile d’aligner d’autres contrôles de manière intuitive autour de celui-ci.

image de trois boutons, augmentant en taille de gauche à droite.

Regroupement

En règle générale, une application contient de nombreux contrôles. Seuls les regroupements appropriés et intuitifs vous permettent de faciliter l’utilisation de tous ces contrôles. Le regroupement basé sur des fonctions ou classé est le mieux effectué par les contrôles Tab. Par exemple, « Comptes », « Rapports », « Employés » et « Projets » sont des candidats parfaits pour les onglets d’une application professionnelle classique. Le regroupement de fratrie (contrôles qui contribuent au même résultat final) est le mieux réalisé par les contrôles de groupe. L’utilisation de panneaux avec des bordures pour ce regroupement n’est pas recommandée. Les contrôles de groupe vous permettent d’économiser le poids supplémentaire d’un contrôle de libellé, en particulier si vos sous-contrôles sont explicites.

Les contrôles de groupe à l’intérieur des contrôles de groupe ne sont pas recommandés, sauf s’il n’y a pas plus de 2 ou 3 d’entre eux à l’intérieur d’un contrôle de groupe volumineux.

Intuitivité

Il s’agit de l’aspect le plus important d’une bonne expérience utilisateur. L’expérience utilisateur intuitive réduit le besoin d’explications. L’utilisateur sait simplement ce que font les contrôles.

Un aspect important de la conception intuitive est le codage de couleurs. Un bon exemple en est donné par Windows XP, qui a présenté de nouveaux boutons carrés pour des fonctions telles que la navigation dans les applications thématiques, les boîtes de dialogue Déconnexion et Arrêter l’ordinateur, et d’autres.

La couleur de ces contrôles a été déterminée en fonction de la gravité du résultat de la pression sur le bouton. La navigation est verte, tout comme un feu de circulation vert. La fonction Arrêter, ce qui entraînerait une perte de travail potentielle, est rouge comme un panneau d’avertissement. Les boutons semi-critiques tels que ceux de la fonction Déconnexion ou Mise en veille prolongée sont jaunes. Les boutons neutres qui n’ont aucun effet critique sur les processus de travail de l’utilisateur, tels que l’aide, sont bleu clair. Lors de la création d’une interface utilisateur avec un habillage sophistiqué, ces aspects de couleur doivent être conservés à l’esprit.

Un très bon exemple de reconnaissance du contenu par couleurs est Microsoft Office OneNote. Les onglets de l’application peuvent être définis sur différentes couleurs tout en paraissant essentiellement comme une partie propre de la conception globale du style Windows XP.

Un autre aspect important est le texte de vos applications. Récemment, des efforts ont été déployés pour simplifier la langue utilisée pour les instructions écrites dans les logiciels Windows. L’utilisation du texte à l’intérieur du logiciel sera abordée plus tard, mais veuillez noter le détail suivant, certes mineur, mais néanmoins important.

MSN Messenger avait une case à cocher dans sa boîte de dialogue Options marquée « Partager les fonctionnalités de webcam ». Les développeurs et les personnes sensibilisées à la technologie savent ce que cela signifie, mais un utilisateur novice pouvait éventuellement penser que ce bouton permettait à un autre utilisateur de sa conversation d’utiliser également sa webcam. Dans une version récente, le libellé de ce bouton a été changé en « Ma webcam : Autoriser les autres à voir que j’ai une webcam ». C’est parfait pour le public cible qui n’a peut-être pas de connaissances techniques et qui est habitué à un langage simple.

Bien que le langage plus simple facilite la compréhension, il existe également un avantage supplémentaire. Les études scientifiques montrent que notre esprit fonctionne plus facilement avec un langage plus simple lorsque nous essayons de comprendre quelque chose de nouveau. Souvent, notre cerveau traite les mots comme « il », « pour », « que », et d’autres mots communs si rapidement et sans effort que plus de « bande passante » est alloué pour comprendre les mots qui se distinguent, comme « webcam » ou « autres », dans l’exemple ci-dessus.

Les titres de zone de message, les légendes de zones de groupe et d’autres blocs de texte de ce type vous permettent d’indiquer facilement la fonction d’un groupe de contrôles à l’utilisateur final en quelques mots.

L’intuitivité est également née de la familiarité. Par exemple, le placement des boutons OK et Annuler est tellement uniforme et correctement disposé dans nos esprits que si une boîte de dialogue contient ces boutons dans une séquence inverse (Annuler, puis OK au lieu de OK, puis Annuler), on peut facilement appuyer sur Annuler au lieu de OK. Après avoir utilisé une norme particulière pour effectuer des opérations (applications Windows, par exemple) pendant plus d’un an, les habitudes se développent. En respectant les normes du secteur (même si elles ne sont pas explicitées), vous facilitez l’utilisation de vos logiciels.

Dans l’une des versions préliminaires de Windows Vista, les boutons Réduire, Agrandir et Fermer de toutes les fenêtres sont devenus différents. Dans les versions précédentes de Windows (en particulier, lors de l’utilisation d’un seul écran), vous développiez l’habitude de déplacer le pointeur dans le coin supérieur droit de l’écran et de cliquer. Cela entraînait toujours la fermeture de la fenêtre. Maintenant, dans cette build particulière de Windows Vista, il y avait environ 8 pixels d’espace entre le bouton Fermer et la bordure la plus à droite de la fenêtre. L’espace supplémentaire lui donnait l’air cool (et était probablement nécessaire pour l’animation d’éclat froid du bouton affiché), mais était énervant parce qu’il ne permettait pas aux utilisateurs de fermer les fenêtres ouvertes aussi facilement. Reconditionner votre esprit peut s’avérer difficile. Heureusement, dans la build suivante, ce problème a été résolu. À présent, il y a encore de l’espace entre la bordure de la fenêtre et le bouton Fermer, mais le fait de cliquer sur cet espace entraîne également la fermeture de la fenêtre.

Un facteur très important de conception intuitive est la quantité de « bande passante mentale » (le temps qu'il faut à notre esprit pour comprendre quelque chose) qu’elle utilise. Plus l’utilisation de la « bande passante » est faible, plus votre expérience utilisateur est améliorée.

Il s’agit de petites choses qui contribuent à l'« expérience » de l’utilisation d’une application logicielle. Les exemples suivants fournissent des conseils sur l’amélioration de vos applications avec des conseils et astuces réels.

20 astuces pour améliorer l’expérience utilisateur fonctionnelle

L’objectif d’une meilleure expérience utilisateur est d’avoir une interface utilisateur plus simple, plus facile à utiliser et fonctionnelle qui paraisse aussi plus esthétique. Ces conseils vous aideront à mettre en forme votre interface utilisateur pour qu’elle soit plus efficace.

Utiliser les normes

Les normes établies de n’importe quel environnement logiciel (au niveau du système d’exploitation, de la marque ou de l’application) sont très importantes. Outre l’image de la marque, les normes agissent comme un schéma proverbial dans l’esprit de l’utilisateur. Lorsque l’utilisateur passe de longues périodes de temps à travailler avec une application logicielle, il augmente automatiquement sa productivité en raison de sa connaissance croissante.

Avant de discuter des normes, examinons d’abord ce que sont exactement ces normes. Les normes incluent tous les éléments de la disposition des contrôles d’une manière particulière dans les boîtes de dialogue, comme les boutons OK et Annuler, la forme de l’interface utilisateur, les angles arrondis de la fenêtre comme dans les boîtes de dialogue Windows XP, les styles d’icônes, les styles d’autres graphismes, le comportement interactif de votre application, etc.

Si votre application relève d’une niche spécifique, il peut être préférable de suivre un ensemble différent de normes. Par exemple, si votre application ou module complémentaire prend en charge Office OneNote 2003, il est judicieux de suivre les styles des normes d’interface utilisateur et d’interactivité d’Office, et OneNote lui-même, en particulier. Cela inclut l’utilisation des barres de commandes de style Office au lieu des barres d’outils standard, ainsi que d’autres éléments tels que les éléments visuels et comportementaux. Si votre application doit faire partie de la catégorie Microsoft Visual Studio .NET, vous disposez alors d’un ensemble distinct de normes. En fait, pour ces applications complémentaires ou de support, les entreprises telles que Microsoft publient des instructions écrites. Notez également que parfois les concepts graphiques et de conception sont des propriétés intellectuelles protégées. Vérifiez toujours la documentation appropriée pour vous assurer que vous disposez de la licence nécessaire pour créer ces conceptions.

Un troisième exemple de normes est l’environnement de type PC tablette. Ces normes dépassent les limites entre les directives du système d’exploitation et les directives d’application. La documentation du Kit de développement logiciel (SDK) Tablet PC contient des informations très utiles dans la rubrique « Planification de votre application ». Contrairement aux recommandations pour Office 2003 ou Visual Studio, ces recommandations de conception affectent directement la façon dont l’utilisateur interagit avec votre application et comment il doit se comporter à son tour. Par exemple, si vous avez des fenêtres d’ancrage dans votre application, la documentation vous recommande de vous assurer qu’elle peut détecter quand l’orientation de l’écran est modifiée et que les fenêtres d’ancrage se réorganisent correctement dans une orientation portrait ou paysage en fonction des besoins. Même si vous ne concevez pas votre application de sorte qu’elle soit spécifique aux tablettes, vous devez suivre ces recommandations.

Avec la montée en puissance des clients intelligents, les applications franchissent désormais les limites entre différents matériels : PC normaux, PC tablettes, appareils mobiles ou ultra mobiles, PC Media Center, etc. Chaque situation appelle un ensemble différent (ou supplémentaire) de normes à respecter.

Lorsque les applications partagent les normes au niveau du système d’exploitation ou au niveau de l’application, les utilisateurs se sentent plus à l'aise avec le logiciel, ce qui facilite son apprentissage et son utilisation. Ce résultat est une amélioration directe de la productivité. Les utilisateurs souhaitent être en mesure de devenir productifs avec de nouveaux logiciels aussi rapidement que possible.

Attirer l’attention sur les boutons importants

Parfois, vous devez diriger l’utilisateur vers les boutons les plus importants, même si vous avez quatre ou cinq autres boutons autour de celui-ci. Si vous tentez des expérimentations de taille, couleur ou police, vous enfreindrez les normes, ce qui n'est pas recommandé. Au lieu de cela, vous pouvez utiliser quelques astuces simples pour obtenir ce résultat.

La première consiste à convertir les autres boutons non critiques en libellés de lien, comme illustré sur l’image suivante. De cette façon, l’utilisateur sait que ces liens effectuent une tâche, mais son attention va d’abord au bouton qui se distingue, sans enfreindre les instructions de conception standard.

image de trois boutons convertis en étiquettes de lien.

La deuxième consiste à placer le bouton critique en première ligne, soit à gauche pour les dispositions horizontales, comme illustré sur l’image suivante, soit en haut pour les dispositions verticales. Notez que cela peut changer en fonction de la culture de l’utilisateur cible. Vous pouvez mieux faire si vous placez le bouton en question à l’extrême droite si votre application est une langue qui s’écrit de droite à gauche.

image de trois boutons où le bouton critique est le plus à gauche dans une disposition horizontale.

L’option recommandée consiste à configurer la mise en surbrillance par défaut. Par exemple, dans une boîte de dialogue de confirmation de suppression, l’option Non doit être mise en surbrillance, car cela empêche l’utilisateur de supprimer accidentellement quelque chose.

Simplifier la reconnaissance avec les icônes

Les icônes, en particulier les icônes Windows XP et Office 2003 et les bitmaps de barre d’outils, permettent d’accélérer la cognition de l’interface utilisateur et la tâche que l’utilisateur doit effectuer.

Par exemple, lorsque vous voyez l’icône d’exclamation la plus souvent affichée dans la boîte de message, vous prenez instantanément conscience du niveau de risque associé aux contrôles en regard de cette icône. De même, lorsque votre application met en place un grand nombre de contrôles, quelle que soit la façon dont elle est correctement organisée, il peut être intimidant de trouver l’ensemble des contrôles que vous recherchez.

Dans Windows XP Service Pack 2, un onglet mis à jour est ajouté à l’applet du panneau de configuration Propriétés système, appelé « Mises à jour automatiques ». Il existe quatre options : télécharger automatiquement les mises à jour, télécharger les mises à jour mais laisser l’utilisateur décider quand les installer, avertir l’utilisateur si les mises à jour sont disponibles mais ne démarrer le téléchargement et désactivation complète des mises à jour automatiques.

Un nouvel utilisateur de PC peut ne pas connaître ce que sont ces mises à jour et peut ne pas savoir quelle option il est préférable de choisir. Par conséquent, Microsoft a mis une icône de bouclier vert avec une grande coche en regard de l’option la plus recommandée qui signifie une option « sûre », et une icône de bouclier rouge avec un grand « x » sur celle-ci à côté de l’option qui serait potentiellement dangereuse pour l’utilisateur. Cela est très utile dans les situations critiques, en particulier lorsque l’utilisateur n’a pas le temps de lire trop de texte.

Dans la même applet Propriétés système, chaque onglet contient plusieurs zones de groupe avec des contrôles différents pour différentes tâches. Un graphisme relatif est placé en regard de chaque groupe qui signifie facilement la tâche du groupe de contrôles. Ce type de code graphique est similaire au codage de couleurs dans les dossiers papier ou les parkings. Cela fonctionne également sur le même principe que la présence d'au moins quelques images dans un article de magazine : cela permet de maintenir l'intérêt du lecteur.

Le choix de l’icône appropriée est également important. Microsoft fournit de nombreux graphismes standard dans le cadre de Visual Studio 2005. Ce serait le meilleur choix. Si vous créez vos propres icônes, il est vivement recommandé de suivre les normes au niveau du système d’exploitation ou au niveau de l’application pour ces graphismes, comme indiqué dans la section Utiliser les normes ci-dessus.

Les Instructions d’interaction pour l’expérience utilisateur Windows contiennent un guide très utile pour créer des icônes de style Windows.

Simplifier la reconnaissance avec les en-têtes

Les en-têtes sont le moyen idéal d’expliquer l’intégralité de la boîte de dialogue en une seule phrase (et éventuellement un graphisme). Parfois, les en-têtes peuvent même vous aider à prendre en charge la navigation et les commandes qu’ils contiennent également. Les en-têtes fonctionnent plus efficacement que les libellés de description normaux, car ils sont la première chose qu’un utilisateur voit quand la boîte de dialogue s’affiche.

Les Assistants Windows Installer sont peut-être les en-têtes les plus populaires : une icône simple à l’extrême droite ; un libellé de titre décrivant la boîte de dialogue (par exemple, Sélectionner le dossier d’installation) ; et un sous-titre qui décrit l’objectif de la boîte de dialogue (par exemple, Sélectionnez le dossier dans lequel les fichiers logiciels seront installés).

Supposons que nous avons une application métier classique avec une section dédiée aux comptes. À la suite du paradigme de conception défendu par Windows Vista, nous pouvons fournir des informations critiques et des commandes connexes dans l’en-tête (ou pied de page, si le scénario le nécessite) lui-même. Notre utilisateur a ouvert le fichier de compte pour « Big Company », et l’en-tête ressemblerait à ce qui s’affiche dans la capture d’écran suivante.

capture d’écran d’une boîte de dialogue contenant un pied de page détaillé.

La capture d’écran suivante montre un exemple d’en-tête détaillé dans une boîte de dialogue.

capture d’écran d’une boîte de dialogue contenant un en-tête détaillé.

De même, vous pouvez éviter d’avoir à ajouter des volets de tâches de style Windows XP (en particulier lorsque vous avez seulement quelques commandes, ce qui gaspille beaucoup d’espace vertical), en déplaçant ces commandes dans l’en-tête.

Vous devez garder à l’esprit quelques éléments lors de la conception d’en-têtes :

  • Vérifiez que la couleur d’arrière-plan est différente de la couleur d’arrière-plan de la boîte de dialogue. La plupart du temps, un en-tête blanc sur une couleur de face de contrôle intrinsèque Windows standard fera l’affaire. Mais si vous souhaitez vraiment vous assurer qu’aucun thème spécial ou couleur personnalisée ne désorganise votre en-tête, dessinez un LinearGradient à l’aide de Color.FromKnownColor avec les couleurs ControlLight et ControlDark.
  • Si possible, conservez une hauteur d’en-tête inférieure à 150 pixels. Généralement, une hauteur de 100 ou 120 fera l’affaire. En règle générale, assurez-vous qu’elle est inférieure à 1/4 de la hauteur de la forme entière.
  • Si vous souhaitez ajouter une modification sur place pour les informations affichées dans l’en-tête ci-dessus, remplacez dynamiquement le libellé de lien (LinkLabel) par une zone de texte et permutez-les une fois la modification terminée.
  • Si vous avez un libellé de titre avec une police de plus de 10 pts de taille, utilisez la police Arial ou Franklin Gothic Medium. La police MS Sans Serif aura un aspect trop irrégulier et non professionnel. La police Franklin Gothic Medium est la recommandation dans la documentation des instructions de conception Windows XP. Pour les applications ciblant Windows Vista, utilisez la police d’interface utilisateur Segoe qui est la police système par défaut.

Utiliser des zones de message personnalisées

Les options disponibles dans la boîte de message Windows standard sont très limitées. Lorsque vous devez poser à votre utilisateur une question à laquelle il n'est pas possible de répondre par un simple oui/non ou OK/annuler, cela devient compliqué.

Les applications Windows deviennent désormais plus simples à utiliser en raison du volume élevé d’utilisateurs non techniques. Parfois, il peut être beaucoup plus simple de fournir des boutons avec des textes plus conviviaux et même quelques contrôles supplémentaires (libellés de liens, par exemple) pour faciliter l'accomplissement de la tâche.

Microsoft .NET Framework facilite l’implémentation de boîtes de dialogue personnalisées. En affectant simplement quelques propriétés sur votre formulaire de boîte de dialogue personnalisée ou avec une seule ligne de code, votre formulaire peut fonctionner comme une boîte de message standard. Dans un événement de type clic-bouton, définissez la propriété DialogResult de la boîte de dialogue sur DialogResult.Ok ou DialogResult.Cancel. Utilisez la méthode ShowDialog([OwnerForm]) à partir du formulaire parent. Cette méthode retourne la valeur DialogResult .

Vous pouvez utiliser tous les membres DialogResult . Ces mêmes options sont utilisées par la méthode MessageBox.Show standard.

Vous pouvez également définir la propriété AcceptButton de la boîte de dialogue sur btnOK et la propriété CancelButton sur btnCancel. Cela associe automatiquement les touches Entrée et Échap aux événements Clic respectifs des boutons btnOK et btnCancel.

Voici quelques conseils pour rendre vos boîtes de dialogue personnalisées plus attrayantes :

  • Pour les rubriques complexes, fournissez des liens vers l’aide locale ou en ligne avec un libellé de lien indiquant « En savoir plus » sous le libellé de texte approprié.
  • Remplacez les boutons Oui/Non/Annuler par des textes qui indiquent clairement le résultat du clic sur le bouton, par exemple « Enregistrer le fichier et quitter », « Quitter sans enregistrer », et « Ne pas quitter ». Néanmoins, respectez la norme Oui/Non, OK/Annuler, et ces boutons standard dans la mesure du possible. La familiarité rend la productivité exceptionnelle.
  • Conservez 50 pixels d’espace de marge sur le côté gauche (ou côté droit en fonction des paramètres culturels cibles) et ajoutez une icône représentant le scénario de la boîte de dialogue. S’il s’agit d’une boîte de dialogue d’informations, vous pouvez utiliser l’icône « i » reprises par les boîtes de message standard ; s’il s’agit d’une boîte de dialogue de sécurité, vous pouvez utiliser une icône de verrouillage ou une icône de clé. Visual Studio 2005 comporte avec des graphismes de grande qualité.
  • Veillez toujours à fournir une navigation au clavier appropriée pour ces boutons : les utilisateurs utilisent beaucoup les raccourcis clavier pour les boîtes de message (par exemple, « O » pour « OK », « Y » pour « Oui », « C » pour « Annuler », etc.). Ils trouveraient sûrement embêtant que votre boîte de dialogue personnalisée ne les utilise pas.

Inclure d’autres commandes

Deux facteurs importants déterminent la nécessité de méthodes de saisie : la frustration et la paresse. La frustration est un sentiment que ressentent trop souvent les utilisateurs d’ordinateurs. Lorsque vous êtes frustré, vous souhaitez que votre tâche soit effectuée rapidement. Un clic supplémentaire ou une attente supplémentaire de quelques secondes peut rendre une personne stressée vraiment furieuse, vous savez ce que c’est, nous sommes tous passés par là. La paresse vous encourage souvent à terminer la tâche avec uniquement le clavier ou la souris, selon que le dernier que vous avez utilisé. Mais en dehors de ces deux facteurs, l’utilisation d’autres méthodes de saisie facilite l’exécution des tâches par l’utilisateur.

Par exemple, si vous disposez d’une zone de liste avec deux boutons : « Ajouter » et « Supprimer », vous devez ajouter un menu contextuel pour cette zone de liste avec des commandes de menu analogues à ces boutons. Cela permet à l’utilisateur de choisir la méthode qu’il trouve la plus appropriée. Les utilisateurs novices, comme l’indiquent les instructions relatives à l’expérience utilisateur Windows Vista, utilisent beaucoup les menus contextuels et s’attendent à ce qu’ils soient partout où ils cliquent avec le bouton droit.

De même, nous utilisons des contrôles visuels pour le texte ou la saisie numérique. Par exemple, les curseurs sont utilisés pour spécifier des nombres entiers et les contrôles de type Calendrier sont utilisés pour la saisie de date. Il est parfois plus facile de saisir des données en tapant sur le clavier. Cela peut souvent faire une différence pour l’utilisateur si vous ajoutez un contrôle Haut-Bas numérique lié à un curseur ou si vous utilisez un contrôle de type Sélecteur de date au lieu du contrôle de type Calendrier.

Comment gérer les actions critiques

Lors de l’exécution d’une fonction critique et irrécupérable, il est généralement recommandé de faire apparaître une boîte de message pour confirmer l’action. Allons un peu plus loin. Dans la capture d’écran suivante, vous pouvez voir une boîte de message personnalisée similaire, mais avec un avantage supplémentaire : un minuteur affiché visuellement à l’aide d’une barre de progression.

capture d’écran d’une boîte de dialogue d’action critique.

Il existe quelques variantes spécifiques au scénario que vous pouvez utiliser. Si l’action à entreprendre est très critique (allant de la surcharge d’une centrale nucléaire à la suppression définitive de fichiers), l’action par défaut après l’expiration du minuteur doit être Annuler. La boîte de dialogue ne doit pas disparaître, mais le libellé de texte doit plutôt changer pour montrer que l’action a été annulée. L’utilisateur peut choisir de confirmer la commande ou l’annulation.

Assurez-vous toujours que les boutons qui effectuent des opérations critiques sont clairement identifiés : utilisez toujours du texte clair qui décrit précisément l’action. Si l’action est la suppression de fichiers, n’écrivez pas « Retirer les fichiers du référentiel » ; écrivez « Supprimer les fichiers du référentiel ». Lorsque vous travaillez avec des listes de fichiers, si une commande de menu Supprimer supprime les fichiers sélectionnés du disque dur lui-même (par opposition à la suppression de la liste de fichiers uniquement), vous devez correctement mettre en évidence la nature critique de cette opération et insister explicitement sur le fait que l’action supprimera définitivement les fichiers.

Quelqu’un a dit : « Vous êtes aussi bon que votre pire travail. » La même chose s’applique aux applications logicielles. Une seule mauvaise expérience avec votre application peut faire une forte impression négative sur l'utilisateur. Pour vous assurer que cela ne se produit pas, la seule chose que vous pouvez faire est de vous assurer que si votre application se bloque, elle s’arrête normalement. Si vous pouvez ajouter la récupération des données ou permettre à l'utilisateur d'essayer de sauvegarder une copie de ces données, cela peut être un grand avantage. L'utilisateur doit être correctement informé si l'application se bloque. Un débogueur JIT ou une boîte de dialogue d’erreur critique n’est pas une bonne chose. Bien que la question de la gestion des plantages dépasse le cadre de cet article, je recommanderai qu'une simple boîte de dialogue présentant des excuses à l'utilisateur et l'informant de la situation (avec éventuellement un lien vers plus d'informations sur la manière de se remettre de ce plantage) serait très utile à l'utilisateur.

Si vous voulez aller plus loin, vous pouvez faire ce que fait l’une de mes applications de conception graphique préférées. Si elle se bloque, elle affiche une boîte de dialogue de récupération qui vous permet d’enregistrer une copie distincte du fichier en cours de travail, puis affiche une boîte de dialogue de commentaires dans laquelle vous pouvez entrer des informations sur le blocage (informations personnelles facultatives, bien sûr) et l’envoyer aux concepteurs.

Cases d’options ou zones de liste modifiables ?

À première vue, la méthode permettant d’effectuer une sélection un-sur-plusieurs ne semble pas si difficile ou importante. Parfois, elle peut l’être, en particulier si le scénario est une application utilisée pour des tâches urgentes.

Examinons un exemple de la vie réelle. Microsoft a récemment publié une préversion d’une application graphique, Expression Graphics Designer (anciennement nom de code « Acrylic »). J’avais environ 20 objets graphiques auxquels j’ai dû attribuer une certaine propriété séparément dans cette application. C’était un processus ennuyeux. Pour ce faire, j’ai dû sélectionner l’objet, cliquer sur le bouton pour afficher la fenêtre des paramètres et définir les options. Pour l’une option de ces options, deux choix devaient être sélectionnés à partir d’une liste modifiable (ComboBox), comme vous pouvez le voir sur la capture d’écran ci-dessous.

capture d’écran de la boîte de dialogue de texture de bordure pour le concepteur de graphiques d’expression.

Lorsque vous devez déposer la liste modifiable et sélectionner le deuxième élément (sur seulement 2 éléments), cela peut vraiment être irritant. Ce que nous ne réalisons généralement pas, c’est le temps nécessaire pour que la liste déroulante apparaisse. Cela peut vous faire perdre beaucoup de temps et peut être frustrant. Cela aurait pu être résolu facilement en plaçant une zone de groupe (GroupBox) avec deux cases d’option (RadioButtons), en particulier lorsqu’il y a tellement d’espace disponible. J’ai rencontré des problèmes similaires dans les applications telles que CorelDRAW, Microsoft Access et d’autres.

En plus de perdre du temps en raison de l’animation déroulante, cela gaspille également notre « bande passante mentale ». Avec deux cases d’option « toujours visibles », notre esprit connaîtrait subliminalement la position du curseur sur lequel cliquer. Avec la liste modifiable, cela n’est traité qu’une fois la liste créée. Bien que cela ait pu paraître trop peu important, en fait c’était essentiel.

Parfois, il est préférable d’utiliser des cases d’option, surtout s’il existe 4 choix ou moins.

Ne jamais perturber l’utilisateur !

Sauf à leur mettre un pistolet sur la tempe, c’est la chose la plus destructrice qu’un développeur puisse faire aux utilisateurs. Lorsque votre application interrompt, inutilement ou autrement, l’utilisateur pendant qu’il travaille dans une autre application avec une boîte de message ou le clignotement de la barre des tâches, vous récoltez des points négatifs de l’utilisateur.

Le clignotement de la barre des tâches peut être utile, bien sûr, mais doit être utilisé uniquement lorsque le processus de votre application nécessite une saisie de l’utilisateur pour continuer, ou si vous avez quelque chose d’essentiel à communiquer à l’utilisateur. Si l’utilisateur a conservé le paramétrage Masquer automatiquement pour la barre des tâches, un bouton de barre des tâches qui clignote peut empêcher l’utilisateur d’accéder à la barre d’état ou à d’autres contrôles à ancrage faible, car la barre des tâches se trouve au-dessus de celle-ci et n’est plus masquée tant que l’utilisateur n’a pas cliqué sur le bouton qui clignote.

capture d’écran d’une fenêtre toast.

Les fenêtres « Toast » (voir la figure 10), rendues célèbres par les clients de messagerie instantanée comme MSN Messenger, constituent une excellente solution pour informer l’utilisateur d’un élément sans gêner ou perturber son flux de travail. Il existe un excellent article de Bill Wagner sur la création de fenêtres Toast. Il est judicieux de ne pas gêner les fenêtres Toast d’une autre application. L’obstruction de ces fenêtres peut s’avérer ennuyeuse et improductive. Une solution consiste à utiliser le ToastSemaphore Mutex fourni par le système d’exploitation pour éviter la collision de fenêtres Toast.

Parfois, vous devrez peut-être afficher plusieurs éléments via les fenêtres Toast. L’affichage de 3 fenêtres Toast ou plus n’est pas vraiment conseillé. Il est préférable de passer d'une fenêtre Toast à l'autre en faisant apparaître ou disparaître les fenêtres Toast les unes après les autres. Microsoft Outlook implémente une solution similaire lors de la notification de l’utilisateur d’e-mails entrants.

Fournir l’état de progression

Il existe souvent des tâches qui obligent l’utilisateur à attendre. Bien sûr, il s’agit de l’une des choses que l’utilisateur déteste simplement faire. Mais le pire, c'est quand ils attendent sans savoir ce qui se passe. Parfois, votre application peut avoir besoin de se connecter à un service Web ou à un ordinateur distant, ou peut-être qu’elle traite de gros blocs de données. Quelle qu’en soit la raison, l’utilisateur doit être informé ou au moins vaguement conscient de ce qui se passe. Il existe différentes méthodes de faire cela, en fonction de la situation.

Si vous vous connectez à un objet éloigné comme un service Web ou quelque chose placé sur un réseau ou un serveur Internet, il est recommandé d’afficher une boîte de dialogue de progression simple (voir l’image suivante) ou une barre de progression hébergée dans la barre d’état. Un libellé associé doit décrire l’état actuel du processus. Par exemple, si vous vous connectez à un service Web pour traiter certaines données, indiquez simplement « Connexion au service Web... » ou « Veuillez attendre, traitement en cours... " Si ce processus est synchrone, il est recommandé de désactiver tous les contrôles auxquels l’utilisateur peut accéder jusqu’à ce que le processus soit terminé, ou simplement d’afficher la progression sous la forme d’une boîte de dialogue modale.

capture d’écran d’une boîte de dialogue avec une barre de progression.

Il est vivement recommandé de définir le style de barre de progression en mode Marquee si vous utilisez une barre de progression et que le temps de traitement est inconnu ou si vous n’avez pas de valeur maximale.

Une autre méthode qui devient populaire est une fenêtre « toast » fixe qui affiche la progression. Microsoft AntiSpyware downloader/updater ou les fenêtres Toast d’analyse de messagerie de Norton AntiVirus sont de bons exemples de cette méthode. Bien sûr, cela ne doit être utilisé que pour les processus asynchrones. Sinon, l’utilisateur peut se sentir déconcerté. Ces fenêtres sont mieux utilisées pour le traitement en arrière-plan, comme le téléchargement d’une mise à jour ou l’exécution d’une tâche planifiée, et ne doivent jamais être définies sur « Toujours visible ».

Simplifier les étapes complexes avec les assistants

Il est sûr de supposer que s’il est confronté à une pléthore de contrôles sur un formulaire unique, un utilisateur lambda ne s'y retrouvera pas. Parfois, aucun regroupement, dimensionnement ou espacement ne peut vous aider lorsque vous avez de nombreux contrôles importants.

Un assistant est la meilleure solution pour ces scénarios. Vous pouvez diviser les contrôles par tâche ou par catégories, le cas échéant, et les placer à des étapes distinctes. Cela peut aider l'utilisateur à rester concentré et à ne pas se laisser décourager par la tâche. Vous pouvez fournir une aide spécifique à l’étape ou à la tâche avec un bouton Aide. Pour plus de détails, veuillez consulter la section Assistants.

Les assistants constituent également un bon moyen de paramétrer la configuration initiale de votre application. De nombreuses applications utilisent ce type d’assistant pour paramétrer une configuration personnalisée juste après la fin de l’installation, ou lors de la première utilisation. Un tel assistant initial doit également être rendu facultatif, dans la mesure du possible. Si l’utilisateur annule l’opération à un moment donné, les paramètres non spécifiés accèdent aux valeurs par défaut. Si vous pouvez rendre l’assistant un peu graphique (voir la section Utiliser de beaux graphismes), cela facilite la tâche de configuration.

Obtenir le bon ton de votre texte

Dans les Instructions d’interaction pour l’expérience utilisateur Windows, un point très important a été soulevé concernant le « Ton du texte ». Il s’agit de l’impression et du sentiment donnés par le texte dans votre application. Il peut s’agir d’une info-bulle simple, d’un contrôle de libellé d’instruction.

Nous avons discuté précédemment du changement de texte dans l’option Webcam de MSN Messenger. C’est ce qu’on appelle un ton de texte approprié. Lorsque vous avez affaire à des utilisateurs non techniques ou novices, l’affichage des messages revêt un aspect différent.

Si vous écrivez « Chemin de destination » au-dessus d’une zone de texte dans une application auto-extraite, un utilisateur technique peut facilement comprendre qu’il doit saisir quelque chose comme « C :\Temp\Monchemin ». Un utilisateur novice (pensez, par exemple, à « Maman ») peut aussi facilement être déconcerté et aura besoin de se référer au manuel, d’appeler l’assistance technique, ou pire, d’abandonner. Une bonne alternative consiste à spécifier ce que l’utilisateur doit faire : « Sélectionnez le dossier dans lequel vous souhaitez placer ces fichiers ». Vous pouvez même renommer le bouton « Parcourir... » affiché en regard de cette zone de texte en « Sélectionner un dossier... ».

Fournir une description claire de ce que vous souhaitez que l’utilisateur fasse réduit également la nécessité de fichiers d’aide, ou au moins réduit les détails que vous devez inclure dans les fichiers d’aide.

Une très bonne suggestion des Instructions d’interaction pour l’expérience utilisateur Windows s’applique à n’importe quel logiciel. Il est indiqué que l’auteur doit conserver un style de texte conversationnel. Les instructions définissent ceci comme suit : « Évitez les mots que vous ne diriez pas à quelqu’un d’autre en personne ».

Voici quelques conseils pour écrire du texte :

  • Évitez de parler de l’utilisateur à la troisième personne. Dites « Vous » au lieu de « L’utilisateur ».
  • Dans la mesure du possible, utilisez judicieusement « Mon nom : » ou « Mon adresse e-mail : » au lieu de « Nom : » ou « E-Mail : ».
  • Lorsque vous proposez plusieurs options, écrivez le texte du point de vue de l’utilisateur. Par exemple, si vous avez deux cases d’option sous un libellé tel que « Sélectionner l’autorisation pour [Nom d’utilisateur] sur ce réseau » au-dessus de deux cases d’option, telles que « Autoriser » et « Refuser », remplacez le texte des cases d’option par « Je souhaite autoriser [Nom d’utilisateur] » et « Je ne veux pas autoriser [Nom d’utilisateur] ».
  • Soulignez le texte uniquement s’il est utilisé pour les liens. L'utilisateur est dérouté si le texte souligné n'est pas un lien.
  • Attirez l’attention sur les informations importantes avec un libellé en gras, mais utilisez la mise en gras soigneusement. Trop de texte en gras est déroutant et réduit l’impact global du formulaire.
  • Lorsque vous écrivez le texte d’une case à cocher, assurez-vous qu’il est facile de savoir ce qui se passera lorsqu’elle sera cochée et quand elle ne le sera pas. L’option recommandée consiste à écrire le texte directement comme le résultat de l’activation de la case à cocher. Par exemple, écrivez « M’envoyer des informations utiles de vos partenaires » au lieu de « Ne pas m’envoyer d’informations utiles de vos partenaires ». Bien que je puisse imaginer beaucoup de personnes du marketing qui se disputent à propos de cet exemple particulier, je suis sûr que vous comprenez ce que je veux dire.
  • Si vous disposez d’un contrôle de type bouton (généralement, une case d’option avec une apparence de bouton de commande) qui contrôle l’activation/la désactivation, veillez à le libeller correctement. Si le processus est activé, écrivez « Activé » au lieu de « Activer » ou « Désactiver ». Si vous écrivez Activé, il affiche l’état actuel. Si l’utilisateur clique sur le bouton (activé) et que le bouton indique « Activer », cela peut être déroutant et problématique. « Activer » peut inviter l’utilisateur à cliquer dessus en pensant que le processus n’est pas actif.

Parfois, une vue de liste est un meilleur choix

Nous limitons souvent aux contrôles DataGrid ou ListBox ou même ComboBox pour les tâches de sélection, mais avec Windows XP et les versions ultérieures de Windows, l’utilisation d’une vue de liste (ListView) peut vous offrir un plus vaste choix d’options.

Détails du contrôle ListView :

  • Il accélère la reconnaissance des éléments avec des icônes et des bitmaps.
  • Il affiche des informations supplémentaires avec des vues Détails ou Vignette.
  • Avec Visual Studio 2005, vous pouvez même avoir des groupes pour une catégorisation supplémentaire. Les groupes s’étendent sur toutes les vues et sont flexibles. Les groupes peuvent également être utilisés pour aplatir une vue hiérarchique (comme un TreeView) où il existe plus de nœuds enfants que de nœuds parents. Un bon exemple en est la boîte de dialogue Connexions réseau dans Windows XP, lorsque vous affichez « Afficher dans les groupes » et la vue configurée sur Détails.
  • Pour personnaliser un contrôle ListView, créez-le manuellement en définissant la propriété OwnerDraw et en utilisant les événements DrawItem et DrawSubItem.
  • Il prend en charge la modification rapide sur place des éléments ListView.
  • il prend facilement en charge la réorganisation manuelle.
  • Il permet aux utilisateurs de sélectionner l’affichage (grandes icônes, petites icônes, liste, etc.) avec lequel ils sont les plus à l’aise.

Simplifier la navigation avec les contrôles de navigation et les barres latérales

La « sous-navigation » est la clé d’une interface utilisateur complexe. Parfois, vous ne pouvez pas échapper à une interface utilisateur compliquée. La meilleure chose à faire dans une telle situation est de rendre l’expérience aussi simple que possible pour l’utilisateur. Une barre latérale composée de libellés de liens ou d’un TreeView pour la navigation basée sur la hiérarchie suggère une navigation au niveau jumeau pour la tâche de la boîte de dialogue actuelle. Cela permet à l’utilisateur de passer facilement d’une étape à l’autre tout en sachant où il se trouve.

Si vous accédez à une navigation basée sur une hiérarchie avec TreeViews ou une autre navigation similaire complexe, un bon utilitaire pour l’utilisateur serait un contrôle de navigation. Bien que Visual Studio ne soit pas fourni avec un contrôle intégré pour ce faire, consultez la section Création d’un contrôle de navigation pour savoir comment en créer un vous-même. Un contrôle de navigation facilite la recherche de l’emplacement actuel par rapport à la hiérarchie.

La navigation en barre de navigation peut être facilement fusionnée dans l’en-tête si le formulaire en a un. Consultez la section précédente sur les en-têtes.

Utiliser de beaux graphismes

Tout le monde aime les applications dotées de graphismes attrayants, du moins la majorité d'entre nous. Bien qu’une interface utilisateur avec de beaux graphismes n’est pas un choix logique pour toutes les applications, cela contribue à faire bonne impression et elle peut être considérée comme un environnement de travail agréable. Bien sûr, les graphismes ne doivent pas entraver la productivité, mais s’ils sont utilisés correctement, ils peuvent l’augmenter !

Il n'est pas nécessaire d'avoir beaucoup de graphiques, et ils ne nécessitent pas nécessairement beaucoup de travail. Un écran de démarrage professionnel ou un en-tête (comme celui que nous avons évoqué précédemment) fait l’affaire. Si votre budget vous le permet, vous pouvez utiliser des graphismes bien conçus pour les barres d’outils, les assistants, etc. Ils rendent votre application jolie, et également plus professionnelle. C’est un effet subtil, mais un regard professionnel transmet des sentiments de confiance et de stabilité. Si vous êtes une entreprise relativement petite qui crée des applications de vente au détail, il s’agit d’un aspect clé à prendre en compte.

Insistez toujours pour utiliser des graphismes conçus de faon professionnelle. Les graphismes gratuits sont facilement disponibles et abordables. Vous pouvez également embaucher un concepteur. Mais si les graphismes ne sont pas votre point fort, ne tentez pas de les créer vous-même. Si vous ne pouvez pas acquérir ou utiliser des graphismes conçus de façon professionnelle, il est préférable de ne pas en utiliser du tout.

Pour les petits graphismes, vous pouvez toujours utiliser les icônes et bitmaps fournies avec Visual Studio 2005. (Les graphismes fournis avec les versions précédentes ne sont pas recommandés !)

Fournir des formulaires redimensionnables lorsque cela est possible

Les fenêtres redimensionnables sont un peu similaires aux fenêtres indépendantes de la résolution. Les fenêtres indépendantes de la résolution sont identiques si vous utilisez des écrans 96 dpi ou 300 dpi. Que l’interface utilisateur de votre application soit indépendante de la résolution ou non, elle sera meilleure si elle est redimensionnable. Bien sûr, cela ne s’appliquera pas à de nombreux scénarios, mais il s’agit d’une bonne règle générale.

Si votre fenêtre traite de listes de toute sorte (en particulier des ListViews), cela devient encore plus important. Le redimensionnement permet à l’utilisateur d’examiner plus de données en même temps.

Par exemple, nous avons une application où l’utilisateur doit sélectionner une image dans une collection volumineuse. La boîte de dialogue Ouvrir vous permet de sélectionner un affichage Miniatures, mais la boîte de dialogue est de taille fixe et la liste des miniatures affiche uniquement 4 miniatures à la fois. Si la collection compte une centaine d’images, le défilement et l’observation (une tâche répétitive) peuvent être assez fastidieux et peuvent induire une diminution de l’efficacité. Si la boîte de dialogue est redimensionnable, l'utilisateur peut l'agrandir autant qu'il le souhaite, ou du moins autant que l'écran le permet, et terminer sa tâche rapidement. Si votre liste a un défilement horizontal, comme un contrôle ListView ou DataGrid détaillé, c’est encore plus fastidieux ! Les fenêtres redimensionnables sont très utiles dans une telle situation.

Fournir davantage de fonctionnalités avec des barres latérales/volets des tâches

Comme les en-têtes dont nous avons parlé précédemment, les barres latérales et les volets de tâches constituent un excellent moyen de fournir des fonctionnalités supplémentaires et des commandes utilitaires. Par exemple, les volets de tâches dans Office Word 2003 sont très pratiques, accessibles et non intrusifs. Ils fonctionnent également de façon asynchrone lors de la connexion à des ressources en ligne, ce qui permet à l’utilisateur d’exécuter plusieurs tâches.

La création d’un volet de tâches ou d’une barre latérale est aussi simple que la création d’un panneau d’ancrage, avec l’option permettant de placer un graphisme en forme de barre de titre en haut. À cet effet, vous pouvez même utiliser un contrôle Label coloré. Les opportunités pour les volets de tâches sont nombreuses !

Si vous disposez de fonctionnalités supplémentaires et que vous souhaitez les proposer de manière non intrusive à votre utilisateur, il n'y a rien de tel que le volet des tâches. Vous pouvez également créer des volets de tâches « Masquer automatiquement » ou réduire comme les fenêtres d’outils Visual Studio.

Donner un choix de notification

Auparavant, nous avons vu comment créer une boîte de message personnalisée. Si une boîte de message de votre application s’affiche souvent, il peut être prudent d’ajouter une case à cocher que l’utilisateur peut sélectionner pour désactiver cette boîte de dialogue par la suite. Une telle option est particulièrement utile pour les messages les plus évidents.

La boîte de dialogue Rechercher de Visual Studio en est un exemple familier. Lorsque vous recherchez ou remplacez du texte, Visual Studio affiche une zone de message indiquant les résultats. Mais vous avez également la possibilité de désactiver cette boîte de message. Cela peut être vraiment ennuyeux si vous devez appuyer sur Entrée ou cliquer sur OK chaque fois que vous lancez une recherche.

Une autre fonctionnalité intéressante de Visual Studio est que même si la boîte de dialogue est désactivée, les résultats de l'opération sont toujours affichés dans la barre d'état.

Fournir des info-bulles !

Parfois, les info-bulles peuvent vous faire gagner beaucoup de temps. Les boutons, les cases à cocher et d’autres contrôles peuvent être ambigus et l’utilisateur peut ne pas être sûr de ce qu’il doit faire. Les info-bulles fournissent la meilleure forme d’aide contextuelle en une seule ligne. L’utilisateur peut rapidement décider de ce qu’il doit faire sans avoir à lancer de recherche dans le fichier d’aide ni ouvrir une autre fenêtre.

Souvent, cet aspect est ignoré dans les applications. Veillez à ajouter des info-bulles à tous les contrôles ambigus, ou à TOUS les contrôles si possible. Ne répétez pas le texte d’un libellé associé ou le texte de ce contrôle, mais fournissez des informations supplémentaires sur ce contrôle. Le texte doit expliquer la fonction du contrôle en quelques mots.

Ne pas oublier les petits détails

Les petits détails peuvent vous gêner, mais les ignorer peut avoir un impact sur l’impression que vous donnez. Une fois, j’ai utilisé une application faite par une personne importante dans l’industrie des logiciels dont le BorderStyle de son formulaire était défini sur Sizeable, mais les contrôles sur le côté droit du formulaire n’étaient ancrés. De ce fait, l'application créée par un grand nom de l'industrie donnait une impression de non-professionnalisme.

Ces types de « petits détails » sont le cœur de l’impression globale. L'interface utilisateur et l'interface utilisateur de votre application sont les éléments sur lesquels les utilisateurs jugeront votre application, du moins dans un premier temps. S’ils voient des bogues évidents dans votre interface utilisateur, ils peuvent avoir le sentiment que votre application est moins puissante et efficace.

Conclusion

Nous n'avons abordé qu'une infime partie de l'expérience humaine de l'utilisateur À mesure que l’expérience utilisateur devient plus simple, efficace, amusante et plus conviviale, la tâche de créer cette expérience utilisateur devient beaucoup plus complexe. Mais avec un peu de prévoyance et une bonne planification, vous pouvez créer une expérience utilisateur exceptionnelle.

La meilleure façon de créer une expérience utilisateur parfaite est de réaliser des tests d'utilisabilité ciblant particulièrement l'interface utilisateur, que ce soit avec un groupe de test spécial ou par vous-même. Plus vous passerez de temps à tester l'expérience de l'utilisateur avant de lancer votre application, mieux ce sera. Cela vous évitera bien des ennuis par la suite.