Atelier UX / UI - Entrepreneur·e·s d'intérêt général 2018

© Jean-Baptiste Le Dévéhat

Support de présentation pour la session EIG du 22 mars, animée par Jean-Baptiste Le Dévéhat et Laurie Chapotte.

Transcript

1. Atelier UX / UI Entrepreneur.e.s d’intérêt général | 2018
2. UX DESIGN Expérience utilisateur • Satisfaction utilisateur • Définition des profils d’utilisateurs / Personna • Scénarios / Cas d’utilisation • Cartographie du siteweb / outils • Croquis / Wireframe • Maquettes / MockUp • Design des interactions / Animations • Prototypage • Analyse de données • Collaboration, recherche, prospective • Test utilisateur Même exemple : Avons-nous vraiment besoin de ce bouton ? UI DESIGN Interface utilisateur • Agencement, zoning • Design visuel : Couleurs, contenu, images Typographie, pictogramme • Design des fonctionnalités • Animation • Accessibilité • Accès à l’information : hiérarchie visuelle, lisibilité Exemple : De quelle couleur doit être le bouton pour qu’il soit visible immédiatement ? Précision les différences & les complémentarités
3. Personna 1 Personna 2 Conception Comprendre ses utilisateurs • Ce qu’elle a besoin de faire • Ce qu’elle pense et ressent • Ce qui la bloque • Ce qui la motive • Ce qui lui fait perdre du temps
4. Action 1 Action 2 Action 3 Personna 1 Personna 2 Action 4 Conception Cas d’utilisation • Auditer les processus existant • Définir les objectifs • Comprendre ce qui a de la valeur (connaissance + satisfaction) • Simplifier au maximum (chercher le minimum de clique)
5. Action 1 Action 2 Action 3 Personna 1 Personna 2 Action 4 Conception Maquettes : Zoning, Wireframe, MockUp, Prototype
6. Exemple de méthodologie Compromis • Est-ce faisable ? • Est-ce désirable ? • Est-ce viable ? Processus itératif & collaboratif • Comprendre et définir (besoins, utilisateurs) • Rechercher / Auditer (Benchmark) • Imaginer (sans contraintes) • Prototyper (avec nos contraintes) • Sélectionner (Évaluer / Tester) • Implémenter & Apprendre • (puis recommencer…) Méthode • Etude opportunité > En avons-nous besoin ? • Expression de besoin > De quoi ai-je besoin ? • Etude de faisabilité > Est-ce faisable ? • Spécifications fonctionnelles > Comment se sera réaliser ? • Test > Est-ce le résultat souhaité ?
7. Outils
8. Papiers crayons Exemples réalisés par le Laboratoire identités complexes
9. XD design | Adobe
10. Sketch
11. Sketch | ressources
12. Invision
13. Tips
14. Google materials design | material.io
15. Ligne de flottaison
16. Cohérence Typographie Unistra, Christina Poth, Laboratoire identités complexes
17. Simplifier