Enseignement de l’IHM - CUIcui.unige.ch/isi/wud2011/pdf/wud2011-unige-gf-jg.pdf · ORIGINES /...

RETOUR SUR 10 ANS DE

DÉVELOPPEMENT DE

L'ENSEIGNEMENT DE L'IHM À

L'UNIVERSITÉ DE GENÈVE

Gilles Falquet

Jacques Guyot

© Uni Genève - G. Falquet, J . Guyot 1 c

Enseignants:

Gilles Falquet

Jacques Guyot

Eugène Horber

Patrick Roth

WORLD USABILITY DAY 2011

CONTENU

Origines et évolution de l'enseignement

Contenu actuel

Observations et leçons à tirer

Futur

© Uni Genève - G. Falquet, J . Guyot 2 WORLD USABILITY DAY 2011

ORIGINES / POURQUOI UN COURS IHM?

Création d'une équipe de recherche en Interfaces des système d'information

diffusion des connaissances acquises et des travaux réalisés

Généralisation de l'usage du Web, applications Web

importance du design des sites

Un problème récurrent en systèmes d'information

Des travaux d'étudiants ruinés par des interfaces déficientes


DES RÉFLEXIONS STIMULANTES

© Uni Genève - G. Falquet, J . Guyot 4

Le progrès c'est MOINS de fonctionnalités, pas plus

B. Buxton

D. Norman



hyper-text

project Xanadu

Augmenting the human intellect

T. Nelson

D. Engelbart


OBJECTIFS INITIAUX

Sensibiliser au problème de la création d'interfaces

une interface ça se conçoit

la présentation des données n'est pas neutre

Montrer des techniques

de visualisation

d'interaction

de création d'interfaces

de connexion de composants


http://cui.unige.ch/isi/cours/interfaces/ Printemps 2001

http://web.archive.org/web/20010805002243/http://cui.unige.ch/isi/cours/interfaces/


http://web.archive.org/web/20010609161438/http://cui.unige.ch/isi/cours/interfaces/annonce.html


RÉACTIONS

pas assez de "matière dure", enseignement difficile à concrétiser

Évolution

+ prototypage – développement

+ méthodes et modèles d'analyse

+ évaluation et tests d'utilisabilité


As far as the customer is concerned,

the interface is the product

Jef Raskin


CONTENU 2011

Introduction

Analyse des utilisateurs et du

contexte

Analyse des tâches

L’humain

La machine

L’interaction

Techniques d’interaction

Le prototypage à basse résolution

Principes ergonomiques

L’évaluation heuristiques

Conception de l’interaction

Les prototypes interactifs

Les tests d’utilisabilité

Visualisation des données



Principes de visualisatio des données

Composants d'interaction

WIMP, fisheye, lifeline Hypertextes

Génération d'hypertextes/documents

pour visualiser les bases de données

Interfaces

Machine-Machine

Architecture logicielle

des interfaces (MVC)

Recommandations pour le design Modèles:

humain – machine - interaction

Techniques d'interaction

WIMP, post WIMP, hypertexte


Techniques de conception

des interfaces

Prototypage basse résolution

Tests heuristiques

Prototypes interactifs

Tests d'utilisabilité

Analyse contexte, utilisateur

Analyse des tâches


APPRENTISSAGE PAR PROJET

Cours organisé selon les étapes d'un méthode de conception

Les étudiants réalisent toutes les étapes d'un projet

Défi

synchronisation cours – projet

temps limité => impossible de fournir toute la théorie nécessaire avant

chaque étape


Ananlyse

Contexte - Utilisateurs

Modèle des utilisateurs

et contexte

Ananlyse

Tâches

Modèle des tâches

Prototypage BF

Proto papier

Introduction

Analyse des utilisateurs et du contexte

Analyse des tâches

L’humain

La machine

L’interaction

Techniques d’interaction


Analyse des tâches



(Boddi & Shiming 2009)


Prototypes papier (basse fidélité)


(Ahmeti, 2010)


Proto papier

Test Rapport

Erreur

Evaluation

Heuristique

Rapport Expert

Prototypage MF

Proto interactif

«

Expert

»

« Utili-

sateur »

Proto papier' Le prototypage à basse résolution


L’évaluation heuristiques

Conception de l’interaction

Les prototypes interactifs



"Exécution" du prototype papier

http://www.youtube.com/watch?v=GrV2SZuRPv0

http://www.youtube.com/watch?v=w6jyg10ixHE&feature=related

http://www.youtube.com/watch?v=8PhT0U5uhSI














PRINCIPES ERGONOMIQUES

Principes de Schneiderman, Tognazzini, Nielsen, ...

consistance

minimisation des erreurs

anticipation

utilisation de la loi de Fitts

utilisation des couleurs

ergonomie du texte

simplicité & design minimaliste

…..


Par le mauvais exemple ...


25 WORLD USABILITY DAY 2011 © Uni Genève - G. Falquet, J . Guyot

