cours 2 conception d'une ihm -tp

13
1 Ludovic Maindron Ingénieur UTC en génie logiciel DESS ergonomie Paris V 12 ans d’expérience en conception d’Interfaces Homme Machine 1 1 / 0 1 / 2 0 1 2 L u d o v i c M a i n d r o n I H M C o n s u l t i n g Cours 2:TP Conception d’une IHM

Upload: ludolmn

Post on 21-Jun-2015

624 views

Category:

Technology


2 download

DESCRIPTION

Travaux pratiques IUT : Cours 2 : Conception d'une IHM

TRANSCRIPT

Page 1: Cours 2   conception d'une ihm -tp

1

Ludovic MaindronIngénieur UTC en génie logiciel

DESS ergonomie Paris V 12 ans d’expérience en conception d’Interfaces Homme

Machine

11

/01

/20

12

Lu

do

vic Ma

ind

ron

IHM

Co

nsu

lting

Cours 2:TPConception d’une IHM

Page 2: Cours 2   conception d'une ihm -tp

22

TP1 : patrons de conception1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Pour la série d’écran qui va suivre :

Exercice 1 :Identifier le ou les patrons de conception utilisés

Exercice 2 :Identifier le ou les layouts à utiliser pour que ces IHMs soient responsive

Page 3: Cours 2   conception d'une ihm -tp

33

TP1 : patrons et layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

L’explorateur Windows

Page 4: Cours 2   conception d'une ihm -tp

44

TP1 : patrons et layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

iTunes

Page 5: Cours 2   conception d'une ihm -tp

55

TP1 : patrons et layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Client de messagerie

Page 6: Cours 2   conception d'une ihm -tp

66

TP1 : patrons et layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Application métier

Page 7: Cours 2   conception d'une ihm -tp

77

TP1 : patrons et layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Application métier

Page 8: Cours 2   conception d'une ihm -tp

88

TP1 : patrons et layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Applications webs

Page 9: Cours 2   conception d'une ihm -tp

99

TP1 : patrons et layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Applications webs

Page 10: Cours 2   conception d'une ihm -tp

1010

TP2 : choix d’un composant1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

•Vous devez choisir un composant graphique pour afficher des tableaux dans une application Web

En binôme, faites des recherches sur InternetEtablir un hit parade des fonctions utiles pour l’utilisateur finalFaites des recherches sur Internet et proposer un composant graphiqueJustifier votre choix

Page 11: Cours 2   conception d'une ihm -tp

1111

TP3 : optimisation recherche1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Le CA de depanAuto doit trouver le contrat associé aux véhicule du conducteur (entre 50 et 100 fois/j)

La plupart du temps, le conducteur connait son immatriculation mais parfois il n’est capable que de fournir la marque et le modèle L’équipe de développement vous propose une boite de dialogue pour rechercher le contrat à partir du véhicule

On vous demande de préconiser des améliorations

Voyez-vous une erreur de conception ?Comptez le nombre d’interactions et qualifiez-les (souris ou clavier)Faire une liste de propositions pour en réduire le nombre

Page 12: Cours 2   conception d'une ihm -tp

1212

TP : layouts1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

g

Exercice 1 : Identifier le ou les layouts à

utiliser pour que ces IHMs soient responsive

Page 13: Cours 2   conception d'une ihm -tp

1313

Vos Questions ?1

1/0

1/2

01

2L

ud

ovic M

ain

dro

n IH

M C

on

sultin

gLudovic Maindron Consultant ergonome

[email protected]

06 28 07 22 35

@ludolmn

Sources : http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns