UX 2023

Human
first
L A E T I T I A A L A K PA
HUMAN FIRST

01 Spécificités de l'humain

02 La psychologie cognitive

03 La psychologie de la forme

04 Les autres lois de la psychologie

05 Recos pour réussir son UX Design

 UX 2023

Spécificités
🕴️
de l'humain

L A E T I T I A A L A K PA
S P É C I F I C I T É S D E L' H U M A I N

Cerveau
Tour de contrôle et salle de
commande des opérations
🧠 Oeil 👁️
Organe de la vue

→ capter et analyser la lumière,

→ voir, sentir, respirer, écouter, parler,
interagir avec son environnement,
bouger, imaginer, calculer, rire, pleurer,
distinguer les formes et les couleurs…
aimer, choisir, découvrir, comprendre,
inventer, décider, acheter…

Main 🖐️
Organe de la préhension
et de la sensibilité
→ saisir et manipuler des objets,
moyen d’expression…
Oreille
👂
Organe de l'audition
et de l'équilibration
→ sert à capter et intensifier le son…
S P É C I F I C I T É S D E L' H U M A I N L' O E I L

L'oeil et la lecture sur écran

• La lecture est une activité quotidienne. Il faut plusieurs

années de pratique pour maîtriser la lecture. C’est une
activité complexe : il faut identifier les lettres, les lier à des
sons, etc. C’est donc un processus cognitif complexe.

• Nous lisons 25 % moins vite sur écran et cette lecture

entraîne une fatigue visuelle bien plus rapide que sur papier.
S P É C I F I C I T É S D E L' H U M A I N LE POUCE

Tout repose sur le pouce

• La façon dont les utilisateurs tiennent leur téléphone, la

taille de l’écran sont déterminants dans la création des
zones d’interactions.

• Or sur la majorité des devices, seul ⅓ de l’écran est

accessible facilement.
 UX 2023

La psychologie
🧠
cognitive

L A E T I T I A A L A K PA
LA PSYCHOLOGIE COGNITIVE KÉSAKO ?

Saisir la complexité de l'humain :

un challenge

• Pour proposer des parcours utilisateurs réellement adaptés à

leurs besoins, il est essentiel de connaître le fonctionnement
de nos utilisateurs.

• Pour ce faire, la psychologie est un outil puissant !

LA PSYCHOLOGIE COGNITIVE KÉSAKO ?

Psychologie cognitive
• Etude scientifique des fonctions cognitives humaines : la mémoire, le langage,
la perception, le raisonnement, la résolution d’un problème, l'apprentissage,
l'intelligence, la prise de décision ou l'attention
• Cherche à décrire scientifiquement la manière dont l’esprit fonctionne
LA PSYCHOLOGIE COGNITIVE QUELS APPORTS POUR LE DESIGN ?

01 Mieux comprendre les perceptions et les

Pour le design, les apports de la
02
psychologie cognitive vont permettre de
raisonnements des utilisateurs
D'avoir conscience des mécanismes qui
sous-tendent notre perception et notre
interprétation des informations présentées
sur un écran

→ Créer des designs mieux perçus, mieux compris et plus engageants

 UX 2023

La psychologie
de la forme
L A E T I T I A A L A K PA
LA PSYCHOLOGIE DE LA FORME KÉSAKO ?

Psychologie de la forme
• Appelée également théorie de la Gestalt.
• Propose un ensemble de principes qui vont permettre de mieux comprendre comment
le cerveau perçoit les formes.
• Aide à organiser les écrans, de telle sorte que l’utilisateur perçoive rapidement
l’organisation de l’écran et puisse s’orienter rapidement à l’intérieur de celui-ci.
LA PSYCHOLOGIE DE LA FORME LOI DE LA BONNE FORME

Loi de la bonne forme

Notre cerveau est fait pour créer du sens.
Même là où il n’y en a pas à priori, nous avons
tendance à en trouver.

Par exemple, nous voyons des formes dans les nuages.

Lorsque l’utilisateur arrive sur une page, il scanne dans
un premier temps l’ensemble de la page sans s’attarder
sur chacun des éléments qui la composent. Il en déduit
une organisation générale de la page et interprète
l’ensemble.
En fonction de l’organisation de la page, les utilisateurs
vont adopter des comportements de “scanning”
différents.
LA PSYCHOLOGIE DE LA FORME LOI DE CONTINUITÉ ET PRINCIPE DE CLÔTURE

Loi de continuité et
principe de clôture
Nous percevons des points rapprochés comme des
formes, comme un ensemble contigu. Cela permet
d’encourager le regard à suivre un tracé.

Illustrations du principe de clôture

En suivant cette loi, le designer peut mieux organiser les Exemple d'application : grouper des éléments de façon
informations. subtile (sans cadre) pour leur donner l'impression
d'appartenir à un ensemble.
LA PSYCHOLOGIE DE LA FORME LOI DE CONTINUITÉ ET PRINCIPE DE CLÔTURE

