La conception fructueuse de projets digitaux s'appuie sur des dispositifs et interfaces qui sont pensés pour et avec les utilisateurs. Le prototypage joue donc un rôle central dans la conception centrée utilisateur : il s'agit de matérialiser l'interaction, la tester auprès de la cible visée puis l'optimiser à tous les stades du projet.

Ce livre étudie comment matérialiser et tester les idées dès les phases de pré-conception avec des prototypes adaptés. 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 tout d'abord 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 : idéation, facilitation graphique, scénarios et story-boards.

Vous apprendrez ensuite à utiliser les outils en ligne pour réaliser concrètement les prototypes utiles aux différentes phases d'un projet digital. Vous verrez quels sont les outils gratuits pour créer rapidement et efficacement des prototypes papier sans être graphiste. Vous apprendrez à exploiter les logiciels pour réaliser des prototypes fonctionnels qui permettent les tests sur périphérique. Vous découvrirez les méthodes pour l'organisation et la conduite de tests utilisateurs. Vous pourrez ainsi intégrer le prototypage dans la mise en œuvre de vos conceptions itératives de projets.

En déployant ces méthodes pratiques de prototypage, vous assurerez des parcours fluides et optimiserez les taux de transformation et, au final, vous produirez la meilleure expérience utilisateur.

Téléchargements

• Webographie

Avant-propos

1. A. Il n'est jamais trop tard pour prototyper
2. B. Best UI ? No UI !

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
2. B. Prototyper l'utilisateur : les personas
   1. 1. Qu'est-ce qu'un persona ?
   2. 2. Recueillir les données
   3. 3. Définir les personas
      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 personas
      1. a. Les modèles (templates)
      2. b. Les outils en ligne de création de personas
   5. 5. Exploiter les personas
      1. a. Le questionnement et les personas
      2. b. La conduite de tests et les personas
      3. c. La gestion de projet et les personas
3. C. Conceptualiser
   1. 1. Idéation : co-création et prototypage
   2. 2. La « Design Charrette »
      1. a. Le déroulement
      2. b. Les modalités
      3. c. La durée
      4. d. L'exploitation
   3. 3. 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 2 : 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'OptimalSort
   2. 2. L'exploitation des résultats
   3. 3. Créer un Tri de cartes avec OptimalSort
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 Prototyper
      1. a. Installer Prototyper
      2. b. Découvrir l'interface de Prototyper
      3. c. Premiers pas avec Prototyper
      4. d. Mockingbird
      5. e. Lancer Mockingbird
      6. f. Premiers pas avec Mockingbird
      7. g. Lier des pages
      8. h. Commenter le prototype
      9. i. Partager le prototype
   3. 3. Autres outils de wireframing

Chapitre 3 : 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. Foundation
      3. c. WIREFY
2. B. Les outils collaboratifs de prototypage fonctionnel
   1. 1. Adobe XD
      1. a. Lancer Adobe XD
      2. b. Télécharger 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évisualisation en temps réel
      7. g. Partage et collaboration
   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. Exporter les éléments au format image
      9. i. L'application de bureau Figma

Chapitre 4 : 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 personas
      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