1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF,...

9
1 Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire d’Informatique de Grenoble (LIG) 2008-2009

Transcript of 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF,...

Page 1: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

1

Cours IHM : IntroductionM2-MIAGE

Cours IHM : IntroductionM2-MIAGE

Joëlle Coutaz, prof. UJF, équipe IIHMAlexandre Demeure, MdC UJF, équipe PRIMA

Laboratoire d’Informatique de Grenoble (LIG)

2008-2009

Page 2: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

2

Objectifs du cours

Ce cours présente – une méthode

– les principes élémentaires d’ergonomie

applicables à la conception de sites Web

Pour stations de travail et pour dispositifs mobiles

Page 3: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

3

Taille, coût Nombre

1 ordinateur pour tous

1 Ordinateur par personne

Beaucoup d’ordinateurs par personne

adapted from: F. Mattern, Dagstuhl 2002

Loi de Moore : “Vitesse de calcul et capacité mémoire doublent tous les 18 mois”

L’histoire en résumé

Page 4: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

4

Intégration dans l’env.

[Lyytinen & Yoo 2002]

Mobilité

interaction conventionnellemobilité

Multimodalité, RA

IHM devant nous …

Page 5: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

5

Interaction à la surface d’une infrastructure planétaire

IHM devant nous …

Page 6: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

6

Exemple : IHM pour service de météo …

Page 7: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

7

Exemple : IHM pour service de météo …

Page 8: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

8

Structure du cours

Chap1 : Conception de site web - règles générales (Joëlle)

Chap2 : Techniques d’interaction pour dispositifs mobiles (Joëlle)

Chap3 : Techniques d’interaction pour grandes surfaces (Joëlle)

Chap4 : Aspects techniques 1 : XSLT (Alexandre)

Chap5 : Aspects techniques 2 : JavaScript, CSS (Alexandre)

… Le tout appliqué à un petit projet

Page 9: 1 Cours IHM : Introduction M2-MIAGE Cours IHM : Introduction M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire.

9

Le projet

Choisir un site web existant

Faire la rétro-conception du site (modèle de tâche à partir de l’IHMC)

Faire la re-conception du site selon la méthode vue en cours et appliquer les techniques de mise en œuvre (XSLT, CSS) sachant que le site doit pouvoir s’exécuter dans des contextes différents : sur au moins 2 plates-formes de votre choix mais ayant des ressources d’interaction bien distinctes (PC, PDA, Smartphone, surface murale, etc.), en des lieux différents (utilisateur mobile).

Organisation – Groupe de 4 avec moyens informatiques personnels– Démo en juillet mais attention à la gestion de votre

temps