Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

38
Conception d’une IHM Quelques principes et étapes de base: illustrations par l’exemple

Transcript of Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Page 1: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Conception d’une IHM

Quelques principes et étapes de base:

illustrations par l’exemple

Page 2: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Objectifs du module

• Etude de marché et/ou réalisation de logiciels à la demande (constructeurs d’applications)

• Fournir un prototype adapté aux besoins clients

• Evaluer le coût de réalisation du produit final– Mettre l’accent sur l’IHM pour le dialogue

Page 3: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Cycle de vie des IHMs

Page 4: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Plan à suivre

• Définir le modèle conceptuel de l’utilisateur

• Dégager le modèle de conception

• Charte graphique et contraintes ergonomiques

• Réaliser un prototype

• Evaluer le prototype

Page 5: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Plan

• Définir le modèle de l’utilisateur

• Modèle de conception

• Evaluation du prototype

• Conclusion

Page 6: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Les caractéristiques de l’utilisateur

• Classification des utilisateurs– par rapport à la tache à effectuer

• expert, novice, ….

– Par rapport à ses compétences en informatiques• expert, novice, ….

– Par rapport au contexte d’utilisation• matériel, localisation, ….

Page 7: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Définition des besoins de l’utilisateur

Comment se comporte-t-il actuellement pour

réaliser les tâches visées ?

Que souhaite-t-il conserver ? Améliorer ?

• MOYENS : interviews, questionnaires,

évaluation des outils existants

Page 8: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Définition des caractéristiques de l’utilisateurPas de modèle formelinterview d ’utilisateurs types sur les usagesquestionnaires pour un panel d ’utilisateursévaluation et analyse des outils utilisés

Procédure réitérée après un prototype intermédiaire

Page 9: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Définition des besoins de l’utilisateur

En déduire

les taches principales

les points forts et faibles de l ’existant

Page 10: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Essai de vêtements en

ligneChristophe TACHIER

Sylvie CRAHAY Thomas PARLE

Marie ROQUE

LOG 9 ~ I.H.M.Anne-Marie PINNA DERY

Page 11: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Modèle utilisateur

• Etude de l ’existant

• Questionnaire et résultats principaux

Page 12: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Différentes recherches

La redoute

La CAMIF

Alain Manoukian

Etude de l ’existant

Page 13: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Scanner 3D

VITUS (société allemande)

Lasers

Triangulation

Usine de fabricationde vêtements

Etude de l ’existant

Page 14: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Mon Mannequin Virtuel Inc.

Modélisation parfaite du mannequin 3D (+++)

Visualisation statique (- - -)

Etude de l ’existant

Page 15: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Conclusions• Domaine en pleine expansion

• Mise en œuvre d’outils de Haute Technologie

• Manque de réalisme (effets de l’environnement non exploité)

Etude de l ’existant

Page 16: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Questionnaire

• Situation et habitudes

• Pourquoi faire ou non les boutiques ?

• Pourquoi utiliser ou non la vente par correspondance classique ?

• Utilisation d ’Internet ?

• Souhaits ?

Page 17: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Résultats principaux

Il est important de pouvoir essayer le vêtement

Lorsque vous achetez des vêtements, vous aimez :

63,6

40,9

31,8

27,3

13,6

4,5

0,0 10,0 20,0 30,0 40,0 50,0 60,0 70,0

Essayer les vêtements

La présentation du magasin

Autre

Demander des conseils au vendeur

Rencontrer des gens

Discuter les prix

Page 18: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Au contraire vous n'aimez pas :

72,7

68,2

50,0

40,9

40,9

31,8

18,2

13,6

4,5

0,0 10,0 20,0 30,0 40,0 50,0 60,0 70,0 80,0

Faire la queue

La pression du vendeur

Multiples Habillages/Deshabillages

Le passage à la caisse fastidieux

L'accessibilité

Chercher les vêtements

Autre

Les horaires d'ouverture contraignants

Porter les sacs

Résultats principaux

La pression du vendeur et faire la queue posent des problèmes

Page 19: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Résultats principaux

La coupe du vêtement est très importante

Vous attachez plus d'importance :

40,9

50,0

81,8

45,5

9,14,5

0,0

10,0

20,0

30,0

40,0

50,0

60,0

70,0

80,0

90,0

A la couleur Au tissu A la coupe Au prix A la marque Autre

Page 20: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Résultats principaux

On aime bien le côté « rapide » du catalogue

Si oui pour quelles raisons ?

46,2

38,5

30,8

23,1

23,1

23,1

15,4

0,0 5,0 10,0 15,0 20,0 25,0 30,0 35,0 40,0 45,0 50,0

Comparaison facile et rapide des produits du catalogue

Simplement feuilleter le catalogue

Facilité d'achat

Pas assez de temps libre pour faire les courses

