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

Plan de la présentation 0. Plan de la présentation Mise en contexte Interaction Homme Machine (IHM), Interaction Personne Système Importance de l’utilisabilité dans un contexte d’entreprise Étude de cas au Cirque du Soleil Le contexte gagnant de l’ergonomie Outils, documents de support, acteurs, etc. Les nouvelles tendances Méthodologiques, technologiques, comportements des usagers 0 0 1 2 3 4

0. Plan de la présentation

Mise en contexte

Interaction Homme Machine (IHM), Interaction Personne Système

Importance de l’utilisabilité dans un contexte d’entreprise

Étude de cas au Cirque du Soleil

Le contexte gagnant de l’ergonomie

Outils, documents de support, acteurs, etc.

Les nouvelles tendances

Méthodologiques, technologiques, comportements des usagers

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é Plusieurs perspectives formant une approche plutôt qu’une définition figée et universelle Une qualité d’un produit (facile à utiliser) Une qualité d’ interaction ou d’expérience Un processus Une philosophie Un devoir de concepteur de produits interactifs Une nécessité économique (ROI!)  Bref…une démarche ! 1 0 1 2 3 4

Plusieurs perspectives formant une approche plutôt qu’une définition figée et universelle

Une qualité d’un produit (facile à utiliser)

Une qualité d’ interaction ou d’expérience

Un processus

Une philosophie

Un devoir de concepteur de produits interactifs

Une nécessité économique (ROI!)

 Bref…une démarche !

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

Étude de cas au Cirque du Soleil Mise en situation Problèmes rencontrés par le CDS Une quantité d’appels/emails anormale au service à la clientèle du CDS 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 ? »]  Soupçons du côté du site web 2 Allier diagnostic et résolution de problème 0 1 2 3 4 Être orienté utilisateur Approche préconisée

Problèmes rencontrés par le CDS

Une quantité d’appels/emails anormale au service à la clientèle du CDS

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 ? »]

 Soupçons du côté du site web

É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

É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

É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

É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

É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%

Étude de cas au Cirque du Soleil Conclusions Synthèse de la démarche Collecte de données auprès des utilisateurs [documentation des appels/emails reçus au service à la clientèle] Identification précise des besoins des clients [analyse sémantique des questions récurrentes des utilisateurs] … et du décalage entre les problématiques clients et l’offre du CDS [comparaison avec les caractéristiques ergonomiques du site du CDS] 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] Intérêt de cette démarche ergonomique Melange de méthodologies (analyse de discours, analyse de site web) L’ergonomie est efficace quand elle est sur mesure (ad-hoc versus utilisation simple et isolée d’outils tout faits) 2 0 1 2 3 4

Synthèse de la démarche

Collecte de données auprès des utilisateurs [documentation des appels/emails reçus au service à la clientèle]

Identification précise des besoins des clients [analyse sémantique des questions récurrentes des utilisateurs]

… et du décalage entre les problématiques clients et l’offre du CDS [comparaison avec les caractéristiques ergonomiques du site du CDS]

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]

Intérêt de cette démarche ergonomique

Melange de méthodologies (analyse de discours, analyse de site web)

L’ergonomie est efficace quand elle est sur mesure (ad-hoc versus utilisation simple et isolée d’outils tout faits)

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

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

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

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

Nouvelles tendances Évolutions méthodologiques Mesures Oculométriques Physiologiques (détermination de « l’expérience optimale » de flow par la pulsation cardiaques) Des réactions affectives / émotionnelles (ex : utilisation du non verbal, i.e., repérage systématique des expressions faciales) Tests usagers Évaluation à distance ( Remote testing ) voir PhD Thesis (Castillo, 1997) Évaluation automatique ( Automatic testing ) ex. du projet Wauter Recrutement des utilisateurs sur la base de leur personnalité cf. MBTI Observation déguisée ( Waiting room concept ) Tests en environnement « naturel » ( Natural field testing ). Ex : Sony Outils de conception Logiciel de conception de designs structurels, flow diagrams, spécifications, prototypes, (ex: Axure …) Logiciels de support au remue-méninge, description des flux d’actions des utilisateurs, etc (ex : Mindjet MindManager ) 4 0 1 2 3 4

Mesures

