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 :)