résumé: 91 concepts hci 7 leçons cs211 10 autres cours · pdf filele...

Visual C puting Introduction to

Résumé:

91 concepts HCI 7 leçons CS211

10 autres cours VizComp

CS211 - P. Dillenbourg

1. Les styles d’interaction 1.  Languages de commandes 2.  WIMP 3.  Manipulation directe 4.  Formulaires 5.  Réalité virtuelle 6.  Tangibles 7.  Réalité augmentée 8.  Contrôle vocale 9.  Contrôle gestuel 10. Contrôle cérébral 11. Bionique 12. ‘Wearable’ 13. Ambiant

(1) Connaissances sémantiques liées à la tâche

(2) Connaissances sémantiques liées à la transposition informatique de la tâche

(3) Connaissances syntaxiques, arbitraires

•  Tables des matières•  Introduction•  Argument•  …

•  Style de paragraphe•  Espace inter-paragraphe•  …

•  L’option trier se trouve dans le menu « tableau »

•  Changer minuscule/majuscule s’appelle « changer la casse »

•  …

NOVICES

INTERMITTENTS

EXPERTS

✔

✔

✔

✔

✔ ✔

Certaines connaissances nécessitent une certaine fréquence d’utilisation

Interface naturelle, intuitive =

On a oublié qu’on l’a appris

h#p://www.ophtalmo.ulg.ac.be/resumefrthesevl.html

h#p://un-‐oeil-‐deux-‐yeux.com/la-‐vue/

130 millions 6.5 millions

Batonnets Cones

Niveau de gris Bleu, Vert, Rouge

Très sensibles à la lumière

Moins sensibles à la lumière

100 images/seconde 3-‐4 images/seconde

Dimensions de l’écran: longueur de la diagonale (per ex. 13 pouces) Définition de l’écran: nombre de pixels (par ex. 640 X 480 = VGA) Résolution: nombre de pixels par pouce carré (ppp ou dpi = dots per inch) iPhone 5: 326; ce mac 227

Profondeur du pixel: nombre de bits d’information par pixel (bpp) h#p://www.dpMps-‐central.com/image-‐resoluMon.html

L’oeil ou Le cerveau ?

Persistence réMnienne

Effet Beta

Perception de la profondeur (2) Indices Monoculaires

http://en.wikipedia.org/wiki/Parallax

Parralaxe: Lorsque je me déplace, les objets en avant-plan donnent l’impression d’un déplacement plus rapide que les objets en arrière-plan.

h#p://www.nature.com/news/the-‐split-‐brain-‐a-‐tale-‐of-‐two-‐halves-‐1.10213#/mind

Expérience du Split Brain

Stimuli subliminaux

Hypothèse (controversée): 1.  Si un stimulus (visuel) est inférieur au seuil de

perception (en taille, en durée, en longueur d’ondes – par exemple 0.04 secondes), il serait néanmoins perçu par notre inconscient

2.  Il aurait de ce fait une influence non-contrôlable sur notre comportement

Charge Cognitive

La capacité de notre

mémoire de travail (CPU)

est limitée à 7 ± 2 éléments

Comment la mesure-t-on ?

Novice

Expert

è Mémoire à long terme (plus tard)

•  Connaissance compilées

•  Large répertoir de cas typiques

•  Sélection le cas pertinent sur base de critères de fond (vs de surface)

Le “Split Attention Effect” augmente la charge mentale

Mémoire Sensorielle (< 1 s)

Mémoire à court terme (< 10 min)

Mémoire à long terme (illimitée)

Connaissances Déclaratives

Connaissances Procédurales

Mémoire Sémantique

Mémoire épisodique

Mémoire Sémantique

Modèles mentaux

h#p://www.direct-‐chaudiere.com/chauffage/regulaMon-‐domoMque.php h#p://losservatore-‐caledo.com/?p=1209 h#p://www.next51.net/

Concept / Principe / ….

Exemples

part

icul

ier

géné

ral

INDUCTION

DEDUCTION

ANALOGIE

Metacognition:

Connaissance de ses connaissances

« je ne suis pas bon pour mémoriser les noms »

« je suis prêt

pour l’examen »

« pour des problèmes de ce type, je préfère faire un

schéma »

Raisonnement sur son raisonnement

« Je suis coincé, je devrais repartir d’un étape précédente »

« Quelle est la meilleure

méthode pour ce problème ? »

h#p://tachesdecafe.com/2014/07/sort-‐et-‐entre-‐arrete-‐de-‐tourner-‐en-‐rond/

Quelle différence entre un jeu et un jouet ?

Les buts et règles sont inventés par le concepteur du jeu

Le joueur invente ses propres buts, son histoire, etc.

17 “Game Mechanics”

Structure de l’espace

Linéaire (SuperMario)

Grille (MineCraft)

Web (Zork)

Partition (Civilisation)

Test de Rotation mentale

h#p://psychlop

edia.wikisp

aces.com

/men

tal+rotaMo

n Capacité d’orientation spatiale

