IFT2905 – Interface personne machine

(1)

IFT2905 – Interface personne machine

Cours 1, mardi 9 janvier 2007

Pour le prototypage, on utlisera surtout TclTk. (Python serait pas mal aussi) Donc: papier  script  Java

Cours 2, jeudi 11 janvier 2007

Chapître 2: Conception centrée sur l'usager

En utilisant le développement itératif, on arrive à éviter d'immenses boucles causées par le développement de l'interface. (Prototypage)

Cours 3, mardi 16 janvier 2007

Les TABS: une seule ligne (jamais plus!)

Cours 4, jeudi 18 janvier 2007

L'attention: la capacité de focusser sur un élément en particulier (en abstrayant les autres). [lampe de poche]

Loi de Hick-Hyman: Plus il y a de choix, plus le temps de réaction est long.

Notons que lg(1/Probabilité) représente la quantité d'information.

Contrôle ouvert versus fermé: Lever la main versus toucher un point du doigt.

Démo 1, jeudi 18 janvier 2007

http://wiki.tcl.tk http://wiki.tcl.tk/11485 http://wiki.tcl.tk/1019 http://wiki.tcl.tk/11483 http://wiki.tcl.tk/2244

tclsh

-

Variables (Typage dynamique) || affectation sans $, relecture avec $ set var 2

puts $var set var bo set var "bo jhdf"

set var2 $var // et non set var2 var - Fonction

set var [list a b] // en tcl, équivalent à set var {a b}

set var {$var2 allo} // ne fait pas ce à quoi on s'attendrait  set var "$var2 allo"

- Plus utile que «tclsh», plutôt se faire un appel dans un fichier à #!/usr/bin/tclsh - expr

set a [expr 2 + 3] // plutôt que set a 2 + 3

permet aussi les tests tertiaires du genre set a [b==0 ? 2+2 : 1+1]

- À noter:

o en encadrant avec des guillements, le contenu est interprété; avec des crochets, ne sera pas interprété.

o les accolades pour définir un bloc sont obligatoires dans les structures de contrôle

(2)

o

mettre des espaces partout! (sauf expr) exemple:

#!/usr/bin/tclsh

#Ceci est un commentaire

#$argc et $argv sont disponibles set my "d e a f"

set pr [lindex $my 1]

puts $pr

puts [lrange $my 1 end]

puts [lsort $my]

puts -nonewline [llength $my]

# Pour instancier un itérateur foreach {a} $my {

puts $a }

# Pour parcourir deux par deux!

foreach {a b} $my { puts "$a $b"

}

for {set i 0} {$i<10} {incr i} { if {$i != 0} {

puts $i } else {

} }

# while existe aussi dans le même type...

# Fonctions proc fact { n } { if {$n <= 2} { return $n } else {

return [expr $n * [fact [expr $n-1]]]

} }

puts [fact 5]

# Appels systèmes puts [exec ls -a]

# eval !!!

set cmd "ls -l"

eval exec $cmd

tcl/tk: #!/usr/bin/wish

% button .b .b% pack .b

% .b config -text "bonjour"

% .b config -fg green

% .b config -bg red

% .b config -activeforeground blue

% button .ok -text "OK?" -fg red -command { puts "OUCH!" } .ok% pack .ok

% OUCH!  après un clic

% .ok config -command valide

% proc valide {} { puts "bonjour!" }

% bonjour!  après un clic

% entry .e -textvariable nom .e

% pack .e

% .b config -command { puts $nom }

(3)

% asdf  ce qui était tapé dans la case

% pack .b -side left  relatif au dernier item placé...

% pack .b -pady 10 -padx 10

% scrollbar .sc -orient horizontal .sc

% pack .sc

% pack .sc -fill x

Cours 5, mardi 23 janvier 2007 Pas de rouge sur du bleu

Toujours arrangements automatiques

Cours 6, jeudi 25 janvier 2007 bindtags .e .e Entry . all bind .e (vide)

bind Entry (plein de trucs)

