Instinct et expérience utilisateur

1er avril 2016
INSTINCT
ET UX
Gwennola PIERRE - Kaliop

QUI SUIS-JE
@GwennolaPierre
UX FLUPA
Montpellier
Agence /
Annonceur
France /
Canada

KALIOP
FONDATION : 2002
CA (2015, GROUPE) : 10 M €
COLLABORATEURS (2015, GROUPE) : 150
NOTATION BANQUE FRANCE : G3
DELOITTE FAST 500
@GwennolaPierre

DE QUOI ALLONS-NOUS PARLER
@GwennolaPierre

POURQUOI CE SUJET
Yves Koekkoek
Chercheur et consultant en UX
« UX Blur », Digiweek 2015, Montpellier
Julien Champagne
UX Designer freelance
« Atelier PsychologieCognitive appliquée au Web », FLUPA UX-day 2015, Paris
@GwennolaPierre

COMMENT EST PERÇUE
UNE PAGEWEB ?
« Ceux qui nous inspirent
ne sont pas guidés par ce
qu’ils font mais pourquoi
ils le font. »
Simon Sinek
Start with why
@GwennolaPierre

COMMENT EST PERÇUE
UNE PAGEWEB ?
Pourquoi l’utilisateur
perçoit certains éléments
et pas d’autres ?
@GwennolaPierre

COMMENT EST PERÇUE
UNE PAGEWEB ?
@GwennolaPierre

ELLE EST PERÇUE IMMÉDIATEMENT
OU PRESQUE !
@GwennolaPierre

QUE FAIT L’ŒIL ?
 Il transmet une image au cerveau
 en N&B
 Floue
 Vous percevez immédiatement
une image claire, fine et en
couleur !
@GwennolaPierre

ET LE CERVEAU DANSTOUT ÇA
 La perception des interfaces
dépend des informations
visuelles transférées au
cerveau…
 par les yeux.
@GwennolaPierre

LA RÉTINE
Elle couvre la quasi-totalité du
fond de l’œil, elle est couverte de
cellules en forme de bâtonnets.
 Pas ou très peu de couleurs
 Flou
 Fonctionne en faible lumière
 Très sensible
 Aux mouvements
 Aux visages
 Champ de vision très large (175°)
@GwennolaPierre

LA FOVÉA
Une zone de la rétine minuscule et
composée de cellules coniques
 Moins de 1,5 mm de diamètre
 Champ visuel réduit (2 à 4°)
 Vision claire
 Nécessite beaucoup de lumière
@GwennolaPierre

COMMENT EST PERÇUE
UNE PAGEWEB ?
Où se pose votre regard
en 1er ?
@GwennolaPierre

PRIORISATION DES BLOCSVISUELS
 Identification a priori
 Rôle et fonction
 Hiérarchie, importance
 Utilité
Exemple : banner blindness (miratech.fr)
On demande à l’internaute de réserver un week-end à Londres.
Une bannière clignotante lui propose ce week-end gratuitement.
Que va faire l’internaute ?
@GwennolaPierre

COMMENT EST PERÇUE
UNE PAGEWEB ?
Conseils :
• Privilégiez la surface signifiante pour les informations
importantes
• Utilisez les images qui ont plus d’impact, notamment les
humains
• Evitez le parasitage
@GwennolaPierre

LOI DE FITTS
« Le temps requis pour atteindre une cible est proportionnel à la
distance entre le point de départ et la cible, et inversement
proportionnel à la taille de la zone de destination. »
@GwennolaPierre

QUELLE EST LA DIFFÉRENCE ?
@GwennolaPierre

LA MÉMOIRE
Il existe plusieurs types de mémoire :
 La mémoire sensorielle* 200 ms à 3 secondes
 La mémoire de travail < 1 minute
 La mémoire à long terme ∞
*les sons, les images, les odeurs, etc. qui nous atteignent la plupart du temps inconsciemment
@GwennolaPierre

L’EMPAN MNÉSIQUE
 L’empan mnésique désigne le nombre d’éléments que l’on peut
restituer immédiatement après les avoir entendus.
 Ce nombre est communément déterminé comme étant 7 plus
ou moins 2 (Miller).
 Dans les faits, on essaie de le limiter à 4, dans les serveurs
vocaux notamment.
@GwennolaPierre

L’EMPAN MNÉSIQUE
Utilisation de chunks (regroupements)
 FBICIANASANSACOCAFANTAPEPSIORANGINASONYIBM
@GwennolaPierre

L’EMPAN MNÉSIQUE
Utilisation de chunks (regroupements)
 FBICIANASANSACOCAFANTAPEPSIORANGINASONYIBM
 FBI-CIA-NASA-NSA-COCA-FANTA-PEPSI-ORANGINA-SONY-IBM
 0140636000
 01 40 63 60 00
@GwennolaPierre

