UX en formation

496 vues

Publié le

Une clé de la réussite et de l’engagement des apprenants.

=== Les liens vers les sites/services mentionnés ===

EveryCircuit
http://everycircuit.com/

The $300 Million Button (Amazon)
https://articles.uie.com/three_hund_million_button/

UX Curve: A method for evaluating long-term user experience
http://iwc.oxfordjournals.org/content/23/5/473.short

bt.tn
https://bt.tn/

TED
http://www.ted.com/

Dessine-moi l'éco
http://www.lemonde.fr/economie/visuel/2016/05/25/dessine-moi-l-eco_4926321_3234.html

MetaLab
http://metalab.co/

360 Learning
http://fr.360learning.com/

Bagigia
http://www.bagigia.com/

ColorMatters
http://www.colormatters.com/color-symbolism/the-meanings-of-colors

Google Fonts (nouvelle version)
https://fonts.google.com/

FontAwesome
http://fontawesome.io/

Glyphicons
http://glyphicons.com/

TypeForm
https://www.typeform.com/

Ursus Wehrli : The Art of Clean Up: Life Made Neat and Tidy
https://www.amazon.fr/Art-Clean-Up-Life-Tidy/dp/1452114161

Docendi
http://www.docendi.com/

Wordpress for Small Businesses
http://www.simplybusiness.co.uk/microsites/wordpress-for-small-businesses/

Google Material Motion
https://material.google.com/motion/material-motion.html#material-motion-implications-of-motion

HootSuite
https://hootsuite.com/fr

Assima Vimago
http://www.assima.net/en/products/vimago-overview

Ubleam
http://ubleam.com/

Toyota Interactive Guide
https://www.toyota.fr/world-of-toyota/articles-news-events/2016/toyota-interactive-guide

Publié dans : Internet
2 commentaires
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
496
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
3
Commentaires
2
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

