UX UI DESIGN
User Experience & User Interface
ICEBREAKER
Et si on faisait connaissance ?
Objectif du cours
• Connaître les phases de la
démarche UX
• Savoir utiliser les outils de la
démarche UX
• Être en mesure de pouvoir réaliser
le prototype d’un site
INTRODUCTION À
L’UX
Design Thinking
Définir la
d.school - Stanford problématique Construire
une solution
Tester la
solution
Empathize Ideate
Define Prototype
Test
Rencontrer Proposer
l’utilisateur des solutions
QU’EST CE QUE
C’EST ?
Une méthode de conception centrée sur
l’utilisateur. Elle regroupe l’ensemble des
moyens utilisé pour analyser l’expérience
utilisateur et se répartie en 3 parties :
- Analyse
- Conception
- Evaluation
PHASE 1
L’ANALYSE
PHASE D’ANALYSE - LES OUTILS
Questionnaires Persona
Il va permettre d’établir un premier Utilisé pour comprendre l’utilisateur en se
contact avec l’utilisateur, de le connaître mettant à sa place, il permet de dégager les
mais également de dégager ses besoins problèmes rencontrés par l’utilisateur afin de
mieux appréhender ses besoins
PHASE D’ANALYSE - LES OUTILS
Empathy map Customer journey
Elle est utile pour améliorer l’expérience Il décrit le parcours utilisateur et permet
utilisateur et se réfère aux réponses de comprendre son comportement. Il est
récoltées dans le questionnaire utile pour optimiser l’expérience
utilisateur
1
À vous de
jouer !
2 1. Allez sur l’outil de votre choix
2. Créez votre propre persona
3. C’est partie !
3
PHASE 2
LA CONCEPTION
PHASE CONCEPTION - LES OUTILS
L’arborescence Maquettage
Servant de “plan du site” elle Il correspond aux premières
sert à organiser le contenu des ébauche du site, il est “la chair
pages du site et les liens entre
Wireframes et la peau” du wireframe.
chaque pages
Il représente le squelette du
site et permet d’avoir une vue
d’ensemble de ce à quoi le site
va ressembler
1
À vous de
jouer !
2 1. Allez sur FIgma
2. Créez votre compte et attendez
3. C’est partie !
3
PHASE 3
L’ÉVALUATION
LA PSYCHOLOGIE COGNITIVE
La psychologie cognitive étudie comment l’être
humain pense. Elle étudie notre perception, notre
mémoire et notre manière de résoudre les
problèmes.
Elle cherche à comprendre comment notre esprit
fonctionne dans le but de pouvoir aider à
concevoir des sites web et/ou applications pour
les rendre ergonomique.
LA PSYCHOLOGIE COGNITIVE -
LES OUTILS
Analyse des
Test utilisateurs
utilisateurs
Test de vitesse de
A/B Testing
performance
1
À vous de
jouer !
2 1. Allez sur l’outil de votre choix
2. Créez un questionnaire utilisateur, un persona ou empathy
map et le wireframe du site de votre choix
3. C’est partie !
3
INTRODUCTION À
L’UI
QU’EST CE QUE
C’EST ?
Il représente l’interface utilisateur et tous les
éléments graphiques de cette dernière :
- transitions
- boutons
- liens
- textes
- images
LES PRINCIPES DE BASES
La simplicité Cohérence
Les interfaces doivent être simples et Maintenez la cohérence dans toute
intuitives. Évitez la complexité inutile. l'interface. Utilisez des modèles de
Les utilisateurs doivent pouvoir conception (patterns) récurrents pour
que les utilisateurs puissent prédire le
comprendre facilement comment
comportement des éléments.
interagir avec l'interface.
Hierarchie visuelle Les icônes
Utilisez la taille, la couleur et la Fournissez des retours clairs lors des
disposition pour mettre en évidence interactions. Les utilisateurs doivent
l'importance des éléments. Les savoir ce qui se passe après chaque
éléments clés doivent être plus grands
action.
et plus visibles que les éléments moins
importants.
LES ÉLÉMENTS
Les couleurs Les images
Elles ont un impact sur les émotions, Elles transmettent des messages, des
les réactions et même la émotions et rend la conception visuelle
compréhension de certains éléments attrayante
Les typographie Les icônes
Elles influences la lisibilité du texte et En simplifiant la lecture de certaines
permettent d’insuffler une identité à fonctionnalité, pratiques et facile elles
une marque (ex : Nike, Netflix) permettent la compréhension de
certains éléments du site
LES COULEURS - LEURS
SIGNIFICATIONS
LA TYPOGRAPHIE
LES IMAGES
LES ICÔNES
HIERARCHIE VISUELLE
PROTOTYPAGE FINALE
Pour que votre site soit attrayant
→Des temps de téléchargement trop longs
→Des liens cassés et des dis-fonctionnalités importantes
→Une technologie sophistiquée (plug-ins, paramétrage du navigateur)
→Une arborescence difficile et incohérente
→Une navigation pas assez intuitive
→Une page d’accueil surchargée et désorganisée
→Un contenu riche mais difficilement accessible
→Des animations incontournables qui ralentissent la consultation
→Une ergonomie créative qui s'éloigne des standards →Un contenu qui ne correspond pas aux attentes
Autrement dit
Il faut :
Contenu Fonctionnalité Design
1
À vous de
jouer !
2 1. Trouver un site qui ne respecte pas un ou plusieurs de ces
critères
2. Noter les
3. C’est partie !
3
QUELQUES NOTIONS…
L’ERGONOMIE
L’ergonomie correspond à l'ensemble des aspects de l'interface en question permettant une utilisation
efficace, agréable, facile…
L'objectif ultime de l'ergonomie web est finalement de faciliter l'interaction entre le site web et
l'utilisateur.
Ainsi nous pouvons analyser l’ergonomie d’un site à travers :
● Une architecture cohérente.
● Une bonne hiérarchie visuelle.
● Une page d'accueil attrayante.
● La lisibilité des textes.
● Le temps de chargement.
● Un design responsive.
Un logiciel ou un site, est dit “ergonomique” lorsque l’utilisateur l’appréhende sans problème d’interface.
2 notions sont indissociables à l’ergonomie: l’utilité et l’utilisabilité (ou usabilité)
L’USABILITÉ
Capacité d'un utilisateur à utiliser un produit
et à en comprendre l'usage : à quoi il sert, et
comment on s'en sert.
L'usabilité, c'est ce qui contribue à aider, guider
l'utilisateur tout le long de leur interaction avec
le produit ou le service.
L'UTILITÉ ET L’USABILITÉ
• Compréhensible : À quelle vitesse les nouveaux utilisateurs sont-ils capables de comprendre le
produit/service et ses fonctions de base ?
• Efficace : Les utilisateurs peuvent-ils effectuer des tâches relativement rapidement ?
• Mémorable : Lorsque les utilisateurs s'absentent pendant un certain temps et reviennent, à quelle
vitesse peuvent-ils se familiariser à nouveau avec le produit/service et ses fonctions de base ?
• Comporte peu d'erreurs : Quelles sont les erreurs commises par les utilisateurs ? Quelle est la gravité
des erreurs ? Avec quelle facilité les utilisateurs peuvent-ils comprendre ces erreurs et s'en remettre ?
• Satisfaisant : Dans quelle mesure les utilisateurs apprécient-ils le produit/service et l'exécution des
tâches qu'elle contient ?
L’AUDIT
Centré sur l’expérience et l’interface utilisateur d’un
site ou une application, l’audit évalue la convivialité,
la conception visuelle, la navigation et d’autres
aspects pour optimiser l’expérience utilisateur.
Autrement dit, c’est une démarche qui offre un
regard approfondi et objectif permettant
d’identifier les axes d’amélioration afin de garantir
la qualité et la conformité d’un site.
COMMENT FAIRE UN AUDIT
Comprendre l’objectif du
Analyser l’ergonomie Evaluer le design visuel
site
Evaluer la vitesse de Tester les formulaires et
Tester la réactivité
chargement les transactions
Comment faire un audit
Recueillir des commentaires Fournir des
Evaluer le contenu
utilisateurs recommandations
1
À vous de
jouer !
2 1. Ouvrez Excel
2. Noter les différents critères de l’audit
3. C’est partie !
3
1
À vous de
jouer !
2 1. Ouvrez Figma
2. Reproduisez 3 pages du site de votre choix
3. C’est partie !
3
THANKS
Exemple - PERSONA
Motivations
“J’aspire à un monde où la
pauvreté serait éradiqué.” 1 Créative
2 Humanitaire
Jane Personality
21 ans - Designeuse 3 Musique
● Courageuse, aime la nature
● Engagée dans les causes
humanitaires
Bio ● Pas facilement influençable par Pain point
les organismes, association
Jane est une jeune femme à la comme La croix rouge ou encore Voir la souffrance dans le
personnalité très altruiste, elle Action contre la faim monde
aime partager et adore le La quantité de nourriture jetée
contact humain chaque jours.
Exemple - WIREFRAMES
Exemple - Empathy map
Exemple - Customer journey
