Vous êtes sur la page 1sur 214

MODULE UI / UX DESIGN

# INTRO
# INTRO

Le Design, qu’est ce que c’est ?


# DESIGN
# DESIGN

Le design c’est :
- Etymologie FR : Dessein = “dessin” et “but”.
- De la conception.
- Le fond et la forme.
- != ART.
- Résoudre un problème pour des utilisateurs.
- Le But, le sens.

Nous parlerons beaucoup de User Centric Design

“La forme, c’est le fond qui remonte à la surface”


-Victor Hugo
# USER EXPERIENCE - UX

L’expérience c’est ce que l’on vit, ce qu’on éprouve, ce qu’on ressent.

Tout est expérience. Se doucher, conduire, manger…

Une expérience a une dynamique temporelle : elle s’imagine, elle se vit, elle se remémore…

Une expérience est vécue par un utilisateur qui a des spécificités : une histoire, un vécu, des
capacités… Elle est vécue dans un certain contexte, avec des facteurs environnementaux, sociétaux,
météo, tendances…

Elle est multifactorielle.

C’est la “résultante”.
# USER INTERFACE - UI

L’interface permet les échanges, les interactions.


L’interface permet à un utilisateur d’assouvir un besoin.

Une interface n’est pas nécessairement graphique !

Ici on va se focaliser sur les interfaces graphiques (Graphical User Interfaces)


UI & UX DESIGN
UI & UX DESIGN

Un résumé :
https://learnui.design/blog/
ui-vs-ux-a-concise-explan
ation.html
sources : https://www.ux-republic.com
UI & UX DESIGN et illustration basée sur “les 4 niveaux
cachés du design d’expérience dans le web” de Trevor Van Gorp
l’UI, la partie visible de l’iceberg
# USER EXPERIENCE
# UX WORKFLOW
# UX DESIGN

Selon vous, c’est quoi une bonne


démarche UX design ?
UX WORKFLOW
sources : Livre Méthodes de design UX,
UX WORKFLOW Carine LALLEMAND & Guillaume GRONIER
Plus de détails : https://quotesondesign.com/
sources : ZOOKA
User Centric Design
conférence @FLUPA
# QUALI VS QUANTI ?
# UX DESIGN

C’est quoi une méthode qualitative ?


Quantitative ? Quels avantages ?
Inconvénients ?
QUALI VS QUANTI

➔ Quanti :

➔ Quali :
PLUSIEURS APPROCHES POSSIBLES



PLUSIEURS APPROCHES POSSIBLES


# LEAN STARTUP / UX
LEAN




“Faire du beurre avec de l’eau”


“Échouer au plus vite, avant d’engager trop de frais”
“Valider au plus tôt le concept”
DESIGN SPRINT #LEAN UX Sources: https://www.usabilis.com/qu-est-design-sprint/
Sources:
DESIGN SPRINT #LEAN UX https://www.youtube.com/watch?time_continue=1&v=K2vSQPh6MCE
DESIGN SPRINT #LEAN UX

les +

les -
# OBJECTIVER
ATTENTION À L’OBJECTIVITÉ sources : highest paid person opinion



# TEMPS
sources : Méthodes de design UX, Carine LALLEMAND
TEMPS
UX DELIVERY

➔ Personas -

➔ UX maps -

➔ Storyboards, scénarios utilisateurs -

➔ Protocoles / comptes-rendus de tests et sondages Attrakdiff

➔ Analyses heuristiques

➔ Architecture de l’information

➔ Interaction flows

➔ Wireframes -
# PRÉPARATION & STRAT
STRAT

Users Business
needs ;) goals
BUSINESS MODEL sources : UX Republic
sources : https://designabetterbusiness.com/2017/1
VALUE PROPOSITION 0/20/business-model-canvas-tesla-bmw/
# TP1
➔ Par groupe projet, remplissez une ébauche de votre “business model canvas”.

+ Restitution et débrief

Aide : https://strategyzer.uservoice.com/knowledgebase/articles/1194373-how-do-i-use-the-customer-
relationships-building-b
# RECRUTEMENT UTILISATEURS
RECRUTEMENT

C’est hyper important !


RECRUTEMENT DES UTILISATEURS




RECRUTEMENT DES UTILISATEURS








PHASE DE RECHERCHE sources : https://uxthink.wordpress.com/page/4/
N
AR
LE

# OBSERVATION TERRAIN
TERRAIN

C’est crucial d’aller sur le terrain.




EXEMPLE
EXEMPLE
N
AR
LE

# INTERVIEW
INTERVIEW “1 TO 1”










PROTOCOLE



Les plus :

Les moins :

DEBRIEF