26 WORLD USABILITY DAY 2011 © Uni Genève - G. Falquet, J . Guyot

Par le bon exemple ...


PROTOTYPES INTERACTIFS

Powerpoint

Flash

Runrev

...


(Ahmeti 2010)


(Escallon & Haussman, 2009) © Uni Genève - G. Falquet, J . Guyot 36 WORLD USABILITY DAY 2011

Planifiaction test

Proto interactif

Utili-

sateur Utili-

sateur Utili-

sateur

Plan expérimental

Tests d'utiisabilité

Rapport efficacité Rapport satisfaction

Les tests d’utilisabilité

Prototypes à haute résolution et

développement final


Soutenance


Analyse des tests



(Boddi & Shiming 2009)



(Ahmeti 2010)


NOS DEVISES

Observer: Tâche – Utilisateur - Contexte

Simplifier:

Eliminer certaines étapes (Business process)

Se focaliser sur la tâche principale

Soulager l’utilisateur (par processus automatique caché)

Ecarter le superflu (les trucs sympa … que personne n’utilise)

Invention (repartir de 0 – si nécessaire – critique de Win/Mac/Web)

Cultiver l’oubli de comment on fait jusqu’à maintenant …

Dépasser les impossibles …

Mesurer & valider avec les utilisateurs


INTEGRATION DE

LA TACHE


PERFORMANCES DES ÉTUDIANTS

Analyse des utilisateurs et des tâches : difficile

Prototypage papier : très bon

Tests : bien expliquer la typologie (détection d'erreurs,

heuristiques, utilisateurs)

Manque de culture scientifique ... chez les scientifiques

justifier scientifiquement un énoncé/choix, sortir de «on a pensé que ...»

utiliser les résultats scientifiques de l'IHM – qui ne sont pas des théorèmes


ROBUSTESSE DU PROGRAMME

Changements technologiques (mobiles, tablettes)

les principes restent les mêmes

développement d'un kit proto papier pour mobiles

aucun problème pour passer aux prototypes sur téléphones et tablettes

ré-utilisation de méthodes propres aux interfaces par écrans (TRIDENT)

Type de public

étudiants BA, MA

étudiants non informaticiens

formation continue : informaticiens, non informaticiens


LIENS AVEC L'INDUSTRIE

Intégration dans la formation continue Nouvelles technologies du

Web

Cours pour praticiens (3 jours) (2010)

Demande de test d'un prototype par une entreprise


Evaluation

Heuristique

Rapport Expert

Experts

=

Étudiants

Proto interactif


COLLABORATION AVEC LA DIVISION

INFORMATIQUE DE L'UNIGE

Forte implication d'un collaborateur de la Dinf dans le cours

Projets en lien avec la Dinf


PANORAMA ROMAND

HEG - Informatique de gestion –> Ø

HEPIA - Ø

HEIVD - Informatique/Logiciel -> Infographie

HES FR – BSc info -, Interface homme-machine 1 et 2, Interfaces

Multimodales

UNIL - Ø

UNIFR – BA SI -> Ø, BSc CS -> Ø, MSc -> User Centric Design

UNINE /

EPFL – BSc , MSc Infographie, HCI, Personal interaction studio


Institution Bac. U Maitrise U

UNINE ( UNIFR)

HEIVD infographie

HES FR IHM 1

IHM 2

interfaces m. modales

UNIFR user centric design

UNIL

EPFL infographie

personal interaction studio

HCI

HEG + HEPIA

UNIGE IHM interfaces avancées


DIFFICULTÉ DE L'INTRODUCTION D'UN

COURS IHM

Poids de l'histoire dans la construction des plans d'étude

Faible connaissance et sous-estimation de l'importance du

domaine

"C'est de la cosmétique"

"Il n'y a pas de théorie consistante"

peu d'offres d'emploi explicitant cette compétence

Peu de « textbooks »


HISTOIRE


Interaction conversationnelle 1985

au mieux formulaires, touches de fonction

programmation simple

readln(x)

...

writeln(y)

Focalisation sur

algorithmes, langages de programmation

bases de données et génie logiciel

réseaux et sécurité

gestion du matériel


DES INTERFACES ERGONOMIQUES


OU PLUS D’INTERFACES ...


... mais beaucoup de calculs


RÉFÉRENCES

Escallon, D., Haussman, J. (2009) Concept d'interface pour un e-

Portfolio, Cours ISI, Université de Genève.

Ahmeti, V. (2010) Thèmes et portails institutionnels, Cours IPM,

Université de Genève.

Boddi, J., Shiming, L. (2009) Définition du contexte et de la

technologie, analyse des utilisateurs et analyse des tâches. Cours

IPM, Université de Genève.


Enseignement de l’IHM - CUIcui.unige.ch/isi/wud2011/pdf/wud2011-unige-gf-jg.pdf · ORIGINES /...

Documents

Transcript of Enseignement de l’IHM - CUIcui.unige.ch/isi/wud2011/pdf/wud2011-unige-gf-jg.pdf · ORIGINES /...