Aide à la conception d'interfaces graphiques

• homogénisez l'usage : des polices, des couleurs, …

• consistance des termes (dans/avec la doc)

19

Règle n° 2 Veiller à la cohérence, et l'homogénéité systématique

• externe: guide de styles, adéquation à

l'environnement d'exécution

• intrinsèque: plusieurs façons de lancer la même commande (Actions en java, commande Ejecter des anciens Macintosh)

• homogénisez l'usage : des polices, des couleurs, …

• consistance des termes (dans/avec la doc)

20

Règle n° 2 Veiller à la cohérence, et l'homogénéité systématique

• externe: guide de styles, adéquation à

l'environnement d'exécution

• interne: plusieurs façons de lancer la même

commande (Actions en java, commande Ejecter des anciens Macintosh)

• homogénisez l'usage : des polices, des couleurs, …

• consistance des termes (dans/avec la doc)

21

Règle n° 2 Veiller à la cohérence, et l'homogénéité systématique

• externe: guide de styles, adéquation à

l'environnement d'exécution

• interne: plusieurs façons de lancer la même

commande (Actions en java, commande Ejecter des anciens Macintosh)

• homogénéité de l'usage : des polices, des couleurs,

…

• consistance des termes (dans/avec la doc)

22

Règle n° 3 S'appuyer sur les standards et les logiciels existants

• consulter les guides de styles

• utiliser des boîtes prédéfinies : sélecteur de

fichiers, boîtes de messages

• choisir les termes dans les menus

• choisir des icônes appropriés (culturel)

• utiliser des arbres (mode actuelle)

• …

23

Règle n° 3 S'appuyer sur les standards et les logiciels existants

• historique : Xerox → Mac → Windows • utiliser/réutiliser les choses intéressantes d'un

logiciel

(cid:0) la barre des tâches Windows → MacOsX (cid:0) le glisser/déposer des icônes de fichiers, (ex.

exécutables ou imprimantes)

(cid:0) le double-clic

24

Règle n° 4 Soigner la mise en page

• Règles de mise en page : lesquelles ?

– maquettistes des journaux

– pages web

– fenêtres d'applications : notre cas

• Soigner la fenêtre principale

• Soigner l'organisation des boîtes de dialogue ou des fenêtres spécifiques

25

Règle n° 4 Regrouper spatialement les objets semblables/similaires

(cid:0) Clarté = disposition des objets

(cid:0) Définir les objets = l'iconographie

(cid:0) un regroupement d'objets dans une zone

spécifique doit correspondre à un regroupement conceptuel

• barre de menus, d'icônes, fenêtres • boutons, cases, onglets, etc.

26

Pour en savoir plus …

Précis de mise en page, L. Guéry, Editions CFPJ, Victoires-éditions, 2005.

+ d'autres titres disponibles chez Victoires-Editions (éditeur pour des élèves journalistes, ou autres métiers de la Presse).

27

Règle n° 5 Concevoir l'interface pour plusieurs utilisateurs

Dilemme des coûts ergonomiques • barre de menus (→ novice) et barre

d'icônes (→ expert)

• raccourcis clavier

• popup menus

• reconfiguration possible de l'interface

28

Règle n° 6 Soigner les retours utilisateur (feed-back)

• savoir "ce qui est accessible", "où on est", "où on en est" [ex: visualiser où en est une commande …, "ce qui peut se produire après", …]

• visualiser l'effet des commandes ou l'état des objets

représentés (icônes)

• apparition de messages, beep, etc., contextuels

• boites de dialogues spécifiques, erreurs, etc.

29

• il est très important de savoir QUI sera l'utilisateur (principal) du logiciel pour adapter l'interface. En particulier connaître :