N
AR
LE

# SONDAGES
SONDAGES




LES PLUS

LES MOINS
SONDAGES







SONDAGES
SONDAGES
SONDAGES
# TP2
➔ Créez un questionnaire et d’un sondage qui va vous amener des infos
pertinentes pour votre projet :




+ Restitution et débrief
N
AR
LE

# PERSONAS
sources :
UX cards UX Republic
PERSONAS


CONSEILS > CRÉDIBILITÉ


CONTENU








sources : Méthodes de design UX, Carine LALLEMAND
# TP3
➔ Création de protos-personas à partir de la matière première récoltée

+ Restitution et débrief
GN
SI
DE

# WORKSHOP CRÉATIF
IDEATION CONCEPTION
WORKSHOP CRÉATIF






WORKSHOP CRÉATIF












WORKSHOP CRÉATIF









# TP4
➔ Workshop créatif

Imaginer le déroulé d’un workshop créatif pour avancer sur vos projets.

>> Définir les objectifs et identifier les exercices et les participants, réfléchir au timing
+ matériel nécessaire.

+ Restitution et débrief
GN
SI
DE

# LES 6 CHAPEAUX
6 CHAPEAUX





LES 6 CHAPEAUX DE BONO
GN
SI
DE

# SCÉNARIO D’USAGE
SCÉNARIO D’USAGE sources : http://www.nicolasprouvost.com/#/decathlon-maps-project/
SCÉNARIO D’USAGE sources : http://www.nicolasprouvost.com/#/decathlon-maps-project/
SCÉNARIO D’USAGE sources : http://www.nicolasprouvost.com/#/decathlon-maps-project/
SCÉNARIO D’USAGE sources : http://www.nicolasprouvost.com/#/decathlon-maps-project/
SCÉNARIO D’USAGE sources : http://www.nicolasprouvost.com/#/decathlon-maps-project/
GN
SI
DE

# STORYTELLING
STORY



LES PLUS
# TP5
Racontez l’histoire d’un de vos personas, par exemple une journée type ou un moment
clé de l’expérience.

+ Restitution et débrief
GN
SI
DE

# USER JOURNEY MAPS


UX MAPS









sources : Méthodes de
design UX, Carine
LALLEMAND
# TP6
➔ Mapping de l’expérience future d’un de vos persona

+ Restitution et débrief
GN
SI
DE

# TRI DE CARTES
CARD SORTING



LES PLUS

LES MOINS
# TP
➔ Créer des UX Cards (proposition de features) et tester les sur des utilisateurs

+ Restitution et débrief
GN
SI
DE

# WIREFRAMES, UX FLOWS
SKETCHES WIREFRAMES INTERACTION FLOWS
WIREFRAMES, IX FLOWS



➔ On peut commencer sur papier
# USER INTERFACE
# UI DESIGN

Quelles interfaces vous appréciez ?


Pourquoi ?
# UI DESIGN

Éléments pragmatiques Éléments hédoniques


ACCOMPLIR DES TÂCHES AMBIANCE, ÉMOTION
# QUELQUES CONCEPTS
sources :
https://www.usabilis.com/definition-affordance/
AFFORDANCE https://www.leroymerlin.fr/v3/p/produits/2-poignees-
de-porte-margaud-sans-trou-inspire-inox-195-mm-e1500079682
sources : sources :
GESTALT https://blog.wecoprod.com/gestalt-psychologie-design/
https://www.ux-republic.com/ux-posters-6-lois-de-gestalt-illustrees/

Théorie allemande “GESTALT” = “forme”

Perception visuelle - Interprétation du cerveau


sources : sources :
GESTALT https://blog.wecoprod.com/gestalt-psychologie-design/
https://www.ux-republic.com/ux-posters-6-lois-de-gestalt-illustrees/
Plus de détails
LOI DE FITTS https://www.usabilis.com/definition-loi-de-fitts/#loidefitts

“Le temps nécessaire pour atteindre une cible dépend de sa taille et de


son éloignement.”

Plus une cible est grosse et proche, plus elle est facile à atteindre.
Plus de détails
LOI DE FITTS https://www.usabilis.com/definition-loi-de-fitts/#loidefitts

Sources (2015)
https://www.lukew.com/
sources :
LOI DE HICK https://blocnotes.iergo.fr/breve/motsetphrases/loi-de-hick/

“Le temps nécessaire pour prendre une


décision est proportionnel au nombre
d’options possibles.”
sources : sources :
NOMBRE DE MILLER https://fr.wikipedia.org/wiki/Le_nombre_magique_sept,_plus_ou_moins_deux

7 Nombre d’éléments pouvant être traités


dans la mémoire de ‘travail’

