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

6362477fcff413a76db8da108fade362?s=47 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.

6362477fcff413a76db8da108fade362?s=128

Damien Senger

September 05, 2015
Tweet

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
  48. None
  49. P&Co : la rétro-modernité

  50. None
  51. Mah Ze Dahr : un univers de délices

  52. None
  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