Productions en conception et am lioration d IHM

1. Productions en conception et amélioration d’IHM Nicolas PICQ Nicolas PICQ Productions en conception et amélioration d’IHM 1

2. Présentation du document Vous trouverez dans ce document les différentes productions réalisées lors de mes expériences professionnelles. Une diapositive ‘Projets présentés’ recense les projets auxquels j’ai pu participer ainsi que des liens pour accéder à ces derniers. Pour chaque projet professionnel, la présentation est organisée de la sorte : - Une diapositive « Titre » : elle présente les différentes parties et contenus du projet sélectionné. Un lien hypertexte permet d’accéder directement aux différentes sous parties de ce projet. Des diapositives « contenus » : elles présentent les contenus et productions associées à chaque projet; La présentation du projet est résumé du projet Présentation de …est un ensemble de maquettes que j’ai pu réaliser Sur chaque diapositive, des liens sont disponibles pour accéder à la diapositive « titre » ou « projets présentés ». Nicolas PICQ Productions en conception et amélioration d’IHM 2

3. Les projets présentés Portail web de la MGET Benchmark concurrentiel des sites Orange Conception et développement d’une aide en ligne de Pack Formation Conception IHM Quelques projets… Nicolas PICQ Productions en conception et amélioration d’IHM 3

4. Portail web de la MGET Présentation du projet Tri de Cartes Tests utilisateurs Présentation de maquettes Nicolas PICQ Productions en conception et amélioration d’IHM 4

5. Portail web de la MGET Présentation du projet (1) Ce projet a pour sujet l’élaboration d’une intervention ergonomique sur un portail web @-mis (mutuelle information service) développé pour véhiculer des offres et des informations relatives à la santé de la Mutuelle Générale de l’Equipement et des Territoires (MGET). Cette mission a eu lieu dans le cycle d’exploitation d’un portail web basé sur une plateforme Mcms (Microsoft). Il répond à l’étude demandée par la société Onlynet qui a réalisé l’assistance à maîtrise d’ouvrage du portail @-mis. Cette étude s’inscrit en aval du projet de développement du portail @-mis pour une évolution de ce dernier. Nicolas PICQ Productions en conception et amélioration d’IHM 5

6. Portail web de la MGET Présentation du projet (2) Le portail web de la MGET est composé de 3 espaces: Un espace visiteur permettant de véhiculer l’offre et les valeurs de la MGET un espace adhérent permettant de véhiculer des informations, de consulter les remboursements des soins par ces derniers,… un espace « intranet » Dans ce cadre, j’ai réalisé une expertise ergonomique de l’espace « visiteur » de la MGET. Je vais présenter ici la méthode de tri de cartes et les tests utilisateurs que j’ai pu effectuer suite à une expertise ergonomique basée sur des critères ergonomiques reconnues. Nicolas PICQ Productions en conception et amélioration d’IHM 6

7. Portail web de la MGET Tri de Cartes (1) - présentation L'architecture de l'information est le fondement de la structure d'une application. Pour optimiser cette architecture, plusieurs méthodes sont utilisées. Cet article décrit l'une d'entre elles, le tri de cartes. Cette méthode vise à organiser les différentes informations du portail selon le point de vue de l’utilisateur. Le tri de cartes consiste à présenter à l'utilisateur un paquet de "cartes", qui peuvent être de natures différentes : le tri peut être effectué physiquement avec un support papier ou conceptuellement avec un support informatique, en représentant les cartes par des mots sur un écran. Nicolas PICQ Productions en conception et amélioration d’IHM 7

8. Portail web de la MGET Tri de Cartes (2) - protocole Vingt deux sujets ont été sélectionnés parmi l’entourage de l’expérimentateur et les utilisateurs finaux de la MGET. La répartition est faite de cette manière : Huit sujets de 20 à 30 ans, Huit sujets de 30 à 50 ans, Six sujets de 50 à 70 ans. Pour chaque page de rubriques du site, une carte a été rédigée. Cette carte décrit le contenu de la page par un libellé : un ou deux mots clés et une phrase descriptive. Les mots clés et les descriptions ont été conçus de manière à ne pas induire de regroupement dans ces derniers. Un ensemble de cartes et d’enveloppes est présenté à chaque participant. Chaque participant doit catégoriser ces cartes selon son propre point de vue. Nicolas PICQ Productions en conception et amélioration d’IHM 8

9. Portail web de la MGET Tri de Cartes (3) - résultats Les outils informatiques pour le tri de cartes sont aussi souvent des outils de traitement des résultats d'un tri. CardSword est un outil d’analyse de données de tri de cartes qui nous a permis de traiter les résultats recueillis lors de la phase de test. Nicolas PICQ Productions en conception et amélioration d’IHM 9

10. Portail web de la MGET Tests utilisateurs (1) 1. Protocole: observations 9 utilisateurs : 5 utilisant le web faiblement 4 l’utilisant fréquemment une phase d’appropriation du portail @-mis : regarder la page d’accueil du portail @-mis se faire une impression de la page d’accueil une phase de test : Recherche d’informations une information « simple » une information « complexe » Nicolas PICQ Productions en conception et amélioration d’IHM 10

