Human Computer Interaction

PLAN

Les lments dune IHM principes de base

les types dinteraction

les composants de linterface graphique

les tches de linteraction graphique

aide et gestion des erreurs

Plan du cours

SJD

-L

IRIS

-U

CB

L : I

HM

-L

3 info

2

IHM : introduction conception lments des IHM progr. vnementielle web handicap valuation

Mmoire long terme

o Mmoire long terme

capacit infinie

dure de stockage illimite

accs associatif

o Consquence

favoriser lapprentissage par rptition

logiciel utilisation frquente logiciel utilisation par intermittence

3SJD - LIRIS - UCBL : IHM - L3 info

?


Mmoire court terme

o Mmoire court terme

mmorisation 7 items ( 2 selon individu, fatigue...)

regroupement des mnmes (unit dinformation) par motifs visuels ou acoustiques

motifs visuels : lettres, chiffres, mots, formes, taille, couleur, localisation

recherche squentielle

oubli : 15 30 secondes

o Consquences

limiter les items de menus 7

tablir des liens entre lments (couleurs, format, emplacements)

utiliser des messages concis

ne pas prsenter dinformations inutiles


?


Quelques principes

o 2 secondes

ne pas attendre plus de 2 secondes les rponses du systme

o 3 clics

accder linformation souhaite en 3 clics

o Loi de Fitts

le temps pour atteindre une cible dpend de la distance et de sa taille

o Syndrome de loisillon les utilisateurs ont tendance rejeter les systmes non familiers

problme pour lvolution des logiciels, les innovations

o Conception intuitive

interface utilisable ds la premire fois, sans formation



Lisibilit des couleurs

o Privilgier un bon contraste caractres/fond

caractres sombres sur fond clair

de prfrence caractres noirs sur fond blanc

o viter certaines combinaisons de couleurs

o Limiter le nombre de couleurs (7 maximum)

o Attention la portabilit des couleurs

selon les crans (penser au nombre de couleurs des crans)

selon les personnes : choisir des couleurs faciles distinguer

daltonisme : 8-10% des hommes, 0,5% des femmes


test test

test test


Signification des couleurs

o Respecter les habitudes culturelles

en occident : rouge = stop / vert = go

en chine : rouge = joie, mariage

o Utiliser les couleurs pour signifier quelque chose

mme type dinformation mme couleur

types dinformation diffrents couleurs contrastes

types dinformation similaires couleurs peu contrastes



Lecture lcran

Commandes

Zone de

slectionZone de travail

Zone de messages annexes


o 1re visualisation de lcran : parcours en Z

o Ensuite : parcours slectif

o Meilleure visibilit et accessibilit au centre de lcran


Affichage de texte

o Typographie

sur cran polices sans srif plus lisibles lcran

(Arial, Helvetica, Geneva)

gras, italique, soulign ralentissent la lecture

MAJUSCULES moins lisibles que minuscules


L'interface Homme-machine tudie la

faon dont les humains interagissent

avec les ordinateurs ou entre eux

l'aide d'ordinateurs, ainsi que la faon

de concevoir des systmes

informatiques qui soient

ergonomiques, c'est--dire efficaces,

faciles utiliser ou plus gnralement

adapts leur contexte d'utilisation.






informatiques qui soient ergonomiques,

c'est--dire efficaces, faciles utiliser

ou plus gnralement adapts leur

contexte d'utilisation.

L'interface Homme-machine tudie

la faon dont les humains

interagissent avec les ordinateurs

ou entre eux l'aide d'ordinateurs,

ainsi que la faon de concevoir des

systmes informatiques qui soient

ergonomiques, c'est--dire

efficaces, faciles utiliser ou plus

gnralement adapts leur

contexte d'utilisation.




























L'INTERFACE HOMME-MACHINE

TUDIE LA FAON DONT LES

HUMAINS INTERAGISSENT AVEC

LES ORDINATEURS OU ENTRE

EUX L'AIDE D'ORDINATEURS,

AINSI QUE LA FAON DE

CONCEVOIR DES SYSTMES

INFORMATIQUES QUI SOIENT

ERGONOMIQUES, C'EST--DIRE

EFFICACES, FACILES UTILISER


Langage employ

o Utiliser le langage de lutilisateur

o viter les abrviations

o Produire des messages

concis

homognes

o Utiliser

la voix active

une forme affirmative

o viter les impasses

