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

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