SlideShare une entreprise Scribd logo
1  sur  80
B.A.B.A du Design d’App mobile
=
Conception centrée utilisateur
Loïc Nunez
Montreal appTalks
Janvier 2014
ca.linkedin.com/in/loicnunez
De quoi on parle ce soir ?
1. Conception centrée utilisateur
2. Recherche utilisateur
Pourquoi ?
Comment ?
Objectif ?
Quels outils ?
Exemple du test utilisateur « agile »
3. Bonnes pratiques, trucs et astuces
1. Conception centrée utilisateur
La conception centrée utilisateur consiste à
considérer les utilisateurs, leurs besoins, leurs
contextes d’usages, leurs motivations et leurs
enjeux au centre de la conception d’un produit
ou d’un service.
1. Conception centrée utilisateur

Elle repose sur la norme ISO 9241-210
1. Conception centrée utilisateur
Définition
Le concept d'utilisateur dans ce contexte est à
deux niveaux :
1. Conception centrée utilisateur
1. L'utilisateur réel :
celui qui utilisera ou utilise déjà le produit dans
sa version actuelle.
1. Conception centrée utilisateur
2. L'utilisateur potentiel :
qui a les mêmes caractéristiques, et qui
représente les usagers cibles. Utilisés pour la
recherche.
1. Conception centrée utilisateur
Concept
Pour augmenter les chances de succès d’un
produit, ce sont les utilisateurs qui doivent
orienter ses caractéristiques, et non la
technologie ou les seuls besoins d’affaires.
1. Conception centrée utilisateur
Concept
C’est tout le processus de conception qui est
orienté utilisateur. Il doit être inclus aux
prémices du projet (validation du concept), et
de façon itérative (validation des étapes).
1. Conception centrée utilisateur
Étapes
1. Conception centrée utilisateur
Principe 1/5
Une préoccupation amont des utilisateurs, de
leurs tâches et de leur environnement.
1. Conception centrée utilisateur
Principe 2/5
La participation active de ces utilisateurs, ainsi
que la compréhension claire de leurs besoins et
des exigences liées à leurs activités, besoins,
motivations…
1. Conception centrée utilisateur
Principe 3/5
Une répartition appropriée des fonctions entre
les utilisateurs, les besoins d’affaires et la
technologie.
1. Conception centrée utilisateur
Principe 4/5
L'itération des solutions de conception : on
peut s'imaginer le cycle comme une spirale,
une démarche qui boucle et reboucle jusqu'à
ce que le système satisfasse aux exigences
définies au départ.
1. Conception centrée utilisateur
Principe 5/5
L'intervention d'une équipe de conception
multidisciplinaire. La CCU met l’emphase sur la
notion d'expérience utilisateur comme étant au
carrefour de disciplines différentes : recherche,
ergonomie, communications, design, marketing,
technologie, qualité, support ...
1. Conception centrée utilisateur
En résumé
Créer un produit de façon itérative, en plaçant au
cœur de la démarche de conception ses
utilisateurs cibles
2. La recherche utilisateur

Pourquoi ?
2. La recherche utilisateur
2. La recherche utilisateur
Pourquoi ?
Pour connaître vos usagers :
✓Besoins
✓Contextes d’usages
✓Manques
✓Frustrations
✓Expérience avec la marque et le produit
✓…
2. La recherche utilisateur

Comment ?
2. La recherche utilisateur

Comment ?
1. La recherche utilisateur
Comment ?
AVANT :
Analyse de l’activité, enquêtes, groupes de discussions, Personas, modèle mental

PENDANT
Classement de carte, Scénarios d’usages, Tests utilisateurs

APRÈS
Tests utilisateurs, analyse experte, mise à jour des Personas
2. La recherche utilisateur

Objectifs ?
2. La recherche utilisateur

Objectifs ?
2. La recherche utilisateur
Objectifs ?

Faire évoluer ses besoins d’affaires pour mieux rejoindre ceux des usagers
2. La recherche utilisateur

Quels outils ?
2. La recherche utilisateur
2. La recherche utilisateur

