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

29.
2. Tests utilisateurs

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