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.
MODÈLES D’INTERFACE UTILISATEUR
‹#›#seocamp 1
ET OPTIMISATION UX
MC Casal
UX Strategist
Relax In The Air
relaxintheair.com
@mccasal
‹#›#seocamp 2
Les micro-interactions sont de petits instants pendant
lesquels l'utilisateur et l’interface interagissent.
Quand elles so...
‹#›#seocamp
Déclencheur
L'élément visuel ou l'impulsion qui initie l'action.
Règles
Les paramètres que suit la micro-inter...
‹#›#seocamp
1. Temps de réponse rapide
2. Donnez un feedback
3. Unifier dans un seul thème
4. Concevez sur la base de reche...
‹#›#seocamp 6
Micro, rapide, court
et non intrusif
‹#›#seocamp
Activer / Désactiver
Lecture ou écrire du contenu
Téléchargement et déchargement
Notifications
Partage de médi...
‹#›#seocamp 8
Définissez les actions les plus importantes que
les utilisateurs doivent effectuer sur votre site.
Ensuite, ...
‹#›#seocamp 9
Effort minimal
"
Résultat maximal
‹#›#seocamp
Menu / Navigation
10
Point de focus
Connexion entre 2 états
Maîtrise
‹#›#seocamp 11
Transitions
Maintenir le contexte
Menu / Navigation
‹#›#seocamp
Hover
12
Identification
Status et action
‹#›#seocamp 13
Hover
Identification icône
Lien
‹#›#seocamp 14
Hover
Gimmick
‹#›#seocamp 15
Champ de saisie / formulaire: labels
Mot de passe
Mot de passe
Email
‹#›#seocamp
Champ de saisie / formulaire: labels
16
‹#›#seocamp
Champ de saisie / formulaire: labels
17
Contrôle
Compréhension
‹#›#seocamp 18
Formulaires: informations complémentaires
Gimmick
‹#›#seocamp
Formulaires: suggestions
19
Suggestion
Facilitation
Validation?
‹#›#seocamp
Panier d’achat
20
Feedback visuel
‹#›#seocamp 21
Panier d’achat
Feedback visuel
‹#›#seocamp
Payement
22
‹#›#seocamp 23
Loading: skeleton screen
‹#›#seocamp 24
Loading: skeleton screen
Anticipation
Feedback
Familiarisation
‹#›#seocamp
Progression
25
Accomplissement
Satisfaction
Engagement
‹#›#seocamp 26
L’humain est motivé par:
- Avoir des objectifs
- Accomplir les objectifs
“It turns out that when you finish a complex
task, your brain releases massive quantities
of endorphins.”
Dr Hugo Liu
‹#›#...
‹#›#seocamp 28
Loading
Transparence
Information
Perception
‹#›#seocamp 29
Loading
‹#›#seocamp
Loading 🤯 🤮
30
‹#›#seocamp
Appels à l’action
Cut Copy Share Delete By Srikant Shetty.
31
Incitation
‹#›#seocamp
Favorite Animation By John Noussis.
Fonctions sociales
32
Déclencheur
Satisfaction
‹#›#seocamp
Partage social
33
Gimmick
Prévisualisation
‹#›#seocamp 34
Envoi
Label clair
Progression
Validation
Feedback
‹#›#seocamp
Contextualisation
35
Récompense
Satisfaction
‹#›#seocamp 36
Contextualisation
Récompense
Satisfaction
‹#›#seocamp
En connectant l’intention avec
l’action, l’expérience devient
homogène et sans accroc
37
‹#›#seocamp 38
Nouvel outil Guru master toolShrink it
Rendre la phase d’apprentissage
plus courte
‹#›#seocamp 39
Nouvel outil Guru master toolErreurs
Aider l’utilisateur à faire
moins d’erreurs
‹#›#seocamp 40
Business UtilisateurObjectifs
Aider business et utilisateurs à atteindre leurs
objectifs
‹#›#seocamp
Comment mesurer la performance?
Web analytics
Tests (à distance / présentiel)
A/B testing
Heatmap (clicks / mo...
‹#›#seocamp
⚠ Warnings ⚠
Ne pas ralentir les fonctionnalités/machine
Trop d’animations tuent l’animation
Bonne animation ≠...
‹#›#seocamp
Effet Von Restorff
Lois de l’UX
L'effet Von Restorff, ou d'effet d'isolation,
prédit que lorsque plusieurs objets...
‹#›#seocamp
Loi de Hick-Hyman
Lois de l’UX
Le temps nécessaire pour prendre une décision
augmente avec le nombre et la com...
‹#›#seocamp
Principe d’urgence
Lois de l’UX
Une baisse de conversion est souvent dû à des
problèmes de friction cognitive ...
‹#›#seocamp
Effet Zeigarnik
Lois de l’UX
L’utilisateur se rappelle plus facilement une
tâche incomplète ou interrompue plu...
‹#›#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 sit...
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 49
‹#›#seocamp 50
‹#›#seocamp 51
We think and design
experiences that deliver value.
relaxintheair.com
hello@relaxintheair.com +41 22 808 02 10
Upcoming SlideShare
Loading in …5
×

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

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

×