L'utilisabilité a-t-elle toujours la cote?   Midi Express API 22 Novembre 2006, Québec 23 Novembre 2006, Montréal Camille ...
Plan de la  présentation <ul><li>0.  Plan de la présentation </li></ul><ul><li>Mise en contexte </li></ul><ul><ul><li>Inte...
Mise en contexte Comment définir l’utilisabilité 1 0 1 2 3 4 © Sandrine Prom Tep
Mise en contexte Comment définir l’utilisabilité <ul><li>Plusieurs perspectives formant une approche plutôt qu’une définit...
Mise en contexte Les 3 composantes majeures -Baby-boomers / Enfants? -Travailleurs / particuliers?  -Limites cognitives ? ...
Étude de cas au Cirque du Soleil Mise en situation <ul><li>Problèmes rencontrés par le CDS </li></ul><ul><ul><li>Une quant...
Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateu...
Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateu...
Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateu...
Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateu...
Étude de cas au Cirque du Soleil   Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisat...
Étude de cas au Cirque du Soleil Conclusions <ul><li>Synthèse de la démarche </li></ul><ul><ul><li>Collecte de données aup...
Le contexte gagnant de l’ergonomie Cadre   général Intervenants spécialisés principaux Outils et méthodes Design centré ut...
Le contexte gagnant de l’ergonomie Phase de réflexion stratégique Intervenants spécialisés principaux Outils et méthodes D...
Le contexte gagnant de l’ergonomie Phase d’analyse et de conception Intervenants spécialisés principaux Outils et méthodes...
Le contexte gagnant de l’ergonomie  Phase de mise en production et évaluation Intervenants spécialisés principaux Outils e...
Nouvelles tendances Évolutions  méthodologiques <ul><li>Mesures </li></ul><ul><ul><li>Oculométriques  </li></ul></ul><ul><...
<ul><li>Phénomène des communautés en lignes </li></ul><ul><ul><li>Réseautage professionnel </li></ul></ul><ul><ul><ul><li>...
<ul><li>Exemples d’utilisation d’ Ajax </li></ul><ul><ul><li>Remember the milk et Google Maps  [Instantanéité]   </li></ul...
Alors ? <ul><li>Elle suit la tendance du web qui se complexifie : </li></ul><ul><li>   L’utilisabilité est de plus en plu...
Fin de la présentation <ul><li>Merci de votre attention! </li></ul><ul><li>Présentation disponible sur: </li></ul><ul><li>...
Annexes <ul><li>A1 - Nouvelles tendances -  Évolutions comportementales </li></ul><ul><li>A2  -  Nouvelles tendances -  Év...
Nouvelles tendances Evolutions   comportementales  -  Exemples http://www.linkedin.com http://www.myspace.com/cassius15aga...
Nouvelles tendances Evolutions   comportementales  -  Exemples http://www.digg.com A1 http://www.agentsolo.com
Nouvelles tendances Évolutions technologiques -  Exemples http://www.rememberthemilk.com/signup/ A2
Nouvelles tendances Évolutions technologiques -  Exemples http://netvibes.com A2
Nouvelles tendances Évolutions technologiques -  Exemples http://www.mgmgrand.com/ A2
Upcoming SlideShare
Loading in …5
×

Nouvelles tendances en matière d'utilisabilité

2,511 views

Published on

Présentation à l'API (Québec, Montréal, les 22 et 23 Novembre 2006)

Published in: Technology, Design

Nouvelles tendances en matière d'utilisabilité

  1. 1. L'utilisabilité a-t-elle toujours la cote? Midi Express API 22 Novembre 2006, Québec 23 Novembre 2006, Montréal Camille Grange & Sandrine Prom Tep
  2. 2. Plan de la présentation <ul><li>0. Plan de la présentation </li></ul><ul><li>Mise en contexte </li></ul><ul><ul><li>Interaction Homme Machine (IHM), Interaction Personne Système </li></ul></ul><ul><li>Importance de l’utilisabilité dans un contexte d’entreprise </li></ul><ul><ul><li>Étude de cas au Cirque du Soleil </li></ul></ul><ul><li>Le contexte gagnant de l’ergonomie </li></ul><ul><ul><li>Outils, documents de support, acteurs, etc. </li></ul></ul><ul><li>Les nouvelles tendances </li></ul><ul><ul><li>Méthodologiques, technologiques, comportements des usagers </li></ul></ul>0 0 1 2 3 4
  3. 3. Mise en contexte Comment définir l’utilisabilité 1 0 1 2 3 4 © Sandrine Prom Tep
  4. 4. Mise en contexte Comment définir l’utilisabilité <ul><li>Plusieurs perspectives formant une approche plutôt qu’une définition figée et universelle </li></ul><ul><ul><ul><li>Une qualité d’un produit (facile à utiliser) </li></ul></ul></ul><ul><ul><ul><li>Une qualité d’ interaction ou d’expérience </li></ul></ul></ul><ul><ul><ul><li>Un processus </li></ul></ul></ul><ul><ul><ul><li>Une philosophie </li></ul></ul></ul><ul><ul><ul><li>Un devoir de concepteur de produits interactifs </li></ul></ul></ul><ul><ul><ul><li>Une nécessité économique (ROI!) </li></ul></ul></ul><ul><ul><ul><li> Bref…une démarche ! </li></ul></ul></ul>1 0 1 2 3 4
  5. 5. Mise en contexte Les 3 composantes majeures -Baby-boomers / Enfants? -Travailleurs / particuliers? -Limites cognitives ? -Quelle langue parlent-ils? -Quelle niveau d’éducation? … La tâche -S’informer -S’abonner? -Passer des commandes? -Télécharger des documents? … -Effectuer une recherche Le contexte -Au bureau? -À la maison? -En déplacement? -Pressé? -En état de stress? … 1 Champ d’action de l’ergonome / spécialiste en utilisabilité 0 1 2 3 4 L’utilisateur
  6. 6. Étude de cas au Cirque du Soleil Mise en situation <ul><li>Problèmes rencontrés par le CDS </li></ul><ul><ul><li>Une quantité d’appels/emails anormale au service à la clientèle du CDS </li></ul></ul><ul><ul><li>Méconnaissance des problèmes précis que rencontrent les utilisateurs [«  De toute évidence, on a un problème….mais quel est-il ? Quelle est sa cause ? Comment le résoudre ?  »] </li></ul></ul><ul><ul><ul><li> Soupçons du côté du site web </li></ul></ul></ul>2 Allier diagnostic et résolution de problème 0 1 2 3 4 Être orienté utilisateur  Approche préconisée
  7. 7. Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateur  Ne manquer aucun show du CDS  Être informés des déplacements du CDS Réponses du CDS  Devenir manque du Club Cirque  Aller consulter le « tour plan » Décalage entre besoins et réponses R1 : Structurer la page du Tour Plan pour qu'on puisse chercher par lieu géographique en plus de par spectacle Questions types Recommandations 2 3 2 4 0 1 2 3 4 Q1 : “ Est-ce que le Cirque va venir dans MA ville? Dans MA région ? ” 1
  8. 8. Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateur  Ne manquer aucun show du CDS  Être informé des déplacements du CDS dans SA ville Réponses du CDS  Devenir manque du Club Cirque  Aller consulter le « tour plan » Décalage entre besoins et réponses R1 : Structurer la page du Tour Plan pour qu'on puisse chercher par lieu géographique en plus de par spectacle Questions types Recommandations 2 3 2 4 0 1 2 3 4 Q1 : “ Est-ce que le Cirque va venir dans MA ville? Dans MA région ?” 1
  9. 9. Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateur  Ne manquer aucun show du CDS  Être informé des déplacements du CDS dans SA ville Réponses du CDS  Devenir membre du Club Cirque  Aller consulter le plan de tournée (plan organisé par spectacles) Décalage entre besoins et réponses Q1 : “ Est-ce que le Cirque va VENIR DANS ma ville/région ? ” R1 : Structurer la page du Tour Plan pour qu'on puisse chercher par lieu géographique en plus de par spectacle Questions types Recommandations 2 3 2 1 4 0 1 2 3 4
  10. 10. Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateur  Ne manquer aucun show du CDS  Être informé des déplacements du CDS Réponses du CDS  Devenir membre du Club Cirque  Aller consulter le plan de tournée (plan organisé par spectacles) Décalage entre besoins et réponses R1 : Structurer la page du Tour Plan pour qu'on puisse chercher par lieu géographique en plus de par spectacle Questions types Recommandations 2 3 2 4 Psychologique Terminologique S tructurel 0 1 2 3 4 Q1 : “ Est-ce que le Cirque va VENIR DANS ma ville/région ? ” 1
  11. 11. Étude de cas au Cirque du Soleil Illustration du processus de diagnostic / résolution de problèmes Besoins de l’utilisateur  Ne manquer aucun show du CDS  Être informé des déplacements du CDS dans SA ville Réponses du CDS  Devenir membre du Club Cirque  Aller consulter le plan de tournée (plan organisé par spectacles) Décalage entre besoins et réponses R1 : Structurer la page du plan de tournée pour qu'on puisse chercher par lieu géographique en plus de par spectacle Questions types Recommandations 2 2 4 3 5 0 1 2 3 4 Psychologique Terminologique S tructurel Q1 : “ Est-ce que le Cirque va VENIR DANS ma ville/région ? ” 1 © Sandrine Prom Tep Implantation en page d’accueil Réduction du volume appels et courriels de plus de 50%
  12. 12. Étude de cas au Cirque du Soleil Conclusions <ul><li>Synthèse de la démarche </li></ul><ul><ul><li>Collecte de données auprès des utilisateurs [documentation des appels/emails reçus au service à la clientèle] </li></ul></ul><ul><ul><li>Identification précise des besoins des clients [analyse sémantique des questions récurrentes des utilisateurs] </li></ul></ul><ul><ul><li>… et du décalage entre les problématiques clients et l’offre du CDS [comparaison avec les caractéristiques ergonomiques du site du CDS] </li></ul></ul><ul><ul><li>Résolution éclairée des problèmes  correction des défauts de l’interface [adaptation de la structure du design actuel en fonction des caractéristiques des tâches problématiques identifiées] </li></ul></ul><ul><li>Intérêt de cette démarche ergonomique </li></ul><ul><ul><li>Melange de méthodologies (analyse de discours, analyse de site web) </li></ul></ul><ul><ul><li>L’ergonomie est efficace quand elle est sur mesure (ad-hoc versus utilisation simple et isolée d’outils tout faits) </li></ul></ul>2 0 1 2 3 4
  13. 13. Le contexte gagnant de l’ergonomie Cadre général Intervenants spécialisés principaux Outils et méthodes Design centré utilisateur Documentation Réflexion Dimensionsde la conception Cycles de développement 3 Réflexion stratégique Analyse et conception des processus et SI Production et évaluation Pour quoi Pour qui Quoi Comment Faire : production, évaluation, lancement Objectifs du site Analyse des besoins Définition des contenus  Architecture d’information Spécifications fonctionnelles  Design de l’interaction  Pré-maquettes conceptuelles  Maquettes graphiques  Intégration  Dévpt/ Programmation Design de l’information (Sémantique et sémiotique) Design navigationnel (menus, raccourcis,…) Design d’interface (éléments I/O) Design graphique (visuel, look-and-feel) Veille concurrentielle Évaluation heuristique Analyse de tâches Classement de cartes Tests Usagers Sondages Cartes cognitives, etc. Tests fonctionnels Tests d’utilisabilité Management Responsable contenu Ergonome des interfaces Ressources techniques Responsable contenu Ergonome des interfaces Infographiste Directeur Artistique Infographiste Développeurs Intégrateurs Ergonome des interfaces … TOUS en équipe! 0 1 2 3 4 © Sandrine Prom Tep
  14. 14. Le contexte gagnant de l’ergonomie Phase de réflexion stratégique Intervenants spécialisés principaux Outils et méthodes Design centré utilisateur Documentation Réflexion Cycle de développement de SI 3 Réflexion stratégique Analyse et conception des processus et SI Production et évaluation Pour quoi Pour qui Quoi Comment Faire : production, évaluation, lancement Objectifs du site Analyse des besoins Définition des contenus  Architecture d’information Spécifications fonctionnelles  Design de l’interaction  Pré-maquettes conceptuelles  Maquettes graphiques  Intégration  Développement et programmation Définition des contenus  Architecture d’information Spécifications fonctionnelles  Design de l’interaction Veille concurrentielle Évaluation heuristique Analyse de tâches Classement de cartes Tests Usagers Sondages Cartes cognitives, etc. Tests fonctionnels Tests d’utilisabilité Management Responsable contenu Ergonome des interfaces Ressources techniques Responsable contenu Ergonome des interfaces Infographiste Directeur Artistique Infographiste Développeurs Intégrateurs Ergonome des interfaces Et TOUS en équipe! Dimension de la conception 0 1 2 3 4
  15. 15. Le contexte gagnant de l’ergonomie Phase d’analyse et de conception Intervenants spécialisés principaux Outils et méthodes Design centré utilisateur Documentation Réflexion Cycle de développement de SI 3 Réflexion stratégique Analyse et conception des processus et SI Production et évaluation Pour quoi Pour qui Quoi Comment Faire : production, évaluation, lancement Objectifs du site Analyse des besoins Définition des contenus  Architecture d’information Spécifications fonctionnelles  Design de l’interaction  Pré-maquettes conceptuelles  Maquettes graphiques  Intégration  Développement et programmation Veille concurrentielle Évaluation heuristique Analyse de tâches Classement de cartes Tests Usagers Sondages Cartes cognitives, etc. Tests fonctionnels Tests d’utilisabilité Management Responsable contenu Ergonome des interfaces Ressources techniques Responsable contenu Ergonome des interfaces Infographiste Directeur Artistique Infographiste Développeurs Intégrateurs Ergonome des interfaces Et TOUS en équipe! Dimension de la conception Design de l’information (Sémantique et sémiotique) Design navigationnel (menus, raccourcis,…) Design d’interface (éléments I/O) Design graphique (visuel, look-and-feel) 0 1 2 3 4
  16. 16. Le contexte gagnant de l’ergonomie Phase de mise en production et évaluation Intervenants spécialisés principaux Outils et méthodes Design centré utilisateur Documentation Réflexion Cycle de développement de SI 3 Réflexion stratégique Analyse et conception des processus et SI Production et évaluation Pour quoi Pour qui Quoi Comment Faire : production, évaluation, lancement Objectifs du site Analyse des besoins Définition des contenus  Architecture d’information Spécifications fonctionnelles  Design de l’interaction  Pré-maquettes conceptuelles  Maquettes graphiques  Intégration  Développement et programmation Définition des contenus  Architecture d’information Spécifications fonctionnelles  Design de l’interaction Veille concurrentielle Évaluation heuristique Analyse de tâches Classement de cartes Tests Usagers Sondages Cartes cognitives, etc. Tests fonctionnels Tests d’utilisabilité Management Responsable contenu Ergonome des interfaces Ressources techniques Responsable contenu Ergonome des interfaces Infographiste Directeur Artistique Infographiste Développeurs Intégrateurs Ergonome des interfaces Et TOUS en équipe! Dimension de la conception 0 1 2 3 4
  17. 17. Nouvelles tendances Évolutions méthodologiques <ul><li>Mesures </li></ul><ul><ul><li>Oculométriques </li></ul></ul><ul><ul><li>Physiologiques (détermination de « l’expérience optimale » de flow par la pulsation cardiaques) </li></ul></ul><ul><ul><li>Des réactions affectives / émotionnelles (ex : utilisation du non verbal, i.e., repérage systématique des expressions faciales) </li></ul></ul><ul><li>Tests usagers </li></ul><ul><ul><li>Évaluation à distance ( Remote testing ) voir PhD Thesis (Castillo, 1997) </li></ul></ul><ul><ul><li>Évaluation automatique ( Automatic testing ) ex. du projet Wauter </li></ul></ul><ul><ul><li>Recrutement des utilisateurs sur la base de leur personnalité cf. MBTI </li></ul></ul><ul><ul><li>Observation déguisée ( Waiting room concept ) </li></ul></ul><ul><ul><li>Tests en environnement « naturel » ( Natural field testing ). Ex : Sony </li></ul></ul><ul><li>Outils de conception </li></ul><ul><ul><li>Logiciel de conception de designs structurels, flow diagrams, spécifications, prototypes, (ex: Axure …) </li></ul></ul><ul><ul><li>Logiciels de support au remue-méninge, description des flux d’actions des utilisateurs, etc (ex : Mindjet MindManager ) </li></ul></ul>4 0 1 2 3 4
  18. 18. <ul><li>Phénomène des communautés en lignes </li></ul><ul><ul><li>Réseautage professionnel </li></ul></ul><ul><ul><ul><li>LinkedIn : http://www.linkedin.com/ </li></ul></ul></ul><ul><ul><ul><li>Viaduc : http://viaduc.com/connexion/ </li></ul></ul></ul><ul><ul><li>Réseautage orienté loisirs </li></ul></ul><ul><ul><ul><li>Myspace : http://www.myspace.com/cassius15again </li></ul></ul></ul><ul><ul><ul><li>Wayn : http://www.wayn.com/ </li></ul></ul></ul><ul><ul><li>Transactions professionnelles </li></ul></ul><ul><ul><ul><li>Agentsolo : http://www.agentsolo.com/ca/fr/ </li></ul></ul></ul><ul><ul><ul><li>Translatorbase : http://www.translatorsbase.com/ </li></ul></ul></ul><ul><ul><li>Agrégation de nouvelles </li></ul></ul><ul><ul><ul><li>Digg : www.digg.com </li></ul></ul></ul><ul><li> Importance croissante de l’identité virtuelle et enjeux de la crédibilité </li></ul>Nouvelles tendances É volutions des comportements usagers 4 0 1 2 3 4
  19. 19. <ul><li>Exemples d’utilisation d’ Ajax </li></ul><ul><ul><li>Remember the milk et Google Maps [Instantanéité] </li></ul></ul><ul><ul><ul><li>http://www.rememberthemilk.com/signup/ </li></ul></ul></ul><ul><ul><ul><li>http://Maps.google.com </li></ul></ul></ul><ul><ul><li>Microsoft live, Google personal page, Net Vibes [personnalisation, flexibilité et transfert du control à l’utilisateur] </li></ul></ul><ul><ul><ul><li>http://www.google.com (personnalized page) </li></ul></ul></ul><ul><ul><ul><li>http://netvibes.com </li></ul></ul></ul><ul><li>Des exemples d’utilisation de Vidéo, 3D, Flash [full user-experience] </li></ul><ul><ul><li>MGM grand http://www.mgmgrand.com/ </li></ul></ul><ul><ul><li>In-Synch challenge http://www.travelersinsynch.com/challenge_popup.html </li></ul></ul>Nouvelles tendances Evolutions technologiques 4 0 1 2 3 4
  20. 20. Alors ? <ul><li>Elle suit la tendance du web qui se complexifie : </li></ul><ul><li> L’utilisabilité est de plus en plus mature </li></ul><ul><li> L’utilisabilité ne peut plus se permettre d’être aussi simple qu’elle l’était </li></ul>Oui, l'utilisabilité a toujours la cote!
  21. 21. Fin de la présentation <ul><li>Merci de votre attention! </li></ul><ul><li>Présentation disponible sur: </li></ul><ul><li>www.ergonomia.ca </li></ul>
  22. 22. Annexes <ul><li>A1 - Nouvelles tendances - Évolutions comportementales </li></ul><ul><li>A2 - Nouvelles tendances - Évolutions technologiques </li></ul>
  23. 23. Nouvelles tendances Evolutions comportementales - Exemples http://www.linkedin.com http://www.myspace.com/cassius15again A1
  24. 24. Nouvelles tendances Evolutions comportementales - Exemples http://www.digg.com A1 http://www.agentsolo.com
  25. 25. Nouvelles tendances Évolutions technologiques - Exemples http://www.rememberthemilk.com/signup/ A2
  26. 26. Nouvelles tendances Évolutions technologiques - Exemples http://netvibes.com A2
  27. 27. Nouvelles tendances Évolutions technologiques - Exemples http://www.mgmgrand.com/ A2

×