Règles de conception

Pour être cohérentes et transparents, les interfaces graphiques doivent suivre un certain nombre de règles établies, basées sur le principe psychologique de mémoire à long terme et a mémoire a court terme.
Dans la suite de cette page, nous allons délaisser le bureau en lui-même pour nous attarder sur les douze règles qui régissent le conception de fenêtres qui sont les bases de la majorité des interfaces homme machine:
 

• Taille de la barre d’action
• Taille des menus
• Nombre de contrôles
• Taille et position des boites de dialogue
• Position et regroupement des contrôles
• Mise en majuscule
• Valeurs initiales
• Types de liste box
• Choix et disposition des boutons poussoirs
• Taille et structuration des champs de saisies
• Couleurs et polices
• Aide en ligne

Règle 1: La largeur par défaut d’une fenêtre primaire ou secondaire et le nombre d’options placées dans la barre d’action doivent être calculés de telle manière que la barre d’actions n’occupe qu’une seule ligne.

On constate sur chacun des exemples ci-dessus, que les barres d'actions comportent différentes options (ou item). Chacun d'eux permet d'ouvrir un sous menu déroulant, comportant lui-même un certain nombre d'options, et ainsi de suite.
Dans la suite, on appellera largeur du menu, le nombre d'options qu'il comporte, et profondeur du menu le nombre de niveau de sous menu auxquels il permet d'accéder. Or cette largeur et cette profondeurs répondent à une règle tirée d'études psychologiques permettant une gain d'optimisation:

Règle 2: La largeur des menus doit être limitée à une  douzaine d’options. La profondeur de la barre  d’actions doit rarement dépasser trois niveaux.

• Qu'une bordure non redimensionnable
• Qu'un menu système
• Qu'une barre d'outils
• Pas de barre d'action

Bien que structure simple, ils existes différents types de boites de dialogues utilisées en fonction du type d'emploi auquel elles sont destinées.

• Les boites de présentation:     Elles ont pour but d'afficher des informations pour l'utilisateur, et sont donc composée essentiellement de champs statiques, de liste box et de graphique. Leur but est de favoriser la lecture des informations par l'utilisateur.

• Les boites de saisie:    Elle permettent à l'utilisateur d'entrer des données a partir de contrôles adaptés ou du type de données à saisir. Elles sont généralement composées de champs d'entrée, de cases à cocher, de liste box et / ou de curseurs gradués.

• Les boites de dialogue mixtes:    Ce sont les boites de dialogue les plus complexes, car elle permettent à la fois la présentation d'information et la saisie de données. Elle sont surtout utilisées pour que l'utilisateur puisse faire des mise a jours sur des données préalablement saisies.

Quelle que soit le type de dialogue, toutes ces boites répondent aux même principe d'organisation: Il faut diminuer au maximum la complexité des boites de dialogue en limitant le nombre de contrôle actif, et ce pour faciliter l'utilisation des ces objets, et accroître la rapidité de cette utilisation.

Règle 3: Le nombre de contrôles actifs contenus dans une  boite de dialogue ne doit pas dépasser une  trentaine.

Le problème d'une telle limitation, est qu'il faut trouver une solution si l'on doit mettre plus de 30 contrôles actifs dans une même fenêtre. La solution consiste à établir une hiérarchie dans les différents contrôles:

• Les contrôles de niveau supérieur (ce qui est obligatoire) dans une première fenêtre
• Les autres dans une ou plusieurs boites suivantes.

Si on ne peut établir de hiérarchie entre les différents contrôles, on peut les regrouper en différents groupes qui seront places dans des boites de dialogue différentes indexées a partir d'onglets

Taille des boites de dialogue

Une boite de dialogue doit être la plus petite possible afin de ne cacher qu'un minimum d'information du bureau ou de la fenêtre principale. leur taille est en fait définie par le concepteur de l'application et non redimensionnable, permettant d'assurer la visibilité de tous les contrôles.

Règle 4: Une boite de dialogue n’étant pas  redimensionnables, elle doit occuper un minimum  de surface sur le desktop. Lors de son ouverture,  elle doit être positionnée au plus près de l’objet qui  l’a appelé sans le recouvrir.

Règle 5: Les contrôles doivent être disposés par famille avec un  cadre de groupage pour chacune. Les divers cadres doivent  être alignés verticalement à gauche et à droite. Il faut  donner des titres aux contrôles qui ne disposent pas de  légende.

Les champs d'entrée et les combo box les plus importants doivent être placé en haute de la boite de dialogue.
Les cadres doivent être aligné entre eux verticalement
Les contrôles doivent être alignes horizontalement ou verticalement de façon à ce que le curseur se déplace de façon rectiligne en appuyant sur la touche tab.
Enfin les contrôles doivent être placés dans l'ordre avec lequel l'utilisateur doit les remplir ou les utiliser, sachant qu'ils doivent se parcourir de haut en bas et de gauche a droite.

Cases a cocher et boutons radio
Ces types d'objet doivent être alignes sur une même horizontale ou une même verticale. S'ils sont nombreux, il faut les regrouper dans un cadre possédant un titre afin d'en améliorer le lisibilité.

• La légende des boites de dialogue
• Les éléments d'une liste box
• Les options d'un menu
• Les titres d'un cadre