Exemple du test utilisateur
2. Tests utilisateurs
2. Tests utilisateurs
Objectifs
✓Pour observer des usagers qui utilisent RÉELLEMENT
votre service
✓Pour faire ressortir rapidement les bloquants
✓Pour vérifier si l’usager peut effectuer sa tâche avec
efficacité, efficience et satisfaction … sans erreurs
…et avec une courbe d’apprentissage rapide.
2. Tests utilisateurs
Méthode
- Créer un plan de test qui reflète les activités sur le
produit
- Recruter des participants représentatifs des
utilisateurs cible
- Observer 1 à 1 les participants en situation d’usage
- Mesurer l’efficacité (réussite/échec), l’efficience
(temps de réalisation), la satisfaction (adéquation
aux attentes, convivialité), le nombre d’erreurs et la
courbe d’apprentissage
3. Bonnes pratiques, trucs et astuces
3. …/ Gestuelles

Touch Gesture Reference Guide:

static.lukew.com/TouchGestureGuide.pdf
3. …/ Gestuelles
En résumé

- Utilisez les gestuelles simples et connues
pour les interactions associées aux
principales tâches
- Utilisez des gestuelles « multitouch » plus
complexes seulement pour des fonctions
avancées, et secondaires
3. …/ Les usages avec un mobile

http://www.uc.edu/content/dam/uc/ucomm/docs/mobile/mobile-usability_highlighted.pdf
3. …/ Les usages avec un mobile
En résumé 1/3
- Les sites Web sont plus utilisés que les Apps

- L’usage des Apps est préféré pour les usages
fréquents auxquels l’utilisateur est attaché
(Facebook, Plan…)
3. …/ Les usages avec un mobile
En résumé 2/3
- Les situations d’usages évoluent avec les
habitudes, la performance des réseaux, et
les possibilités des téléphones intelligents
(géolocalisation, écran HD…)
3. …/ Les usages avec un mobile
En résumé 3/3
- Nombreux sont les utilisateurs qui préfèrent
naviguer sur leur canapé avec leur mobile
plutôt que leur laptop. Ils s’attendent donc à
obtenir les mêmes services, mais adaptés à
leur (petit) écran tactile
3. …/ Application ou site Web ?
WEB

APPLICATION

+

Pas d’installation requise
1 version pour tous les OS
Coûts de développement plus bas
La montée en puissance de l’HTML 5
Pas de mises à jour nécessaire
Accessible directement via Google

Interaction plus rapides
Facilement accessible sur le mobile
Adapté au guide de l’OS
Mode hors ligne facilement disponible

-

Pas adapté aux guides des OS
Plus lent qu’une App native
Mode hors ligne difficile, mais ça vient
Créer un raccourci : fonction peu connue

Coûts de développements plus élevés
Nécessite une installation, même pour un
usage unique
Les contraintes imposées par le App Store
Une version différente pour chaque OS
Mises à jour fréquentes
3. …/ Les grilles d’analyses UX
Les principales
- Mölich et Nielsen (1990)
- Bastien et Scapin (1993)

Ergonomie

- Nielsen (1994)

- Brangier et Al (2011)

Persuasion
3. …/ Les grilles d’analyses UX
Bastien et Scapin
1.
2.
3.
4.
5.
6.
7.
8.

Guidage.
Charge de travail.
Contrôle explicite.
Adaptabilité.
Gestion des erreurs.
Homogénéité / cohérence.
Signifiance des codes et dénomination.
Compatibilité.
3. …/ Les grilles d’analyses UX
Brangier et Al

Plus de détails : http://www.univ-metz.fr/ufr/sha/2lp-etic/ANEBSK_SELF_Toulouse2009_V3x.pdf
3. …/ Les grilles d’analyses UX
Exemple d’évaluation experte
3. …/ Architecture d’information
4 étapes
1 - Définir les contenus et services

2 - Définir une stratégie
3 - Catégoriser les contenus
4 - Organiser et structurer les contenus
3. …/ Architecture d’information
4 étapes
Définir les contenus

Catégoriser les contenus

Structurer les contenus
3. …/ Architecture d’information
Outils de recherche utilisateur : classement de carte
3. …/ Bonnes pratiques de conception
Guidage
3. …/ Bonnes pratiques de conception
Guidage

Un bouton « Back » bien en évidence pour revenir
en arrière (non utile pour Android)

Un rappel du titre de l’article sélectionné dans
la liste d’articles

La présence de pastille qui invite l’utilisateur
à « balayer » l’écran. C’est aussi un bon indicateur
du nombre de page dans l’article
3. …/ Bonnes pratiques de conception
Guidage

Un titre clair qui appel à l’action

Une grande image qui assure un bon niveau
de « cliquabilité »

Une flèche à droite de la cellule qui indique
une continuité du contenu
3. …/ Bonnes pratiques de conception
Guidage