GM2: Temps

Discret Continu

“Tour” Horloge, sablier,….

•  Illimité •  Limité •  Intégré dans le score

•  Ralenti •  Pause •  Accéléré •  Retour

Controllé par le joueur

States Transition

Liquide

Solide

Fragment

Gaz

Fragment

Refroidit

Refroidit

Chauffe

Chauffe

Percute

GM3: Personnages & Avatars “The Uncanny Valley”

GM4 : Actions Basic Actions Move Jump Shoot Buy Sell Give Drop Run Turn Speed Up …

Strategic Actions Protect Sacrifice Pretend Increase resources Wait for event Make alliance Trap Detect enemy Show engagement Anticipate ….

<<

Un jeu est élégant un petit nombre d’actions de base autorise un grand nombre d’actions stratégiques (“emergent gameplay”)

– Jesse Schell

Player’s Mental Model

GM6: Modes Des règles différentes s’appliquent pendant différentes phases de jeu

Faisable. Qui peut faire quelle action sur quel objet à quel moment ?

“Tu ne peux pas tirer quand tu n’a pas assez d’énergie sauf en phase de trève”.

Souhaitable. Comment les actions déterminent ma performance (score, victoire) ?

“Un ligne éliminée vaut 10 points, 2 lignes 50 points et 3 lignes 100 points en mode collaboratif »

“Un ligne éliminée vaut 30 points, 2 lignes 90 points et 3 lignes 300 points en mode compétitif »

GSC Game World

Viewpoint « First person»: Vue depuis les yeux de mon avatar

The Driller Killer

Viewpoint « Over the Shoulder »: Vue depuis l’épaule de l’interlocuteur de mon avatar

GM13: Modélisation Mutuelle

Quels mécanismes permettent au joueur A

de prédire ce que va faire le joueur B

(équipier ou adversaire) ? VUES

Know ( John, Know (Mike, Know (John, treasure-location)))

Charge cognitive

Compilation par entraînement

“Gamification” Application des mécanismes de jeux à des situations qui ne sont pas intrinsèquement ludiques.

Le “flow” (Mihály Csíkszentmihályi), concept flou mais intuitif, décrivant l’état mental d’une personne totalement “prise dans le jeu”, immergée dans ce qu’elle fait, et qui fait preuve de:

•  Une concentration totale sur un objet limité •  Une perte de conscience de soi et de la notion du temps •  Sentiment de contrôle de la situation

Cet état nécessite

•  Objectifs clairs et des règles •  Un feedback immédiat •  Equilibre entre difficulté et compétence

h#p://www.gamasutra.com/

LE FLOW

“Dynamic Game Difficulty Adjustment”

Variables permettant d’ajuster le niveau de difficulté:

•  Force des joueurs virtuels

•  Fréquence des attaques

•  Tailles cibles

•  Précision du tir

•  Opportunités offertes

“Effet élastique” (Mario Kart - US Patent 7278913).

Visualiser 1.  Placer des données sur une image de base de telle sorte

que les propriétés visuelles de l’image reflètent les propriétés abstraites des données, en particulier les relations entre données.

2.  Créer une grammaire visuelle qui met en correspondance les variables des données et les composantes graphiques

Le treillis crée la 3ème dimension

(5) Vérifier l’intégrité graphique (Tufte)

Est-ce que l’importance visuelle correspond à la quantité représentée?

Le piège des perspectives

(6) Minimiser le “chart junk” (Tufte)

h#p://exceluser.com/blog/1133/good-‐examples-‐of-‐bad-‐charts-‐chart-‐junk-‐from-‐a-‐surprising-‐source.html

0

10

20

30

40

50

60

1 2 3 4 5

0

10

20

30

40

50

60

1 2 3 4 50

10

20

30

40

50

60

1 2 3 4 5

30

22

45

12

55

0

10

20

30

40

50

60

1 2 3 4 5

A B

C D

(7) Optimiser le “data ink ratio” (Tufte)

Quel pourcentage des pixels correspond à une donnée ? (si on l’efface, on perd de l’information)

h#p://med

ia.ju

iceanalyMcs.com/im

ages/smallm

ulMp

les1.png

(8)

Utiliser les“small multiple”

(Tufte)

Co-vairations

h#p://www.emersonkent.com/map_archive/russian_campaign_1812.htm

Distortions géométiques :

(1) Forcées : 3D è 2D

Vertical / Horizontal: 5:1

Vertical / Horizontal: 1:1

Exagération ou réalité

Distortions selon le PIB

h#p://www.brainpickings.org/2010/04/15/cartograms/

Les 8 « golden rules » de Ben Schneiderman

4.  Design dialog to yield closure.

Les 8 « golden rules » de Ben Schneiderman

5.  Offer simple error handling.

Expliquer l’erreur

Expliquer comment réparer l’erreur

Chapitre 9 – Part 1: Principes de design

Mapping

h#p://fr.slideshare.net/gelvan/design-‐principles

Chapitre 9 – Part 1: Principes de design

