UX & Typographie : le design émotionnel au cœur du processus de conversion

Conférence donnée dans le cadre de l'Optiday 2015, à Strasbourg, autour des problématiques d'optimisation marketing et de référencement des projets web.

Cette présentation est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

Transcript

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