Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Micro interactions - Modèles d’interface utilisateur et optimisation UX

7,009 views

Published on

[!warning! Les slides présentaient une grande série d'animations et micro-interactions qui ne sont pas visibles dans cette version en ligne]
A travers plusieurs exemples concrets de micro-interactions et sur la base d’études de comportements et de tests, je vais vous montrer comment ces interactions peuvent optimiser des flux ou actions d’utilisateurs pour améliorer l’expérience, la conversion et rendre la navigation sur vos sites plus efficiente.

Published in: Design

Micro interactions - Modèles d’interface utilisateur et optimisation UX

  1. 1. MODÈLES D’INTERFACE UTILISATEUR ‹#›#seocamp 1 ET OPTIMISATION UX
  2. 2. MC Casal UX Strategist Relax In The Air relaxintheair.com @mccasal ‹#›#seocamp 2
  3. 3. Les micro-interactions sont de petits instants pendant lesquels l'utilisateur et l’interface interagissent. Quand elles sont bien conçues, ces micro-interactions améliorent l'expérience de l’utilisateur et optimisent la conversion sur des actions spécifiques. Dan Saffer ‹#›#seocamp 3
  4. 4. ‹#›#seocamp Déclencheur L'élément visuel ou l'impulsion qui initie l'action. Règles Les paramètres que suit la micro-interaction. Feedback Retour physique pour l'utilisateur du résultat de la microinteraction. Boucles & Modes Manière dont la micro-interaction est réutilisée, y compris sa durée et son évolution pour des utilisations ultérieures, ainsi que la possibilité pour l’utilisateur d’en modifier le fonctionnement. Suivez ce processus en 4 étapes 4
  5. 5. ‹#›#seocamp 1. Temps de réponse rapide 2. Donnez un feedback 3. Unifier dans un seul thème 4. Concevez sur la base de recherche utilisateur 5. Utilisez ce qui est disponible 6. Concevez pour une utilisation répétée 7. Utilisez une voix humaine 8. Keep It simple and stupid Le succès forever ❤ 5
  6. 6. ‹#›#seocamp 6 Micro, rapide, court et non intrusif
  7. 7. ‹#›#seocamp Activer / Désactiver Lecture ou écrire du contenu Téléchargement et déchargement Notifications Partage de médias sociaux Menus déroulants et cachés Affichage des modifications Surligner des appels à l’action 7
  8. 8. ‹#›#seocamp 8 Définissez les actions les plus importantes que les utilisateurs doivent effectuer sur votre site. Ensuite, utilisez des microinteractions pour les aider à les accomplir de la manière la plus simple possible.
  9. 9. ‹#›#seocamp 9 Effort minimal " Résultat maximal
  10. 10. ‹#›#seocamp Menu / Navigation 10 Point de focus Connexion entre 2 états Maîtrise
  11. 11. ‹#›#seocamp 11 Transitions Maintenir le contexte Menu / Navigation
  12. 12. ‹#›#seocamp Hover 12 Identification Status et action
  13. 13. ‹#›#seocamp 13 Hover Identification icône Lien
  14. 14. ‹#›#seocamp 14 Hover Gimmick
  15. 15. ‹#›#seocamp 15 Champ de saisie / formulaire: labels Mot de passe Mot de passe Email
  16. 16. ‹#›#seocamp Champ de saisie / formulaire: labels 16
  17. 17. ‹#›#seocamp Champ de saisie / formulaire: labels 17 Contrôle Compréhension
  18. 18. ‹#›#seocamp 18 Formulaires: informations complémentaires Gimmick
  19. 19. ‹#›#seocamp Formulaires: suggestions 19 Suggestion Facilitation Validation?
  20. 20. ‹#›#seocamp Panier d’achat 20 Feedback visuel
  21. 21. ‹#›#seocamp 21 Panier d’achat Feedback visuel
  22. 22. ‹#›#seocamp Payement 22
  23. 23. ‹#›#seocamp 23 Loading: skeleton screen
  24. 24. ‹#›#seocamp 24 Loading: skeleton screen Anticipation Feedback Familiarisation
  25. 25. ‹#›#seocamp Progression 25 Accomplissement Satisfaction Engagement
  26. 26. ‹#›#seocamp 26 L’humain est motivé par: - Avoir des objectifs - Accomplir les objectifs
  27. 27. “It turns out that when you finish a complex task, your brain releases massive quantities of endorphins.” Dr Hugo Liu ‹#›#seocamp 27
  28. 28. ‹#›#seocamp 28 Loading Transparence Information Perception
  29. 29. ‹#›#seocamp 29 Loading
  30. 30. ‹#›#seocamp Loading 🤯 🤮 30
  31. 31. ‹#›#seocamp Appels à l’action Cut Copy Share Delete By Srikant Shetty. 31 Incitation
  32. 32. ‹#›#seocamp Favorite Animation By John Noussis. Fonctions sociales 32 Déclencheur Satisfaction
  33. 33. ‹#›#seocamp Partage social 33 Gimmick Prévisualisation
  34. 34. ‹#›#seocamp 34 Envoi Label clair Progression Validation Feedback
  35. 35. ‹#›#seocamp Contextualisation 35 Récompense Satisfaction
  36. 36. ‹#›#seocamp 36 Contextualisation Récompense Satisfaction
  37. 37. ‹#›#seocamp En connectant l’intention avec l’action, l’expérience devient homogène et sans accroc 37
  38. 38. ‹#›#seocamp 38 Nouvel outil Guru master toolShrink it Rendre la phase d’apprentissage plus courte
  39. 39. ‹#›#seocamp 39 Nouvel outil Guru master toolErreurs Aider l’utilisateur à faire moins d’erreurs
  40. 40. ‹#›#seocamp 40 Business UtilisateurObjectifs Aider business et utilisateurs à atteindre leurs objectifs
  41. 41. ‹#›#seocamp Comment mesurer la performance? Web analytics Tests (à distance / présentiel) A/B testing Heatmap (clicks / moves) Recherche utilisateur Enregistrement de visite 41
  42. 42. ‹#›#seocamp ⚠ Warnings ⚠ Ne pas ralentir les fonctionnalités/machine Trop d’animations tuent l’animation Bonne animation ≠ Bonne expérience 42
  43. 43. ‹#›#seocamp Effet Von Restorff Lois de l’UX L'effet Von Restorff, ou d'effet d'isolation, prédit que lorsque plusieurs objets similaires sont présents, celui qui diffère du reste est le plus susceptible d'être mémorisé ou utilisé. Rendre les informations importantes ou les actions clés visuellement distinctes. 43
  44. 44. ‹#›#seocamp Loi de Hick-Hyman Lois de l’UX Le temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix. Simplifiez les choix en veillant à ce que les tâches complexes soient divisées en étapes plus petites. 44
  45. 45. ‹#›#seocamp Principe d’urgence Lois de l’UX Une baisse de conversion est souvent dû à des problèmes de friction cognitive - l’utilisateur réfléchit trop, attend trop longtemps. Augmenter le niveau d'urgence réduit considérablement ce délai afin de créer une amélioration des taux de conversion. Le compte à rebours peut s’avérer utile… 45
  46. 46. ‹#›#seocamp Effet Zeigarnik Lois de l’UX L’utilisateur se rappelle plus facilement une tâche incomplète ou interrompue plutôt qu’une tâche complétée. Utilisez les barres de progression pour indiquer visuellement lorsqu’une tâche est incomplète et ainsi augmenter la probabilité qu'elle soit complétée. 46
  47. 47. ‹#›#seocamp Loi de Jakob Lois de l’UX L’utilisateur ne visite pas que votre site. Cela signifie qu’il préfère que votre site fonctionne de la même manière que tous les autres sites qu'il connait déjà. Réduisez le temps d'apprentissage pour les utilisateurs en leur fournissant des modèles d’interfaces familiers. 47
  48. 48. Loi de Fitts Lois de l’UX Une cible est d’autant plus facile à atteindre qu’elle est grande et proche. Make it f* bigger. ‹#›#seocamp 48
  49. 49. ‹#›#seocamp 49
  50. 50. ‹#›#seocamp 50
  51. 51. ‹#›#seocamp 51
  52. 52. We think and design experiences that deliver value. relaxintheair.com hello@relaxintheair.com +41 22 808 02 10

×