Un accès direct au menu de navigation, identique
sur tous les écrans de l’App

Un bouton « Play » indiquant la présence d’une vidéo

Un icône « commentaire » qui indique le nombre
de commentaires effectués sur cet article
3. …/ Bonnes pratiques de conception
Charge de travail

Wikipédia

Bourse (iOS)

The Guardian
3. …/ Bonnes pratiques de conception
Charge de travail

Un texte d’introduction permet de cerner
rapidement un sujet sans devoir lire tout l’article

La catégorisation des contenus facilite :
- la compréhension de la structure globale
- l’accès direct à une information
Le mode « Afficher / Masquer » facilite :
- le parcours rapide d’un (petit) écran
- l’affichage d’un seul type de contenu à la fois
3. …/ Bonnes pratiques de conception
Charge de travail

Une indication rapide de la tendance positive
ou négative des différent niveau de valeurs

Une vue des principales valeurs boursières, qui
évite la nécessité de parcourir toutes les cotes

Une vue graphique de l’évolution du marché, plus
simple qu’un tableau complexe de données
3. …/ Bonnes pratiques de conception
Charge de travail

Une consigne courte et simple pour réaliser la tâche

Un accès simple et très souvent utilisé dans les
Apps pour effectuer le changement de l’ordre des
sections
Un système d’interaction simple et ludique pour
choisir un paramètre
3. …/ Bonnes pratiques de conception
Contrôle explicite

The Guardian

STM

Facebook
3. …/ Bonnes pratiques de conception
Contrôle explicite

Une action claire et simple pour le téléchargement
de plusieurs sections à la fois

Une action directe sur le paramétrage de la fonction
3. …/ Bonnes pratiques de conception
Contrôle explicite

- L’interface propose une mise à jour non obligatoire
- La mise à jour ne se fait pas de façon automatique
et laisse le contrôle à l’utilisateur
3. …/ Bonnes pratiques de conception
Contrôle explicite

L’interface propose l’accès à de nouvelles données,
mais ne force pas la réactualisation automatique
de la page

L’utilisateur à le contrôle de son interface : il peu
choisir d’afficher de nouvelles informations ou de
continuer à consulter le reste de la page
3. …/ Bonnes pratiques de conception
Adaptabilité

La Presse

iOS

Météo Média
3. …/ Bonnes pratiques de conception
Adaptabilité

L’interface permet de régler des paramètres de
lecture liés aux caractéristiques et besoins des
utilisateurs

L’utilisateur à la possibilité de modifier l’ordre des
contenus selon ses goûts et habitudes d’usage
3. …/ Bonnes pratiques de conception
Adaptabilité

L’interface permet d’ajouter et de supprimer des
types de contenus selon les besoins de l’utilisateur

L’utilisateur à la possibilité de modifier l’ordre des
contenus selon ses besoins
3. …/ Bonnes pratiques de conception
Adaptabilité

L’interface permet de régler des paramètres
d’affichage liés aux caractéristiques et besoins des
utilisateurs
3. …/ Bonnes pratiques de conception
Gestion des erreurs

Desjardins

La Presse

Site Web Marmiton.ca
3. …/ Bonnes pratiques de conception
Gestion des erreurs

L’interface affiche une alerte pour indiquer la
présence et le type d’erreur
3. …/ Bonnes pratiques de conception
Gestion des erreurs

L’interface affiche une alerte pour indiquer la
présence et le type d’erreur

L’interface propose un accès direct pour récupérer
ses informations de connexion en cas d’erreur ou
d’oublie de ses informations
3. …/ Bonnes pratiques de conception
Gestion des erreurs

L’interface affiche la liste des erreurs et leurs
emplacements
Attention : la couleur n’est pas suffisante pour un
bon repérage. Il est conseillé d’ajouter d’autres
indices visuels, comme l’encadrement d’un champ
ou des éléments iconographiques (ex : )
3. …/ Bonnes pratiques de conception
Homogénéité / Cohérence

Radio Canada

La Presse

Facebook
3. …/ Bonnes pratiques de conception
Homogénéité / Cohérence

L’interface affiche les mêmes contrôles utilisateurs
pour l’ensemble des pages d’articles

L’interface affiche le même format d’écran
pour l’ensemble des pages d’articles
3. …/ Bonnes pratiques de conception
Homogénéité / Cohérence
L’interface affiche un
mode similaire de
présentation des
informations sur les
version iPhone et
iPAD du même
produit

