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

1Philippe.Renevier@unice.froption IHM, L2I et L2MI

Philippe.Renevier@unice.fr

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)

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

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

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.

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)

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…

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

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

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;

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

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

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

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

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"

Movable Object

Static Object

Anchor x (m):

Anchor y (m):

Mouse x (m): 12

Mouse y (m): 15

Length (m):

Environment Zone Region Preferences

Movable Object

Static Object

Anchor x (m):

Anchor y (m):

Mouse x (m): 12

Mouse y (m): 15

Length (m):

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

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

Troc : architecture après re-conception

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

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

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/

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

1 IHM M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr 2010-11-Accueil.htm 1-Conception centrée.

Ergonomie des IHM Module IHM, EPU-SI Alain GIBOIN (INRIA) Évaluation coopérative Méthode adaptée aux étudiants du « Module IHM » 2006-2007 .

Plasticité des Interfaces Homme-Machine Ingénierie Dirigée par …€¦ · Plasticité des IHMs Modèle de tâches IHM abstraite IHM concrète ττττ ττττ ττττ IHM finale

Cours 2 : conception d'une ihm

Architecture Logicielle des IHM - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/pdf/cours3-archi-php.pdf · Philippe.Renevier@unice.fr Architecture Logicielle des IHM Principes de

Construction des IHM

Les IHM sous NetBeans - delfaud.fr · Les IHM sous NetBeans Objectifs Netbeans est l'environnement de programmation Java qui permet, entre autre, de programmer des IHM (Interface

ISN, 2017 - IHM

Sous lencadrement : Catherine RECANATI HENCHIR Mohamed Ali EID – IHM IHM 2011-2012 Traitement automatique de langage (TAL)

Partie 3 Les éléments d’une IHM

IHM Pro Aide au diagnostic et à la remise en cycle IHM PRO 10-2003 - 1 Interface Homme Machine IHM Pro Îlot IHM Pro : Pour laide au dépannage et à la remise.

Cours Adaptation des IHM

IHM - A215

Interfaces utilisateurs pour Linux embarqué (Embedded IHM)pficheux.free.fr/articles/lmf/embedded_ihm/embedded_ihm_img_final… · (Embedded IHM) Pierre Ficheux (pierre.ficheux@openwide.fr)

IHM et plasticité ou Adaptation des IHMs IHM et Différents supports Différents utilisateurs Différents environnements Problématique - aperçu des solutions.

Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Directives (Guidelines)

Cours 2 conception d'une ihm

API08 : Evaluation ergonomique d’une IHM

Ergonomie des IHM Module IHM, ESSI Alain GIBOIN (INRIA) Évaluation coopérative.

IHM au sein d’un ERP