Universit Abdelmalek Essadi cole Normale Suprieure Ttouan Dpartement dInformatique et de Gestion

Filire : Master IPM

Module IHM
5 Ergonomie: Styles dinteraction
M. AAMMOU Souhaib

Plan

Modes dinteraction Styles dinteraction

Mtaphores WYSIWYG Navigation hypermdia Manipulation directe Look & Feel WIMP Windows Icon Menu pointer

Dfinition

Un mode est un tat de linterface dans lequel les actions de lutilisateur sont interprtes par le systme de manire homogne et diffrente des autres modes. 2 types de modes : spatiaux et temporels

Dfinition

Micro-modes:
Mode temporel li une action physique

continue de lutilisateur, exemple : drag

Privilgier mode spatial et micro-mode car plus simples mmoriser Si possible syntaxe objet-action que action-objet

Mais difficile pour cration

Dialogue Objet-Action

Donne le contrle lutilisateur sans lobliger maitriser un langage de commande. Dialogue = suite de transactions 1 transaction =
Slection dun objet par pointage

Mise en uvre dune action sur lobjet

Avantages
Focalisation de lusager sur les objets visibles en

permanence Peu de mmorisation ncessaire, derreur de dnomination Limitation du choix des actions en fonction du contexte (objet slectionn)

Interfaces vnementielle / objets

Mtaphore Look & Feel WIMP

Mtaphore : Dfinition
Transfert dune comprhension ou perception existante dans un nouveau contexte (objet, opration, rgles de manipulation) But: Accrotre lintuitivit et la convivialit Mtaphore fonctionnelle: lie la tche raliser

Exemple: tableurfeuille de calcul

Mtaphore oprationnelle: li aux oprations disponibles

Exemple: Windows bureau

Mtaphore organisationnelle : li au emplacement/ catgories des informations

Exemple : Annuaire entreprise 3D, cartes

Mtaphore: types

WYSIWYG: What You See Is What You Get

Visualisation concrte des rsultats des

actions Facile et efficace en apprentissage et utilisation

Navigation hypermdia Manipulation directe

Manipulation directe : Schneiderman 1983

Lutilisateur a limpression dagir directement sur un monde qui sapparente un monde rel.

Manipulation directe : Schneiderman 1983

Principes
Reprsentation continue des objets Utilisation dactions physiques au lieu de

syntaxe complexe Oprations rapides, incrmentales et rversibles, dont les effets sur les objets sont visibles immdiatement: feedback Apprentissage progressif

Ncessit localisation

dun

priphrique

de

Look & Feel

Look = prsentation = niveau lexical

Objets de prsentation : fentres Objet de dialogue ou Interacteurs : menu, boite

de saisie, boutons,

Feel=comportement = dialogue = niveau syntaxique

Interaction : souris, clavier, Transaction: Suite dinteractions

Association Look & Feel = cohrence = niveau smantique

Signification des commandes

WIMP :Windows, Icons, Menus, Pointer

Base sur:
Mtaphore du bureau Icnes Fentres 2D ou 2D Menus droulant ou pop up Botes de dialogue

WYSIWYG
Dialogue objet-Action

Plan
FENTRES / WIDGETS ICONES MENUS POINTEUR

FENTRES / WIDGETS

Une fentre est gnralement un objet passif: widget Recommandations ergonomiques sur les widgets
Principes gnraux : design gnral, comportement

dynamique Rgles spcifiques ouverture/fermeture

maintien

du

feedback,

Maintien du feedback
Toujours conserver le couplage perception/action que

permet le paradigme de manipulation directe

pointage / slection dplacement / modification / trac ouverture / fermeture

FENTRES / WIDGETS

FENETRES : OUVERTURE
Ouverture dune fentre Quelle taille? Quelle position? Une stratgie viter Paramtres douverture invariables Deux stratgies acceptables Centre sur les prfrences utilisateur: ouverture la position et suivant la taille lors de la dernire fermeture Centre focus: ouverture proximit du focus dattention (par exemple licne quon vient de cliquer) mais suffisamment distance pour ne pas masquer ce focus

FENTRES : OUVERTURE / FERMETURE

Ouverture dune fentre

conservation du focus dattention

Fermeture dune fentre

La fermeture sans feedback (pas danimation) peut-tre

perturbante.