(cid:0) son âge (si c'est pertinent)

(cid:0) son rôle (administrateur vs utilisateur)

(cid:0) son degré d'expertise et de connaissances du

domaine de l'application

(cid:0) son degré d'expertise et de connaissances sur

l'ordinateur en général

(cid:0) sa (future) fréquence d'utilisation du logiciel

(novice, futur expert, …)

30

et enfin … Traiter les erreurs (ou standard « zéro erreur! » ) • traiter les erreurs de manière uniforme (boites de messages d'erreurs standards)

• vérifier les types de données des

entrées

• prévoir les ambiguïtés possibles

• avertir /demander confirmation

31

Définir le vocabulaire et l'iconographie …

• Dans les menus, unifier la syntaxe (nom

ou verbe infinitif, etc.)

• Titre de menu = titre de rubrique

• Pas de mélange français/anglais (sauf

maîtrisé: franglais ?)

• Cohérence des emplois dans l'interface, et avec la documentation utilisateur (et même développeur !)

32

Consistance et cohérence des fontes et des couleurs

• Ne pas multiplier les fontes.

• Une fonte peut normalement être

choisie par l'utilisateur.

(cid:0) Vous pouvez permettre à l'utilisateur

de choisir la fonte, et réserver l'italique ou le gras de cette même fonte pour des usages plus spécifiques.

33

Veillez à la cohérence de l'usage des

fontes dans votre logiciel = donnez un sens à cet usage.

– on peut utiliser différentes tailles

– on peut distinguer les titres des menus par

du gras.

ex: dans le Finder Macintosh, l'italique est

réservé aux alias de fichiers.

– Le mélange des fontes est rarement réussi (= c'est

laid !)

– Evitez aussi les MAJUSCULES.

34

(Time & Chaos)

Cohérence des couleurs

• Les couleurs de la même façon devront être utilisées de manière consistante. On donnera un sens à l'usage d'une couleur.

• Le choix des couleurs est aussi du

ressort de l'utilisateur. Vous pouvez en effet fixer l'usage d'une couleur, et laisser l'utilisateur choisir cette couleur.

36

• pour la sélection de couleurs, utilisez

les boîtes prédéfinies.

• contrôlez les contrastes

• méfiez-vous, si les surfaces colorées sont petites, l'effet souhaité n'est pas toujours garanti…

• vous pouvez utiliser des couleurs pour

représenter des nombres.

• pensez aussi à coder les valeurs par les

dégradés d'une même teinte.

37

Le nuancier du i-book (Mac)

38

(Pirates: Quest for the seas)

(QuickTime 4.0 Player)

WebForms

Mettre en page

• Choisir une disposition générale

– classique: barre de menu, barre d'icônes, fenêtre de login et/ou fenêtre principale

– autres: onglets, découpage, etc..

– barre ou grille d'icônes seule

• faciliter la navigation s'il existe plusieurs fenêtres : onglets, panneaux, fenêtres de vues, arbres d'icônes ou de textes

42

43

Logiciel Eudora démarrage barre d'icônes

44

45

•Dans l'édition, la belle page d'un livre est la

page de droite.

•Sur l'écran, ces règles n'ont pas

nécessairement d'équivalent mais le centre de l'écran est très visible

(cid:0) Centrer les boîtes de dialogue

Il n'est pas toujours simple de savoir pourquoi une mise en page est ou non réussie, mais l'on peut tout de même énoncer quelques règles simples

46

Organiser les boîtes de dialogues

• définir des zones dans les boîtes

• utiliser les séparateurs, les cadres

• mettre des titres aux cadres

• minimiser les enchaînements et les

ouvertures de boites

• placer les boutons de manière

intelligible et/ou conventionnelle

47

Délimiter des zones

• créer des zones et penser en zone

• grouper les éléments par

fonctionnalités et/ou par nature (boutons, etc.)

• séparer les zones avec des

séparateurs, les fenêtres scindables, les onglets

• organiser les zones par proximité

48

49

Organiser les boîtes de dialogues

• boutons: Ok, Annuler, Valider, Appliquer,

Enregistrer, Aide, … (emplacements standards)

• l'emplacement des boutons (ex: par

rapport à une liste) doit rendre clair les arguments de la commande lancée par le bouton

• cacher certaines parties de la boîte

50

51

52

53

Aligner les objets

Règle à appliquer sur tout type

d'objets graphiques, de manière très systématique, en particulier :

• champs de textes

• étiquettes

• boutons, cases à cocher

• horizontalement, verticalement,

centralement, etc.

haut

gauche droite

bas

54

55

(Webforms)

(IBM's Aptiva Communication Center)

Mettre des marges suffisamment grandes

"… de l'air, de l'air !!! …"

• ne pas coller les étiquettes (aux

champs de textes, etc.)

• ajouter des bords et des attributs de

marges

• en java, rajouter des Bordures, (et des

"élastiques")

59

60

Eviter les espaces vides

"La nature a horreur du vide"

• y faire attention, en particulier, dans

les boites de dialogue

61

62

Exemple avec 2 BoxLayout

BoxLayout vertical

BoxLayout horizontal

BorderLayout

63

Minimiser le nombre des verticales "virtuelles"

• il est possible d'aligner les objets

selon leur milieu : une ligne verticale virtuelle passant par le centre de ces objets apparaît.

• mais tout objet introduit aussi deux lignes verticales virtuelles par le prolongement de ses bords gauche et droit.

64

65

Placer toujours les choses aux mêmes emplacements

• grisez les commandes inaccessibles

dans les menus

• uniformisez la mise en page des

différentes boîtes ou fenêtres en plaçant les boutons, titres, etc. aux mêmes endroits.

• utilisez les mêmes panneaux si vos boîtes ont des parties communes.

67

68

69

Suivre les conventions et les standards connus

• Barre de menu

• Barre d'icônes

• Barre des tâches

• Barre d'outils

• Arbre d'icônes de fichiers, de règles,

etc.

70

Barre de menu et standards

(cid:0) menu Fichier (Nouveau, Ouvrir, Fermer; Enregistrer ou Sauver, Enregistrer sous ou Sauver sous …; Imprimer; Quitter)

(cid:0) menu Edition (Annuler, Rétablir;

Copier/Couper/Coller; Rechercher, Remplacer; Tout sélectionner ; …; Préférences)

71

72

73

Barre de menu (cid:0) menu Aide (A propos, Sommaire,..)

(cid:0) menu Affichage (Agrandir, Réduire ou

Zoom; différents modes; Barres d'outils, menus experts, pieds de pages, etc.),

(cid:0) menus Fenêtres, Polices (ou Format),

(cid:0) menu Outils, parfois menu Modes

74

Barre d'icônes

(cid:0) séparer les rubriques avec des

séparateurs, comme dans les menus

(cid:0) ne pas utiliser que des icônes : (ici,

champs de sélection, flèches d'extension, …)

75

• si la barre est trop longue, la terminer par

une flèche permettra de l'étendre.

• choix des icônes: il y a aussi des

conventions, parfois internationales, mais aussi culturelles.

• droits des logiciels : l'utilisation d'icônes

peut poser problème car ils sont généralement déposés.

76

77

La/les sélection(s) : l'argument caché de commandes d'édition

• Les commandes Couper / Copier / Coller

portent sur la sélection.

• Les commandes de Couper/Coller permettent

aussi la communication entre fenêtre d'applications.

• On copie du texte, des dessins, des images, des

diapositives ou les objets représentés par l'application de manière générale.

78

Les guides de style

Ils sont bien souvent très voisins

• Par exemple, dans beaucoup de toolkits, on trouve le menu d'Aide à droite dans la barre de menu.

• Il y a aussi des conventions sur les icônes du pointeur de souris et sur l'usage des boutons de souris, avec des équivalents clavier/souris quand il n'y a qu'un ou deux boutons.

79

Les guides de style

• la convention SAM décrit l'utilisation d'une

souris à trois boutons. SAM signifie

– S pour Sélectionner (S = Select),

– A pour Ajuster (A = Adjust),

– M pour Menu (M = Menu).

• la navigation (sur les widgets) à partir du

clavier est également prévue (touches tab et flèches).

80

Les guides de style

• Les conventions de communications

entre clients permettent l'implantation de mécanismes de (Couper/Copier)/Coller.

• Il y a aussi des conventions (et des

fonctions prévues) pour implanter le Drag and Drop (Glisser/relâcher).

81

• Les raccourcis clavier et les mnémoniques sont également prévus par les toolkits et faciles à coder (suivre les standards) – vi puis emacs sous Unix → Ctr X, ctr C, ctr V → les mêmes combinaisons avec d'autres modifieurs sous Macintosh

– même chose avec : Ctr A, Ctr E, Ctr B, Ctr F, Esc

W, etc.

• En Java Swing, pensez à mettre des tooltips

(infos bulles) et pour la cohérence entre la barre d'icônes et la barre de menu, utiliser des Actions.

82

Utilisez les objets de l'interface

graphique pour l'usage prévu par les concepteurs de ces objets

• Ainsi, les séparateurs permettent de séparer les items des menus, les icônes des barres d'icônes, de délimiter des zones dans des boîtes de dialogue.

• Les panneaux et les onglets de fenêtres

permettent de diviser les fenêtres.

83

• Les cadres ou les bordures Java

permettent de mieux délimiter une zone et lui donner un titre.

• Les éditeurs de textes et les champs

textes permettent d'entrer des données.

• Les champs textes doivent être

étiquetés.

• Les listes permettent d'afficher des éléments et d'en sélectionner un sous-ensemble.

84

• Les champs de sélection (combo-box ou

menus à options) permettent de sélectionner une valeur parmi une liste de valeurs prédéfinies.

• Les tables permettent d'éditer des tableaux de cellules sélectionnables.

• Les cases à cocher permettent de fixer

des valeurs booléennes.

• Les boutons radios permettent de

sélectionner de manière exclusive un item dans un ensemble d'items.

85

• Les flèches servent à indiquer qu'une

barre peut se prolonger, qu'un menu est accessible, ou que l'on peut monter ou descendre.

• Les ascenseurs permettent la navigation

horizontale et verticale.

• Les boîtes de dialogues standards

(sélecteur de fichiers, boîtes de sélection, d'avertissement, de lecture d'entrées, etc.) fournissent un ensemble facilement utilisable et uniformisent l'interface.

86

• Les popup menus permettent d'accéder

rapidement à des commandes contextuelles.

• Les menus de pattern permettent de

sélectionner des couleurs, des fonds, ou des objets représentés sous forme d'icônes (comme différentes formes de pinceaux).

• Les arbres de Java permettent de

définir des arborescences semblables à celles utilisées par les gestionnaires de fichiers.

87

(Lotus Notes)

(Lotus Notes)

(Milltronics' Dolphin Plus)

(MultiEdit 8.0)

(ClearCase de Rational Software)

(Windows95)

(Windows95)

(Revision Master)

(Un dialogue de Outlook Express Newsreader de Microsoft)

Conclusion

Espérons que ces règles vous

permettent de mieux concevoir et définir vos interfaces.

Dans la pratique, appliquer tous ces principes simultanément n'est pas toujours possible et l'on a souvent des dilemmes à résoudre et des choix à effectuer.

Dans la présentation de votre travail,

pensez à justifier vos choix.

98