Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 ·...

[email protected] IHM, L2I et L2MI

[email protected]

Les images


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");


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.)


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


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]

Les processus

Utilisation des Thread

et accès synchronisé


Pourquoi des processus ?

• Pour être plus rapide

• Pour ne pas bloquer un processus (interface).


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)


Arrêter un processus

• Java recommande l’utilisation de boolean pour les processus « long »

public void run( ) {

// code

while( ! canceled) {

// code

}

// code

}


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");}

}


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( )


Les animations graphiques

• Un thread

• Durée finie ou infinie

• Appel à repaint

• Évolution du composant graphique

• Deux exemples

– Anim

– Balle


[email protected]

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


Objectifs

• Manipulation d’éléments de haut niveau

• Facilité d’évolution

• Quelques design patterns…


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.

http://java.sun.com/docs/books/tutorial/uiswing/components/border.html

http://java.sun.com/docs/books/tutorial/uiswing/components/border.html


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)

http://java.sun.com/docs/books/tutorial/uiswing/components/tabbedpane.html

http://java.sun.com/docs/books/tutorial/uiswing/components/tabbedpane.html


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)));


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>)


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]

Quelques objets swing

Tableaux de données (JTable)

Menu et Menu Contextuel (JMenu / JPopMenu)

Contenu Dynamique (CardLayout)

Choisir un Fichier (JFileChooser)


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


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);


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


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));


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));


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());

}


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

http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html


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

}

}

http://java.sun.com/docs/books/tutorial/uiswing/components/filechooser.html


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" ;

}


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.




[email protected]

Architecture Logicielle des IHM

Principes de basesModèle MVCModèle PAC

Avec des transparents repris des cours de l’équipe IIHM du LIG


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é


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


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


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


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


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…


Les classes Observer / Observable

Observer

"Arthur"

Observer

"Martin"

Observer

"Fred"

S ’enregistre

S ’enregistreObservableObservable1. Arthur

Observable1. Arthur

2. Martin


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


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(…)


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(…)


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)


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


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)


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


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)


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)


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


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


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)


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);

}


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);

}

}


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.


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


R2 : Vue multiple

• Agent vue multiple d'une "œuvre"

• Un superagent garantit la cohérence visuelle


PAC et MVC : vue multiple

C

A

C

P

C

P

M

C V1

V2


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


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”


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




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.


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


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…


TROC : analyse des besoins


Troc : spécifications exeternes


Troc : un exemple d’architecture


Troc : architecture pac (-amodeus)


Troc : retour d’expérience, reconception

68


Troc : architecture après re-conception


[email protected]

La conception :les spécifications externes

(introduction)

Comment faire la maquette (1/2)


Services généraux

• Aide

– factuelle (qu’est-ce que c’est ?)


Services généraux

• Aide


– Aide procédurale (comment faire pour ?)


Services généraux

• Aide


– procédurale (comment faire pour ?)

– contextuelle


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)


Services généraux

Retour d ’information (feedback)

Immédiat

Informatif


Services généraux

Retour d ’information (feedback)

Processus long

Honnêteté

Correction d ’erreur


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


Exemple : pour le loto

• Représentation de la grille

– Tableau à cocher

– Tableau de checkboxes

– 6 champs textes

– 6 menus déroulants


Meilleur représentation de la grille ?

Représentation de la grille

Cohérenceavec l’existant

Facilité de programmation

Accessibilité

Rapiditéde choix


[email protected]

Outils pour la conception

Guides Ergonomiques


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]


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]


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]


Flexibilitécritères ergonomiques (4/7)

• Capacité de l’IHM à s’adapter

– Multi-modalité

– Personnalisation

– Raccourcit

[Bastien & Scapin]


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]


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]


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]


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


Organisation de la fenêtre

• Classement par ordre d’importance par ordre de lecture

Commandes

Message à lecture optionnelle

Outils ZONE DE TRAVAIL


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


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


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]


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


Illusion d’optique

• http://ophtasurf.free.fr/


[email protected]

Hall of Shame

http://homepage.mac.com/bradster/iarchitect/shame.htm


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 » ?


Hall of Shame

Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 ·...

Documents

Transcript of Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 ·...