SlideShare une entreprise Scribd logo
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 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
‹#›#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
‹#›#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
‹#›#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édias sociaux
Menus déroulants et cachés
Affichage des modifications
Surligner des appels à l’action
7
‹#›#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.
‹#›#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 27
‹#›#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 / moves)
Recherche utilisateur
Enregistrement de visite
41
‹#›#seocamp
⚠ Warnings ⚠
Ne pas ralentir les fonctionnalités/machine
Trop d’animations tuent l’animation
Bonne animation ≠ Bonne expérience
42
‹#›#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
‹#›#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
‹#›#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
‹#›#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
‹#›#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
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
‹#›#seocamp 49
‹#›#seocamp 50
‹#›#seocamp 51
We think and design
experiences that deliver value.
relaxintheair.com
hello@relaxintheair.com +41 22 808 02 10

Contenu connexe

Tendances

e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...
e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...
e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...
SEO CAMP
 

Tendances (19)

Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?
 
Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !
Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !
Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !
 
Les outils SEO ne servent à rien - SEOCamp'us 2018
Les outils SEO ne servent à rien - SEOCamp'us 2018Les outils SEO ne servent à rien - SEOCamp'us 2018
Les outils SEO ne servent à rien - SEOCamp'us 2018
 
Seocampus 2018-laura-blanchard
Seocampus 2018-laura-blanchardSeocampus 2018-laura-blanchard
Seocampus 2018-laura-blanchard
 
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
 
Analyse Logs + crawl : Retour sur 10 ans d’expérience - Mathieu Chapon - SEOC...
Analyse Logs + crawl : Retour sur 10 ans d’expérience - Mathieu Chapon - SEOC...Analyse Logs + crawl : Retour sur 10 ans d’expérience - Mathieu Chapon - SEOC...
Analyse Logs + crawl : Retour sur 10 ans d’expérience - Mathieu Chapon - SEOC...
 
Atouts du croisement de données
Atouts du croisement de donnéesAtouts du croisement de données
Atouts du croisement de données
 
People Also Ask : une nouvelle opportunité pour être plus présent sur la SERP
People Also Ask : une nouvelle opportunité pour être plus présent sur la SERPPeople Also Ask : une nouvelle opportunité pour être plus présent sur la SERP
People Also Ask : une nouvelle opportunité pour être plus présent sur la SERP
 
Taille du site et stratégies SEO - SEOCamp'us 2018
Taille du site et stratégies SEO - SEOCamp'us 2018Taille du site et stratégies SEO - SEOCamp'us 2018
Taille du site et stratégies SEO - SEOCamp'us 2018
 
(Sur)vivre avec AMP
(Sur)vivre avec AMP(Sur)vivre avec AMP
(Sur)vivre avec AMP
 
Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...
Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...
Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...
 
E-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 mois !
E-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 mois !E-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 mois !
E-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 mois !
 
Comment passer de SEO à SEO + data
Comment passer de SEO à SEO + dataComment passer de SEO à SEO + data
Comment passer de SEO à SEO + data
 
e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...
e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...
e-commerce Success Story : de 4 000 à 100 000 de trafic SEO mensuel en 12 moi...
 
SEO Local : stratégie, subtilités et best practices - SEO Camp
SEO Local : stratégie, subtilités et best practices - SEO CampSEO Local : stratégie, subtilités et best practices - SEO Camp
SEO Local : stratégie, subtilités et best practices - SEO Camp
 
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
 
Quand les api de google deviennent une arme pour notre seo
Quand les api de google deviennent une arme pour notre seoQuand les api de google deviennent une arme pour notre seo
Quand les api de google deviennent une arme pour notre seo
 
Seo camp'us 2018 - cloaking is not a crime : Patrick Valibus
Seo camp'us 2018 - cloaking is not a crime : Patrick ValibusSeo camp'us 2018 - cloaking is not a crime : Patrick Valibus
Seo camp'us 2018 - cloaking is not a crime : Patrick Valibus
 

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

Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
OCTO Technology
 

Similaire à Micro interactions - Modèles d’interface utilisateur et optimisation UX (20)

Lean Digital : l'apport du digital dans le management visuel
Lean Digital : l'apport du digital dans le management visuelLean Digital : l'apport du digital dans le management visuel
Lean Digital : l'apport du digital dans le management visuel
 
Les Tests Utilisateurs
Les Tests UtilisateursLes Tests Utilisateurs
Les Tests Utilisateurs
 
