Design UI-UX : concevoir sites et apps pour et 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.

Éditeur(s)
- Editions ENI
Date
- 2023
Notes
- Précédemment paru sous le titre : UI-UX : les bases du prototypage web et apps : concevoir avec les utilisateurs
Langues
- Français
Description matérielle
- 1 vol. (276 p.) : ill. ; 22 cm
Collections
- Objectif web
Sujet(s)
- Projets informatiques
- Prototypage (informatique)
ISBN
- 978-2-409-04162-4
Indice
- 681.92 Logiciels d'infographie
Quatrième de couverture
- Design UI-UX
  Concevoir sites et apps avec et pour les utilisateurs
  Alors que le parcours utilisateur est désormais pensé comme un produit à part entière, ce livre étudie comment approfondir le comportement utilisateur 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 efficacement 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 efficacement 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 mobile. 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 oeuvre de vos conceptions itératives de projets et ensuite organiser le monitoring de la relation client.
Tables des matières
- - Design UI-UX
  - Concevoir sites et apps avec et pour les utilisateurs
  - 2e édition
  - Éditions ENI
  - Avant-propos
  - A. Il n'est jamais trop tard pour prototyper9
  - B. Best UI ? No UI !11
  - C. Penser le parcours utilisateur comme un produit à part entière11
  - D. Le design de service12
  - E. Modéliser les attentes13
  - Chapitre 1 : Les fondamentaux du prototypage
  - A. Qu'est-ce qu'un prototype ?17
  - 1. Origines des prototypes17
  - 2. Fonction actuelle des prototypes18
  - 3. UI-UX et prototypage19
  - 4. Les objectifs des prototypes20
  - a. Affiner la conception20
  - b. Concevoir sans contraintes techniques20
  - c. Développer le mode collaboratif20
  - d. « Vendre » des idées20
  - 5. Le prototypage dans la gestion de projet web21
  - 6. Prototypage et conception centrée utilisateur21
  - 7. Prototypage et démarche Agile23
  - a. Approche Agile23
  - b. Le manifeste Agile23
  - 8. La fidélité des prototypes23
  - 9. Prototypes papier et prototypes sur poste24
  - 10. L'environnement multicanal25
  - Chapitre 2 : Comprendre l'utilisateur
  - A. Introduction29
  - B. Approfondir le comportement utilisateur29
  - 1. Les stimuli29
  - 2. Le processus d'apprentissage30
  - 3. L'identification et le concept de soi30
  - 4. L'identité de genre31
  - 5. Mode de vie et valeurs31
  - 6. La décision32
  - C. Le parcours client : produit à part entière33
  - 1. Définir les séquences33
  - 2. Identifier les points de contact34
  - 3. Assister l'utilisateur34
  - D. Approche générationnelle35
  - 1. Caractériser les générations35
  - 2. Identifier les générations concernées36
  - 3. Les baby-boomers37
  - 4. La génération X37
  - 5. Les millenials38
  - 6. La génération Z39
  - 7. La génération Alpha39
  - E. L'accessibilité40
  - 1. Comprendre les handicaps40
  - a. Les handicaps visuels40
  - b. Handicaps auditifs41
  - c. Handicaps moteurs41
  - d. Handicaps cognitifs41
  - e. Handicaps liés à l'âge42
  - 2. Axes d'optimisation42
  - 3. Tester l'accessibilité43
  - a. Google Test d'optimisation mobile43
  - b. Accessibility Checker44
  - c. WCAG Color Contrast Checker45
  - d. Contrast Color Checker48
  - e. Les applications pour périphériques mobiles48
  - F. Prototyper l'utilisateur : les personae51
  - 1. Qu'est-ce qu'un persona ?51
  - 2. Recueillir les données52
  - 3. Définir les personae52
  - a. Les données socio-démographiques52
  - b. Les données comportementales53
  - c. Les données du problème53
  - d. Les points de contact54
  - 4. Ressources pour prototyper les personae54
  - a. Les modèles (templates)54
  - b. Les outils en ligne de création de personae60
  - 5. Exploiter les personae69
  - a. Le questionnement et les personae69
  - b. La conduite de tests et les personae69
  - c. La gestion de projet et les personae70
  - Chapitre 3 : Conceptualiser
  - A. Définition73
  - B. Co-création et prototypage : techniques d'idéation73
  - 1. Brainstorming74
  - 2. Brainstorming inversé75
  - 3. Brainwriting75
  - 4. Bulles76
  - 5. Mind mapping78
  - 6. Mot aléatoire79
  - 7. Classement forcé80
  - 8. 5 pourquoi81
  - 9. Les questions qui fâchent82
  - 10. « Design Charrette »83
  - C. Design thinking85
  - 1. Une approche créative de l'innovation85
  - 2. Le détour créatif85
  - 3. Divergence-Convergence86
  - 4. Les étapes clés du design thinking86
  - 5. De l'empathie à la... sympathie !88
  - 6. La facilitation graphique88
  - D. Scénarios et story-boards90
  - 1. Séquences et parcours90
  - 2. Créer un scénario91
  - 3. Schématiser un scénario92
  - a. Schémas simples92
  - b. Schémas normés92
  - c. Schémas alternatifs93
  - d. Créer un story-board94
  - 4. Les outils de story-boarding96
  - a. Les caractères et cliparts96
  - b. Les templates (modèles/kits graphiques)100
  - c. Les outils de création de story-boards en ligne105
  - Chapitre 4 : Prototyper les structures
  - A. Prototyper ce qui n'existe pas encore : les prototypes papier123
  - B. Le tri de cartes123
  - 1. Le matériel124
  - 2. Première étape : La validation126
  - 3. Deuxième étape : l'organisation des contenus128
  - 4. Troisième étape : la labélisation128
  - C. Le tri de cartes en ligne129
  - 1. Découvrir le fonctionnement d'UXtweaks130
  - a. Les résultats132
  - b. Le déroulé de la session132
  - c. Créer sa propre étude135
  - D. Les wireframes140
  - 1. Stratégies pour les wireframes142
  - a. Exemple de maquettes filaires143
  - b. Créer les wireframes avec des kits graphiques144
  - E. Wireframes : les logiciels de création149
  - 1. Pencil Sketching149
  - a. Installer Pencil149
  - b. Découvrir l'interface de Pencil151
  - c. Créer un prototype avec Pencil152
  - d. Enregistrer et exporter les prototypes157
  - e. Aller plus loin avec Pencil158
  - 2. Justinmind159
  - a. Installer Justinmind160
  - b. Découvrir l'interface de Justinmind161
  - c. Premiers pas avec Justinmind162
  - 3. Autres outils de wireframing166
  - Chapitre 5 : Les prototypes fonctionnels
  - A. Prototypage HTML169
  - 1. Pourquoi prototyper en HTML ?169
  - 2. Les 3 étapes de prototypage HTML170
  - a. Prototype HTML simple170
  - b. Prototype HTML statique170
  - c. Prototype HTML dynamique171
  - 3. Frameworks : les environnements de travail HTML171
  - a. Bootstrap171
  - b. HTML5 boilerplate173
  - c. Foundation175
  - d. WIREFY181
  - B. Les outils collaboratifs de prototypage fonctionnel185
  - 1. Adobe XD185
  - a. Lancer Adobe XD186
  - b. Utiliser des kits graphiques187
  - c. L'interface189
  - d. Créer un prototype avec Adobe XD189
  - e. Gérer les interactions202
  - f. Prévisualiser en temps réel206
  - g. Partager et collaborer210
  - 2. Figma213
  - a. L'interface214
  - b. Créer un prototype avec Figma217
  - c. Présenter un prototype avec Figma221
  - d. Commenter un prototype223
  - e. Partager un prototype avec Figma224
  - f. Visualiser en temps réel sur un périphérique224
  - g. Exporter le code227
  - h. L'application de bureau Figma229
  - Chapitre 6 : La conduite de tests
  - A. Les tests dans la démarche ergonomique233
  - B. Organiser et gérer une session de tests235
  - 1. Les règles de base236
  - 2. Recruter les testeurs236
  - a. Se baser sur les personae236
  - b. Filtrer les participants236
  - c. Confirmer les participants237
  - d. Le nombre de participants237
  - 3. Organiser la session238
  - a. Le planning général238
  - b. Le lieu238
  - 4. Animation et contrôle de la session240
  - a. L'accueil240
  - b. Les scénarios de test241
  - c. Le rôle des animateurs-observateurs242
  - 5. Les outils de tests242
  - a. Les prototypes242
  - b. Les logiciels pour gérer les sessions de test245
  - 6. Évaluer les résultats250
  - a. Consigner efficacement les résultats250
  - b. Les questionnaires post-tests251
  - c. Les cartes d'expérience255
  - Chapitre 7 : Relation client : tester au quotidien
  - A. Modéliser les attentes clients259
  - B. L'expérience client259
  - C. Les indicateurs260
  - 1. Le NPS : Net Promoter Score260
  - a. Le principe de base260
  - b. L'exploitation des résultats261
  - c. Optimiser le sondage NPS262
  - 2. Le CES : Customer Effort Score262
  - a. Le principe263
  - b. Exploiter les réponses263
  - 3. Les questionnaires et sondages263
  - a. Les précautions263
  - b. Les outils264
  - Conclusion267
  - Index271
Origine de la notice:
- BPI