La loi de continuité et principe

de clôture en application
Loader
→ Un loader est constitué de ronds de différentes
couleurs qui s’alternent
→ Nous arrivons à les interpréter comme des cercles
en progression.
LA PSYCHOLOGIE DE LA FORME LOI DE LA PROXIMITÉ

Loi de la proximité
Les éléments proches les uns des autres ont
tendance à être associés et perçus comme un
ensemble.

Nous regroupons les points les plus proches et nous les associons
comme un même groupe. Ainsi, nous voyons ici trois groupes distincts.

Un écran doit être organisé de façon à ce que les Ainsi, ils pourront s’orienter plus facilement pour trouver
utilisateurs, en balayant très rapidement l'écran, tout de suite les informations qu’ils cherchent.
comprenne l’organisation de la page.
LA PSYCHOLOGIE DE LA FORME LOI DE LA PROXIMITÉ

La loi de proximité
en application
Affichage d'actualités
→ L’affichage sur Feedly permet d’associer les actualités par
date de publication, les séparations étant là pour nous guider.
LA PSYCHOLOGIE DE LA FORME
Loi de similarité
Le cerveau associe des éléments qui sont similaires
les uns aux autres. Ainsi, on a tendance à les
percevoir comme appartenant à la même forme.
Les éléments ayant le plus de similarités graphiques vont
induire un sens identique, des fonctions similaires ou
une importance commune.
LOI DE SIMILARITÉ
Ici, nous voyons des lignes Ici, nous voyons des colonnes
Sur un site e-commerce, les fiches produits sont toutes
présentées de la même manière, avec la même
organisation. Les boutons d'achat sont tous similaires :
emplacement des boutons, couleur, taille, etc. Cela
montre à l’utilisateur qu’il s’agit du même type d’action.
LA PSYCHOLOGIE DE LA FORME LOI DE SIMILARITÉ

La loi de similarité
en application
Sous-menu
→ Le cerveau interprète que "Catégories" et "Ventes du
moment" font partis de la catégorie "Cheveux".
LA PSYCHOLOGIE DE LA FORME LOI DE DESTIN COMMUN

Loi de destin commun

Lorsque des éléments sont en mouvement et ont la
même trajectoire, nous les associons comme
appartenant au même ensemble.

Nous voyons les groupes en fonction du mouvement

Pour un site, il peut s’agir d’animations qui arrivent dans Ce principe peut être appliquée aux vidéos.
le même sens, ou bien d’un slider.
LA PSYCHOLOGIE DE LA FORME LOI DE DESTIN COMMUN

La loi de destin commun

en application
Interaction menus dropdown vs. barre de recherche
→ Même mouvement au survol sur les catégories du menu
→ Seule la barre de recherche a une interaction différente
LA PSYCHOLOGIE DE LA FORME LOI DE DESTIN COMMUN

Loi de familiarité
Nous percevons les formes les plus familières,
comme étant les plus significatives. Notre regard, est
donc plus attiré par ce qui nous est familier.

Nous distinguons le mot “LIFE” assez rapidement

Proposer des éléments familiers afin que l’utilisateur Par exemple, dans de nombreux sites de e-commerce,
puisse avoir des repères pour interpréter vos écrans. les boutons pour envoyer un article au panier sont plus
Pensez à utiliser des patterns connus par vos utilisateurs. gros que les autres, et dans une couleur qui attire l’œil.
 UX 2023

Les autres lois

de la psychologie
L A E T I T I A A L A K PA
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE HICK

Loi de Hick
Sert à déterminer le temps moyen et nécessaire
pour un utilisateur à effectuer un choix en
fonction du nombre de possibilités qui lui sont
offertes.

Le temps pour faire un choix augmente de manière

logarithmique en fonction du nombre de choix possibles.

Plus l’utilisateur à de choix, plus il prendra de temps à Il vaut mieux proposer un nombre de choix restreints
se décider. afin d'obtenir de l'utilisateur un temps de réaction très
court.
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE HICK

La loi de Hick en application

1 formulaire optimisé :
→ limiter le nombre de champs à remplir dans les formulaires
→ présenter les choix par des mots clés facilement identifiables
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE FITTS

Loi de Fitts
Permet d’évaluer le temps de pointage nécessaire
pour un utilisateur. Cette durée varie selon la taille
de l’élément à pointer ainsi que sa distance.

Expérience de Fitts en 1954 – Pointage-1D

Pour modéliser de manière mathématique le mouvement Cette loi met en évidence une relation entre la vitesse et
humain, Paul Fitts, psychologue de l’Université d’État de la précision rapportée au pointage. Les éléments les
l’Ohio, invente cette loi. plus petits ou les plus éloignés, demandent forcément
davantage de temps pour être atteints.
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE FITTS

La loi de Fitts en application

Navigation sur mobile
→ Privilégier un call to action suffisamment grand
→ Privilégier un call to action le plus près du pouce

La loi de Fitts révèle la "zone de

