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
   

   View Slide

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
   

   View Slide

3. Je suis passionné · taré · obsédé · obnubilé par la typographie

   (rayez la ou les mentions inutiles)
   Crédit photo : Kevin Hackert
   

   View Slide

4. Crédit photo : Long Road Photography
   L’IMPACT DES ÉMOTIONS DANS

   NOTRE USAGE DU WEB
   

   View Slide

5. Crédit photo : Massachusetts Office of Travel & Tourism
   Pourquoi jouer avec les émotions ?
   

   View Slide

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.
   

   View Slide

7. Crédit photo : Javier Morales
   L’émotion créée par un élément est 

   principalement déterminé par sa personnalité
   

   View Slide

8. Crédit photo : paulgalbraith
   À l’écrit, la personnalité est intimement liée

   à la typographie et aux caractères
   

   View Slide

9. Crédit photo : Pedro Ribeiro Simões
   Depuis Gutenberg et sa première bible,
   le choix typographique est important.
   

   View Slide

10. Crédit photo : Platteville EMS
    Il faut choisir ses caractères de manière 

    cohérente pour éviter les dissonances cognitives
    

    View Slide

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
    

    View Slide

12. Crédit photo : Warren County CVB
    LA TYPOGRAPHIE COMME

    MOTEUR ÉMOTIONNEL
    

    View Slide

13. Crédit photo : Nick Page
    La typographie met en place

    un univers pour l’utilisateur
    

    View Slide

14. Crédit photo : carmichaellibrary
    La typographie est culturelle :
    chaque caractère porte son histoire
    

    View Slide

15. Crédit photo : Raban Haaijk
    Les caractères classiques :

    humanes, garaldes & réales
    

    View Slide

16. Crédit photo : Bill Dickinson
    Les caractères modernes :
    didones, mécanes et linéales
    

    View Slide

17. Crédit photo : Lauren Manning
    Quelques démonstrations de

    notre inconscient typographique
    

    View Slide

18. Crédit photo : Christopher Doyle
    Cooper Black :
    De la révolution industrielle aux vols low-cost
    

    View Slide

19. Crédit photo : BriYYZ
    Futura :
    En avance sur son temps depuis 1927
    

    View Slide

20. Crédit photo : Amanda Slater
    Baskerville :
    L’élégance aristocratique
    

    View Slide

21. Crédit photo : Marcus Lyra
    Comme il existe des profils d’utilisateurs,
    il existe des profils typographiques
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Crédit photo : Marcus Lyra
    LE CHOIX TYPOGRAPHIQUE :

    QUESTION CENTRALE DU WEB DE DEMAIN
    

    View Slide

25. Crédit photo : Ajith Kumar
    Un objectif de lisibilité
    

    View Slide

26. Crédit photo : Rach
    Augmenter la lisibilité,

    c’est maximiser l’apport d’information

    tout en garantissant un confort de lecture
    

    View Slide

27. Crédit photo : Jens Schott Knudsen
    Améliorer la lisibilité pour lutter 

    contre le phénomène de rebond
    

    View Slide

28. Crédit photo : DAVID MELCHOR DIAZ
    Améliorer la lisibilité pour faciliter 

    l’entrée dans le tunnel de conversion
    

    View Slide

29. Crédit photo : Raul Lieberwirth
    L’œil ne lit pas de manière linéaire,
    il faut lui faciliter la lecture
    

    View Slide

30. Crédit photo : Doug
    Il faut prendre exemple sur les milieux

    « extrême » générateurs de stress :
    aéroports, métro & gares
    

    View Slide

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
    

    View Slide

32. Crédit photo : Isriya Paireepairit
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. Crédit photo : Metropolitan Transportation Authority of the State of New York
    

    View Slide

36. Crédit photo : Platteville EMS
    Pour éviter la dissonance cognitive :
    la forme doit être cohérente avec le ton
    

    View Slide

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)
    

    View Slide

38. Crédit photo : relux.
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

41. Crédit photo : Metropolitan Transportation Authority of the State of New York
    LE CHOIX TYPOGRAPHIQUE
    PAR L’EXEMPLE
    

    View Slide

42. Crédit photo : Google
    Google :
    un besoin de modernité
    

    View Slide

43. Crédit photo : Google
    

    View Slide

44. Crédit photo : Pascal Subtil
    Quand New York renaît de ses cendres :
    une typographie presque sur mesure
    

    View Slide

45. Crédit photo : Thomas Bunton
    

    View Slide

46. Crédit photo : Melissa (dribbble)
    

    View Slide

47. Crédit photo : Agence France Presse
    Libération :
    la typographie comme marque de fabrique
    

    View Slide

48. View Slide

49. P&Co :
    la rétro-modernité
    

    View Slide

50. View Slide

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

    View Slide

52. View Slide

53. Crédit photo : Mark Iocchelli
    En résumé, la question typographique

    est incontournable à chaque étape de nos projets.
    

    View Slide

54. Enfin, j’aurais pu également aborder…
    

    View Slide

55. Des questions, des remarques, des trolls ?
    

    N’hésitez pas sur twitter :
    @iamhiwelo
    

    View Slide

56. MERCI DE VOTRE ATTENTION
    ET BONNE JOURNÉE =)
    Damien Senger • @iamhiwelo • Optiday 2015
    

    View Slide