UI-UX : les bases du prototypage web et apps : concevoir avec les utilisateurs

Auteur(s) :

Mazier, Didier Découvrir l'auteur

Résumé

Présentation de méthodes pratiques de prototypage pour les designers d'interfaces ou les responsables de projets web et applications. Les techniques de base comme l'idéation, la facilitation graphique, les scénarios et les story-boards, sont détaillées. Avec une sélection d'outils en ligne gratuits, des fichiers complémentaires à télécharger et un accès gratuit à la version numérique. ©Electre 2018

Éditeur(s)
- Éditions ENI
Date
- cop. 2018
Notes
- La couv. porte en plus : "Fichiers complémentaires à télécharger"
Langues
- Français
Description matérielle
- 1 vol. (252 p.) : ill.; ; 21 cm
Collections
- Objectif web
Sujet(s)
ISBN
- 978-2-409-01272-3
Indice
- 681.51 Internet
Quatrième de couverture
- UI-UX
  Les bases du prototypage web et apps
  Concevoir avec les utilisateurs
  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 oeuvre 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.
Tables des matières
- - UI-UX
  - Les bases du prototypage web et apps
  - Édition ENI
  - Avant-propos
  - A. Il n'est jamais trop tard pour prototyper7
  - B. Best Ul ? No UI !9
  - Chapitre 1 : Les fondamentaux du prototypage
  - A. Qu'est-ce qu'un prototype ?13
  - 1. Origines des prototypes13
  - 2. Fonction actuelle des prototypes14
  - 3. UI-UX et prototypage15
  - 4. Les objectifs des prototypes16
  - a. Affiner la conception16
  - b. Concevoir sans contraintes techniques16
  - c. Développer le mode collaboratif16
  - d. « Vendre » des idées16
  - 5. Le prototypage dans la gestion de projet web17
  - 6. Prototypage et conception centrée utilisateur17
  - 7. Prototypage et démarche Agile19
  - a. Approche Agile19
  - b. Le manifeste Agile19
  - 8. La fidélité des prototypes19
  - 9. Prototypes papier et prototypes sur poste20
  - 10. L'environnement multicanal21
  - B. Prototyper l'utilisateur : les personas22
  - 1. Qu'est-ce qu'un persona ?22
  - 2. Recueillir les données23
  - 3. Définir les personas24
  - a. Les données socio-démographiques24
  - b. Les données comportementales24
  - c. Les données du problème25
  - d. Les points de contact25
  - 4. Ressources pour prototyper les personas25
  - a. Les modèles (templates)25
  - b. Les outils en ligne de création de personas29
  - 5. Exploiter les personas37
  - a. Le questionnement et les personas38
  - b. La conduite de tests et les personas38
  - c. La gestion de projet et les personas38
  - C. Conceptualiser39
  - 1. Idéation : co-création et prototypage39
  - 2. La « Design Charrette »40
  - a. Le déroulement40
  - b. Les modalités40
  - c. La durée40
  - d. L'exploitation41
  - 3. La facilitation graphique41
  - D. Scénarios et story-boards43
  - 1. Séquences et parcours43
  - 2. Créer un scénario44
  - 3. Schématiser un scénario45
  - a. Schémas simples45
  - b. Schémas normés45
  - c. Schémas alternatifs46
  - d. Créer un story-board47
  - 4. Les outils de story-boarding49
  - a. Les caractères et cliparts49
  - b. Les templates (modèles/kits graphiques)53
  - c. Les outils de création de story-boards en ligne58
  - Chapitre 2 : Prototyper les structures
  - A. Prototyper ce qui n'existe pas encore : les prototypes papier77
  - B. Le tri de cartes77
  - 1. Le matériel78
  - 2. Première étape : La validation80
  - 3. Deuxième étape : l'organisation des contenus82
  - 4. Troisième étape : la labélisation82
  - C. Le tri de cartes en ligne83
  - 1. Découvrir le fonctionnement d'OptimalSort84
  - 2. L'exploitation des résultats89
  - 3. Créer un Tri de cartes avec OptimalSort91
  - D. Les wireframes100
  - 1. Stratégies pour les wireframes102
  - a. Exemple de maquettes filaires102
  - b. Créer les wireframes avec des kits graphiques103
  - E. Wireframes : les logiciels de création110
  - 1. Pencil Sketching110
  - a. Installer Pencil110
  - b. Découvrir l'interface de Pencil112
  - c. Créer un prototype avec Pencil113
  - d. Enregistrer et exporter les prototypes117
  - e. Aller plus loin avec Pencil119
  - 2. Justinmind Prototyper :121
  - a. Installer Prototyper121
  - b. Découvrir l'interface de Prototyper122
  - c. Premiers pas avec Prototyper124
  - d. Mockingbird128
  - e. Lancer Mockingbird129
  - f. Premiers pas avec Mockingbird130
  - g. Lier des pages134
  - h. Commenter le prototype135
  - i. Partager le prototype136
  - 3. Autres outils de wireframing137
  - Chapitre 3 : Les prototypes fonctionnels
  - A. Prototypage HTML141
  - 1. Pourquoi prototyper en HTML ?141
  - 2. Les 3 étapes de prototypage HTML142
  - a. Prototype HTML simple142
  - b. Prototype HTML statique142
  - c. Prototype HTML dynamique143
  - 3. Frameworks : les environnements de travail HTML143
  - a. Bootstrap143
  - b. Foundation151
  - c. WIREFY162
  - B. Les outils collaboratifs de prototypage fonctionnel166
  - 1. Adobe XD166
  - a. Lancer Adobe XD167
  - b. Télécharger des kits graphiques168
  - c. L'interface170
  - d. Créer un prototype avec Adobe XD171
  - e. Gérer les interactions185
  - f. Prévisualisation en temps réel190
  - g. Partage et collaboration193
  - 2. Figma197
  - a. L'interface197
  - b. Créer un prototype avec Figma200
  - c. Présenter un prototype avec Figma205
  - d. Commenter un prototype206
  - e. Partager un prototype avec Figma208
  - f. Visualiser en temps réel sur un périphérique208
  - g. Exporter le code209
  - h. Exporter les éléments au format image211
  - i. L'application de bureau Figma211
  - Chapitre 4 : La conduite de tests
  - A. Les tests dans la démarche ergonomique215
  - B. Organiser et gérer une session de tests217
  - 1. Les règles de base218
  - 2. Recruter les testeurs218
  - a. Se baser sur les personas218
  - b. Filtrer les participants218
  - c. Confirmer les participants219
  - d. Le nombre de participants219
  - 3. Organiser la session220
  - a. Le planning général220
  - b. Le lieu220
  - 4. Animation et contrôle de la session222
  - a. L'accueil222
  - b. Les scénarios de test223
  - c. Le rôle des animateurs-observateurs224
  - 5. Les outils de tests224
  - a. Les prototypes224
  - b. Les logiciels pour gérer les sessions de test227
  - 6. Évaluer les résultats237
  - a. Consigner efficacement les résultats237
  - b. Les questionnaires post-tests238
  - c. Les cartes d'expérience242
  - Conclusion247
  - Index249
Origine de la notice:
- Electre