Téléchargé parRelax In The Air
Micro interactions - Modèles d’interface utilisateur et optimisation UX
Les micro-interactions améliorent l'expérience utilisateur en facilitant des actions spécifiques sur les interfaces. Un bon design de micro-interaction repose sur des éléments tels que des déclencheurs visuels, un feedback efficace, et une simplicité d'utilisation. En suivant des principes d'UX, ces interactions doivent être conçues pour minimiser l'effort tout en maximisant les résultats pour l'utilisateur.
Contenu connexe
Similaire à Micro interactions - Modèles d’interface utilisateur et optimisation UX
Micro interactions - Modèles d’interface utilisateur et optimisation UX
- 1. MODÈLES D’INTERFACE UTILISATEUR ‹#›#seocamp1 ET OPTIMISATION UX
- 2. MC Casal UX Strategist RelaxIn The Air relaxintheair.com @mccasal ‹#›#seocamp 2
- 3. Les micro-interactions sontde 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 oul'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 deré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 Lectureou é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 lesactions 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.
- 10. ‹#›#seocamp Menu / Navigation 10 Pointde focus Connexion entre 2 états Maîtrise
- 11. ‹#›#seocamp 11 Transitions Maintenir lecontexte Menu / Navigation
- 12.
- 13.
- 14.
- 15. ‹#›#seocamp 15 Champ desaisie / 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: informationscomplémentaires Gimmick
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. ‹#›#seocamp 24 Loading: skeletonscreen Anticipation Feedback Familiarisation
- 25.
- 26. ‹#›#seocamp 26 L’humain estmotivé par: - Avoir des objectifs - Accomplir les objectifs
- 27. “It turns outthat when you finish a complex task, your brain releases massive quantities of endorphins.” Dr Hugo Liu ‹#›#seocamp 27
- 28.
- 29.
- 30.
- 31. ‹#›#seocamp Appels à l’action CutCopy Share Delete By Srikant Shetty. 31 Incitation
- 32. ‹#›#seocamp Favorite Animation ByJohn Noussis. Fonctions sociales 32 Déclencheur Satisfaction
- 33.
- 34.
- 35.
- 36.
- 37. ‹#›#seocamp En connectant l’intentionavec l’action, l’expérience devient homogène et sans accroc 37
- 38. ‹#›#seocamp 38 Nouvel outilGuru master toolShrink it Rendre la phase d’apprentissage plus courte
- 39. ‹#›#seocamp 39 Nouvel outilGuru master toolErreurs Aider l’utilisateur à faire moins d’erreurs
- 40. ‹#›#seocamp 40 Business UtilisateurObjectifs Aiderbusiness et utilisateurs à atteindre leurs objectifs
- 41. ‹#›#seocamp Comment mesurer laperformance? Web analytics Tests (à distance / présentiel) A/B testing Heatmap (clicks / moves) Recherche utilisateur Enregistrement de visite 41
- 42. ‹#›#seocamp ⚠ Warnings ⚠ Nepas ralentir les fonctionnalités/machine Trop d’animations tuent l’animation Bonne animation ≠ Bonne expérience 42
- 43. ‹#›#seocamp Effet Von Restorff Loisde 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 Loisde 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 del’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 del’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 Loisde 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 Loisde l’UX Une cible est d’autant plus facile à atteindre qu’elle est grande et proche. Make it f* bigger. ‹#›#seocamp 48
- 49.
- 50.
- 51.
- 52. We think anddesign experiences that deliver value. relaxintheair.com hello@relaxintheair.com +41 22 808 02 10