COMMENT EST PERÇUE
UNE PAGEWEB ?
Conseils :
• Facilitez l’accès aux actions principales (mettre au panier,
payer…)
• Au contraire, compliquez légèrement l’accès aux actions à
risque (supprimer, annuler…)
• Signalez tout changement en montrant la différence (liens
visités, prix, promotions…)
• Créer des regroupements (numéros de téléphone…)
@GwennolaPierre

THÉORIE DE LA GESTALT
Postulat de base : devant la complexité de notre environnement,
le cerveau va chercher à mettre en forme, à donner une structure
signifiante à ce qu’il perçoit, afin de le simplifier et de l’organiser.
Le cerveau va d’abord décrypter en globalité avant de rentrer
dans les détails. « Le tout est différent de la somme de ses
parties. »
@GwennolaPierre

PROXIMITÉ
Sur une interface, plus les éléments sont proches les uns des autres,
plus ils vont être perçus comme appartenant à un même groupe.
hema.fr
captaintrain.com
@GwennolaPierre

SIMILARITÉ
Si la distance ne permet pas de regrouper les points, nous nous
attacherons ensuite à repérer les plus similaires entre eux pour
percevoir une forme.
Percez-vous ces éléments en
lignes ou en colonnes ?
@GwennolaPierre

SIMILARITÉ
Si la distance ne permet
pas de regrouper les
points, nous nous
attacherons ensuite à
repérer les plus similaires
entre eux pour percevoir
une forme.
@GwennolaPierre

SIMPLICITÉ
Simplifier ce qui va être perçu pour le rendre le plus compréhensible
possible.
@GwennolaPierre

POINT FOCAL
Le cerveau se focalise sur un point qui attire son attention pour
ensuite se diriger vers d’autres éléments.
@GwennolaPierre

POINT FOCAL
Contre exemple
@GwennolaPierre

CONTINUITÉ
Quand on voit cela
notre cerveau
décrypte cela
mais pas cela
Des points rapprochés tendent à représenter des formes lorsqu’ils
sont perçus, nous les percevons d’abord dans une continuité, comme
des prolongements les uns par rapport aux autres.
@GwennolaPierre

CONTINUITÉ
Amazon utilise la continuité pour indiquer que les produits ci-dessous sont similaires
et en relation les uns avec les autres.
@GwennolaPierre

CONTINUITÉ
Sprig utilise la continuité pour expliquer les trois étapes nécessaires à l’utilisation de
son application.
@GwennolaPierre

CLÔTURE
Une forme fermée est plus facilement identifiée comme une figure
(ou comme une forme) qu’une forme ouverte.
@GwennolaPierre

LOI DE HICK
Le temps nécessaire pour prendre une décision augmente en
fonction du nombre de choix possibles. Donc, plus le choix est varié
et grand, plus la décision est longue.
@GwennolaPierre

AFFORDANCE
L’affordance fait référence à la capacité
d’un objet à suggérer sa propre
utilisation.
Ex : une chaise suggère que l’on s’assoie
dessus.
@GwennolaPierre

COMMENT EST PERÇUE
UNE PAGEWEB ?
Conseils :
• Regrouper les éléments qui vont ensemble (par produit, par prix…)
• Une icône égale une signification
• Une couleur égale une signification
• Ne pas hésiter à utiliser les filtres pour segmenter les choix
• Que les éléments du site soient faciles à interpréter
@GwennolaPierre

SYNDROME
DESVIBRATIONS FANTÔME
 Selon le Pr Robert Rosenberger, le cerveau pense que l’objet est une
extension de la personne.
 Un simple frottement de vêtements sur notre corps ou même un
spasme peut être perçu comme une vibration de téléphone.
 2010, étude menée par le Pr Michael Rothberg : 70 % des docteurs
exerçant dans un hôpital du Massachussets concernés.
 Etude plus récente : 89 % des étudiants d’universités américaines
touchés par les vibrations fantômes.
L’exposition répétée aux vibrations réelles des alertes d’un téléphone
mène à l’apprentissage d’une perception. Et plus précisément, les
personnes qui utilisent le mode vibreur apprennent à associer les
vibrations avec des alertes de communication sociale.
* La chercheuse de l’IUPU de Fort Wayne aux Etats-Unis, Michelle Drouin, assisté de Daren H. Kaiser et Daniel R. Miller, a rajouté sa pierre à l’édifice en
publiant une étude appelée « Les vibrations fantômes chez les étudiants de licence : fréquence et caractéristiques psychologiques associées » dans la
revue scientifique Computers in Human Behaviour.
@GwennolaPierre

Instinct et expérience utilisateur

Recommandé

Recommandé

Contenu connexe

Similaire à Instinct et expérience utilisateur

Similaire à Instinct et expérience utilisateur (20)

Instinct et expérience utilisateur