Alors que le parcours utilisateur est désormais pensé comme un produit à part entière, ce support étudie comment approfondir le comportement uti­lisateur y compris selon une approche générationnelle, pour le modéliser et proposer des réponses aux attentes de la cible visée. Il est destiné aux responsables de projets web et applications, aux designers d’interfaces et à tous ceux qui veulent concevoir des interactions utilisateurs.

Vous verrez comment représenter les utilisateurs avec les "personas" puis comment visualiser un projet encore au stade des propositions. Vous ferez le point sur les techniques fondamentales : Design Thinking, méthodes d’idéation, facilitation graphique, scénarios et story-boards.

Vous apprendrez ensuite à matérialiser et tester les idées dès les phases de préconception avec des prototypes adaptés puis comment utiliser effi­cacement les outils en ligne pour modéliser concrètement les séquences et parcours utiles aux différentes phases d’un projet digital.

Vous verrez quels sont les outils gratuits pour créer rapidement et effi­cacement des prototypes papier sans être graphiste. Vous apprendrez à exploiter les logiciels majeurs du marché pour réaliser des prototypes fonctionnels qui permettent les tests sur ordinateur ou périphérique mo­bile. Vous découvrirez les méthodes pour l’organisation et la conduite de tests utilisateurs.

Vous pourrez ainsi intégrer le prototypage à tous les stades de la mise en œuvre de vos conceptions itératives de projets et ensuite organiser le moni­toring de la relation client.

Avant-propos

1. A. Il n’est jamais trop tard pour prototyper
2. B. Best UI ? No UI !
3. C. Penser le parcours utilisateur comme un produit à part entière
4. D. Le design de service
5. E. Modéliser les attentes

Chapitre 1 : Les fondamentaux du prototypage

1. A. Qu’est-ce qu’un prototype ?
   1. 1. Origines des prototypes
   2. 2. Fonction actuelle des prototypes
   3. 3. UI-UX et prototypage
   4. 4. Les objectifs des prototypes
      1. a. Affiner la conception
      2. b. Concevoir sans contraintes techniques
      3. c. Développer le mode collaboratif
      4. d. « Vendre » des idées
   5. 5. Le prototypage dans la gestion de projet web
   6. 6. Prototypage et conception centrée utilisateur
   7. 7. Prototypage et démarche Agile
      1. a. Approche Agile
      2. b. Le manifeste Agile
   8. 8. La fidélité des prototypes
   9. 9. Prototypes papier et prototypes sur poste
   10. 10. L’environnement multicanal

Chapitre 2 : Comprendre l'utilisateur

1. A. Introduction
2. B. Approfondir le comportement utilisateur
   1. 1. Les stimuli
   2. 2. Le processus d’apprentissage
   3. 3. L’identification et le concept de soi
   4. 4. L’identité de genre
   5. 5. Mode de vie et valeurs
   6. 6. La décision
3. C. Le parcours client : produit à part entière
   1. 1. Définir les séquences
   2. 2. Identifier les points de contact
   3. 3. Assister l’utilisateur
4. D. Approche générationnelle
   1. 1. Caractériser les générations
   2. 2. Identifier les générations concernées
   3. 3. Les baby-boomers
   4. 4. La génération X
   5. 5. Les millenials
   6. 6. La génération Z
   7. 7. La génération Alpha
5. E. L’accessibilité
   1. 1. Comprendre les handicaps
      1. a. Les handicaps visuels
      2. b. Handicaps auditifs
      3. c. Handicaps moteurs
      4. d. Handicaps cognitifs
      5. e. Handicaps liés à l'âge
   2. 2. Axes d’optimisation
   3. 3. Tester l’accessibilité
      1. a. Google Test d’optimisation mobile
      2. b. Accessibility Checker
      3. c. WCAG Color Contrast Checker
      4. d. Contrast Color Checker
      5. e. Les applications pour périphériques mobiles
6. F. Prototyper l’utilisateur : les personae
   1. 1. Qu’est-ce qu’un persona ?
   2. 2. Recueillir les données
   3. 3. Définir les personae
      1. a. Les données socio-démographiques
      2. b. Les données comportementales
      3. c. Les données du problème
      4. d. Les points de contact
   4. 4. Ressources pour prototyper les personae
      1. a. Les modèles (templates)
      2. b. Les outils en ligne de création de personae
   5. 5. Exploiter les personae
      1. a. Le questionnement et les personae
      2. b. La conduite de tests et les personae
      3. c. La gestion de projet et les personae

Chapitre 3 : Conceptualiser

1. A. Définition
2. B. Co-création et prototypage : techniques d’idéation
   1. 1. Brainstorming
   2. 2. Brainstorming inversé
   3. 3. Brainwriting
   4. 4. Bulles
   5. 5. Mind mapping
   6. 6. Mot aléatoire
   7. 7. Classement forcé
   8. 8. 5 pourquoi
   9. 9. Les questions qui fâchent
   10. 10. « Design Charrette »
