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

8e7131b4530beb62e9384e209f3474f4?s=47 Bastien
March 22, 2018

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.

8e7131b4530beb62e9384e209f3474f4?s=128

Bastien

March 22, 2018
Tweet

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