Affordances

h#p://fr.slideshare.net/gelvan/design-‐principles

Tourner, enfoncer ou flipper ?

Wizard of Oz

h#ps://sites.google.com/site/themethodmachine/usability-‐tesMng/methods/wizard-‐of-‐oz

Usability Testing

1. Apprendre l’application

2. Préparer une liste de tâches

3. Recruter 8 utilisateurs (échantillon stratifié)

4.  Leur demander de faire la tâche en pensant

à voix haute, prendre note vorie enregistrer

5.  (Leur demander ce qu’ils pensent)

6. Analyser les résultats

7. Convaincre les concepteurs

1 jour

1 jour

1 jour

Steven Anderson, 2007.

Concevoir une expérience: Mesurer l’effet, c-à-d quantifier

les variations d’une variable dépendante

si on modifie une variable indépendante

Δ Variable indépendante

Δ Variable dépendante

(discrète) (discrète, ordinale, métrique)

Plan expérimental: “Between Subjects”, 1 dimension

Input device Modalité 1 Modalitè 2

Tangible Joystick

Groupe expérimental

Groupe contrôle

Variable indépendante

(ou facteur)

Conditions

Le personnes dans la condition 1 sont différents des personnes dans la condition 2

Plan expérimental: “Within Subjects”, 1 dimension

Input device Modalité 1 Modalitè 2

Tangible Joystick

Le personnes dans la condition 1 passent ensuite dans la condition 2

L’effet Hawthorne (nom de l’entreprise, près de Chicago, où l’effet a été découvert par Elton MAYO)

Améliorer l’éclairage è Gain de productivité

h#p://www.nexavis-‐user-‐ado

pMon

.com

/fr/leffe

t-‐hawthorne

-‐dans-‐la-‐con

duite

-‐du-‐changemen

t/

Changer X, Y ou Z è Gain de productivité

Le simple fait de participer à une expérience a une conséquence importante en termes de motivation

Statique Dynamique

Condition Animation

-0.20

0.00

0.20

0.40

scor

e d'

infé

renc

e (c

entr

é-ré

duit)

Solo

Duo

Interaction des variables animation etcollaboration sur l'inférence

L’effet de la VI-1 sur la VD dépend de la valeur de la VI-2

Effet d’interaction

Meta-analyses Learning Gains (post – pre)

Collaborative versus individual > = <

Slavin, 1983. 26 14 1

Johnson & Johnson, 1989 829 645 109

« meta-analyse »

Comment mesurer la position de l’œil ? (2) Méthodes optique •  Des caméras détectent la réflexion sur la cornée, lesquelles indiquent la

position de la tête vis-à-vis de la caméra.

Youri Marko, Design of an eye tracker system for analyzing reading behavior, EPFL Master Thesis, 2011

Fixations 120 - 1000 ms en général 200 -600 ± 3 fois par sec. Saccades sauts rapides de l’œil entre 40 et 120 ms Nous sommes aveugles pendant la saccade


5 leçons

CS211 - P. Dillenbourg


Leçon 1. La capacité de stockage de notre disque dure (mémoire à long terme) est quasi-illimité; mais notre RAM (mémoire de travail) est limité à 7 ± 2 éléments .


Leçon 2. On « voit » davantage avec son cerveau qu’avec son oeil


Leçon 3. « Computer vision » n’a pas grand chose à voir avec « human vision »


Leçon 4. On ne mesure pas la qualité d’une interface avec des questionnaires mais par un test d’utilisation


Leçon 5. Pas besoin d’avoir un master en psychologie cognitive pour mesurer un effet par une expériences


Leçon 6. Pas besoin d’avoir un master en psychologie cognitive pour mesurer un effet par une expériences


Leçon 7. « VisualComputing Expert» : ni psychologue, ni designer, mais un ingénieur qui comprend l’ensemble du système

EXAMEN EN BLANC

MaMère : 91 HCI concepts + principes généraux des 2 cours Graphics & Vision Pas de notes autorisées

CS-‐?? Fall IntroducMon to Computer Vision 4 Sabine Susstrunck CS-‐341 Spring IntroducMon to Computer Graphics 6 Mark Pauly

Visual CompuMng @ Bachelor

CS-‐446 Spring Digital 3D Geometry Processing 5 Mark Pauly CS-‐486 Spring Human Computer InteracMon 4 ( Pearl Pu CS-‐?? Spring ComputaMonal Photography 5 Sabine Susstrunck CS-‐411 Fall Digital EducaMon & Learning AnalyMcs 4 Pierre Dillenbourg

CS-‐440 Fall Advanced Computer Graphics 4 Mark Pauly CS-‐441 Spring Color ReproducMon 4 Roger Hersch CS-‐442 Spring Computer Vision 4 Pascal Fua CS-‐444 Spring Virtual Reality 4 Ronan Boulic

Visual CompuMng @ Master

Stromae – Live in Rouen

résumé: 91 concepts hci 7 leçons cs211 10 autres cours · pdf filele...

Documents