bind Entry <KeyPress> me donne le code associé à cet événement -- faire un trace sur la var voulu nous permet de voir directement ...

Chapître spécifique du livre Usability Engeneering

10 principes de Nielson à appliquer dans le TP 

Démo 2, jeudi 25 janvier 2007

«mini traitement de texte»

Voir «editeur.tcl»

Informations sur les tableaux associatifs:

% set a 12345 12345

% set b(56) allo allo

% puts $b(56) allo

% set b(test) blublub blublub

% puts $b

can't read "b": variable is array

% puts $b(tyu)

can't read "b(tyu)": no such element in array

% set ville(CAQC1234) "longueuil les bains"

longueuil les bains

% array names b

(4)

test 56

% array names ville CAQC1234

% foreach i [array names b] { puts "element $i est $b($i)" } element test est blublub

element 56 est allo

% array get b

test blublub 56 allo

% array set c [array get b]

% array names c test 56

% set b(CAQ1234:population) 65124 65124

% set b(CAQ1234:nom) "kjdfhgn"

kjdfhgn

% set code CAQ1234 CAQ1234

% puts $b($code:population) 65124

% puts $ville(CAQC1234) longueuil les bains

% set s "bonjour : test blub"

bonjour : test blub

% set s " bonjour : test blub "

bonjour : test blub

% split $s ":"

{ bonjour } { test blub }

% set z [split $s ":"]

{ bonjour } { test blub }

% llength $z 2

% string trim $s bonjour : test blub

% foreach i $z { puts ">>>[string trim $i]<<<" }

>>>bonjour<<<

>>>test blub<<<

% set q [exec ./meteo test]

couldn't execute "./meteo": no such file or directory

% catch {set q [exec ./meteo test]}

1

% catch {set q [exec ls]}

0

% puts $q Desktop ...

% set res [catch {set q [exec ./meteo test]}]

1

% if { $res } { puts "aie" } aie

% puts $dkfjh

can't read "dkfjh": no such variable

% info exists kjhf 0

% array exists b 1

% array exists k 0

% info exists b(CAQC1234) 0

Cours 7, mardi 30 janvier 2007 diapos

Cours 8, jeudi 1^er février 2007

(5)

prototypes papier

Cours 9, mardi 6 février 2007 annulé.

Cours 10, jeudi 8 février 2007 Trois niveaux de modèles de sortie:

 Composante

o Objet graphique o Label, Ligne o Widgets

 Dessin

o Primitives de haut niveau: lignes, courbes, text

o Exemples: logiciels de diagrammes, méthode drawLine() o Connu comme graphisme vectoriel ou structuré

 Pixels

o Array 2D de pixels

o Connu comme bitmap, image, raster.

Double buffer: Permet d'éviter le scintillement en travaillant dans le buffer non-affiché.

Cours 11, mardi 13 février 2007

Disposition des éléments: Bottom-up (demande aux composants les tailles voulues/préférées) puis Top-down (pour attribution des tailles précises)

Cours 12, mardi 20 février 2007 Intra:

Suggestion: voir les anciens examens du MIT.

Livre fermé.

pas de TCL pratique, juste théorique Révision:

Dimensions de l'utilisabilité pertinentes pour un système de pilotage d'avion:

(Tous les principes p.1.25) Erreurs et Efficacité

Quand est-ce que les usagers sont impliqués dans le modèle en cascade?

p.ucd.5-7

Besoin, réception, Mise en production Différence entre cascade et spirale?

Itératif et Raffinage Dimensions de l'utilisabilité?

Pas le coût Pas la sécurité

Dans un système de gestion de plaintes, des gens impriment les plaintes et notent à la main dessus... où est le problème?

? 10 règles de Nielson

? Analyse de tâches  Il manque «l'option».

? Analyse de l'usager

(6)

Si la barre de menu sur MAC (en haut) est meilleure que celle de Windows, pourquoi?

- Loi de la pratique?

- L'analyse de tâche

- Loi de Fitz 

Quelle est l'affirmation la moins susceptible d'être révélée par une analyse d'usager/tâche.