...

+-2
https://www.penserchanger.com/faites-plus-avec-moins-defforts-le-principe-8020
“Content is king.”
# TOOLS
3 GRANDES ECOLES

SKETCH + INVISION
Leader du marché.

ADOBE (AI, XD)

AXURE

Mais…
# UI PROCESS
Pour qui ? Quel contexte.. ? Quelles contraintes ? Quel problème on résout ? Le sens ? Quels
enjeux ? KPIs… ?

On commence par le “comment ça marche” pour aller vers le “à quoi ça ressemble”.

-> bench
-> zoning, wireframes, interaction flows..
-> moodboard
-> création d’éléments, atomic design, matière première…
-> création d’écrans
-> livraison screens, assets, interaction flows

bosser en 1x, en vectoriel, puis sortir les assets dans différentes tailles si nécessaire…
# UI DELIVERY
➔ Interaction flow avec spécs

➔ Fichiers graphiques déclinés dans les formats nécessaires avec infos pour les développeurs
intérêt d’un design system = source de vérité cross

➔ “assets” (icônes, images… dans les tailles et formats nécessaires)

➔ Tout autres éléments nécessaires (animations, son…)

➔ maquette interactive
# SUPPORTS ET CONTEXTES
# UI DESIGN

Quels supports pour quels contextes ?


Quelles contraintes ?
Audrey HACQ,
conférence @FLUPA

Multiplicité des supports…


Multiplicité des
Contexte d’utilisation très différents
supports…
Capacités de devices (geoloc, réseau…)
Contexte d’utilisation très
Cross device
différents
Capacités de devices
(geoloc, réseau…)
Cross device
image 3

➔ Qui ? Lieu, moment, bruit / distractions, luminosité, batterie, statique / en mouvement, espace privé,
espace public, tactile / souris clavier, temps dispo… Une expérience peut se commencer sur un device
et se prolonger ailleurs….
# ARCHITECTURE DE L’INFO
image sitemap

➔ Organiser l’information / rubriques / site map. Regrouper. Façons de naviguer : séquentielles,


exploratoires, recommandations... Tri chronologique, thématiques, notes ?
# SKETCHING / WIREFRAMING
➔ On se concentre sur la structure et le contenu

➔ Noir et blanc / échelle de gris

➔ Volontairement pas de couche graphique

➔ Possible de faire des maquettes interactives “low fidelity” mais attention, plutôt
pour vous ou l’équipe de conception, les users ont du mal à se projeter.
# INTERACTION FLOWS
Source :
Source : Projet Deliv’ faster, Nicolas PROUVOST
➔ La logique, les parcours d’écrans en écrans

➔ On peut commencer macro puis aller vers des flows avec les écrans

➔ Commencer sur papier, macro, puis affiner

➔ Intéressant à inclure : tests, tempos, specs, animations, sons, vibrations, notifs,


zones fixes / de scroll, s’assurer que pas d’impasses et que tout est clair / défini.
Penser au-delà du “happy path” : cas d’erreurs (réseau, formulaires invalides…)
# COLORS
# UI DESIGN

Qu’est-ce que vous connaissez ?


Manière de nommer ?
Accorder couleurs ?
Codes culturels ?
https://color.adobe.com/fr/explore/?filter=most-used&time=month
http://designblog.rietveldacademie.nl/?p=35944

Systèmes
RGB = Red Green Blue
Synthèse additive

color:rgba(0,255,0,1);
color:#00FF00
https://www.canva.com/learn/color-meanings/
https://www.canva.com/learn/color-tips/

On peut utiliser un cercle chromatique pour trouver des combinaisons


On peut aussi partir d’images pour trouver des nuances
Les couleurs provoquent des émotions
Les couleurs ont des significations culturelles, attention
Seuls code international vert / rouge (feux)
➔ Attention aux grosses surfaces saturées, cela peut être fatiguant visuellement

➔ Complémentaires intéressantes, ne pas les superposer (ça “vibre”)

➔ Attention aux contrastes, check : http://accessible-colors.com/


Attention aux daltoniens

➔ Blanc = léger, pur. “White space is good space”

➔ La couleur peut être en aplat, en overlay sur une image, en dégradé


# FONT
TO BE COMPLETED

Familles de fonts
Histoire
Forme
Uppercase attention
Utiliser fonts funky avec modération

Google fonts nice


Régler line-height
Livre Petit manuel de graphisme (voir bibliographie)
http://www.plume-escampette.com/polices-de-caracteres-et-typo-une-ecritu
re-bien-trempee/
https://coreight.com/content/regles-utilisation-police-typographie-ecriture

éviter les clichés :)