Onboarding SAAS - LaGrowthHour, by deux.io
Onboarding SAAS - LaGrowthHour, by deux.ioOnboarding SAAS - LaGrowthHour, by deux.io
Onboarding SAAS - LaGrowthHour, by deux.io
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
 
Hackathon, 3 jours chez les bricoleurs
Hackathon, 3 jours chez les bricoleursHackathon, 3 jours chez les bricoleurs
Hackathon, 3 jours chez les bricoleurs
 
Retour d’Expérience d’un chatbot d’acquisition
Retour d’Expérience d’un chatbot d’acquisitionRetour d’Expérience d’un chatbot d’acquisition
Retour d’Expérience d’un chatbot d’acquisition
 
Les pratiques Scrum
Les pratiques ScrumLes pratiques Scrum
Les pratiques Scrum
 
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
De component à feature team (Rex STIME DSI Groupement des Mousquetaires)
 
Ppt qrcode
Ppt qrcodePpt qrcode
Ppt qrcode
 
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
 
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
 
Sauver la princesse avec un design sprint MIX-iT17
Sauver la princesse avec un design sprint   MIX-iT17Sauver la princesse avec un design sprint   MIX-iT17
Sauver la princesse avec un design sprint MIX-iT17
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
 
Digest TubeReach Connect #6 | Le AB / Split-Test à l’âge de la vidéo digitale
Digest TubeReach Connect #6 | Le AB / Split-Test à l’âge de la vidéo digitaleDigest TubeReach Connect #6 | Le AB / Split-Test à l’âge de la vidéo digitale
Digest TubeReach Connect #6 | Le AB / Split-Test à l’âge de la vidéo digitale
 
UX + DONNÉES = Coeur + CRO
UX + DONNÉES = Coeur + CROUX + DONNÉES = Coeur + CRO
UX + DONNÉES = Coeur + CRO
 
Oeil user story_bonnes_pratiques_Martial_SEGURA oeildecoach.com
Oeil user story_bonnes_pratiques_Martial_SEGURA oeildecoach.comOeil user story_bonnes_pratiques_Martial_SEGURA oeildecoach.com
Oeil user story_bonnes_pratiques_Martial_SEGURA oeildecoach.com
 
Methodologies de Developpement Agiles : Scrum et XP
Methodologies de Developpement Agiles : Scrum et XPMethodologies de Developpement Agiles : Scrum et XP
Methodologies de Developpement Agiles : Scrum et XP
 
Objectif Satisfaction : mettez en place une organisation orientée Client !
Objectif Satisfaction : mettez en place une organisation orientée Client !Objectif Satisfaction : mettez en place une organisation orientée Client !
Objectif Satisfaction : mettez en place une organisation orientée Client !
 
Flupa UX Days 2017: "UX + DONNÉES = <3> par Simon White
Flupa UX Days 2017: "UX + DONNÉES = <3> par Simon WhiteFlupa UX Days 2017: "UX + DONNÉES = <3> par Simon White
Flupa UX Days 2017: "UX + DONNÉES = <3> par Simon White
 

Plus de Relax In The Air

Médias Sociaux: Intégration et perspectives, BPW Lausanne
Médias Sociaux: Intégration et perspectives, BPW LausanneMédias Sociaux: Intégration et perspectives, BPW Lausanne
Médias Sociaux: Intégration et perspectives, BPW Lausanne
Relax In The Air
 
Médias Sociaux: Intégration et perspectives, First Rezonance, #SMSCL
Médias Sociaux: Intégration et perspectives, First Rezonance, #SMSCLMédias Sociaux: Intégration et perspectives, First Rezonance, #SMSCL
Médias Sociaux: Intégration et perspectives, First Rezonance, #SMSCL
Relax In The Air
 

Plus de Relax In The Air (20)

Teknseo Paris 2019 - Rapid Prototyping Masterclass | MC Casal
Teknseo Paris 2019 - Rapid Prototyping Masterclass | MC CasalTeknseo Paris 2019 - Rapid Prototyping Masterclass | MC Casal
Teknseo Paris 2019 - Rapid Prototyping Masterclass | MC Casal
 
2021 l’Odyssée des méthodologies: from The Kardashians to The Avengers
2021 l’Odyssée des méthodologies: from The Kardashians to The Avengers2021 l’Odyssée des méthodologies: from The Kardashians to The Avengers
2021 l’Odyssée des méthodologies: from The Kardashians to The Avengers
 
My landing page is better than yours - Web2Day Festival 2018
My landing page is better than yours - Web2Day Festival 2018My landing page is better than yours - Web2Day Festival 2018
My landing page is better than yours - Web2Day Festival 2018
 