UX en formation

  1. 1. UX en formation Une clé de la réussite et de l’engagement des apprenants 23.06.16 - 5
  2. 2. INTRODUCTION + FRANÇOIS POURRIER - francois.pourrier@mac.com
  3. 3. CONSTAT UX Digital Learning : un potentiel à exploiter
  4. 4. RAISON LA COMPÉTITION EST MONDIALE
  5. 5. Quel est le compétiteur ?
  6. 6. EveryCircuit
  7. 7. Et sur mobile : EveryCircuit et Circuit Jam
  8. 8. RAISONS ๏ La compétition est mondiale ๏ Les consommateurs exigent une bonne expérience CONSTATS ๏ UX est au centre des dispositifs digitaux ๏ Le Digital Learning doit s’approprier les codes RÉSUMONS…
  9. 9. UX DESIGN Façonner une bonne expérience pour l’utilisateur ! + " #=
  10. 10. LA PHILOSOPHIE DE L’UX ๏ Nous vivons dans un monde d’expériences ๏ …créées pour nous ๏ …vendre des trucs
  11. 11. LA SCIENCE DERRIÈRE L’UX DESIGN $ " % & ' ( RECHERCHE WIREFRAME PROTOTYPE VALIDATION LANCEMENT ITÉRATION Découverte des attentes utilisateurs Construire les modèles conceptuels Les personas Les cas d’utilisation Le workflow L’arborescence Ebauches d’interfaces Pages html Elements visuels Animations Iconographie impliquer tous les intervenants même lointains Conduire des tests d’utilisabilité Déploiement du service Tracking Documentation Modifier et mettre à jour Procéder au cycle suivant
  12. 12. «  L’objectif à atteindre lorsque l’on façonne l’eXperience Utilisateur est d’améliorer la satisfaction et la fidélité du client par l’utilisabilité, la convivialité et le plaisir ressenti lors de l’interaction avec un produit. Sari Kujala - UX Curve: A method for evaluating long-term user experience
  13. 13. DE L’IMPORTANCE DE L’UX DESIGN EN FORMATION istock photo : Marjan_Apostolovic, 82036715 NE ME FAITES PAS RÉFLÉCHIR A L’INTERFACE ENLEVEZ LE SUPERFLU POUR GARDER L’ESSENTIEL bt.tn
  14. 14. DE L’IMPORTANCE DE L’UX DESIGN EN FORMATION ) * + , AIDEZ-MOI À APPRENDRE Les styles d’apprentissage VARK PROCUREZ-MOI DES ÉMOTIONS istock photo : BartekSzewczyk, 29627198
  15. 15. Dessine-moi l’éco : comment fonctionnent les impôts ?
  16. 16. …EN FORMATION ๏ Fluidifie l’accès 
 au contenu ๏ Simplifie les interfaces ๏ Favorise l’apprentissage selon le style de l’apprenant ๏ Procure des émotions UX DESIGN ๏ UX n’est pas UI ๏ C’est une science prédictive ๏ Satisfaction, fidélité, plaisir RÉSUMONS…
  17. 17. MISE EN OEUVRE Quels sont les principaux leviers favorisant l'efficacité ?
  18. 18. « Nous empoisonnons notre vie par des détails. Simplifions, simplifions. - Henry David Thoreau
  19. 19. Trop minimaliste, ça n’a plus de sensistock photo : Bashutskyy, 70261945
  20. 20. « Concentrez-vous sur ce que les utilisateurs ne doivent pas voir. - Jared M. Spool
  21. 21. Page d’accueil du site MetaLabs Le message doit être limpide
  22. 22. « Le Design ce n’est pas seulement l’apparence ou le ressenti. Le Design c’est comment cela fonctionne. - Steve Jobs
  23. 23. LMS 360Learning (Flat Design)
  24. 24. http://www.bagigia.com/ Skeuomorphisme
  25. 25. LE REGARD ๏ La première impression… ๏ Déplacement des yeux : en Z, en F, influencer
  26. 26. LE REGARD ๏ La première impression… ๏ Déplacement des yeux : en Z, en F, influencer
  27. 27. LA POSITION ๏ Motifs ๏ Alignement ๏ Proximité ๏ Disposition
  28. 28. LA POSITION ๏ Motifs ๏ Alignement ๏ Proximité ๏ Disposition
  29. 29. LA POSITION ๏ Motifs ๏ Alignement ๏ Proximité ๏ Disposition
  30. 30. LA POSITION ๏ Motifs ๏ Alignement ๏ Proximité ๏ Disposition
  31. 31. LES COULEURS ๏ Elles peuvent influencer l’humeur et le comportement ๏ Certains codes (re)connus par tous ROUGE Couleur des extrêmes Amour Energie, vivacité Urgence, danger ROSE Romantique, Douceur Souvent utilisé pour vendre des produits et des services à un public féminin ORANGE Vitalité, santé Engagement Souvent utilisé en call- to-action ou pour attirer l’attention VIOLET Apaisant et calme Peut créer un décalage Régulièrement utilisé pour des produits ou des services anti-âge JAUNE Optimisme, jeunesse Joie, ensoleillement Souvent utilisé pour capturer l’attention BLEU Créé la sensation de confiance et de sécurité Utilisé par les banques, les entreprises VERT Associé à la santé La couleur la plus facile à traiter pour l’oeil Utilisé dans la finance et les sites de divertissement NOIR Puissance et élégance Perçu comme luxueux et sophistiqué Inspiré de cet article de formstack, inspiré par colormatters.com
  32. 32. Q u e l q u e c h o s e m e d é r a n g e e t j e n ’ a r r i v e p a s v r a i m e n t à e n t r o u v e r l e s r a i s o n s LA TYPOGRAPHIE ๏ Alignement ๏ Choix de la typo ๏ Contraste ๏ Crénage ๏ La taille
  33. 33. Q u e l q u e c h o s e m e d é r a n g e e t j e n ’ a r r i v e p a s v r a i m e n t à e n t r o u v e r l e s r a i s o n s Voici la règle la plus importante à retenir : Vous devez impérativement faire en sorte que ce texte soit lisible LA TYPOGRAPHIE ๏ Alignement ๏ Choix de la typo ๏ Contraste ๏ Crénage ๏ La taille
  34. 34. Q u e l q u e c h o s e m e d é r a n g e e t j e n ’ a r r i v e p a s v r a i m e n t à e n t r o u v e r l e s r a i s o n s Voici la règle la plus importante à retenir : Vous devez impérativement faire en sorte que ce texte soit lisible Vous pouvez me faire confiance… je sais vraiment de quoi je parle lorsque j’affirme que les règles de typographies sont utiles pour renforcer la crédibilité de votre message. LA TYPOGRAPHIE ๏ Alignement ๏ Choix de la typo ๏ Contraste ๏ Crénage ๏ La taille
  35. 35. Q u e l q u e c h o s e m e d é r a n g e e t j e n ’ a r r i v e p a s v r a i m e n t à e n t r o u v e r l e s r a i s o n s Voici la règle la plus importante à retenir : Vous devez impérativement faire en sorte que ce texte soit lisible Vous pouvez me faire confiance… je sais vraiment de quoi je parle lorsque j’affirme que les règles de typographies sont utiles pour renforcer la crédibilité de votre message. Acceptions du terme « typographie » Le terme comporte différentes acceptions : impression typographique pour la technique d’impression, dessin de caractères ou création de caractères pour la création de polices d’écriture, lettrage pour le dessin manuel de caractères. Technique d’imprimerie La typographie est à l’origine l’art d’assembler des caractères mobiles afin de créer des mots et des phrases et de les imprimer. Cette technique a été mise au point vers 1440 par Gutenberg, qui n’a pas inventé l’imprimerie à caractères mobiles mais un ensemble de techniques conjointes : les caractères mobiles en plomb et leur principe de fabrication, la presse typographique (inconnue des Orientaux), et l’encre grasse nécessaire à cet usage. La typographie, par extension, est la technique d’impression qui utilise le principe du relief, comme les caractères mobiles en plomb et en bois, mais aussi les images en relief, d’abord gravures sur bois puis clichés en métal et en photopolymère. […] LA TYPOGRAPHIE ๏ Alignement ๏ Choix de la typo ๏ Contraste ๏ Crénage ๏ La taille
  36. 36. Q u e l q u e c h o s e m e d é r a n g e e t j e n ’ a r r i v e p a s v r a i m e n t à e n t r o u v e r l e s r a i s o n s Voici la règle la plus importante à retenir : Vous devez impérativement faire en sorte que ce texte soit lisible Vous pouvez me faire confiance… je sais vraiment de quoi je parle lorsque j’affirme que les règles de typographies sont utiles pour renforcer la crédibilité de votre message. Acceptions du terme « typographie » Le terme comporte différentes acceptions : impression typographique pour la technique d’impression, dessin de caractères ou création de caractères pour la création de polices d’écriture, lettrage pour le dessin manuel de caractères. Technique d’imprimerie La typographie est à l’origine l’art d’assembler des caractères mobiles afin de créer des mots et des phrases et de les imprimer. Cette technique a été mise au point vers 1440 par Gutenberg, qui n’a pas inventé l’imprimerie à caractères mobiles mais un ensemble de techniques conjointes : les caractères mobiles en plomb et leur principe de fabrication, la presse typographique (inconnue des Orientaux), et l’encre grasse nécessaire à cet usage. La typographie, par extension, est la technique d’impression qui utilise le principe du relief, comme les caractères mobiles en plomb et en bois, mais aussi les images en relief, d’abord gravures sur bois puis clichés en métal et en photopolymère. […] PRIVILÉGIER LA SIMPLICITÉ PRÉSENTE TOUJOURS DES AVANTAGES. VOS MODULES DE FORMATIONS DEVIENNENT INDÉMODABLES. PRIVILÉGIER LA SIMPLICITÉVOS MODULES DE FORMATIONS DEVIENNENT INDÉMODABLES. PRÉSENTE TOUJOURS DES AVANTAGES. LA TYPOGRAPHIE ๏ Alignement ๏ Choix de la typo ๏ Contraste ๏ Crénage ๏ La taille
  37. 37. L’ICONOGRAPHIE ๏ Le respect des standards est un bénéfice pour vous et pour les utilisateurs QUEL EST LE SENS DE : - . / 0 1 2  4 5 6 7 ○ 9 * : ; < = > ? + A  C D E
  38. 38. « Le problème avec les programmeurs c’est que vous ne pouvez jamais savoir ce qu’ils font, sauf quand c’est trop tard. - Seymour Cray
  39. 39. LES ENJEUX DES DÉVELOPPEMENTS INFORMATIQUES ๏ La technique doit être invisible ๏ Ne pas bloquer l’utilisateur ๏ La mobilité exige de la rapidité ๏ Continuité de l’expérience ๏ Faire les bons choix techniques et technologiques
  40. 40. « Une place pour chaque chose et chaque chose à sa place. - Samuel Smiles
  41. 41. Ursus Wehrli : The Art of Clean Up: Life Made Neat and Tidy
  42. 42. Quand c’est rangé, on comprend mieux.Ursus Wehrli : The Art of Clean Up: Life Made Neat and Tidy
  43. 43. LE RÔLE DE L’ERGONOMIE ๏ Continuité de l’expérience
  44. 44. LE RÔLE DE L’ERGONOMIE ๏ Continuité de l’expérience ๏ La ligne de base et le scroll
  45. 45. LE RÔLE DE L’ERGONOMIE ๏ Continuité de l’expérience ๏ La ligne de base et le scroll
  46. 46. LE RÔLE DE L’ERGONOMIE ๏ Continuité de l’expérience ๏ La ligne de base et le scroll ๏ Les boutons, la navigation et les menus
  47. 47. LE RÔLE DE L’ERGONOMIE ๏ Continuité de l’expérience ๏ La ligne de base et le scroll ๏ Les boutons, la navigation et les menus ๏ Les animations
  48. 48. …AVEC CES LEVIERS ๏ Simplification
 ๏ Graphisme
 ๏ Développements informatiques ๏ Ergonomie RECHERCHER LES BÉNÉFICES ๏ Permettre l’accès, la prise en main immédiate ๏ Faciliter l’adhésion, créer un environnement convivial ๏ Supprimer les freins, les blocages ๏ Rendre compréhensible et utilisable RÉSUMONS…
  49. 49. EPSS Le Digital au service de la performance ELECTRONIC PERFORMANCE SUPPORT SYSTEM
  50. 50. « l’EPSS : c’est donner la bonne 
 in/formation au bon moment pour améliorer la productivité et faciliter l’apprentissage d’un système informatique par un utilisateur. - Moi
  51. 51. Coach marks : Google Now
  52. 52. Feature tour : HootSuite
  53. 53. LOGICIELS ET EPSS ๏ Former aux outils informatique est coûteux ๏ Les budgets se réduisent ๏ La pédagogie est plus efficace quand elle est embarquée :
 Le ratio 70:20:10 10% - La formation traditionnelle 20% - Entourage, collègues, social 70% - Expérience, 
 réalisation de tâches, pratique, usage du logiciel
  54. 54. EPSS Logiciel : Assima Vimago sur SAP
  55. 55. EPSS, EN THÉORIE TEMPS D’ACQUISITION DES COMPÉTENCES Maîtrise des concepts Compétence utile LA FORMATION
 TRADITIONNELLE EXPÉRIENCE, 
 RÉALISATION DE TÂCHES,
 PRATIQUE, USAGE DU LOGICIEL Amélioration continue
  56. 56. Réalité augmentée : ubleam.com
  57. 57. Réalité augmentée : Toyota Interactive Guide
  58. 58. L’EPSS ๏ Facilite la découverte ๏ Permet une progression continue ๏ Ancre durablement les connaissances ๏ Mais… la technologie est difficile à mettre en place RÉSUMONS…
  59. 59. LES IDÉES À RETENIR F La formation doit s'adapter aux nouveaux besoins : exemple l'EPSS Faire simple n’est pas (toujours) simple mais ça rapporte sur du long terme Façonner une bonne eXpérience Utilisateur favorise l’efficacité de la formation La formation digitale doit s’approprier les codes du digital$
  60. 60. Merci Moment d’échange : vos questions

×