- Les fichiers sont rarement renommés (+usager) - Auto doit être lavée avant d'être cirée (+tâche)

- Interface pour jeu 3D qui rend malade (ni l'un ni l'autre)

[on n'a pas la possibilité de tester avant la fin, donc après les analyses]

- Certains usagers connaissent numéros de produits exacts qu'il recherchent (+usager) - La cuisine d'un resto est bruyante (+usager)

Suggérer une façon de tester la mémorabilité d'une interface 1- Guider une fois, attendre, demander si tjrs capable

2- Guider une fois, demander si se souvient comment il a fait (plus tard) Couleurs:

vert: manque un type de batonnets rouge-bleu: ...?

Aberrations chromatiques:

focusser le bleu affecte tout le monde daltonisme, 8% des hommes

etc.

Avantage du modèle spirale:

chq it coute moins cher ...

feedback tres tot moins risques

On a à faire un réveil-matin pour aveugles. Donner une raison pour utiliser cascade et une pour spirale Cascade: On sait déjà ce qu'on veut faire (on a déjà des références, on peut aller droit au but) Spirale: Pas vraiment déjà été testé (...)

3 principes important du user centered design Conception itérative

Focusser sur les usagers Évaluation continue

2 sortes d'usager différents pour une machine distributrice Commis pour remplir

Acheteur

Quelle est al loi de Fitz?

temps requis pour atteindre une cible, qui dépend de la distance et de la taille de l'objet.

Donner des exemples d'objets dont la capacité suggestive d'action perçue et le réelle diffèrent.

Chaise en carton

Objet démonstrateur en magasin N'importe quel screenshot MVC:

Modèle: Les données à visualiser Vue: Rendu grpahique

Controleur: Réactions de l'interface (demandes de changements aux données) [p.archi.7]

(7)

Si on clique dans D, les messages sont envoyés de bas en haut: D, C, A (B ne reçoit rien)

Le dessin des composants se fait en ordre inverse A, B, C, D

Si on déplace C, on va redessiner A et B en partie

rm ne répond pas à certaines critères d'une interface usager - rm ne permet pas de voir les résultats immédiatement - pas de undo

- pas de représentation continue La cohérence se fait à 3 niveaux

interne: ds le programme

externe: vs l'OS (copy/paste par exemple)

métaphorique respecte une analogie avec un objet de la «vraie vie»

Dimensions de l'utilisabilité qui sont affectés par l'usage d'une métaphore Mémorabilité / Facilité d'apprentissage

Pas vraiment vers de liens avec erreurs, etc.

Dans une interface vocale, différence avec interface graphique (pkoi problème?) Pas de représentation visuelle continue

Pas d'action physique pour manipuler Difficile de faire de la réversibilité

Les «Modes» invisibles sont mauvais, pourquoi? (Selon heuristiques de Nielson) Visibilité de l'état du système

Prévention des erreurs

Un danger important du prototype papier Ne fait pas tout / Pas toujours réalisable Un danger important du prototype sur ordi

Contiennent du code laid qui sera possiblement néanmoins quand même utilisé.

Je veux envoyer un email, mais j'ai oublié d'ajouter un fichier... quel type d'erreur?

description? (action similaire mais mauvaise)

captation? (séquence causée par habitude, début similaire)  mode?

Je choisis dans une liste, au lieu de cliquer retreive, je clique remove description!

Dans un traitement de txt, ctrl-p pour monter d'une ligne, mais imprimante qui apparaît mode!

Deux techniques générales pour éviter erreur de mode Éliminer les modes

Rendre le mode clairement lisible

Rendre les modes temporaires (on en sort obligatoirement) Actions disjointes d'un mode à l'autre (peu réaliste)

Cours 13, mardi 27 février 2007

Cours 14, jeudi 1^er mars 2007

(8)

Cours 15, mardi 13 mars 2007

TP2: 10 observations sur 3 pages différentes, pour lundi.

Cours 17, mardi 20 mars 2007 nil

Cours 18, mardi 27 mars 2007 nil

Cours 19, mardi 10 avril 2007 nil