Règle 6: Mettre toujours en majuscule la première lettre  de chaque chaîne de caractères  affichées sauf s’il  s’agit d’une abréviation ou d’un onglet. Le reste de  la chaîne restera en minuscules.

Règle 7: Chaque fois que possible, donner des valeurs  initiales plausibles aux différents contrôles de la  boite de dialogues

List Box et Combo Box
En ce qui concerne les liste box et les combo box, il est préférable d'en utiliser des simples plutôt que des déroulantes, ce qui permet une meilleure visibilité des différents choix possibles et ainsi un gain de temps. Dans le cas des listes simples, il faut qu'au moins 3 champs soient affichés.
Toutefois, il est permis d'utiliser des liste et des combo déroulantes si:
                - La sélection d'un élément est facultative
                - La taille de la boite de dialogue est restreinte

Règle 8: Utiliser des listes box et combo box  simples de  préférence aux déroutantes. Les listes box simples  doivent permettre la visualisation d’au moins trois  éléments sans scrolling.

• Ceux qui ont une action sur toute la boite de dialogue (boutons ok, cancel...) ce sont les boutons généraux.
• Ceux qui permettent d'ajouter ou de compléter l'information présente (modifier, paramètres...), ce sont les boutons spécifiques.

Règle 9: Les boutons poussoirs généraux doivent  toujours être placés au même endroit dans toutes  les boites de dialogue et positionnés dans le même  ordre.

Cette règle permet à l'utilisateur d'accroître sa rapidité d'utilisation du logiciel puisqu'il sait ou appuyer, et le fait machinalement d'une fenêtre à l'autre.
ATTENTION: Cette règle ne s'applique qu'aux boutons non destructeurs. Dans le cas de boutons destructeurs (par exemple dans une fenêtre qui nous demande de confirmer un effacement de fichier, le bouton ok est destructeur), l'ordre est inversé, de façon a ce que l'utilisateur, s'il appuie sans lire les message ne valide pas un tel effacement.

Lorsqu'une fenêtre possède des boutons, un des boutons généraux doit être sélectionné par défaut. Il est alors entouré d'une bordure en pointillés, et il s'agit toujours de la validation d'un choix, sauf pour les boutons destructeurs.

De manière à gagner un maximum de places, et ainsi de respecter le principe d'avoir des fenêtre de taille minimale, il est conseillé de les placer horizontalement ou alignés de haut en bas. De plus chaque bouton doit avoir une taille permettant d'afficher tout son intituler, mais sans laisser trop de place autour de façon à ne pas "noyer" l'intitulé dans le bouton.

Règle 10: La taille des champs de saisie doit être adaptée  au type et à la longueur des données que  l’utilisateur devra saisir.
 
 
 

Il existe deux catégories de champs de saisie, mais tous deux réponde a la règle précédente.
Les champs simples: Leur hauteur doit être légèrement supérieur à celle d'une majuscule de la police employée pour remplir ce champs, ce qui permet tout en minimisant l'espace occupé d'être sure que la saisie sera bien lisible.
La largeur des ces champs est fonction de la taille de la chaîne maximum pouvant être saisie, afin de limiter le risque de scrolling vers la gauche.
Si ce qui doit être saisie comporte toujours le même nom de caractère, il faut prévoir une place permettant de saisie ce nombre de caractère avec la lettre prenant le plus de place (le W majuscule).
Si les champs est de format précis (date, heure,...), il faut préparer les champs de saisie de façon à ce que l'utilisateur n'ai pas à chercher comment il doit entré les caractère particuliers (les séparateurs par exemple). De plus il est impératif de mettre un exemple:
Exemple: Date de validité (jj/mm/aa):

Les champs multilignes Ces champs permettent la saisie de textes de longueur conséquente (supérieur à 100 caractères). Leur hauteur doit être fonction la aussi de la taille moyenne du texte susceptible d'être entré.
Ce genre de boite de saisie doit posséder un wrapping (retour à la ligne) automatique, pour éviter les scroll horizontaux. En revanche, il peut être nécessaire de prévoir des scroll verticaux.

Regle 11: Les couleurs des boites de dialogue et des  contrôles ainsi que les polices de caractères  devront être homogènes dans  toute application  (cohérence intra-application) ainsi qu’avec les  autres applications réalisées (cohérence inter- application).

Aide en ligne
Enfin une interface, bien qu'elle soit intuitive, doit toujours posséder une aide pour l'utilisateur. Cette aide peut comporter jusqu'à quatre niveaux:

• L'aide sur l'aide: Cette aide est destinée à expliquer à l'utilisateur comment il peut utiliser les différents niveau d'aide de l'application (généralement accessible par la touche F1)
• L'aide générale: Cette aide présente l'application dans son ensemble en faisant apparaître ses fonctionnalisés, la structure de ses menus...

• L'aide au niveau des boites de dialogue: Elle propose à partir du bouton général "aide" situé en dernière position dans chaque boite de dialogue, une aide sur la façon d'utiliser la boite de dialogue en question.
• L'aide contextuelle: Elle propose une aide fonction de l'objet désigné par l'utilisateur. Elle peut être atteinte soit en passant la souris sur l'objet (les info bulles) soit par l'aide en ligne (F1).