o Respecter lordredes actions



Recommandations


o Mettre en vidence les lments importants

o Regrouper les commandes en fonction

de leur signification

de lobjet auquel elles se rapportent

PLAN

Plan du cours

SJD

-L

IRIS

-U

CB

L : I

HM

-L

3 info

12






?


Les types dinteraction

o Quel type dinteraction pour quelle commande ? langage naturel

langage de commande

menus

formulaires

requtes

manipulation directe



Langage naturel

o Dialoguer en langage naturel (rel ou via le clavier)

en thorie, le moyen le plus attractif de communiquer

en pratique, trs peu utilis (surtout pour commandes de complexit

restreinte)

o Raisons techniques

difficults de lanalyse du langage naturel

problme des ambiguts, des rfrences, des sous-dialogues

difficults de reconnaissance vocale

o Raisons fonctionnelles

difficult dutilisation du clavier erreurs

lenteur dutilisation



Langage de commande (1)

o Principe crire une ligne de commandes (avec syntaxe et vocabulaire)

accs direct aux fonctionnalits du systme pour les experts

mais pas utilisable par des novices

o Exemples : Dos, Unix delete *.*

copy A:*.doc c:

o Avantages concision (plus grande quen langage naturel)

structuration

possibilit dextensions (dfinition de macros, scripts)

o Inconvnients ncessite un apprentissage et une pratique rgulire



Langage de commande (2)

o Syntaxe

cohrence dans lordre des arguments

mme si lordre peut diffrer en langage naturel

formes syntaxiques varies : remplace A par B, substitue B par A

Action Objet Destination

o Vocabulaire

mots courts

faciles taper (proximit des touches sur le clavier)

spcifiques plutt que gnraux

de prfrence prononables

cohrence

pour lensemble des commandes (haut / bas, et non monter / bas)

pour les abrviations (MKDIR make directory, CD change directory)



Menus (1)

o Slectionner un item dans un menu

liste de commandes dclenches par un clic

mise en vidence de loption choisie

hirarchies possibles

o Graphisme des commandes

normal activable

gris non activable : ex. copier sans slection

mais pas effac

possibilit de personnaliser les menus (experts)

o Ordre des items de menus

alatoire (!)

alphabtique : termes prcis (nom dune ville)

par catgories, spares par un trait (couper / copier / coller)17

SJD - LIRIS - UCBL : IHM - L3 info


Menus (2)

o Nombre darguments de la commande aucun (Quitter)

un (Rechercher)

plusieurs (Remplacer)

fentre de dialogue annonce par

exemple : imprimer

o Ordre des arguments

commande puis arguments

remplacer

arguments puis commande

copier



Formulaires et requtes

o Formulaires : rpondre des questions

pour entrer des informations nombreuses

mcanisme simple mais fonctionnalits limites

questions fermes

(oui/non, choix multiples, listes)

questions ouvertes

champs remplir

o Requtes : poser des questions

langages de requtes

plus complexe

utilis en base de donnes


Donner le titre et lauteur des livres dont le titre commence par L : SELECT titre, auteur from LIVRES where titre LIKE L*;


Manipulation directe (1)

o Reprsentation permanente lcran des objets

des actions possibles

o Actions physiques sur les objets pointer et cliquer

illusion de travailler directement sur les objets ( transmettre une commande)

o Oprations rapides et rversibles

avec effet visible immdiatement

o Principe objet/action l'utilisateur dsigne le ou les objets quil veut manipuler

puis les actions les unes la suite des autres

exemple : slection de texte, puis centrer italique changer la casse



Manipulation directe (2)

o Avantages

plus fort engagement de lutilisateur

impression dagir sur lenvironnement

plus faible distance

entre la conception du monde

et la faon dont il est reprsent linterface

o Inconvnients

manque dabstraction

difficult de reprsenter des oprations abstraites

encombrement de lcran (tous les objets)

ambigut du sens des icnes

juge moins rapide par les experts

problme du choix de la mtaphore


PLAN

Plan du cours

SJD

-L

IRIS

-U

CB

L : I

HM

-L

3 info

22






?


Guidelines

o Guides de style rfrences dont il faut tenir compte pour concevoir des interfaces

dfinissent laspect des interfaces

mais ne contiennent pas de recommandations ergonomiques

gnriques / spcifiques au systme dexploitation, sa version