confort" des interfaces graphiques
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE MILLER

Loi de Miller
Une personne peut mémoriser en moyenne 7
(plus ou moins 2) éléments. Ceci est la
conséquence de la capacité limitée de notre Loi de Miller

mémoire à court terme.

Cette loi a été énoncée par le psychologue cognitif George Cette indication peut également être employée pour
A. Miller du département de psychologie de l’université de estimer notre capacité à traiter les informations.
Princeton, dans les années 50.
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE MILLER

La loi de Miller en application

Guidelines OS mobiles : tab bars
→ Apple et Android exige un maximum de 5 onglets
dans la tab bar
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE JAKOB

Loi de Jakob
Se base sur le principe de simplicité d'utilisation
qui recommande l'utilisation d'interfaces
similaires aux autres sites web afin de faciliter
l'expérience des utilisateurs

Loi de Jakob

Jakob Nielsen, est expert en ergonomie informatique et Les internautes s’attendent à ce qu’un site fonctionne de
utilisabilité des sites web. Il a co-fondé le Nielsen la même manière que les autres, et ils ne veulent pas
Norman Group, une société spécialisée en interface perdre de temps à apprendre le fonctionnement de
utilisateur et expérience utilisateur. sites plus complexes.
LES AUTRES LOIS DE LA PSYCHOLOGIE LOI DE JAKOB

La loi de Jakob en application

2 sites e-commerce, une présentation des produits identique :
→ une image à gauche
→ le prix à droite
→ le call to action à droite
 UX 2023

Recos pour réussir

son UX Design
L A E T I T I A A L A K PA
RECOS POUR RÉUSSIR SON UX DESIGN C O M P R E N D R E L' U T I L I S AT E U R

Activité Facteurs
Ce que fait concrètement
l'utilisateur, ses besoins humains
🤔 Objectifs ? Priorités ?
Contraintes ?
Niveau d'expertise ?
Le fonctionnement
des utilisateurs

Habitudes ?
Fréquence d'usage ? 💭 Référentiel de l'utilisateur : sa façon de penser, de comprendre
⚖️ Lois de la perception : proximité, similitude, continuité, sens de lecture…
🧠 Mémoire : court terme (7 ±2 éléments)
💟 Emotions : amusement, appréhension, empressement…
Environnement
Ce qui entoure l'utilisateur,
son contexte d'usage

☔ Météo
💡 Lumière
👂 Bruit ambiant
🚶 Autre personne
…
RECOS POUR RÉUSSIR SON UX DESIGN LISIBILITÉ SUR ÉCRAN

Règle n°1 Règle n°2

Contraste élevé Bien choisir les
entre texte et fond associations de couleurs
• Plus le contraste sera grand, plus la lecture sera facile. ⛔ Texte en bleu
• Il est plus aisé de lire un texte écrit en noir sur fond blanc ⛔ Association de couleurs complémentaires
que l’inverse. → A privilégier : texte noir sur un fond blanc,
surtout pour de petits caractères.
RECOS POUR RÉUSSIR SON UX DESIGN LISIBILITÉ SUR ÉCRAN

Règle n°3 Règle n°4

Utilisez une police lisible Privilégiez une grande
taille de caractères
• Une police où les lettres se détachent bien les unes des autres.
Il n’y a pas pour autant de règles d’or à ce sujet car
• Pour ne pas prendre de risques, choisissez une police classique
la taille des caractères est perçue en fonction de la
comme Arial, Calibri ou Times.
police choisie.

Règle n°6
Règle n°5
Se servir de la
vision périphérique
• Pour attirer l'oeil de l'utilisateur.
Utilisez le gras, évitez l'italique
• Exemple : les notifications en bordure d'écran
attirent l'oeil, surtout avec une couleur vive.

Testez la lisibilité de vos textes

avec cet outil en ligne
RECOS POUR RÉUSSIR SON UX DESIGN ZONE DE CONFORT DU POUCE

Zone de confort du pouce

→ Placez les options de navigation et surtout les CTA
dans la zone facilement accessible, et les boutons de
sortie dans les zones beaucoup plus difficiles à atteindre.
RECOS POUR RÉUSSIR SON UX DESIGN RECOS EN VRAC

Recos en vrac 👇
Loi de Hick Limiter le nombre d'informations de 1er niveau Réduire la quantité d'informations présentées en premier
niveau permet de faciliter la prise de décision et d'éviter le
risque d'erreur

Loi de Miller Limiter le nombre d'options Réduire la quantité d'options disponibles permet une
mémorisation plus rapide et un usage spontané. Trop
d'options tuent la prise de décision

Guidage Fournir un accompagnement Indiquer l'état d'avancement et la marche à suivre pour

accomplir une action

Affordance Inciter à l'intéraction Proposer à l'utilisateur des éléments permettant d'assimiler

rapidement les conséquences d'une interaction

Feedback Tenir informé en temps réel Indiquer la réussite ou l'échec dans l'accomplissement d'une
immédiat tâche est primordial