N'aime pas faire les courses

Les cadeaux ou promotions

Autre

Page 21: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Résultats principaux

Beaucoup ont des problèmes de taille

Que reprochez-vous aux catalogues?

59,1

50,0

31,8

31,8

22,7

22,7

18,2

0,0 10,0 20,0 30,0 40,0 50,0 60,0 70,0

La différence de taille entre deux produits

La morphologie des mannequins trop différente de soi

La différence de coloris entre deux produits

Autre

Ne pas pouvoir essayer

La présentation des différents produits

Ne pas pouvoir toucher le tissu

Page 22: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Résultats principaux

La coupe du vêtement est très importante

Que souhaitez-vous qu'un service par correspondance vous apporte pour vous faire utiliser ce type d'achat, ou simplement pour l'améliorer si vous l'utilisez déjà ?

77,3

59,1

59,1

59,1

50,0

50,0

40,9

27,3

18,2

0,0 10,0 20,0 30,0 40,0 50,0 60,0 70,0 80,0 90,0

Avoir un aperçu d’un modèle sur une personneressemblant à soi

Ne pas recevoir de grandes quantités de courrierpromotionnels ou publicités diverses

Voir l’ensemble des produits respectant un certaincritère, comme le type, la couleur, etc.

Associer différents produits de son choix sur un mêmemannequin

Régler la taille de manière interactive sur un mannequin

Bénéficier des retouches adaptées avant livraison

Voir évoluer un vêtement sur une personne enmouvement

Avoir un aperçu sur une personne de son choix

Autre

Page 23: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Modèle utilisateur

Tâches principales à retenir :

• Mannequin adapté au client

• Faire des ensembles

• Ajuster les tailles

• Accès aux vêtements par critères

Page 24: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Plan

• Modèle utilisateur

• Modèle de conception

• Evaluation du prototype

• Conclusion

Page 25: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Modèle de conception

• Définition des tâches

• Diagrammes H.T.A.(Hierarchical Task

Analysis)

• ICSE

Page 26: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Modèle de conception

Choisir un produit

Recherche d’un produit

Choisir un mannequi

n

Informations sur le produit

Gérer son panier

Produits associés

Comparer avec un autre produit

Diagramme H.T.A. global

Page 27: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Diagramme HTA :les tâches principales

Apprendre

Travailler un cours Obtenir de l’aide

Choisir le cours

Suivre le coursSélectionner l’année

Sélectionner le module

Sélectionner le cours

Suivre la première fois

Réviser Approfondir

Lire le plan

A1 : Démarrer du début A2 : Choisir une partie

Page 28: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Diagramme HTA :les sous-tâches

A1 ou A2

Le support de cours

Choisie sur le plan

Sur la partie Des liens, bibliographie …

Changer de mode (Première fois/Réviser/Approfondir)

Stopper / Rejouer

Revoir ou répéter le paragraphe en cours

Changer de partie

Chercher une information

Avoir plus de détails sur une partie de cours

Changer de présentation

Faire un commentaire

Poser une question

Obtenir des compléments

Imprimer

Quitter

Obtenir de l’aide

Changer de niveau (Débutant/Novice/Expert)

Partie précédente/suivante

Le prof

Le plan

Sur un mot (glossaire)

Des exemples

Une autre partie du cours

Page 29: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Modèle de conception

Entrer la référence :

Ref : 3345984521

Rechercher

Rechercher

Thème

Catégorie

Indifférent

Chemise

JupePull

Indifférent

CasualHabillé

Sportswear

Homme EnfantFemme

Taille Couleur

Indifférent

38

4240

36

Maquette

Page 30: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Modèle de conception

Prototype

Page 31: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Plan

• Modèle utilisateur

• Modèle de conception

• Evaluation du prototype

• Conclusion

Page 32: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Tests d’évaluation

Protocole de test :

– Taches à réaliser– Chronométrage– Compte des cliques– Appréciation

Page 33: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Synthèse des tests

• Bonne perception de l'interface– Organisation claire– Environnement familier

• Aspects à revoir– Pertinence des icônes– Personnalisation du professeur

Page 34: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Evaluation du prototype

• Choix de personnes plus ou moins « habituées » à l ’utilisation de l ’ordinateur

• Réalisation de tâches précises

• Commentaires généraux

Page 35: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Evaluation du prototype

• Interface satisfaisante

• Pas de difficulté majeure pour

effectuer les tâches demandées

• Motivés par le concept

Conclusions des utilisateurs « test »

Page 36: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Plan

• Modèle utilisateur

• Modèle de conception

• Evaluation du prototype

• Conclusion

Page 37: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

Conclusion

• Recherche sur l ’existant intéressante

• Sondage instructif

• Difficultés techniques

Page 38: Conception dune IHM Quelques principes et étapes de base: illustrations par lexemple.

FIN