WIMPS - Windows, Icons, Menus, Pointers

o Fentres : vocabulaire


barre de titrebarre de menu

barres doutils

barre dtat



o Multifentrage

sans superposition : mosaque

avec superposition

problmes

informations masques

temps daccs la fentre masque

hirarchique

fentre dapplication avec fentres filles




o Fentres dapplications MDI

Multiple Document Interface

fentre principale

espace de travail

fentres filles

contiennent les documents


o Fentres de documents

la mtaphore du document

remplace celle de lapplication

fentre activefentre inactive



o Fentres utilitaires

palette doptions

fentres jaillissantes (pop-up)

infobulle, bulle daide, aide contextuelle




o Fentres de dialogue (1)

fentre permettant linteraction entre le systme et lutilisateur

dcouplage temporel et spatial entre la spcification de la commande

(paramtres) et son excution

fentres modales

on doit fermer le dialogue pour retourner la fentre principale

obligatoire quand la commande en cours ne peut tre suspendue

fentre dplaable pour laisser lutilisateur voir la tche amont

fentres non modales

on peut passer de la fentre de dialogue la fentre principale

lutilisateur peut abandonner temporairement la tche en cours




o Fentres de dialogue (2)

rgles

regroupements > succession de dialogues

nommer les groupes

fentres modales

(sauf pour les dialogues de recherche)

pas plus de 5 boutons

contient toujours au moins les boutons OK, Annuler (+ Aide)

boutons concernant l'ensemble des onglets : l'extrieur des onglets

contrles et erreurs

filtres de saisie et contrles de format en quittant le dialogue

si une erreur est dtecte : affichage dun message d'erreur et positionnement du curseur sur la saisie mise en cause

Annuler : aucune entre faite sur le dialogue ne doit tre prise en compte




o Icnes : graphisme associ une signification linterface fentres "iconises"

reprsentations mtaphoriques

des objets

corbeille, disques

programmes

fichiers, dossiers

des actions

enregistrer tracer une droite

problmes

comprhension de la reprsentation

prennit

solutions

tester les reprsentations

bulles daide, icnes + texte

faire voluer les reprsentations30




o Utilisation des icnes pour des commandes frquentes

avec un libell

limiter leur nombre (12 au mieux, 20 max)

o Construction des icnes diffrents niveaux dabstraction ressemblance (bouton stop, corbeille)

descriptif (texte justifi)

exemple (souligner)

caricatural (impression)

analogie (couper = ciseaux, sauver = disquette)

symbolique (image abstraite : organiser)

arbitraire (actualisation des navigateurs)


Diff

icul

t d

inte

rpr

tatio

n



o Menus droulants

ensemble ditems souvrant en cliquant sur le libell de la barre de menus

contextuels (pop-up) ensemble ditems accessibles hors de la

barre de menu, l o se trouve la souris

hirarchiques proposer des options complmentaires

indiqus par un triangle dans un item de menu

dtachables (tear-off menu) menu contenant gnralement une palette

qui se transforme en fentre utilitaire

circulaires prsentation originale et conomique

o Raccourcis : Alt + caractre soulign32




o Rgles pour les menus entre 2 et 7 items

libell en un seul mot

possibilit de sous-menus (1 seul niveau)

o Rgles pour les items de menu gris si l'action est indisponible

marquer les items de menu des proprits ou modes actifs

actif / non actif

slection de la proprit active parmi plusieurs

items de mme nature regroups et spars par un trait horizontal

items de menus qui conduisent un dialogue suivis de

libell possible en plusieurs mots (max 4)

groupement par frquence dusage, ordre alphabtique, dutilisation33




o Dispositifs de pointage (souris, trackball, joysticks)

o Curseurs

curseur diffrent action diffrente

positionnement

positionnement dans un texte

attente

lien hypertexte

dplacement

redimensionnement



Boutons (1)

o Mtaphore

reprsentent les boutons que lon manipule sur les objets rels (TV, hi-fi)

o Bouton daction effet 3D et 4 tats

relch

relch avec focus

enfonc

inactif

si un bouton ouvre un dialogue, intitul suivi de

raccourcis : Alt + caractre soulign

o Boutons graphiques d'une barre d'outils



Boutons (2)

o Bouton radio

pour faire un choix parmi des alternatives exclusives

cocher un bouton enlve le choix antrieur

possibilit de bouton radio graphique

(choix dune couleur)