MULTI-FENTRAGE

Intrt: environnement multitches

Une tche peut ncessiter plusieurs applications Gestion transparente du multitche comparer avec les

commandes Unix bg / fg

Problme principal : masquage de linformation

Perte de contexte Temps daccs la fentre masque

Diffrentes stratgies de gestion du multi-fentrage

Mosaques de fentres (tuilage)
Fentres alternes Fentres chevauchantes (recouvrement) Fentres zoomables

MULTI-FENTRAGE : STRATEGIES

Mosaque de fentres (tuilage)

Fentres toujours visibles Redimensionnement ou ouverture de nouvelles

fentres : effets de bords indsirables

MULTI-FENTRAGE : STRATEGIES

Fentres chevauchantes
Organisation flexible sous le contrle de lusager Fentres masques totalement ou en partie

Barre des tches : rappel du contexte

Fentres alternes (flipping windows)

changement sous le contrle de lusager commande clavier : pas de manipulation directe : temps

daccs proportionnel au nombre de fentres

MULTI-FENTRAGE : STRATEGIES

Fentres zoomables
Bon compromis temps daccs / masquage Adapt aux affichages nombreux : SIG Variabilit du contexte

MULTI-FENTRAGE : RECOMMANDATIONS

Stratgies dorganisation
Autoriser les recouvrements ou basculement de fentres

pour les utilisateurs expriments Utiliser le tuilage pour les utilisateurs occasionnels Exemple : encyclopdies grand public

Stratgies de dcoupage en fentres

Organiser le dcoupage en fonction de la tche :

regroupement cohrent des informations Limiter la quantit dinformation mmoriser dune fentre lautre Adapter le nombre de fentres lutilisation : augmenter le nombre de fentres pour une utilisation peu frquente, fentres complexes limites aux usages trs frquents

ICONES

Intrt
rapidement identifiables compacts : peu de place dans linterface

Problme : affordance
L'affordance est la capacit dun objet suggrer sa

propre utilisation. Le terme est utilis dans diffrent champs, notamment la psychologie cognitive, la psychologie de la perception, le design, l'interaction homme-machine et l'intelligence artificielle. Laffordance exprime la capacit quont les symboles reprsenter les fonctions quils dsignent, autrement dit, facilit quaura lutilisateur les manipuler laide dun dispositif de pointage [Norman] Icnes : affordance non triviale [Norman, Camacho 90]

ICONES : CONSTRUCTION

Mthodologie
Identifier toutes les commandes icnifier et les crer en

mme temps Limiter les icnes aux commandes frquentes Toujours valider la conception par une exprimentation

Rgles de construction
Difficult dinterprtation

ICONES : GUIDELINES

Quelques recommandations perceptuelles

Nombre limit dicnes sur linterface (dgradation partir de 12) Sassurer que le caractre slectionn dun icne est bien visible

Favoriser lidentification des icnes

Sassurer que les icnes sont bien distinguables les uns des

autres Grouper les icnes par famille Cohrence des reprsentations dans un groupe donn

Privilgier une association icnes / texte

MENUS

Quest-ce quun menu

Dfinition gnrale Zone o on prcise ses choix pour

orienter linteraction

Intrt
Structurer les fonctionnalits du systme suivant une

organisation logique cohrente comprhensible et mmorisable Importance de lanalyse de la tche

donc

aisment

Limitation
Manque de rapidit : utile surtout aux utilisateurs novices

et occasionnels (prvoir des raccourcis pour les experts)

MENUS

Diffrents types ne se limitant pas au menus applicatifs classiques

MENUS

Diffrents types
Onglets, sliders et alphasliders, fisheye menu

MENUS

Concevoir un menu : les questions se poser

Quel type de menu choisir : dpend de la tche Quelle

organisation globale entre menus (modes dinteraction) Quelle organisation interne des menus : positionnement des items

Diffrentes structures dinteraction

Menu unique

pour

diffrents

modes

Linaire tche squentielle (exemple : installation logiciel) Arborescente Acyclique

MENUS LINEAIRES

Cas dutilisation
Tches squentielles Simplification dune tche en une succession de sous

tches

MENUS ACYCLIQUES

Ordre de parcours indiffrent

Sous tches indpendantes ou optionnelles Menus onglets, option

MENUS ARBORESCENTS

