Aide la conception
d'interfaces graphiques
2 ING-IDL
2019-2020
1
Principe : "S parer l'interface
utilisateur et l'application"
But : r utilisation, adaptation ou extension des
logiciels conception modulaire
" Distinction Interface/Application = distinguer
le Quoi et le Comment
les diteurs ed et vi sous Unix
la commande make, ClarisHomePage, tableur
" Interface graphique vs fonctionnalit s
Logiciels interaction clavier
Logiciels avec cran graphique/clavier/souris
2
L'interface (graphique)
utilisateur
LOGICIEL
Module
Application
Module
Interface
(IG)
Utilisateurs
-------------------
sorties : cran
entr es: clavier,souris
3
Principe : "S parer l'interface
graphique et l'application"
" Application = constitu e d'objets "r els" ou
simul s faisant partie d'un monde mod lis
(=monde simul ) + les structures de donn es
n cessaires l'organisation et la m morisation
de ces objets
" Interface graphique = constitu e d'objets
faisant partie du monde de l'interface
utilisateur (UI = menu, liste scroll e, morceaux
de textes, donn es d'entr es ou de sortie, &).
4
Principe : "S parer l'interface
utilisateur et l'application"
" L'interface utilisateur contient les l ments
logiciels d di s la capture des entr es de
l'utilisateur et la production des sorties du
syst me.
" Le noyau fonctionnel contient le reste du
syst me, c'est- -dire ses composants de calcul
et de stockage de l'information.
" Dicult : l'ensemble est en r alit un
syst me interactif. ex: Shell Unix
5
Syst me interactif
" syst me prenant en compte les entr es
fournies par l'utilisateur de mani re
interactive.
" il fournit l'utilisateur, lors de l'ex cution,
une repr sentation de son tat interne, an que
ce dernier puisse la diriger.
" Ainsi, les entr es fournies par l'utilisateur
d pendent des sorties produites par le syst me
et inversement.
6
Mod le conceptuel d'un
syst me interactif base de
commandes
Vue du mod le
Mod le
7
Modules et interfaces
logicielles
Interface = (ce qui g re) les rapports ou
relations entre deux l ments
Module
logiciel
M1
Module
Interface
Module
logiciel
M2
La communication va g n ralement dans les
deux sens (M1 M2 et M2 M1).
8
Modules et interfaces
logicielles
ex: Interface une BD
Module
logiciel
Interface
logicielle
Base
de
Donn es
Rem: a peut aussi tre un logiciel: un serveur,
avec interface utilisateur&
9
Conception : outils
" objet (abstrait) ` sa (ses) repr sentation(s)
" mod le (monde de l'application) ` vues" de ce
mod le
(cid:0) utilisation d'architectures sp ciques :
" architecture Mod le/Vue
(couple Observable/Observers en java)
" en Smalltalk: Mod le/Vue/Contr leur
" design patterns"
10
Architecture Mod le/Vue(s)
Mod le
tout changement sur le
mod le
est "noti " aux vues
tout
changement
sur une vue
est transmise
au mod le
Vue
Vue
Utilisateur
Utilisateur
11
Architecture MVC en Smalltalk
Mod le
Contr leur
Vue
- le mod le stocke et g re les donn es
- les vues en montrent une partie
- le contr leur transmet les modications
sur les vues au mod le
Utilisateur
12
Pour en savoir plus &
Design patterns - catalogue de mod les
de conception r utilisables, E. Gamma, R.
Helm, et alii, Vuibert, Paris 1999
13
Advertisement
14
R gles pour la sp cication
d'interfaces graphiques
dapplications
15
Principes g n raux
"L'interface doit tre conviviale, d'une grande facilit
d'emploi pour l'utilisateur, blablabla..."
=> l'interface doit tre compr hensible et bien adapt e
la t che (vitesse, fr quence, etc.)
" compr hensible => vocabulaire/iconographie
" compr hensible => coh rente/consistante
" compr hensible => mise en page claire
" compr hensible => retours vers l'utilisateur
16
(feed-back)
R gle n 1
D nir le vocabulaire et
liconographie
Fixez la terminologie du domaine de lapplication
(cid:0) transpara t dans l'interface et dans la documentation
utilisateur (faire un glossaire)
Rem: xez aussi les termes pour le code (et les
conventions de nommage que vous utiliserez)
(cid:0) transpara t dans la documentation du code et dans le
code !
17
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)
18
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)
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 nies : s lecteur de
chiers, 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 chiers, (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 ciques
25
R gle n 4
Regrouper spatialement les
objets semblables/similaires
(cid:0) Clart = disposition des objets
(cid:0) D nir les objets = l'iconographie
(cid:0) un regroupement d'objets dans une zone
sp cique 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
Advertisement
Dilemme des co ts ergonomiques
" barre de menus ( novice) et barre
d'ic nes ( expert)
" raccourcis clavier
" popup menus
" reconguration 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"
" visualiser l'eet des commandes ou l' tat des objets
repr sent s (ic nes)
" apparition de messages, beep, etc., contextuels
" boites de dialogues sp ciques, 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 enn &
Traiter les erreurs
(ou standard z ro erreur! )
" traiter les erreurs de mani re
uniforme (boites de messages
d'erreurs standards)
" v rier les types de donn es des
entr es
" pr voir les ambigu t s possibles
" avertir /demander conrmation
31
D nir le vocabulaire
et l'iconographie &
" Dans les menus, unier la syntaxe (nom
ou verbe innitif, 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 ciques.
33
Veillez la coh rence de l'usage des
fontes dans votre logiciel = donnez un
sens cet usage.
on peut utiliser di 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 chiers.
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
eet xer 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 nies.
" contr lez les contrastes
" m ez-vous, si les surfaces color es
sont petites, l'eet 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 nir 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
Advertisement
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
susamment 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
di 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 chiers, 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 Achage (Agrandir, R duire ou
Zoom; di 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, ches
d'extension, &)
75
" si la barre est trop longue, la terminer par
une 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
Advertisement
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 signie
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
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 modieurs 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'acher 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 nies.
" Les tables permettent d' diter des
tableaux de cellules s lectionnables.
" Les cases cocher permettent de xer
des valeurs bool ennes.
" Les boutons radios permettent de
s lectionner de mani re exclusive un
item dans un ensemble d'items.
85
" Les 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 chiers, 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 di rentes formes de
pinceaux).
" Les arbres de Java permettent de
d nir des arborescences semblables
celles utilis es par les gestionnaires de
chiers.
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 nir
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 eectuer.
Dans la pr sentation de votre travail,
pensez justier vos choix.
98