Concevoir une application WIMP nécessite de respecter certaines règles et d’appliquer le guidelines de la plateformes. Nous illustrons ici ces principes avec le Guidelines Windows. Toutes les applications développées pour Windows se doivent de respecter le guide “Windows User Experience Interaction Guidelines”.

Fenêtres primaires, secondaires et menus

Les applications WIMP (Windows, Icone, Menu, Pointing) sont issues des travaux fondamentaux réalisés au Xerox PARC dans les années 1970. Elles sont toutes organisées de manière similaire autour d’une fenêtre primaire qui contient les objets nécessaires à l’interaction (Le document texte dans Word, un contact ou une liste de contact dans un carnet d’adresse). Les actions sur ces objets sont réparties dans les menus. Des fenêtres secondaires permettent d’enrichir le dialogue ou de présenter les propriétés. L’interaction se fait toujours dans le sens “sélection” d’un objet puis “action”.

Une fenêtre primaire se caractérise par :

• Dans la barre de titre, l’icône et le nom de l’application, les trois boutons (réduire, agrandir, fermer)
• Le contenu est l’objet de l’interaction.
• La présence d’un menu.

Barre de titre, fenêtre primaire.

les menus

Les menus contiennent les actions et les propriétés à appliquer sur les objets contenus dans la fenêtre primaire. Ils ne sont donc présents que sur les fenêtres primaires.

Les principaux menus sont :

• “Fichier” : On retrouve les actions gérant les échanges avec les périphériques, enregistrer, imprimer, exporter, ouvrir.
• “Edition” : Permet d’éditer les donner, copier, coller, supprimer,…
• “Aide” : On retrouve les aides ou les accès au site web.

Menu sur une fenêtre primaire.

Le contenu des menus est organisé, dans l’ordre, par :

• fréquence d’usage
• regroupement sémantique
• ou à défaut par ordre alphabétique.

Les fenêtres secondaires

Les fenêtres secondaires viennent enrichir le dialogue ou présente les propriétés de l’objet sélectionné.

Une fenêtre secondaire se caractérise par :

• La barre de titre contient le titre qui reprend le libellé de l’action, une seule case permettant de fermer la fenêtre.
• Les boutons sont placés en bas en droite de la fenêtre dans l’ordre suivant “Ok” “Annuler” “Appliquer”. Une action secondaire peut être placée en bas à gauche.
• Sur les dialogues, “Ok” est remplacé par le verbe de l’action en cours. Dans l’exemple ci-dessous, “Print…” est sélectionné dans le menu, c’est le titre de la fenêtre et le libellé du bouton.

Fenêtre secondaire.

Sur l’ensemble des fenêtres, les informations doivent être organisées graphiquement :

• Les champs et les libellés seront alignés sur une grille.
• Les libellés sont alignés à droite et les champs à gauche autour d’un axe.

Fenêtre de message

Les fenêtres de message sont de trois types :

• Les fenêtres de blocages : quand une action est interrompue par erreur non prévue.
• Les alertes à la prudence : pour prévenir l’utilisateur qu’une action est potentiellement coûteuse pour lui.
• Les fenêtres d’informations : pour juste informer l’utilisateur sans aucune forme de menaces.

Les icônes a utiliser sont respectivement les suivantes :

Icônes des fenêtres de messages.

Exemple de fenêtre de blocage.

Fenêtre de blocage

Exemple de fenêtre d’alerte à la prudence. On remarque que le bouton reprend le libellé de l’action et le bouton sélectionné par défaut est le bouton d’annulation.

Fenêtre d'alerte à la prudence.

Exemple de fenêtre d’information. La première pose une question, la deuxième de présente juste une information. Dans les cas, il n’y a aucune notion de menace. Si l’information est secondaire et peut attendre, on utilisera une fenêtre de notification.

Fenêtre d'information posant une question.

Fenêtre d'information.

Police de caractères

Les polices de caractères à utiliser sont les suivantes :

Exemple	Police et couleur
	9 pt. black (#000000) Segoe UI
	12 pt. blue (#003399) Segoe UI
	9 pt. black (#000000) Segoe UI
	9 pt. black (#000000) Segoe UI
	9 pt. black (#000000) Segoe UI, bold or italic
	9 pt. black (#000000) Segoe UI, in a box
	9 pt. dark gray (#323232) Segoe UI
	9 pt. blue (#0066CC) Segoe UI
	9 pt. light blue (#3399FF) Segoe UI
	11 pt. blue (#003399) Segoe UI
	11 pt. black (#000000) Segoe UI
	9 pt. black (#000000) Calibri
	17 pt. black (#000000) Calibri

Utilisation des couleurs.

Les couleurs ne doivent pas être utilisées pour les éléments standards de l’interface. Il est possible d’utiliser une couleur pour renforcer une information, avec parcimonie. Il faut tenir compte du fait que 10 % des hommes ne perçoivent pas correctement les couleurs.

Les interfaces doivent donc être lisibles en niveau de gris. Une information en couleur doit être redondante avec une différence de forme et un contraste suffisant :

Icônes en niveaux de gris.