Que Du Web 2017 - Archi / Protos / Tech : synthétiser la complexité UX
Que Du Web 2017 - Archi / Protos / Tech : synthétiser  la complexité UXQue Du Web 2017 - Archi / Protos / Tech : synthétiser  la complexité UX
Que Du Web 2017 - Archi / Protos / Tech : synthétiser la complexité UX
 
Les outils du UX pour connaître les utilisateurs - YOODx 2017
Les outils du UX pour connaître les utilisateurs - YOODx 2017Les outils du UX pour connaître les utilisateurs - YOODx 2017
Les outils du UX pour connaître les utilisateurs - YOODx 2017
 
Entreprise et stratégie médias sociaux - #GEW2016
Entreprise et stratégie médias sociaux - #GEW2016Entreprise et stratégie médias sociaux - #GEW2016
Entreprise et stratégie médias sociaux - #GEW2016
 
#PWGE16 - Inspirer la culture des données grâce aux web analytics
#PWGE16 - Inspirer la culture des données grâce aux web analytics#PWGE16 - Inspirer la culture des données grâce aux web analytics
#PWGE16 - Inspirer la culture des données grâce aux web analytics
 
TEKNSEO 2016 - Les tests utilisateurs en pratique
TEKNSEO 2016 - Les tests utilisateurs en pratiqueTEKNSEO 2016 - Les tests utilisateurs en pratique
TEKNSEO 2016 - Les tests utilisateurs en pratique
 
Marketers wear glasses not ties - IMD 1st General Management Week 2014
Marketers wear glasses not ties - IMD 1st General Management Week 2014Marketers wear glasses not ties - IMD 1st General Management Week 2014
Marketers wear glasses not ties - IMD 1st General Management Week 2014
 
How Do Organizations Incorporate Lean? WDSCH Conference
How Do Organizations Incorporate Lean? WDSCH ConferenceHow Do Organizations Incorporate Lean? WDSCH Conference
How Do Organizations Incorporate Lean? WDSCH Conference
 
Who is Relax In The Air?
Who is Relax In The Air?Who is Relax In The Air?
Who is Relax In The Air?
 
Le futur du Leap Motion et l’évolution du gesture - Swiss Tech Talks 2013
Le futur du Leap Motion et l’évolution du gesture - Swiss Tech Talks 2013Le futur du Leap Motion et l’évolution du gesture - Swiss Tech Talks 2013
Le futur du Leap Motion et l’évolution du gesture - Swiss Tech Talks 2013
 
Webdesign, UX et UCD #7
Webdesign, UX et UCD #7Webdesign, UX et UCD #7
Webdesign, UX et UCD #7
 
Customers are your best partners for delivering a better experience
 - UXLx 2013
Customers are your best partners for delivering a better experience
 - UXLx 2013Customers are your best partners for delivering a better experience
 - UXLx 2013
Customers are your best partners for delivering a better experience
 - UXLx 2013
 
Customer Experience in a Digital & Complex World
Customer Experience in a Digital & Complex WorldCustomer Experience in a Digital & Complex World
Customer Experience in a Digital & Complex World
 
Defining Social Networks in Switzerland 2011#2
Defining Social Networks in Switzerland 2011#2Defining Social Networks in Switzerland 2011#2
Defining Social Networks in Switzerland 2011#2
 
"We created a monster" #6 Uncomfortable Talk in Vienna - LHBS
"We created a monster" #6 Uncomfortable Talk in Vienna - LHBS"We created a monster" #6 Uncomfortable Talk in Vienna - LHBS
"We created a monster" #6 Uncomfortable Talk in Vienna - LHBS
 
Médias Sociaux: Intégration et perspectives, BPW Lausanne
Médias Sociaux: Intégration et perspectives, BPW LausanneMédias Sociaux: Intégration et perspectives, BPW Lausanne
Médias Sociaux: Intégration et perspectives, BPW Lausanne
 
Médias Sociaux: Intégration et perspectives, First Rezonance, #SMSCL
Médias Sociaux: Intégration et perspectives, First Rezonance, #SMSCLMédias Sociaux: Intégration et perspectives, First Rezonance, #SMSCL
Médias Sociaux: Intégration et perspectives, First Rezonance, #SMSCL
 
Webdesign, UX et UCD #5
Webdesign, UX et UCD #5Webdesign, UX et UCD #5
Webdesign, UX et UCD #5
 

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