Exemple 1
MS Powerpoint : profondeur 3, largeur (facteur de

branchement) 6 20

MENUS ARBORESCENTS

Exemple 2
Menu Dmarrer Windows : largeur et profondeur variables

MENUS ARBORESCENTS

Quelle organisation largeur x profondeur ?

Kiger (1984) : 64 items

Vitesse

Wallace et al. (1987) : pb menus profonds

96 % derreurs supplmentaires 16 % de temps dexcution en plus

MENUS ARBORESCENTS

Loi de Landauer et Nachbar (1985)

Loi exprimentale: temps de parcours dun menu de N items rpartis sur D niveaux quilibrs (mme facteur de branchement b chaque noeud), soit D = logb(N) Exprience avec N= 4096, b = 2, 4, 8, 16 Loi gnrale T = D * (k1 + k2 * log (b))

Recommandations

Privilgier la largeur des menus leur profondeur Largeur maximale: 10 (novices) 20 (experts) items max par niveau Profondeur maximale : 3 voire 4 Largeur variable : on peut augmenter le facteur de branchement au premier (racine) et dernier (feuilles) niveau de larbre Toujours considrer la spcificit de la tche

COMBINAISONS DINTERACTION PAR MENU

Exemples (E-commerce)
Arborescent et linaire

MENUS : ORGANISATION DES ITEMS

Problme comment rpartir les actions ralisables en menus cohrents Recommandation : se baser sur la smantique de la tche (Schneidermann, Plaisant 2005) Alternative (?) : menus orients objectif de Microsoft Office 12 (2007)

Apprenabilit : menus intuitifs et familiers, car leur organisation rpond ce que lon veut faire Flexibilit : cela ne limite-t-il pas la complexit des actions ralisables : non adapt un expert ?

MENUS : ORDRE DE PRESENTATION DES ITEMS

Tri naturel pour les donnes squentielles

Dates, nombres, prix, pagination

Pas dordre naturel: ordonnancement statique

Ordre alphabtique des items

Frquentiel: Items les plus utiliss en premier

Fonctionnel: items les plus importants en premier

Pas dordre naturel: ordonnancement

dynamique
Derniers items utiliss en premier Frquentiel adaptatif

ORDRE DE PRESENTATION : EXPERIMENTATIONS

Card (1982): menu diteur de texte 18 items

Somberg et Picardi (1983): menu 5 items

temps de slection proportionnel la position de litem dans la liste temps de slection plus rapide pour un item familier

Mitchell et Schneiderman (1988): menu slection repas

Meilleures performances avec un menu statique vs. dynamique

MENUS : ORDRE DE PRESENTATION DES ITEMS

MENUS : ORDRE DE PRESENTATION DES ITEMS

Menus partags
Compromis des solutions prcdentes
3-4 items les plus frquents Derniers items slectionns

Menu statique fonctionnel pour la suite

Principe des efforts commensurables

Commandes destructrices (non annulables) en

fin de menu, avec sparation

MENUS : ORDRE DE PRESENTATION DES ITEMS

Cohrence positionnelle et menus contextuels

conserver les items non valides pour le contexte courant visibilit oprationnelle, guidage: rendu diffrent des

items valides

MENUS : SYNTHESE

Guidelines gnraux (Schneidermann, Plaisant 2005)

Se baser sur la smantique de la tche pour organiser les menus Grouper les menus dune manire cohrente Prfrer des menus larges aux menus profonds Utiliser des items comme noms pour les sous-menus Utiliser des noms ditems brefs (mots cls)

Autoriser les retours en arrire et tout autres raccourcis Autoriser les sauts au menu prcdent et au menu principal Ne pas oublier laide (online ou non) sur lutilisation des menus

POINTEUR : SOURIS

Affectation de commandes aux boutons

Cohrence : le rle des boutons souris doit tre constant Cohrence : intgrer les rles classiques de boutons Bouton gauche : slection Bouton droit : affichage menu contextuel Adaptation : tout le monde na pas une souris trois

boutons

Pas de commande invocable uniquement par la souris

Double clic
La commande associe un double clic doit tre

cohrente avec celle associe au simple clic sur le mme bouton Exemple: commande par dfaut du menu contextuel sur un double clic droit Aucune fonction ne doit pouvoir tre invocable que par double-clic