[!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.

1. MODÈLES D’INTERFACE UTILISATEUR
‹#›#seocamp 1
ET OPTIMISATION UX

2. MC Casal
UX Strategist
Relax In The Air
relaxintheair.com
@mccasal
‹#›#seocamp 2

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. ‹#›#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. ‹#›#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. ‹#›#seocamp 6
Micro, rapide, court
et non intrusif

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. ‹#›#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. ‹#›#seocamp 9
Effort minimal
"
Résultat maximal

10. ‹#›#seocamp
Menu / Navigation
10
Point de focus
Connexion entre 2 états
Maîtrise

11. ‹#›#seocamp 11
Transitions
Maintenir le contexte
Menu / Navigation

12. ‹#›#seocamp
Hover
12
Identification
Status et action

13. ‹#›#seocamp 13
Hover
Identification icône
Lien

14. ‹#›#seocamp 14
Hover
Gimmick

15. ‹#›#seocamp 15
Champ de saisie / formulaire: labels
Mot de passe
Mot de passe
Email

16. ‹#›#seocamp
Champ de saisie / formulaire: labels
16

17. ‹#›#seocamp
Champ de saisie / formulaire: labels
17
Contrôle
Compréhension

18. ‹#›#seocamp 18
Formulaires: informations complémentaires
Gimmick

19. ‹#›#seocamp
Formulaires: suggestions
19
Suggestion
Facilitation
Validation?

20. ‹#›#seocamp
Panier d’achat
20
Feedback visuel

21. ‹#›#seocamp 21
Panier d’achat
Feedback visuel

22. ‹#›#seocamp
Payement
22

23. ‹#›#seocamp 23
Loading: skeleton screen

24. ‹#›#seocamp 24
Loading: skeleton screen
Anticipation
Feedback
Familiarisation

25. ‹#›#seocamp
Progression
25
Accomplissement
Satisfaction
Engagement

26. ‹#›#seocamp 26
L’humain est motivé par:
- Avoir des objectifs
- Accomplir les objectifs

27. “It turns out that when you finish a complex
task, your brain releases massive quantities
of endorphins.”
Dr Hugo Liu
‹#›#seocamp 27

28. ‹#›#seocamp 28
Loading
Transparence
Information
Perception

29. ‹#›#seocamp 29
Loading

30. ‹#›#seocamp
Loading 🤯 🤮
30

31. ‹#›#seocamp
Appels à l’action
Cut Copy Share Delete By Srikant Shetty.
31
Incitation

32. ‹#›#seocamp
Favorite Animation By John Noussis.
Fonctions sociales
32
Déclencheur
Satisfaction

33. ‹#›#seocamp
Partage social
33
Gimmick
Prévisualisation

34. ‹#›#seocamp 34
Envoi
Label clair
Progression
Validation
Feedback

35. ‹#›#seocamp
Contextualisation
35
Récompense
Satisfaction

36. ‹#›#seocamp 36
Contextualisation
Récompense
Satisfaction

37. ‹#›#seocamp
En connectant l’intention avec
l’action, l’expérience devient
homogène et sans accroc
37

38. ‹#›#seocamp 38
Nouvel outil Guru master toolShrink it
Rendre la phase d’apprentissage
plus courte

39. ‹#›#seocamp 39
Nouvel outil Guru master toolErreurs
Aider l’utilisateur à faire
moins d’erreurs

40. ‹#›#seocamp 40
Business UtilisateurObjectifs
Aider business et utilisateurs à atteindre leurs
objectifs

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. ‹#›#seocamp
⚠ Warnings ⚠
Ne pas ralentir les fonctionnalités/machine
Trop d’animations tuent l’animation
Bonne animation ≠ Bonne expérience
42

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. ‹#›#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. ‹#›#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. ‹#›#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. ‹#›#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. 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. ‹#›#seocamp 49

50. ‹#›#seocamp 50

51. ‹#›#seocamp 51

52. We think and design
experiences that deliver value.
relaxintheair.com
hello@relaxintheair.com +41 22 808 02 10