L’ordre des items du
menu et des blocs
d’information de la
page d’accueil est le
même
3. …/ Bonnes pratiques de conception
Homogénéité / Cohérence

L’interface affiche les
contenus et une mise
en page très proche
entre les platesformes mobile et
Web
3. …/ Bonnes pratiques de conception
Signifiance des codes et dénomination

duProprio

Google +

Ted Mobile
3. …/ Bonnes pratiques de conception
Signifiance des codes et dénomination

Cet icône, en forme de cible ou de viseur, permet de
situer la position de l’utilisateur sur la carte

La flèche indique l’accès au détail du contenu

Les icônes en forme de maison indiquent la
présence d’une maison à vendre
3. …/ Bonnes pratiques de conception
Signifiance des codes et dénomination

Selon le niveau de familiarité des utilisateurs cible
avec les icônes du même genre d’interface et d’OS,
on affiche l’accès aux fonctionnalité par iconographie
ou par texte
3. …/ Bonnes pratiques de conception
Signifiance des codes et dénomination

Les icônes sont accompagnés de leurs libellés
pour une meilleure compréhension de leurs
fonctions
3. …/ Bonnes pratiques de conception
Compatibilité

CBC

Linkedin

Flipboard
3. …/ Bonnes pratiques de conception
Compatibilité

L’interface s’adapte pour être compatible avec le
niveau de connaissance de l’utilisateur :
un message explique comment créer
un raccourci du site sur le iPhone
3. …/ Bonnes pratiques de conception
Compatibilité

L’interface de la version Web est compatible
avec les gestuelles possibles sur un
écran tactile
3. …/ Bonnes pratiques de conception
Compatibilité

L’interface rend accessible une fonctionnalité
multiplateforme, avec une aide claire et
compréhensible selon les caractéristiques des
utilisateurs cibles
Quelques sources à explorer
UXPA Québec : http://www.uxpaquebec.org/
Tout le monde UX : http://toutlemonde-ux.com/
Ergonomia : http://www.ergonomia.ca/
UX Mag / Six Mobile Myths : http://uxmag.com/articles/six-mobile-myths
UX Archive : http://uxarchive.com/
Design for mobile part 1 & 2 : http://goo.gl/e7qdFG
Formations en Ergonomie des interfaces mobile : http://goo.gl/jnXsZr
Formation Universitaire à Polytechnique Montréal : http://goo.gl/4wQf3V
Merci !!
Maîtrises (master 2) en :
- Ergonomie cognitive (2000)
- Psychologie du travail (2004)
Certification en :
Accessibilité du Web (2006)

Courriel :
loic_nunez@yahoo.fr
Linkedin :
ca.linkedin.com/in/loicnunez

Contenu connexe

Tendances

Tendances (6)

Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
 
Etudes Utilisateur et ROI
Etudes Utilisateur et ROI Etudes Utilisateur et ROI
Etudes Utilisateur et ROI
 
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie webCours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
 
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directifCours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
 
Projet Music Brainz
Projet Music BrainzProjet Music Brainz
Projet Music Brainz
 

Similaire à Mtl apptalks ux mobile et ucd - janvier 2014

Engagez vos utilisateurs
Engagez vos utilisateursEngagez vos utilisateurs
Engagez vos utilisateurs
Simon Bédard
 
Hamdaoui abdelilah
Hamdaoui abdelilahHamdaoui abdelilah
Hamdaoui abdelilah
Moez Moezm
 
2.presentation merise
2.presentation merise2.presentation merise
2.presentation merise
shaheenyaar
 
Innovation + Mobilité = ROI
Innovation + Mobilité = ROIInnovation + Mobilité = ROI
Innovation + Mobilité = ROI
Klee Interactive
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
PMI-Montréal
 

Similaire à Mtl apptalks ux mobile et ucd - janvier 2014 (20)

Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
 
ESG - Lesson 5
ESG - Lesson 5ESG - Lesson 5
ESG - Lesson 5
 
Engagez vos utilisateurs
Engagez vos utilisateursEngagez vos utilisateurs
Engagez vos utilisateurs
 
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours IntroductionErgonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
 
Hamdaoui abdelilah
Hamdaoui abdelilahHamdaoui abdelilah
Hamdaoui abdelilah
 
Rapport de projet symphony
Rapport de projet symphonyRapport de projet symphony
Rapport de projet symphony
 
Prototype rapport
Prototype rapportPrototype rapport
Prototype rapport
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
 
