Slide 1
Slide 1 text
UX & TYPOGRAPHIE :
LES ÉMOTIONS AU CŒUR
DU PROCESSUS DE CONVERSION
Damien Senger · @iamhiwelo · Optiday 2015
Crédit photo : Marcus Lyra
Slide 2
Slide 2 text
ça c’est moi =)
Damien Senger
je suis designer & intégrateur web
j’habite dans cette merveilleuse ville de Strasbourg
je travaille en indépendant et au sein d’une petite agence exotique, Alsacréations
je ne comprends pas les gens, mais j’aime leurs caractères !
https://hiwelo.co/ · @iamhiwelo
Slide 3
Slide 3 text
Je suis passionné · taré · obsédé · obnubilé par la typographie
(rayez la ou les mentions inutiles)
Crédit photo : Kevin Hackert
Slide 4
Slide 4 text
Crédit photo : Long Road Photography
L’IMPACT DES ÉMOTIONS DANS
NOTRE USAGE DU WEB
Slide 5
Slide 5 text
Crédit photo : Massachusetts Office of Travel & Tourism
Pourquoi jouer avec les émotions ?
Slide 6
Slide 6 text
Crédit photo : Martina Yach
Une expérience émotionnelle dispose
d’une plus forte empreinte mnésique :
elle s’ancre dans notre mémoire long-terme.
Slide 7
Slide 7 text
Crédit photo : Javier Morales
L’émotion créée par un élément est
principalement déterminé par sa personnalité
Slide 8
Slide 8 text
Crédit photo : paulgalbraith
À l’écrit, la personnalité est intimement liée
à la typographie et aux caractères
Slide 9
Slide 9 text
Crédit photo : Pedro Ribeiro Simões
Depuis Gutenberg et sa première bible,
le choix typographique est important.
Slide 10
Slide 10 text
Crédit photo : Platteville EMS
Il faut choisir ses caractères de manière
cohérente pour éviter les dissonances cognitives
Slide 11
Slide 11 text
Crédit photo : Luke Dorny
Plus un univers sera cohérent,
plus l’utilisateur sera en confiance.
On maximise donc le potentiel de transformation
Slide 12
Slide 12 text
Crédit photo : Warren County CVB
LA TYPOGRAPHIE COMME
MOTEUR ÉMOTIONNEL
Slide 13
Slide 13 text
Crédit photo : Nick Page
La typographie met en place
un univers pour l’utilisateur
Slide 14
Slide 14 text
Crédit photo : carmichaellibrary
La typographie est culturelle :
chaque caractère porte son histoire
Slide 15
Slide 15 text
Crédit photo : Raban Haaijk
Les caractères classiques :
humanes, garaldes & réales
Slide 16
Slide 16 text
Crédit photo : Bill Dickinson
Les caractères modernes :
didones, mécanes et linéales
Slide 17
Slide 17 text
Crédit photo : Lauren Manning
Quelques démonstrations de
notre inconscient typographique
Slide 18
Slide 18 text
Crédit photo : Christopher Doyle
Cooper Black :
De la révolution industrielle aux vols low-cost
Slide 19
Slide 19 text
Crédit photo : BriYYZ
Futura :
En avance sur son temps depuis 1927
Slide 20
Slide 20 text
Crédit photo : Amanda Slater
Baskerville :
L’élégance aristocratique
Slide 21
Slide 21 text
Crédit photo : Marcus Lyra
Comme il existe des profils d’utilisateurs,
il existe des profils typographiques
Slide 22
Slide 22 text
Crédit photo : Taryn
Une typographie peut être :
• ludique ou sérieuse
• féminine ou masculine
• onéreuse ou bon marché
• moderne ou ancienne
Slide 23
Slide 23 text
Crédit photo : wsquared photography & creative
Ne réinventons pas la roue :
notre inconscient typographie est forgé
de toutes les images vues depuis notre enfance
Slide 24
Slide 24 text
Crédit photo : Marcus Lyra
LE CHOIX TYPOGRAPHIQUE :
QUESTION CENTRALE DU WEB DE DEMAIN
Slide 25
Slide 25 text
Crédit photo : Ajith Kumar
Un objectif de lisibilité
Slide 26
Slide 26 text
Crédit photo : Rach
Augmenter la lisibilité,
c’est maximiser l’apport d’information
tout en garantissant un confort de lecture
Slide 27
Slide 27 text
Crédit photo : Jens Schott Knudsen
Améliorer la lisibilité pour lutter
contre le phénomène de rebond
Slide 28
Slide 28 text
Crédit photo : DAVID MELCHOR DIAZ
Améliorer la lisibilité pour faciliter
l’entrée dans le tunnel de conversion
Slide 29
Slide 29 text
Crédit photo : Raul Lieberwirth
L’œil ne lit pas de manière linéaire,
il faut lui faciliter la lecture
Slide 30
Slide 30 text
Crédit photo : Doug
Il faut prendre exemple sur les milieux
« extrême » générateurs de stress :
aéroports, métro & gares
Slide 31
Slide 31 text
Crédit photo : Isriya Paireepairit
Dans ces environnements,
deux facteurs sont à prendre en compte :
• besoin de lisibilité (forte distance)
• besoin de rapidité d’accès à l’information
Slide 32
Slide 32 text
Crédit photo : Isriya Paireepairit
Slide 33
Slide 33 text
Crédit photo : Metropolitan Transportation Authority of the State of New York
Réfléchir l’affichage
et la pertinence des données :
définir des niveaux d’information
Slide 34
Slide 34 text
Crédit photo : Metropolitan Transportation Authority of the State of New York
Avec un univers cohérent
et des niveaux d’information pertinents :
améliorons le confort des utilisateurs
Slide 35
Slide 35 text
Crédit photo : Metropolitan Transportation Authority of the State of New York
Slide 36
Slide 36 text
Crédit photo : Platteville EMS
Pour éviter la dissonance cognitive :
la forme doit être cohérente avec le ton
Slide 37
Slide 37 text
Crédit photo : relux.
Le langage, l’iconographie et la typographie
selon la position dans le tunnel de conversion
(en toute nuance bien sûr)
Slide 38
Slide 38 text
Crédit photo : relux.
Slide 39
Slide 39 text
Par exemple, en amont du tunnel de conversion :
• actions à l’infinitif
• typographie linéale géométrique
On assure la neutralité de l’information
(objectivité, non oppression)
Slide 40
Slide 40 text
Par exemple, au sein du tunnel de conversion :
• verbes d’action conjugués
• typographie linéale grotesque
On instaure une proximité bienveillante
(accompagnement, humanisation)
Slide 41
Slide 41 text
Crédit photo : Metropolitan Transportation Authority of the State of New York
LE CHOIX TYPOGRAPHIQUE
PAR L’EXEMPLE
Slide 42
Slide 42 text
Crédit photo : Google
Google :
un besoin de modernité
Slide 43
Slide 43 text
Crédit photo : Google
Slide 44
Slide 44 text
Crédit photo : Pascal Subtil
Quand New York renaît de ses cendres :
une typographie presque sur mesure
Slide 45
Slide 45 text
Crédit photo : Thomas Bunton
Slide 46
Slide 46 text
Crédit photo : Melissa (dribbble)
Slide 47
Slide 47 text
Crédit photo : Agence France Presse
Libération :
la typographie comme marque de fabrique
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
P&Co :
la rétro-modernité
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Mah Ze Dahr :
un univers de délices
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Crédit photo : Mark Iocchelli
En résumé, la question typographique
est incontournable à chaque étape de nos projets.
Slide 54
Slide 54 text
Enfin, j’aurais pu également aborder…
Slide 55
Slide 55 text
Des questions, des remarques, des trolls ?
N’hésitez pas sur twitter :
@iamhiwelo
Slide 56
Slide 56 text
MERCI DE VOTRE ATTENTION
ET BONNE JOURNÉE =)
Damien Senger • @iamhiwelo • Optiday 2015