11. Portail web de la MGET Tests utilisateurs (2) – Données recueillies Données quantitatives : Efficacité : Temps mis pour exécuter la tâche: Temps moyen pour exécuter chaque tâche Taux d’efficacité: Taux de réussite/Temps de chaque tâche Efficience: Taux de réussite: Pourcentage de participants qui ont réussi chaque tâche complètement Satisfaction: Questionnaire Entretiens - Données qualitatives: Mouvement de la souris sur les pages web, Mouvement du regard Nombre de clics, position du clic,… Verbatims (entretiens face à face…) Nicolas PICQ Productions en conception et amélioration d’IHM 11

12. Portail web de la MGET Tests utilisateurs (3) – résultats Nicolas PICQ Productions en conception et amélioration d’IHM 12

13. Portail web de la MGET Présentation de maquettes – page d’accueil Avant Après Nicolas PICQ Productions en conception et amélioration d’IHM 13

14. Portail web de la MGET Présentation de maquettes – navigation Avant Après (avec tri de cartes) Nicolas PICQ Productions en conception et amélioration d’IHM 14

15. Benchmark concurrentiel Présentation du projet Evaluation ergonomique Présentation de best practices Nicolas PICQ Productions en conception et amélioration d’IHM 15

16. Benchmark concurrentiel Présentation du projet (1) Ce projet a pour but l’évolution de certains portails web Orange. Il vise à établir les bonnes et mauvaises pratiques exercées sur ces portails Orange par rapport aux concurrents en terme d’ergonomie et de fonctionnalités. Les portails web évalués sont : Orange Fr, Mobistar, Orange UK, Bouygues Télécom, SFR, Free… Nicolas PICQ Productions en conception et amélioration d’IHM 16

17. Benchmark concurrentiel Présentation du projet (2) Dans ce cadre, j’ai été responsable de l’évaluation de la partie « Support » (mobile et internet) des portails Orange Fr, UK, Mobistar. J’ai ensuite réalisé un benchmark concurrentiel de la partie « Boutique » (mobile et internet) des portails Free, SFR, Bouygues Télécom en comparaison au portail Orange Fr. Nicolas PICQ Productions en conception et amélioration d’IHM 17

18. Benchmark concurrentiel Evaluation ergonomique (1) 1ère étape : choix de scénarii… J’ai, dans un premier, sélectionné un panel de scénarii sur la partie « Support » et « boutique » de portails Orange. Scénarii choisis en fonction des fonctionnalités d’accès à l’information finale (moteur de recherche, navigation, aides…), de la valeur « marketting » de ces scénarii…Et d’autres critères: comparabilité des scénarii avec autres concurrents… Nicolas PICQ Productions en conception et amélioration d’IHM 18

19. Benchmark concurrentiel Evaluation ergonomique (3) 3ème étape : Résultats Pour chacun des scénarii évalués, j’ai: Élaboré un support permettant de communiquer les best/ bad practices dans les scénarii sélectionnés. (travail en collaboration avec équipes…) Évalué la criticité du point abordé dans les scénarii Proposé des pistes d’améliorations pour améliorer l’ergonomie des portails web Orange. (existant chez concurrents ou autre…) Vous pourrez voir le fruit de ce travail dans les prochaines diapositives. Nicolas PICQ Productions en conception et amélioration d’IHM 19

20. Benchmark concurrentiel Evaluation ergonomique (2) 2ème étape : évaluation experte…(1) J’ai appliqué cette méthode d’évaluation avec pour objectif de détecter les freins ergonomiques des portails web Orange. J’ai ainsi pu détecter les points critiques en les confrontant à des critères ergonomiques, aux normes d’interfaces et aux principes de conception. J’ ai examiné les différents scénarii et portails web en fonction de critères ergonomiques reconnus : l'utilité, la facilité d'utilisation, l'efficacité, la simplicité, la clarté, la lisibilité, la terminologie, la trouvabilité (findability), la navigation, l'architecture de l'information, le feedback utilisateur, l'assistance à l'utilisation, le design graphique, la densité d'information, etc. Nicolas PICQ Productions en conception et amélioration d’IHM 20

21. Benchmark concurrentiel Evaluation ergonomique (3) 2ème étape : évaluation experte…(2) Mon analyse s’est reposée sur les critères ergonomiques de Bastien et Scapin et les heuristiques de Jacob Nielsen Pour l’ensemble des portails web, j’ai examiné les différents parcours utilisateurs permettant d’accéder à l’information finale visée par les scénarii sélectionnés => établissement du diagramme de tâches (arbres des tâches et scénarios possibles pour effectuer ces tâches). J’ai aussi réalisé l’arborescence des différents secteurs des portails web et détecté les principaux problèmes existants concernant : Structure du dialogue Homme Machine La structure/ profondeur du menu La navigation dans le menu L’architecture d’information/ affichage de l’information Nicolas PICQ Productions en conception et amélioration d’IHM 21

22. Benchmark concurrentiel Présentation de best practices (1) Parcours utilisateurs… Nicolas PICQ Productions en conception et amélioration d’IHM 22

23. Benchmark concurrentiel Présentation de best practices (2) Présentation des best practices… Nicolas PICQ Productions en conception et amélioration d’IHM 23

24. Benchmark concurrentiel Présentation de best practices (3) Présentation des bad practices… Nicolas PICQ Productions en conception et amélioration d’IHM 24