Oculométriques

Physiologiques (détermination de « l’expérience optimale » de flow par la pulsation cardiaques)

Des réactions affectives / émotionnelles (ex : utilisation du non verbal, i.e., repérage systématique des expressions faciales)

Tests usagers

Évaluation à distance ( Remote testing ) voir PhD Thesis (Castillo, 1997)

Évaluation automatique ( Automatic testing ) ex. du projet Wauter

Recrutement des utilisateurs sur la base de leur personnalité cf. MBTI

Observation déguisée ( Waiting room concept )

Tests en environnement « naturel » ( Natural field testing ). Ex : Sony

Outils de conception

Logiciel de conception de designs structurels, flow diagrams, spécifications, prototypes, (ex: Axure …)

Logiciels de support au remue-méninge, description des flux d’actions des utilisateurs, etc (ex : Mindjet MindManager )

Phénomène des communautés en lignes Réseautage professionnel LinkedIn : http://www.linkedin.com/ Viaduc : http://viaduc.com/connexion/ Réseautage orienté loisirs Myspace : http://www.myspace.com/cassius15again Wayn : http://www.wayn.com/ Transactions professionnelles Agentsolo : http://www.agentsolo.com/ca/fr/ Translatorbase : http://www.translatorsbase.com/ Agrégation de nouvelles Digg : www.digg.com  Importance croissante de l’identité virtuelle et enjeux de la crédibilité Nouvelles tendances É volutions des comportements usagers 4 0 1 2 3 4

Phénomène des communautés en lignes

Réseautage professionnel

LinkedIn : http://www.linkedin.com/

Viaduc : http://viaduc.com/connexion/

Réseautage orienté loisirs

Myspace : http://www.myspace.com/cassius15again

Wayn : http://www.wayn.com/

Transactions professionnelles

Agentsolo : http://www.agentsolo.com/ca/fr/

Translatorbase : http://www.translatorsbase.com/

Agrégation de nouvelles

Digg : www.digg.com

 Importance croissante de l’identité virtuelle et enjeux de la crédibilité

Exemples d’utilisation d’ Ajax Remember the milk et Google Maps [Instantanéité] http://www.rememberthemilk.com/signup/ http://Maps.google.com Microsoft live, Google personal page, Net Vibes [personnalisation, flexibilité et transfert du control à l’utilisateur] http://www.google.com (personnalized page) http://netvibes.com Des exemples d’utilisation de Vidéo, 3D, Flash [full user-experience] MGM grand http://www.mgmgrand.com/ In-Synch challenge http://www.travelersinsynch.com/challenge_popup.html Nouvelles tendances Evolutions technologiques 4 0 1 2 3 4

Exemples d’utilisation d’ Ajax

Remember the milk et Google Maps [Instantanéité]

http://www.rememberthemilk.com/signup/

http://Maps.google.com

Microsoft live, Google personal page, Net Vibes [personnalisation, flexibilité et transfert du control à l’utilisateur]

http://www.google.com (personnalized page)

http://netvibes.com

Des exemples d’utilisation de Vidéo, 3D, Flash [full user-experience]

MGM grand http://www.mgmgrand.com/

In-Synch challenge http://www.travelersinsynch.com/challenge_popup.html

Alors ? Elle suit la tendance du web qui se complexifie :  L’utilisabilité est de plus en plus mature  L’utilisabilité ne peut plus se permettre d’être aussi simple qu’elle l’était Oui, l'utilisabilité a toujours la cote!

Elle suit la tendance du web qui se complexifie :

 L’utilisabilité est de plus en plus mature

 L’utilisabilité ne peut plus se permettre d’être aussi simple qu’elle l’était

Fin de la présentation Merci de votre attention! Présentation disponible sur: www.ergonomia.ca

Merci de votre attention!

Présentation disponible sur:

www.ergonomia.ca

Annexes A1 - Nouvelles tendances - Évolutions comportementales A2 - Nouvelles tendances - Évolutions technologiques

A1 - Nouvelles tendances - Évolutions comportementales

A2 - Nouvelles tendances - Évolutions technologiques

Nouvelles tendances Evolutions comportementales - Exemples http://www.linkedin.com http://www.myspace.com/cassius15again A1

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