Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX & Typographie : le design émotionnel au cœur...

Damien Senger
September 05, 2015

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.

Damien Senger

September 05, 2015
Tweet

More Decks by Damien Senger

Other Decks in Programming

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 : Martina Yach Une expérience émotionnelle dispose 


    d’une plus forte empreinte mnésique : elle s’ancre dans notre mémoire long-terme.
  5. Crédit photo : Javier Morales L’émotion créée par un élément

    est 
 principalement déterminé par sa personnalité
  6. Crédit photo : Pedro Ribeiro Simões Depuis Gutenberg et sa

    première bible, le choix typographique est important.
  7. Crédit photo : Platteville EMS Il faut choisir ses caractères

    de manière 
 cohérente pour éviter les dissonances cognitives
  8. Crédit photo : Luke Dorny Plus un univers sera cohérent,


    plus l’utilisateur sera en confiance.
 On maximise donc le potentiel de transformation
  9. Crédit photo : Christopher Doyle Cooper Black : De la

    révolution industrielle aux vols low-cost
  10. Crédit photo : Marcus Lyra Comme il existe des profils

    d’utilisateurs, il existe des profils typographiques
  11. Crédit photo : Taryn Une typographie peut être :
 •

    ludique ou sérieuse
 • féminine ou masculine
 • onéreuse ou bon marché
 • moderne ou ancienne
  12. 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
  13. Crédit photo : Rach Augmenter la lisibilité,
 c’est maximiser l’apport

    d’information
 tout en garantissant un confort de lecture
  14. Crédit photo : Jens Schott Knudsen Améliorer la lisibilité pour

    lutter 
 contre le phénomène de rebond
  15. Crédit photo : DAVID MELCHOR DIAZ Améliorer la lisibilité pour

    faciliter 
 l’entrée dans le tunnel de conversion
  16. Crédit photo : Raul Lieberwirth L’œil ne lit pas de

    manière linéaire, il faut lui faciliter la lecture
  17. Crédit photo : Doug Il faut prendre exemple sur les

    milieux
 « extrême » générateurs de stress : aéroports, métro & gares
  18. 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
  19. 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
  20. 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
  21. Crédit photo : Platteville EMS Pour éviter la dissonance cognitive

    : la forme doit être cohérente avec le ton
  22. 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)
  23. 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)
  24. Par exemple, au sein du tunnel de conversion :
 •

    verbes d’action conjugués
 • typographie linéale grotesque
 
 On instaure une proximité bienveillante
 (accompagnement, humanisation)
  25. Crédit photo : Metropolitan Transportation Authority of the State of

    New York LE CHOIX TYPOGRAPHIQUE PAR L’EXEMPLE
  26. Crédit photo : Pascal Subtil Quand New York renaît de

    ses cendres : une typographie presque sur mesure
  27. Crédit photo : Mark Iocchelli En résumé, la question typographique


    est incontournable à chaque étape de nos projets.