Klee Group - Ergonomie - Présentation à la STAT (Section Technique de l'Armée...
Klee Group - Ergonomie - Présentation à la STAT (Section Technique de l'Armée...Klee Group - Ergonomie - Présentation à la STAT (Section Technique de l'Armée...
Klee Group - Ergonomie - Présentation à la STAT (Section Technique de l'Armée...
 
UX guidelines
UX guidelinesUX guidelines
UX guidelines
 
2.presentation merise
2.presentation merise2.presentation merise
2.presentation merise
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 
facile les tests utilisateur d'accessibilité
facile les tests utilisateur d'accessibilitéfacile les tests utilisateur d'accessibilité
facile les tests utilisateur d'accessibilité
 
Innovation + Mobilité = ROI
Innovation + Mobilité = ROIInnovation + Mobilité = ROI
Innovation + Mobilité = ROI
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
 
2UNL - PARISWEB 2010
2UNL - PARISWEB 20102UNL - PARISWEB 2010
2UNL - PARISWEB 2010
 
Boostez le ROI de vos dispositifs digitaux
Boostez le ROI de vos dispositifs digitauxBoostez le ROI de vos dispositifs digitaux
Boostez le ROI de vos dispositifs digitaux
 
Un exemple de méthodologie de conception orientée utilisateur de produits in...
 Un exemple de méthodologie de conception orientée utilisateur de produits in... Un exemple de méthodologie de conception orientée utilisateur de produits in...
Un exemple de méthodologie de conception orientée utilisateur de produits in...
 

Mtl apptalks ux mobile et ucd - janvier 2014

  • 1. B.A.B.A du Design d’App mobile = Conception centrée utilisateur Loïc Nunez Montreal appTalks Janvier 2014 ca.linkedin.com/in/loicnunez
  • 2. De quoi on parle ce soir ? 1. Conception centrée utilisateur 2. Recherche utilisateur Pourquoi ? Comment ? Objectif ? Quels outils ? Exemple du test utilisateur « agile » 3. Bonnes pratiques, trucs et astuces
  • 3. 1. Conception centrée utilisateur La conception centrée utilisateur consiste à considérer les utilisateurs, leurs besoins, leurs contextes d’usages, leurs motivations et leurs enjeux au centre de la conception d’un produit ou d’un service.
  • 4. 1. Conception centrée utilisateur Elle repose sur la norme ISO 9241-210
  • 5. 1. Conception centrée utilisateur Définition Le concept d'utilisateur dans ce contexte est à deux niveaux :
  • 6. 1. Conception centrée utilisateur 1. L'utilisateur réel : celui qui utilisera ou utilise déjà le produit dans sa version actuelle.
  • 7. 1. Conception centrée utilisateur 2. L'utilisateur potentiel : qui a les mêmes caractéristiques, et qui représente les usagers cibles. Utilisés pour la recherche.
  • 8. 1. Conception centrée utilisateur Concept Pour augmenter les chances de succès d’un produit, ce sont les utilisateurs qui doivent orienter ses caractéristiques, et non la technologie ou les seuls besoins d’affaires.
  • 9. 1. Conception centrée utilisateur Concept C’est tout le processus de conception qui est orienté utilisateur. Il doit être inclus aux prémices du projet (validation du concept), et de façon itérative (validation des étapes).
  • 10. 1. Conception centrée utilisateur Étapes
  • 11. 1. Conception centrée utilisateur Principe 1/5 Une préoccupation amont des utilisateurs, de leurs tâches et de leur environnement.
  • 12. 1. Conception centrée utilisateur Principe 2/5 La participation active de ces utilisateurs, ainsi que la compréhension claire de leurs besoins et des exigences liées à leurs activités, besoins, motivations…
  • 13. 1. Conception centrée utilisateur Principe 3/5 Une répartition appropriée des fonctions entre les utilisateurs, les besoins d’affaires et la technologie.
  • 14. 1. Conception centrée utilisateur Principe 4/5 L'itération des solutions de conception : on peut s'imaginer le cycle comme une spirale, une démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ.
  • 15. 1. Conception centrée utilisateur Principe 5/5 L'intervention d'une équipe de conception multidisciplinaire. La CCU met l’emphase sur la notion d'expérience utilisateur comme étant au carrefour de disciplines différentes : recherche, ergonomie, communications, design, marketing, technologie, qualité, support ...
  • 16. 1. Conception centrée utilisateur En résumé Créer un produit de façon itérative, en plaçant au cœur de la démarche de conception ses utilisateurs cibles
  • 17. 2. La recherche utilisateur Pourquoi ?
  • 18. 2. La recherche utilisateur
  • 19. 2. La recherche utilisateur Pourquoi ? Pour connaître vos usagers : ✓Besoins ✓Contextes d’usages ✓Manques ✓Frustrations ✓Expérience avec la marque et le produit ✓…
  • 20. 2. La recherche utilisateur Comment ?
  • 21. 2. La recherche utilisateur Comment ?
  • 22. 1. La recherche utilisateur Comment ? AVANT : Analyse de l’activité, enquêtes, groupes de discussions, Personas, modèle mental PENDANT Classement de carte, Scénarios d’usages, Tests utilisateurs APRÈS Tests utilisateurs, analyse experte, mise à jour des Personas
  • 23. 2. La recherche utilisateur Objectifs ?
  • 24. 2. La recherche utilisateur Objectifs ?
  • 25. 2. La recherche utilisateur Objectifs ? Faire évoluer ses besoins d’affaires pour mieux rejoindre ceux des usagers
  • 26. 2. La recherche utilisateur Quels outils ?
  • 27. 2. La recherche utilisateur
  • 28. 2. La recherche utilisateur Exemple du test utilisateur
  • 30. 2. Tests utilisateurs Objectifs ✓Pour observer des usagers qui utilisent RÉELLEMENT votre service ✓Pour faire ressortir rapidement les bloquants ✓Pour vérifier si l’usager peut effectuer sa tâche avec efficacité, efficience et satisfaction … sans erreurs …et avec une courbe d’apprentissage rapide.
  • 31. 2. Tests utilisateurs Méthode - Créer un plan de test qui reflète les activités sur le produit - Recruter des participants représentatifs des utilisateurs cible - Observer 1 à 1 les participants en situation d’usage - Mesurer l’efficacité (réussite/échec), l’efficience (temps de réalisation), la satisfaction (adéquation aux attentes, convivialité), le nombre d’erreurs et la courbe d’apprentissage
  • 32. 3. Bonnes pratiques, trucs et astuces
  • 33. 3. …/ Gestuelles Touch Gesture Reference Guide: static.lukew.com/TouchGestureGuide.pdf
  • 34. 3. …/ Gestuelles En résumé - Utilisez les gestuelles simples et connues pour les interactions associées aux principales tâches - Utilisez des gestuelles « multitouch » plus complexes seulement pour des fonctions avancées, et secondaires
  • 35. 3. …/ Les usages avec un mobile http://www.uc.edu/content/dam/uc/ucomm/docs/mobile/mobile-usability_highlighted.pdf
  • 36. 3. …/ Les usages avec un mobile En résumé 1/3 - Les sites Web sont plus utilisés que les Apps - L’usage des Apps est préféré pour les usages fréquents auxquels l’utilisateur est attaché (Facebook, Plan…)
  • 37. 3. …/ Les usages avec un mobile En résumé 2/3 - Les situations d’usages évoluent avec les habitudes, la performance des réseaux, et les possibilités des téléphones intelligents (géolocalisation, écran HD…)
  • 38. 3. …/ Les usages avec un mobile En résumé 3/3 - Nombreux sont les utilisateurs qui préfèrent naviguer sur leur canapé avec leur mobile plutôt que leur laptop. Ils s’attendent donc à obtenir les mêmes services, mais adaptés à leur (petit) écran tactile
  • 39. 3. …/ Application ou site Web ? WEB APPLICATION + Pas d’installation requise 1 version pour tous les OS Coûts de développement plus bas La montée en puissance de l’HTML 5 Pas de mises à jour nécessaire Accessible directement via Google Interaction plus rapides Facilement accessible sur le mobile Adapté au guide de l’OS Mode hors ligne facilement disponible - Pas adapté aux guides des OS Plus lent qu’une App native Mode hors ligne difficile, mais ça vient Créer un raccourci : fonction peu connue Coûts de développements plus élevés Nécessite une installation, même pour un usage unique Les contraintes imposées par le App Store Une version différente pour chaque OS Mises à jour fréquentes
  • 40. 3. …/ Les grilles d’analyses UX Les principales - Mölich et Nielsen (1990) - Bastien et Scapin (1993) Ergonomie - Nielsen (1994) - Brangier et Al (2011) Persuasion
  • 41. 3. …/ Les grilles d’analyses UX Bastien et Scapin 1. 2. 3. 4. 5. 6. 7. 8. Guidage. Charge de travail. Contrôle explicite. Adaptabilité. Gestion des erreurs. Homogénéité / cohérence. Signifiance des codes et dénomination. Compatibilité.
  • 42. 3. …/ Les grilles d’analyses UX Brangier et Al Plus de détails : http://www.univ-metz.fr/ufr/sha/2lp-etic/ANEBSK_SELF_Toulouse2009_V3x.pdf
  • 43. 3. …/ Les grilles d’analyses UX Exemple d’évaluation experte
  • 44. 3. …/ Architecture d’information 4 étapes 1 - Définir les contenus et services 2 - Définir une stratégie 3 - Catégoriser les contenus 4 - Organiser et structurer les contenus
  • 45. 3. …/ Architecture d’information 4 étapes Définir les contenus Catégoriser les contenus Structurer les contenus
  • 46. 3. …/ Architecture d’information Outils de recherche utilisateur : classement de carte
  • 47. 3. …/ Bonnes pratiques de conception Guidage
  • 48. 3. …/ Bonnes pratiques de conception Guidage Un bouton « Back » bien en évidence pour revenir en arrière (non utile pour Android) Un rappel du titre de l’article sélectionné dans la liste d’articles La présence de pastille qui invite l’utilisateur à « balayer » l’écran. C’est aussi un bon indicateur du nombre de page dans l’article
  • 49. 3. …/ Bonnes pratiques de conception Guidage Un titre clair qui appel à l’action Une grande image qui assure un bon niveau de « cliquabilité » Une flèche à droite de la cellule qui indique une continuité du contenu
  • 50. 3. …/ Bonnes pratiques de conception Guidage Un accès direct au menu de navigation, identique sur tous les écrans de l’App Un bouton « Play » indiquant la présence d’une vidéo Un icône « commentaire » qui indique le nombre de commentaires effectués sur cet article
  • 51. 3. …/ Bonnes pratiques de conception Charge de travail Wikipédia Bourse (iOS) The Guardian
  • 52. 3. …/ Bonnes pratiques de conception Charge de travail Un texte d’introduction permet de cerner rapidement un sujet sans devoir lire tout l’article La catégorisation des contenus facilite : - la compréhension de la structure globale - l’accès direct à une information Le mode « Afficher / Masquer » facilite : - le parcours rapide d’un (petit) écran - l’affichage d’un seul type de contenu à la fois
  • 53. 3. …/ Bonnes pratiques de conception Charge de travail Une indication rapide de la tendance positive ou négative des différent niveau de valeurs Une vue des principales valeurs boursières, qui évite la nécessité de parcourir toutes les cotes Une vue graphique de l’évolution du marché, plus simple qu’un tableau complexe de données
  • 54. 3. …/ Bonnes pratiques de conception Charge de travail Une consigne courte et simple pour réaliser la tâche Un accès simple et très souvent utilisé dans les Apps pour effectuer le changement de l’ordre des sections Un système d’interaction simple et ludique pour choisir un paramètre
  • 55. 3. …/ Bonnes pratiques de conception Contrôle explicite The Guardian STM Facebook
  • 56. 3. …/ Bonnes pratiques de conception Contrôle explicite Une action claire et simple pour le téléchargement de plusieurs sections à la fois Une action directe sur le paramétrage de la fonction
  • 57. 3. …/ Bonnes pratiques de conception Contrôle explicite - L’interface propose une mise à jour non obligatoire - La mise à jour ne se fait pas de façon automatique et laisse le contrôle à l’utilisateur
  • 58. 3. …/ Bonnes pratiques de conception Contrôle explicite L’interface propose l’accès à de nouvelles données, mais ne force pas la réactualisation automatique de la page L’utilisateur à le contrôle de son interface : il peu choisir d’afficher de nouvelles informations ou de continuer à consulter le reste de la page
  • 59. 3. …/ Bonnes pratiques de conception Adaptabilité La Presse iOS Météo Média
  • 60. 3. …/ Bonnes pratiques de conception Adaptabilité L’interface permet de régler des paramètres de lecture liés aux caractéristiques et besoins des utilisateurs L’utilisateur à la possibilité de modifier l’ordre des contenus selon ses goûts et habitudes d’usage
  • 61. 3. …/ Bonnes pratiques de conception Adaptabilité L’interface permet d’ajouter et de supprimer des types de contenus selon les besoins de l’utilisateur L’utilisateur à la possibilité de modifier l’ordre des contenus selon ses besoins
  • 62. 3. …/ Bonnes pratiques de conception Adaptabilité L’interface permet de régler des paramètres d’affichage liés aux caractéristiques et besoins des utilisateurs
  • 63. 3. …/ Bonnes pratiques de conception Gestion des erreurs Desjardins La Presse Site Web Marmiton.ca
  • 64. 3. …/ Bonnes pratiques de conception Gestion des erreurs L’interface affiche une alerte pour indiquer la présence et le type d’erreur
  • 65. 3. …/ Bonnes pratiques de conception Gestion des erreurs L’interface affiche une alerte pour indiquer la présence et le type d’erreur L’interface propose un accès direct pour récupérer ses informations de connexion en cas d’erreur ou d’oublie de ses informations
  • 66. 3. …/ Bonnes pratiques de conception Gestion des erreurs L’interface affiche la liste des erreurs et leurs emplacements Attention : la couleur n’est pas suffisante pour un bon repérage. Il est conseillé d’ajouter d’autres indices visuels, comme l’encadrement d’un champ ou des éléments iconographiques (ex : )
  • 67. 3. …/ Bonnes pratiques de conception Homogénéité / Cohérence Radio Canada La Presse Facebook
  • 68. 3. …/ Bonnes pratiques de conception Homogénéité / Cohérence L’interface affiche les mêmes contrôles utilisateurs pour l’ensemble des pages d’articles L’interface affiche le même format d’écran pour l’ensemble des pages d’articles
  • 69. 3. …/ Bonnes pratiques de conception Homogénéité / Cohérence L’interface affiche un mode similaire de présentation des informations sur les version iPhone et iPAD du même produit L’ordre des items du menu et des blocs d’information de la page d’accueil est le même
  • 70. 3. …/ Bonnes pratiques de conception Homogénéité / Cohérence L’interface affiche les contenus et une mise en page très proche entre les platesformes mobile et Web
  • 71. 3. …/ Bonnes pratiques de conception Signifiance des codes et dénomination duProprio Google + Ted Mobile
  • 72. 3. …/ Bonnes pratiques de conception Signifiance des codes et dénomination Cet icône, en forme de cible ou de viseur, permet de situer la position de l’utilisateur sur la carte La flèche indique l’accès au détail du contenu Les icônes en forme de maison indiquent la présence d’une maison à vendre
  • 73. 3. …/ Bonnes pratiques de conception Signifiance des codes et dénomination Selon le niveau de familiarité des utilisateurs cible avec les icônes du même genre d’interface et d’OS, on affiche l’accès aux fonctionnalité par iconographie ou par texte
  • 74. 3. …/ Bonnes pratiques de conception Signifiance des codes et dénomination Les icônes sont accompagnés de leurs libellés pour une meilleure compréhension de leurs fonctions
  • 75. 3. …/ Bonnes pratiques de conception Compatibilité CBC Linkedin Flipboard
  • 76. 3. …/ Bonnes pratiques de conception Compatibilité L’interface s’adapte pour être compatible avec le niveau de connaissance de l’utilisateur : un message explique comment créer un raccourci du site sur le iPhone
  • 77. 3. …/ Bonnes pratiques de conception Compatibilité L’interface de la version Web est compatible avec les gestuelles possibles sur un écran tactile
  • 78. 3. …/ Bonnes pratiques de conception Compatibilité L’interface rend accessible une fonctionnalité multiplateforme, avec une aide claire et compréhensible selon les caractéristiques des utilisateurs cibles
  • 79. Quelques sources à explorer UXPA Québec : http://www.uxpaquebec.org/ Tout le monde UX : http://toutlemonde-ux.com/ Ergonomia : http://www.ergonomia.ca/ UX Mag / Six Mobile Myths : http://uxmag.com/articles/six-mobile-myths UX Archive : http://uxarchive.com/ Design for mobile part 1 & 2 : http://goo.gl/e7qdFG Formations en Ergonomie des interfaces mobile : http://goo.gl/jnXsZr Formation Universitaire à Polytechnique Montréal : http://goo.gl/4wQf3V
  • 80. Merci !! Maîtrises (master 2) en : - Ergonomie cognitive (2000) - Psychologie du travail (2004) Certification en : Accessibilité du Web (2006) Courriel : loic_nunez@yahoo.fr Linkedin : ca.linkedin.com/in/loicnunez