o Case cocher

pour slectionner des options non exclusives dans une liste

chaque case est une bascule

2 tats : coch / non coch

3 tats : coch / non coch / gris



Listes

o Liste

contenu affich en permanence (mais barre de dfilement)

slection simple

slection multiple (cf. case cocher)

pour visualiser entre 3 et 8 lments

o Liste droulante

pour obtenir la liste cliquer sur le triangle droite

slection dun seul lment

non modifiable (slection simple)

modifiable (permet la saisie directe)

si la zone est facultative

doit contenir en premier litem "Aucun"

o Liste de choix hirarchique

pour visualiser et naviguer dans une arborescence



Zones de regroupement

o Botes de regroupement

pour regrouper des cases cocher,

des boutons radio, des lments divers

o Barre de sparation

o Classeur onglets

pour regrouper dans une mme fentre

des affichages rpartis sur plusieurs pages



Autres composants

o Zones de saisie

texte sur une seule ligne

si un type prcis est attendu, le systme doit contrler la saisie

le curseur change de forme

texte multi-lignes

o Molette dincrment pour remplacer la saisie

o Curseur

pour slectionner une valeur peu prcise

o Indicateur de progression

pour reprsenter graphiquement un taux davancement

% du temps, pas du nombre dactions !



Retour dinformation (feedback)

o Menu ligne slectionne

o Saisie de texte curseur

o Attente changement de curseur

o Slection dun objet poignes

o Slection de texte inversion vido

o Autres possibilits changement de couleur, de police, clignotement, animation, son

avec parcimonie, permettre darrter


PLAN

Plan du cours

SJD

-L

IRIS

-U

CB

L : I

HM

-L

3 info

41







Les tches de linteraction graphique

o Quels composants graphiques pour quelle tche ?

saisie

slection

dclenchement

dfilement

spcification dargumentset de proprits

transformation



Tche de saisie

o Saisie de texte

bote de saisie + clavier

o Saisie de quantits

curseur ou molette + souris

o Saisie de positions

pointage

o Saisie de tracs

souris



Tche de slection

o Choix dun lment dans un ensemble boutons radio

liste droulante

o Choix de plusieurs lments dans un ensemble cardinal fixe

case cocher

liste slection multiple

cardinal variable

liste droulante modifiable

liste slection multiple + saisie dlments supplmentaires

o Slection multiple par groupe (ctrl) ou par intervalle (shift)

par ajout/retrait



Tche de dclenchement

o Boutons

o Menus

o Glisser - dposer

glisser - lcher, glisser - dplacer, drag and drop

cliquer sur un objet graphique et maintenir le bouton enfonc

dplacer la souris

lcher le bouton une fois arriv destination

laction dpend de la source et de la destination

exemple : glisser - dposer un fichier

sous Windows sur un mme disque : dplacement

sous Windows sur des disques diffrents : copie



Tche de dfilement

o Barre de dfilement (ascenseur)

dfilement direct

1 seule unit dinformation

1 page cran

en % du document

dfilement automatique

lorsque la commande effectue

engendre une modification de la

quantit dinformation, un dplacement du curseur



Tche de spcification darguments et de proprits

o Botes de dialogue


o Botes de proprits

aperu des modifications sur les

objets concerns


Tche de transformation

o Poignes de manipulation

laisser la possibilit de redimensionner

fentres

dessins

images

redimensionnement

suivant un axe

horizontal

vertical

suivant les deux axes la fois

proportionnellement

ou non


PLAN

Plan du cours

SJD

-L

IRIS

-U

CB

L : I

HM

-L

3 info

49







o Types daide contextuelle : que puis-je faire ?

factuelle : quest-ce que cest ?

procdurale : comment faire ?

o Moyens

documentation

aide en ligne

bulles daide

Aide



Gestion des erreurs : prvention

o Empcher les erreurs

annoncer les commandes irrversibles

inactiver les commandes indisponibles

contrler les saisies



Gestion des erreurs : correction

o Permettre la correction des erreurs

signaler lerreur au plus tt

placer le message dans la zone concerne /

marquer la zone concerne

saisie facilement modifiable

permettre le retour arrire

autoriser les interruptions pour les commandes longues


PLAN

Plan du cours

SJD

-L

IRIS

-U

CB

L:

IHM

-L

3 info

53






Human Computer Interaction

Documents

Transcript of Human Computer Interaction