Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
[email protected] IHM, L2I et L2MI
Java.awt.Image
• Objet représentant les images
• Pour les obtenir :
– javax.swing.ImageIcon
• Constructeur avec le nom du fichier
• Méthode getImage
– java.awt.Toolkit
• Pas de constructeur, mais une méthode statique getDefaultToolkit()
• méthode getImage("nomdufichier");
[email protected] IHM, L2I et L2MI
java.awt.Graphics (bis)
• Contexte graphique (« morceau d’écran »)
• Permet de dessiner
– Changer de crayon : setColor
– drawRect, drawOval, drawPolygon, drawString, fillRect, fillOval
– drawImage(img, x, y, ImageObserver)
• Obtenu automatiquement (repaint(), redimensionnement, etc.)
[email protected] IHM, L2I et L2MI
Java.awt.image.BufferedImage
• C’est une java.awt.Image
• Création simpleBufferedImage(int width, int height, int imageType)
– Largeur, hauteur
– TYPE_3BYTE_BGR, TYPE_4BYTE_ABGR...
• Pour dessiner dedans public Graphics2D createGraphics()
– Un Graphics2D est un Graphics
[email protected] IHM, L2I et L2MI
Double-buffering en AWT
• java.awt.image.BufferedImage– buffImg = new BufferedImage(width, height,
type);
– type : BufferedImage.TYPE_4BYTE_ABGR par exemple
• Dans paint(Graphics g) :– Graphics grph = buffImg.createGraphics();
– // on dessine dans grph
– g.drawImage(buffImg, 0, 0, null)
[email protected] IHM, L2I et L2MI
Pourquoi des processus ?
• Pour être plus rapide
• Pour ne pas bloquer un processus (interface).
[email protected] IHM, L2I et L2MI
Processus Basic
• Utilisation de l’interface Runnable
– Méthode public void run( )
• Utilisation de Thread
– new Thread(<une instance Runnable>);
• À l’exécution
– Méthode start( ) qui lance le processus
– Méthode yield( ) pour passer la main (via le scheduler)
– Sleep pour attendre (cf deux transparents plus loin)
[email protected] IHM, L2I et L2MI
Arrêter un processus
• Java recommande l’utilisation de boolean pour les processus « long »
public void run( ) {
// code
while( ! canceled) {
// code
}
// code
}
[email protected] IHM, L2I et L2MI
Attendre
import java.util.concurrent.*;
public void run() {try {
while(! canceled) {// Old-style:// Thread.sleep(100);// Java SE5/6-style:TimeUnit.MILLISECONDS.sleep(100);
}} catch(InterruptedException e) {
System.err.println("Interrupted");}
}
[email protected] IHM, L2I et L2MI
Partage de ressource
• Problème d’accès concurrent…
• Mot clef synchronized– Sur une méthode
– ou un morceau de code
• Lorsqu’un processus veut exécuter un code syncronisé– La jvm vérifie si le verrou est disponible,
– Lui donne et
– Le rend disponible à la fin
• Un seul verrou par classe
• Possibilité d’utiliser d’autre verrous – java.util.concurrent.locks.*;
– Interface Lock : lock( ) et unlock( )
[email protected] IHM, L2I et L2MI
Les animations graphiques
• Un thread
• Durée finie ou infinie
• Appel à repaint
• Évolution du composant graphique
• Deux exemples
– Anim
– Balle
[email protected] IHM, L2I et L2MI
Quelques objets swing
Border (Cadre autour des éléments)
Tabbed Panes (onglets)
Radio Button et ButtonGroup
http://java.sun.com/docs/books/tutorial/uiswing/TOC.html
[email protected] IHM, L2I et L2MI
Objectifs
• Manipulation d’éléments de haut niveau
• Facilité d’évolution
• Quelques design patterns…
[email protected] IHM, L2I et L2MI
Border (Cadre autour des éléments)
• javax.swing.border
• http://java.sun.com/docs/books/tutorial/uiswing/components/border.html
• Méthode setBorder (JComponent)
• Constructeur de classe ou fabrique (avax.swing.BorderFactory)
• Différent type : LineBorder (trait plein), TittledBorder (avec un titre), BevelBorder(chanfrein, angle oblique), etc.
[email protected] IHM, L2I et L2MI
Tabbed Panes (Onglets)
• Avoir simplement une gestion d’onglet : class javax.swing.JTabbedPane
• http://java.sun.com/docs/books/tutorial/uiswing/components/tabbedpane.html
– addTab(String, Component)
– addTab(String, Icon, Component)
– addTab(String, Icon, Component, String)
[email protected] IHM, L2I et L2MI
Aperçu du BoxLayout
• Organisation – Vertical : container.setLayout(new BoxLayout(container,
BoxLayout.PAGE_AXIS));– Horizontal : ligne. setLayout(new BoxLayout(ligne,
BoxLayout.LINE_AXIS));
• Alignement des bords : – setAlignmentX(Component.LEFT_ALIGNMENT); pour aligner les
bords gauche
• Insertion de « blancs » pour remplir…– container.add(Box.createVerticalGlue()); – ligne.add(Box.createHorizontalGlue());
• Insertion de « blancs » pour espacer…– container.add(Box.createRigidArea(new Dimension(5,5)));
[email protected] IHM, L2I et L2MI
Radio Button et ButtonGroup
• Radio Button : – JRadioButton(String)
– JRadioButton(String, boolean)
– JRadioButton(Icon)
– JRadioButton(Icon, boolean)
– JRadioButton(String, Icon)
– JRadioButton(String, Icon, boolean)
• Pour en sélectionner un parmi n : GroupButton– new ButtonGroup()
– add(<radio button>)
[email protected] IHM, L2I et L2MI
Introduction à l’organisation du code
• Indépendance morpion – ihm
• Notion de controleur
• Besoin d’une structure de programmation pour échanger des informations, résoudre des conflis…
[email protected] IHM, L2I et L2MI
Quelques objets swing
Tableaux de données (JTable)
Menu et Menu Contextuel (JMenu / JPopMenu)
Contenu Dynamique (CardLayout)
Choisir un Fichier (JFileChooser)
[email protected] IHM, L2I et L2MI
JTable
• Affichage de données dans un tableau.
– Texte
– Rendu personnalisé
– (édition personnalisée)• http://java.sun.com/docs/books/tutorial/uiswing/components/table.html
[email protected] IHM, L2I et L2MI
JTable : construction• Un tableau d’objet : les données
– à deux dimensions (ligne, colonne)
– Contenu hétérogène
• Un tableau de String : les titres– à une dimension (colonne)
– Le nom des colonnes, Cohérence des tailles des tableaux
• Contruction// films : Object[ ][ ] et nomDesColonnes : Object[ ]
JTable jt = new JTable(films, nomDesColonnes);
JFrame fen = new JFrame(); fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container container = fen.getContentPane();
• utilisation « simple »container.add(jt.getTableHeader(), BorderLayout.PAGE_START);
container.add(jt, BorderLayout.CENTER);
• utilisation « JScrollPane »JScrollPane jscp = new JScrollPane();
jscp.setViewportView(jt);
container.add(jscp);
[email protected] IHM, L2I et L2MI
Personnalisation du rendu
• Interface logicielle TableCellRendererpublic Component getTableCellRendererComponent(
JTable table, Object donnee,
boolean isSelected, boolean hasFocus,
int row, int column)
• Association class (des données) avec l’objet utilisé pour le rendu
jt.setDefaultRenderer(Img.class, new MyRender());
– Img : la donnée à représenter
– MyRender : la classe qui implements TableCellRenderer
[email protected] IHM, L2I et L2MI
Personnalisation du rendu (suite)
• Besoin de préciser le type (class) en fonction de la colonne
– class MyTableModel extends AbstractTableModel
– Méthodepublic Class getColumnClass(int c) {
return getValueAt(0, c).getClass();
}
• Construction des tablesjt = new JTable(new MyTableModel(films, nomDesColonnes));
[email protected] IHM, L2I et L2MI
Menu dans les JFrame
• JMenuBar qui porte les JMenu• Les JMenu portent les
– JMenuItem– JRadioButtonMenuItem, etc. (ButtonGroup)– JSeparator
• Ajout de raccourci (Alt+Q)item.setMnemonic(KeyEvent.VK_Q);
• Ajout du texte du raccourci dans le menuitem.setAccelerator(KeyStroke.getKeyStroke(
KeyEvent.VK_Q,ActionEvent.ALT_MASK));
[email protected] IHM, L2I et L2MI
Menu Contextuel
• Généralement par clic droit (Windows)
• Un JPopupMenu porte des – JMenuItem
– JRadioButtonMenuItem, etc. (ButtonGroup)
– JSeparator
• MouseListener sur les élèments avec le menu contextuel (mousePressed et mouseReleased) avec le code suivant :
if (e.isPopupTrigger()) {
popup.show(e.getComponent(), e.getX(), e.getY());
}
[email protected] IHM, L2I et L2MI
Changer le contenu d’une zone
• CardLayout• http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html
• add dans le container avec une String en second paramètre
cards = new JPanel(new CardLayout());
cards.add(card1, "element1");
• Pour montrer CardLayout cl = (CardLayout)(cards.getLayout());
cl.show(cards, "element1"); // montre card1
• Pour les onglets : JTabbedPane
[email protected] IHM, L2I et L2MI
Choisir un fichier
• JFileChooser• http://java.sun.com/docs/books/tutorial/uiswing/components/filechooser.html
JFileChooser fc = new JFileChooser();
public void actionPerformed(ActionEvent e)
{
int returnVal = fc.showOpenDialog(FileChooserDemo.this);
if (returnVal == JFileChooser.APPROVE_OPTION)
{
File file = fc.getSelectedFile();
Image = Toolkit.getDefaultToolkit().getImage(file. getCanonicalPath());
// … traitement de l’image choisie
} else {
// … traitement en cas d’annulation
}
}
[email protected] IHM, L2I et L2MI
Filtrage de fichier• fc.setAcceptAllFileFilterUsed(false);
– Par défaut tout accepter
• fc.addChoosableFileFilter(new <FileFilter>());• FileFilter interface pour filterpublic boolean accept(File f) {
if (f.isDirectory()) {
return true;
}
String extension = getExtension(f);
if (extension != null) {
return ( extension.equals("jpeg") || extension.equals("jpg") ||
extension.equals("png") || extension.equals("bmp") ) ;
}
return false;
}
public String Description() { // The description of this filter.
return "filtre d’image" ;
}
[email protected] IHM, L2I et L2MI
getExtension
public String getExtension(File f) {
String ext = null;
String s = f.getName();
int i = s.lastIndexOf('.');
if (i > 0 && i < s.length() - 1) {
ext = s.substring(i+1).toLowerCase();
}
return ext;
}
}
c.f.
http://java.sun.com/docs/books/tutorial/uiswing/components/filechooser.html
[email protected] IHM, L2I et L2MI
Architecture Logicielle des IHM
Principes de basesModèle MVCModèle PAC
Avec des transparents repris des cours de l’équipe IIHM du LIG
[email protected] IHM, L2I et L2MI
Une architecture, pourquoi faire ?
• Organiser le code (rangement)
• Simplifier (diviser pour régner)
• Organiser le travail– Itératif
– Parallèle (fusion)
• Modifier (une partie)
• Ré-utiliser
• Notion : modularité, évolutivité, flexibilité
[email protected] IHM, L2I et L2MI
IHM et architecture
• Séparation possible – Code pour IHM
– Code « Métier »
• Exemple – IHM différente pour une Gestion d’un stock de
chaussure ou de bibelots ?
– Linux sous gnome ou kde, le système change-t-il ?
• Objectif : éviter de tout modifier si on change la partie fonctionnel ou la partie IHM
[email protected] IHM, L2I et L2MI
Découpage par Abstraction
• Séparation IHM / NF
– Noyau fonctionnel (ou Functional Core ou partie Métier)
• Besoin d’interface logicielle pour découpler (indépendance) des deux parties
NF IHM
NF IHM
Partie de l’IHM
concrète
Partie de l’IHM
concrète
Partie de l’IHM
concrète
Pierre
PaulJacques
Partie de l’IHM
concrète
[email protected] IHM, L2I et L2MI
Architecture : MVC
• Smalltalk [Goldberg et Robson 1979-1983]
• Cause : difficultés de conception des applications fortement interactives
• Réponse : modularisation
– Model : modélisation (données et comportement)
– View : représentation manipulable de l'objet
– Control : interprétation des entrées
[email protected] IHM, L2I et L2MI
MVC : meilleure conception
• Séparer dans le code– les données (le Modèle),
– La ou les Vues,
– Le Contrôle
• V s’abonne à M
• C s’abonne à V
• C modifie M
• Interfaces logicielles
http://sis36.berkeley.edu/projects/streek/talks/mvc/images/talks/mvc/mvc-structure-generic.gif
[email protected] IHM, L2I et L2MI
MVC : meilleure conception
• Plusieurs vues possibles synchronisées,
• Plusieurs contrôles possibles (exemple : clavier, souris, joypad),
• Données isolées (BD, fichiers, etc…)
• Bien entendu :– Nécessité de définir des interfaces communes
entre le modèle, la vue et le contrôleur,
– Java fournit en standard un certain nombre d’outils…
[email protected] IHM, L2I et L2MI
Les classes Observer / Observable
Observer
"Arthur"
Observer
"Martin"
Observer
"Fred"
S ’enregistre
S ’enregistreObservableObservable1. Arthur
Observable1. Arthur
2. Martin
[email protected] IHM, L2I et L2MI
Observer / Observable
Exemple : un timer
class Test {
Timer timer;
Test() {
timer = new Timer();
Toto toto = new Toto();
timer.addObserver(toto);
}
public static void main(String[] args) {
Test t = new Test();
t.timer.run();
}
}
toto est
écouteur
du timer
[email protected] IHM, L2I et L2MI
java.util.Observer
Toto est un observateur
class Toto implements java.util.Observer {
public void update(Observable o,
Object arg) {
System.out.println("Temps : "
+ ((Timer)o).getSeconds()
+ " secs");
}
}Tous les observateurs doivent
posséder une méthode
update(…)
[email protected] IHM, L2I et L2MI
java.util.Observable
Exemple
class Timer extends java.util.Observable {
private long zzz = 1000;
private long zero;
Timer(long zzz) {
this.zzz = zzz;
}
public void run () throws InterruptedException {
zero = System.currentTimeMillis();
while (true) {
setChanged();
notifyObservers(new
Long(System.currentTimeMillis()
- zero));
Thread.sleep(zzz);
}
}
}
Les observables doivent
être d’une sous-classe de
Observable
On prévient les observateurs, ça
appelle update(…)
[email protected] IHM, L2I et L2MI
Limite de MVC
• Dans la cas d’une vue multiple, nous disposons d’un pattern
• Pour le reste ? – Besoins d’un cadre
– Jusqu’à 80% du code concerne les interfaces
– Il faut viser la réutilisation et faciliter la maintenance / l’évolution
– Comment faire collaborer des MVC ensemble(solution pour l’IHM)
[email protected] IHM, L2I et L2MI
Architecture : Modèles à agents pour l’IHM
• Un système interactif = une collection d’unités de calcul spécialisés (agents)
• Un agent
– a un état
– a une expertise
– est capable d’émettre et de réagir à des événements
• Un agent en contact direct avec l’utilisateur = un interacteur
• Quelquefois agent = interacteur
[email protected] IHM, L2I et L2MI
Architecture : Modèles à agents pour l’IHM ...
• Motivations• Modularité et parallélisme
– conception itérative (modifiabilité)– dialogue à plusieurs fils– mise en œuvre des collecticiels
• Correspondance avec l’approche à objets– catégorie d’agents (réactifs) -> classe– événement -> méthode– encapsulation : l’agent (l’objet) est seul à modifier directement
son état– mécanisme de sous-classe -> modifiabilité
• Exemple : MVC (modulo pb de hierarchie)
[email protected] IHM, L2I et L2MI
PAC : Un modèle hiérarchisé d’agent
• [Coutaz 88]
• Trois facettes :– Présentation (C + V de MVC), le V de ALV
– Abstraction (M de MVC)
– Contrôle : communication entre agent et expression des dépendances (liaison) entre A et P (le L de ALV)
• Hiérarchisation : – Arbre : relation père-fils
– Heuristique de conception
– Communication par message
[email protected] IHM, L2I et L2MI
Architecture : Modèles à agents
• PAC
Aspects réalisation
• Aucune recommandation
• dépend de la plate-formed’accueil
• 1 agent = 1 module C au minimum, 1 objet ou 1 objet par facette (comme MVC)
[email protected] IHM, L2I et L2MI
Un exemple d’application de PAC
Capturer un objet (réalité cliquable)
Voir les deux vidéos : utilisatrice (équipement) et capture (déroulement du scénario)
[email protected] IHM, L2I et L2MI
Exemple de hiérarchie PAC
Hiérarchie PACDonnées à afficher
(ANF)
Données numériques
localisées (ANF)
Objets
sauvés
Caméra
Localisation
Orientation
Terrain
augmenté
Réalité
cliquable
Représentation
physique
Passerelle
Représentation
numérique
[email protected] IHM, L2I et L2MI
Représentation
physique Représentation
numérique
hiérarchie PAC
Réalité
cliquable
Exemple de circulation de message
Passerelle
Evénements
souris (stylet)M1’
M2
M2
M2
M2’M2’’
M1
[email protected] IHM, L2I et L2MI
Exemple d’implémentation PAC
• Classe Abstraite pour le controleur– Implémentation par défaut de certaines méthodes
• Interfaces logicielles pour l’Abstraction et la Présentation – Possibilité d’héritage
• Communication par message – Une « String » pour identifier le type de message
– Un objet en attachement (peut être n’importe quoi)
– Traitement : test sur le type de message et traitement adéquate (cast sur l’attachement)
[email protected] IHM, L2I et L2MI
Exemple d’Abstraction et de Présentation
package PAC;
public interface Abstraction {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object
attachement);
}
package PAC;
public interface Presentation {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object
attachement);
}
[email protected] IHM, L2I et L2MI
Exemple de Controleurpackage PAC;
import java.util.ArrayList;
public abstract class Controleur {
protected Abstraction a;
protected Presentation p;
protected ArrayList<Controleur> enfants = new ArrayList<Controleur>();
protected Controleur parent;
public abstract void recoitMessageControleur(String type, Object attachement);
public abstract void recoitMessagePresentation(String type, Object attachement);
public abstract void recoitMessageAbstraction(String type, Object attachement);
public void affecteParent(Controleur p) { this.parent = p; }
public void ajouteEnfant(Controleur arg0) {
if (! enfants.contains(arg0)) {
enfants.add(arg0);
arg0.affecteParent(this);
}
}
protected void dispatchDownMessage(String type, Object att) {
for (Controleur c : enfants) { c.recoitMessageControleur(type, att); }
}
protected void dispatchUpMessage(String type, Object att) {
if (parent != null) parent.recoitMessageControleur(type, att);
}
}
[email protected] IHM, L2I et L2MI
Règles Heuristiques
• Ensemble de règles heuristiques pour construire la hiérachie d'agents PAC à partird’une maquette
– À l’origine dans le Contrôleur de Dialogue dansPAC-Amodeus
• Source Modèle d’architecture des systèmesinteractifs, chapitre 7.
[email protected] IHM, L2I et L2MI
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
?
Place
Route
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
Wall
Wall
Environment Zone Region Preferences
?
Place
Route
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
Wall
Environment Zone Region Preferences
ChaleurEnvironnement
[email protected] IHM, L2I et L2MI
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
• Un superagent garantit la cohérence visuelle
[email protected] IHM, L2I et L2MI
D’autres Heuristiques
• R1 : fenêtre = un agent
• R3 : Palette de concepts – Une palette de classes de concept = un agent
– Une barre de menu = un agent
• R4 : zone d’édition – Une zone d’édition = un agent
– Condition : être suffisamment complexe
• R5 : correspondance agent / concept– Un concept complexe = un agent
[email protected] IHM, L2I et L2MI
Heuristiques de liaison
• R6 : d’une fenêtre à une autre
– Les deux sont sous le même agent parent commun
• R9 : Ciment syntaxique
– Agent ciment pour "analyse syntaxique distribuée”
[email protected] IHM, L2I et L2MI
R9 : Ciment syntaxique
• Agent ciment pour "analyse syntaxique distribuée"
• Un superagent cimente les actions distribuées
superagent ciment
agent agentagent
action de l'utilisateur
action de l'utilisateur
action de l'utilisateur
[email protected] IHM, L2I et L2MI
Heuristiques de simplification
• R10 : un agent fils unique peut être regroupé avec son père
– Attention à la modularité / réutilisation / évolution
• R11 : un agent dont la fonction est réalisée par un objet de la boîte à outils graphique devient un composant de la présentation de son père.
[email protected] IHM, L2I et L2MI
Corollaire de R11
• Un objet d’interaction non implémenté par la plate-forme -> un agent
Un espace de travail -> un agent
Un objet mur -> un agent
[email protected] IHM, L2I et L2MI
Exemple de développement : TROCprojet France Telecom – IIHM (clips, LIG)
• Définition du jeu
– Qui joue
– Contexte du jeu
– Règle du jeu
• Arbre de tâche
Analyse des besoins
Conception
Conception logicielle
Codage
Tests unitaires
Tests d’intégration
Tests utilisateur
Evaluation
ergonomique
Note : le cycle de vie d’une interface est ici représenté en V et
sans retour sur les étapes précédentes de manière
analytique…
[email protected] IHM, L2I et L2MI
TROC : analyse des besoins
[email protected] IHM, L2I et L2MI
Troc : spécifications exeternes
[email protected] IHM, L2I et L2MI
Troc : un exemple d’architecture
[email protected] IHM, L2I et L2MI
Troc : architecture pac (-amodeus)
[email protected] IHM, L2I et L2MI
Troc : architecture pac (-amodeus)
[email protected] IHM, L2I et L2MI
Troc : architecture après re-conception
[email protected] IHM, L2I et L2MI
La conception :les spécifications externes
(introduction)
Comment faire la maquette (1/2)
[email protected] IHM, L2I et L2MI
Services généraux
• Aide
– factuelle (qu’est-ce que c’est ?)
– Aide procédurale (comment faire pour ?)
[email protected] IHM, L2I et L2MI
Services généraux
• Aide
– factuelle (qu’est-ce que c’est ?)
– procédurale (comment faire pour ?)
– contextuelle
[email protected] IHM, L2I et L2MI
Services généraux
• Copier-coller
• Défaire-refaire– encourage l’exploration
– Si pas possible: prévenir l’utilisateur.
• Valeurs par défaut(performances)
– statiques mais ajustables
– dynamiques (dernière valeur utilisée)
• Personnalisation(préférences)
[email protected] IHM, L2I et L2MI
Services généraux
Retour d ’information (feedback)
Immédiat
Informatif
[email protected] IHM, L2I et L2MI
Services généraux
Retour d ’information (feedback)
Processus long
Honnêteté
Correction d ’erreur
[email protected] IHM, L2I et L2MI
Pour le reste…
• QOC : Question Option Critère [McLean]
– Aide à la prise de décision
Question
Option 1
Option 2
Option n
Critère 1
Critère 2
Critère m
[email protected] IHM, L2I et L2MI
Exemple : pour le loto
• Représentation de la grille
– Tableau à cocher
– Tableau de checkboxes
– 6 champs textes
– 6 menus déroulants
[email protected] IHM, L2I et L2MI
Meilleur représentation de la grille ?
Représentation de la grille
Cohérenceavec l’existant
Facilité de programmation
Accessibilité
Rapiditéde choix
[email protected] IHM, L2I et L2MI
Compatibilitécritères ergonomiques (1/7)
• Respect (intégration et cohérence) du contexte d’utilisation (environnement de l’utilisateur)
– Langage utilisateur
• Vocabulaire
• Libellé unique
– Respect de l’activité
• Pas de surcharge cognitive
• Accès "direct" aux commandes
[Bastien & Scapin]
[email protected] IHM, L2I et L2MI
Guidagecritères ergonomiques (2/7)
• Assister l’utilisateur dans l’utilisation de l’IHM– Incitation
• Griser les commandes non disponibles
• Fournir une liste des éléments disponibles
• Donner le format de saisie
– Regroupement / distinction des informations
– Retour d’information (immédiat)
– Lisibilité• Police de caractère (4 max)
• Lettre sombre sur fond clair
• Phrase assez long (point de fixation)
[Bastien & Scapin]
[email protected] IHM, L2I et L2MI
Homogénéitécritères ergonomiques (3/7)
• Cohérence globale de l’IHM, logique d’utilisation
– Schéma d’agencement
– Sémantique d’interaction constante
– Vocabulaire
[Bastien & Scapin]
[email protected] IHM, L2I et L2MI
Flexibilitécritères ergonomiques (4/7)
• Capacité de l’IHM à s’adapter
– Multi-modalité
– Personnalisation
– Raccourcit
[Bastien & Scapin]
[email protected] IHM, L2I et L2MI
Contrôle (par l’) Utilisateurcritères ergonomiques (5/7)
• Maîtrise de l’IHM par l’utilisateur
– Validation des commandes importantes ou irréversibles
– Interruption des processus longs
– Retour en arrière
[Bastien & Scapin]
[email protected] IHM, L2I et L2MI
Traitement des erreurscritères ergonomiques (6/7)
• Objectifs : minimiser les interruptions• Trois types d’erreurs
– Erreur de perception (mise en évidence, ressemblance)– Erreur de raisonnement (transition – cohérence, mémoire :
reconnaître plutôt que se souvenir)– Erreur d’action (loi de Fitz, Erreur de touche / de sélection, allers-
retours clavier-souris)
• Prévention (guidage, contrôle utilisateur)• Correction
– Signaler le plus tôt possible– Retour en arrière, interruption– Message explicatif et correctif– Aide en ligne disponible
[Bastien & Scapin]
[email protected] IHM, L2I et L2MI
Concisioncritères ergonomiques (7/7)
• Capacité de l’IHM à réduire les efforts perceptifs, mémoriels et cognitifs des utilisateurs
– Ne pas surcharger d’information
– Limiter le nombre d’action• Minimiser les saisies
• Eviter les textes trop verbeux
• Ne pas demander à l’utilisateur ce qu’il voudrait que l’IHM fasse
• Limiter la mémorisation d’informations d’une fenêtre (étape) à une autre
[Bastien & Scapin]
[email protected] IHM, L2I et L2MI
Perception de l’écran
• Découverte en "Z"
• Regroupement en zone1. Très visible, peu accessible
2. Très visible
3. Peu accessible
4. Très accessible
5. La plus visible et accessible
6. Très accessible
7. Peu accessible
8. Peu visible, peu accessible
9. Peu accessible
1 2 3
654
7 8 9
[email protected] IHM, L2I et L2MI
Organisation de la fenêtre
• Classement par ordre d’importance par ordre de lecture
Commandes
Message à lecture optionnelle
Outils ZONE DE TRAVAIL
[email protected] IHM, L2I et L2MI
Utilisation des couleurs
• Perception centrée sur le jaune-vert
– bleu (périphérique) pour encadrer
– bleu saturé à éviter pour du texte et petits objets
– Couleurs saturées (claires) pour les fonds
• Codage d’un état
– Utilisation de 7 (+/- 2) couleurs maximum
– Utilisation avec une autre mise en valeur
– Respecter l’interprétation culturelle
[email protected] IHM, L2I et L2MI
Icônes
• Utilisation pour des commandes fréquentes
• Utilisation conjointe à un libellé
• Limitation du nombre (12 au mieux, 20 max)
• Construction à différents niveaux d’abstraction– Ressemblance (bouton stop des premiers navigateurs)
– Descriptif (bouton de justification des éditeurs)
– Exemple (bouton souligner S)
– Caricatural (bouton d’impression)
– Analogie (couper = ciseaux, sauver = disquette)
– Symbolique (image abstraite : logo de sport)
– Arbitraire (bouton "actualiser" des navigateur)
[J.F. Nogier]
Difficulté d’interprétation
[email protected] IHM, L2I et L2MI
Mise en évidence
• Efficacité implique exception
• Durée déterminée par le besoin de mise en évidence
• Perception visuelle (ICS)– Inversion vidéo
– Police de caractère, structure du texte
– Taille
• Respect de la perception de la l’état de l’objet (ne pas induire de fausse idée)
• Clignotement, animation, son– À utiliser avec parcimonie
– Offrir la possibilité de l’arrêter
[J.F. Nogier]
[email protected] IHM, L2I et L2MI
Message
• Affirmatif
• Forme Active
• Constructif (non critique)
• Sans impasse
• Respecter l’ordre des actions– Cliquez sur continuer après avoir insérer le cd
• Sans ambiguïté
• Cohérent avec le reste de l’IHM
[email protected] IHM, L2I et L2MI
Hall of Shame
http://homepage.mac.com/bradster/iarchitect/shame.htm
[email protected] IHM, L2I et L2MI
Hall of Shame
Système d’onglets dans onglets pas
très clair
Hilite = homophones en
néerlandais…Pb d’îcones…
Replace doit-il être dans « Search » ?
[email protected] IHM, L2I et L2MI
Hall of Shame
[email protected] IHM, L2I et L2MI
Hall of Shame