Source : https://learnui.design/blog/justifying-font-choices.html

➔ De par leurs formes, les fonts évoquent


des choses différents. Certaines sont
minimales, d’autres plus ornementales,
certaines rondes, d’autres plus carrées...
➔ On peut avoir des variantes d’une même font, certaines proposent de nombreuses variantes,
ce sont un peu des couteaux suisses, pas très typés mais valeurs sûres : Helvetica,
Roboto…

➔ Respect des conventions typographiques ! Qui changent selon les langues...

➔ On peut mixer des fonts de même période, de même créateur, de même famille

➔ On peut faire des mix plus audacieux, exemple Serif pour titrage, sans serif pour texte
courant ou inversement...

➔ Pour des polices plus “funky”, utiliser avec modération, en titrage par exemple.
A éviter pour du texte courant !

➔ Eviter soulignement pour des éléments non cliquables, trop connoté

➔ Attention à l’histoire des fonts, aux non-sens

➔ Prévoir la place pour les trads (certaines langues très verbeuses)


# MICRO INTERACTIONS
https://medium.com/francetelevisions-design/les-micro-interactions-au-
service-de-lui-ou-plut%C3%B4t-ux-645cb3f6b036

➔ L’animation au service du sens

➔ Fun, émotion

➔ Renforcer une transition / action

➔ Raconter quelque chose pendant les


temps d’attente

➔ Donner une preview du layout


pendant le chargement

➔ Attention aux perfs et au ‘too much’,


le juste nécessaire
https://medium.com/francetelevisions-design/les-micro-interactions-au-
service-de-lui-ou-plut%C3%B4t-ux-645cb3f6b036
# WORDING
➔ Choisir les mots avec sagesse

➔ A qui on s’adresse ? Tutoiement, vouvoiement ?

➔ Ton de voix, amical, formel, malicieux… ?

➔ Appeler un chat un chat, vocabulaire adapté aux utilisateurs

➔ Syntaxe simple, voix active

Pratique…
http://fr.loremipsum360.com/

MAIS...
“Content is king.”
404 pages air b'n'b
poubelles à Burger King
Recherche du signal GPS d'une application de suivi
entrée à la newsletter
Bulletin d’invision avec toujours des jeux de mots sur le CTA
Pub DECATHLON pour Caperlan et DOMYOS
Construit avec amour ... Élément de pied de page
Abonnement à la newsletter Ikea
# MOODBOARD
➔ Outil pour s’inspirer, définir
l’univers graphique d’une
interface, un produit, de la
déco...
Intéressant pour l’UI.
On peut y mettre couleurs,
textures, photos, typos,
objets, tout ce qui peut
inspirer et éclairer la
direction graphique.
Cela permet de partager
facilement l’univers...
« L’identité est primordiale
pour véhiculer des valeurs,
susciter des émotions,
amener l’usager dans un
univers particulier. Les
planches univers sont un
outil efficace pour
s’imprégner d’un sujet,
générer des idées,
communiquer autour d’un
thème précis.»
# DESIGN SYSTEM
➔ Travailler les éléments, la matière première, les ingrédients

➔ Couleurs, typographies, icônes, images, templates, animations…


Ton de voix, ADN, principes structurants

➔ Eléments dans différents états : actifs, inactifs, erreurs, warning…

➔ Règles de conception

➔ Composants (code)
http://bradfrost.com/blog/post/atomic-web-design/
Audrey HACQ, conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA
Audrey HACQ,
conférence @FLUPA

https://material.io/
Springboard DECATHLON
# QUELQUES RAPPELS
et illustration perso basée sur “les 4 niveaux
cachés du design d’expérience dans le web” de
Trevor Van Gorp
l’UI, la partie visible de l’iceberg Livre Designing for interaction de Dan SAFFER
éléments pragmatiques éléments hédoniques
ACCOMPLIR DES TÂCHES AMBIANCE, ÉMOTION

éléments de navigation (CTA…) fonts


formulaires images
architecture globale couleurs
... contenu
icônes
wording
...
Source : https://learnui.design/blog/justifying-font-choices.html

Images, icônes, ton de


voix, micro-interactions,
mise en page,
position des éléments...
http://bradfrost.com/blog/post/atomic-web-design/
Audrey HACQ,
conférence @FLUPA
➔ STRATÉGIE ET PRÉPARATION
Voir chapitre “LEARN” >

➔ LEARN
Voir chapitre “DESIGN” >

➔ DESIGN




Voir chapitre “TEST” >

➔ TEST
# QUELQUES CONSEILS
https://twitter.com/ithinkwellhugh/status/999738091714830338
# BIBLIOGRAPHIE
MERCI :)