3. C. Design thinking
   1. 1. Une approche créative de l’innovation
   2. 2. Le détour créatif
   3. 3. Divergence-Convergence
   4. 4. Les étapes clés du design thinking
   5. 5. De l’empathie à la... sympathie !
   6. 6. La facilitation graphique
4. D. Scénarios et story-boards
   1. 1. Séquences et parcours
   2. 2. Créer un scénario
   3. 3. Schématiser un scénario
      1. a. Schémas simples
      2. b. Schémas normés
      3. c. Schémas alternatifs
      4. d. Créer un story-board
   4. 4. Les outils de story-boarding
      1. a. Les caractères et cliparts
      2. b. Les templates (modèles/kits graphiques)
      3. c. Les outils de création de story-boards en ligne

Chapitre 4 : Prototyper les structures

1. A. Prototyper ce qui n’existe pas encore : les prototypes papier
2. B. Le tri de cartes
   1. 1. Le matériel
   2. 2. Première étape : La validation
   3. 3. Deuxième étape : l’organisation des contenus
   4. 4. Troisième étape : la labélisation
3. C. Le tri de cartes en ligne
   1. 1. Découvrir le fonctionnement d’UXtweaks
      1. a. Les résultats
      2. b. Le déroulé de la session
      3. c. Créer sa propre étude
4. D. Les wireframes
   1. 1. Stratégies pour les wireframes
      1. a. Exemple de maquettes filaires
      2. b. Créer les wireframes avec des kits graphiques
5. E. Wireframes : les logiciels de création
   1. 1. Pencil Sketching
      1. a. Installer Pencil
      2. b. Découvrir l’interface de Pencil
      3. c. Créer un prototype avec Pencil
      4. d. Enregistrer et exporter les prototypes
      5. e. Aller plus loin avec Pencil
   2. 2. Justinmind
      1. a. Installer Justinmind
      2. b. Découvrir l’interface de Justinmind
      3. c. Premiers pas avec Justinmind
   3. 3. Autres outils de wireframing

Chapitre 5 : Les prototypes fonctionnels

1. A. Prototypage HTML
   1. 1. Pourquoi prototyper en HTML ?
   2. 2. Les 3 étapes de prototypage HTML
      1. a. Prototype HTML simple
      2. b. Prototype HTML statique
      3. c. Prototype HTML dynamique
   3. 3. Frameworks : les environnements de travail HTML
      1. a. Bootstrap
      2. b. HTML5 BOILERPLATE
      3. c. Foundation
      4. d. WIREFY
2. B. Les outils collaboratifs de prototypage fonctionnel
   1. 1. Adobe XD
      1. a. Lancer Adobe XD
      2. b. Utiliser des kits graphiques
      3. c. L’interface
      4. d. Créer un prototype avec Adobe XD
      5. e. Gérer les interactions
      6. f. Prévisualiser en temps réel
      7. g. Partager et collaborer
   2. 2. Figma
      1. a. L’interface
      2. b. Créer un prototype avec Figma
      3. c. Présenter un prototype avec Figma
      4. d. Commenter un prototype
      5. e. Partager un prototype avec Figma
      6. f. Visualiser en temps réel sur un périphérique
      7. g. Exporter le code
      8. h. L’application de bureau Figma

Chapitre 6 : La conduite de tests

1. A. Les tests dans la démarche ergonomique
2. B. Organiser et gérer une session de tests
   1. 1. Les règles de base
   2. 2. Recruter les testeurs
      1. a. Se baser sur les personae
      2. b. Filtrer les participants
      3. c. Confirmer les participants
      4. d. Le nombre de participants
   3. 3. Organiser la session
      1. a. Le planning général
      2. b. Le lieu
   4. 4. Animation et contrôle de la session
      1. a. L’accueil
      2. b. Les scénarios de test
      3. c. Le rôle des animateurs-observateurs
   5. 5. Les outils de tests
      1. a. Les prototypes
      2. b. Les logiciels pour gérer les sessions de test
   6. 6. Évaluer les résultats
      1. a. Consigner efficacement les résultats
      2. b. Les questionnaires post-tests
      3. c. Les cartes d’expérience

Chapitre 7 : Relation client : tester au quotidien

1. A. Modéliser les attentes clients
2. B. L’expérience client
3. C. Les indicateurs
   1. 1. Le NPS : Net Promoter Score
      1. a. Le principe de base
      2. b. L’exploitation des résultats
      3. c. Optimiser le sondage NPS
   2. 2. Le CES : Customer Effort Score
      1. a. Le principe
      2. b. Exploiter les réponses
   3. 3. Les questionnaires et sondages
      1. a. Les précautions
      2. b. Les outils

 

1. Conclusion
2. Index