1. Évaluation en 20 points
de votre site Web
Déjeuner-conférence du 30 janvier 2013

2. Ce qui n’est pas discuté aujourd’hui
 On ne parle pas beaucoup de création d’achalandage, on se concentre sur
l’expérience proposée aux internautes.
 On reviendra dans le futur sur :
 Votre présence dans les réseaux sociaux
 Les méthodes de création de contenu (le marketing inbound ) pour le
référencement et la création d’achalandage
 L’analyse des statistiques
 Le traitement relationnel des donateurs Web

3. Pourquoi investir dans votre site Web?
Le premier moment de vérité

4. Pourquoi investir dans votre site Web?
 Recrutement : 50 % des nouveaux donateurs (certains disent 70 %)
visitent un site Web avant de donner
 Renouvellement : 35 % des dons Web sont faits à la suite d’un
publipostage (Convio, 2012)
Pas seulement pour les générations X et Y; l’utilisation du Web par les
personnes plus âgées est en forte croissance (voir études Cefrio sur les
séniornautes)
Pour contrer la diminution de vos revenus provenant des canaux
« traditionnels » : déplacement vers le Web

5. Quelques statistiques 2011 vs 2010
+ 15,8 % d’argent amassé
+ 12,6 % de dons
 Don moyen à 93,67 $
37 % des dons effectués par de nouveaux donateurs
18,8 % des dons Web sont mensuels
+ 11 % d’achalandage
1,9 % des visiteurs laissent une adresse courriel pour garder le contact
Source : The Convio Online Marketing Nonprofit Benchmark Index Study – April 2012 (données recueillies auprès de
700 organismes nord-américains)

6. Quelle approche adopter?
Étapes :
 Rédiger un plan stratégique du site Web (ou réviser celui que vous avez)
énonçant des objectifs précis
 Faire une analyse statistique et qualitative de votre site Web en fonction de
vos objectifs et des meilleures pratiques
 Déterminer les priorités
 Considérer la création d’un chantier avec des améliorations apportées
graduellement
Conditions gagnantes :
 Responsable du développement du site Web + comité de travail
 Budget d’amélioration et de mise à jour
 Critères précis pour la publication d’informations sur le site
 Sources de contenu pour le site et les réseaux sociaux

7. Notre diagnostic en 20 points

8. 1 1. Un design simple
Design Web : manière dont est conçu un site Internet
Arborescence du site
Organisation des pages
Navigation
Identité visuelle
Le chemin à suivre doit être clair pour le visiteur

9. Exemple : design simple

10. 2 2. Une navigation intuitive et claire
Le but : amener votre visiteur là où vous le décidez
Déterminez les objectifs de votre site
Informer, générer des dons, organiser un événement…
Adaptez votre navigation à ces objectifs
Priorisez l’information à communiquer
Suivez leurs points d’entrée privilégiés et optimisez
Ne découragez pas votre visiteur avec un accès compliqué à
l’information qu’il recherche

11. 2 2. Une navigation intuitive et claire
Quelques conseils…
 Plus de 7 onglets dans une navigation = TROP!
 À éviter :
 Les pop-ups intempestifs
 Les éléments trop clignotants
 Les visuels Flash non fonctionnels
 Tout élément qui vous frustre, vous, en tant qu’utilisateur
 Attention aussi au double – voire triple – niveau de navigation

12. Exemple : navigation intuitive

13. Exemple : navigation intuitive

14. 3 3. Des messages priorisés
 Principe du Blink test :
Le visiteur de votre site doit
trouver ce qu’il cherche en
3 secondes. Sinon, il en sort.
 L’internaute est prévisible.
Son œil suit le F-pattern.
 Un site peut intégrer beaucoup de contenu : priorisez pour que l’utilisateur
s’y retrouve.
Gardez en tête les questions que vos visiteurs se posent et ce que vous
voulez qu’ils fassent.

15. 4 4. Above the fold
 Real estate sur le Web : tout l’espace visuel qu’on peut utiliser
 Page d’accueil = « vitrine »
 Plus on a de pages à franchir, plus on entre dans la « profondeur » du site
 Espace le plus important = page d’accueil au-dessus du défilement = above
the fold
 Votre information prioritaire doit être située dans ce 1 er écran
Attention : gardez en tête les différents formats d’appareil

16. 5 5. Un énoncé de mission évident
Votre mission vous positionne et vous distingue des autres OBNL
Marque de fabrique + élément différenciateur
Il est important que chaque visiteur soit capable d’identifier immédiatement
quelle cause vous défendez
Le plus efficace : intégrez l’énoncé de votre mission dans la partie supérieure
de la page d’accueil de votre site – above the fold
Parlez peu, mais parlez bien!
Évitez les textes trop longs ou ayant une taille de police trop petite

17. Exemple : mission en évidence

18. Exemple : mission en évidence

19. 6
6. Un parcours optimisé et ergonomique
 Pourquoi?
 Rétention du visiteur sur le site
 Orientation du visiteur vers les pages « objectifs »
 Tunnel de conversion
 Comment optimiser?
 Page d’accueil bien construite
 Navigation simple
 Charte graphique identifiable
 Boutons d’action évidents et pertinents
 Chemin court vers les pages importantes
 Pas de page cul-de-sac
 Formulaire de don efficace
 Suivi des performances
Une meilleure expérience utilisateur pour moins d’abandons

20. 7 7. Des appels à l’action clairs
Orientez votre visiteur tout au long de son parcours sur le site
Privilégiez des boutons d’action visuellement distincts et rapidement
reconnaissables
Forme de bouton dynamique, couleur qui ressort
Texte le plus court possible
Impératif, infinitif, présent
Inspirez le dynamisme et l’action!
Positionnez-les à des endroits faciles à repérer et sur lequel l’œil atterrit
naturellement
Taux de conversion optimisés

21. Exemple : appels à l’action clairs

22. Exemple : appels à l’action clairs

23. 8
8. Un bouton « Je donne » évident
C’est le plus important des boutons d’action
Il doit être repérable immédiatement
 Bouton plus gros
 Couleur plus flash
 Texte court
Accordez-lui le meilleur emplacement sur la page d’accueil
Gardez une cohérence dans le visuel du bouton « Je donne »
Mais changez-le complètement de temps en temps
Attention = évitez les boutons qui clignotent

24. Exemple : bouton « Je donne »

25. Exemple : bouton « Je donne »

26. 9 9. Un formulaire de don efficace
C’est la dernière étape dans votre tunnel de conversion.
Surveillez son taux d’abandon!
Simplifiez votre formulaire
Testez votre page jusqu’au bout
Titre : phrase « encourageante » au lieu de « Formulaire de don »
Incluez une photo touchante
Grossissez (encore) le bouton « Je donne »
Rendez attrayant le bouton des dons mensuels
Suggérez des montants précis et tangibilisez le don
Et enfin… remerciez vos donateurs!

27. Exemple : formulaire de don

28. Exemple : formulaire de don

29. Exemple : formulaire de don

30. 10 Des couleurs et une charte graphique
10.
cohérentes
Votre visiteur doit immédiatement savoir qu’il est « chez vous »
Respectez l’identité graphique de votre organisme
Encadrez son chemin vers les pages objectifs
Image de marque cohérente, professionnelle
Évitez l’usage de Flash pour vos visuels
Conseil : choisissez votre police avec soin, c’est le détail qui peaufine l’allure
de votre site
 de plus en plus de choix de polices Web
 Times New Roman à éviter (trop « médias traditionnels » - début du numérique)
Réassurance visuelle du visiteur

31. Exemple : identité visuelle cohérente

32. Exemple : identité visuelle cohérente

33. Exemple : identité visuelle cohérente

34. 11 Du contenu dynamique et interactif
11.
Créez l’engagement grâce à du contenu « vivant »
marketing inbound (vs outbound)
Les internautes veulent du contenu intéressant, de qualité et renouvelé
Ils resteront (et reviendront) sur votre site si vous leur donnez de bonnes
raisons
Nouvelles histoires, vidéos, photos, articles intéressants sur votre blogue
Le marketing persocial = grosse tendance pour 2013+
(Contraction de personnalisé et de social)
Contenu toujours plus interactif et personnalisé
Impacts des réseaux sociaux (partage, discussion, réactivité)
Privilégiez l’interaction et le dialogue avec vos visiteurs.
Soyez transparent et prêt à discuter. Créez de la vie.

35. Exemple : contenu dynamique

36. Exemple : contenu dynamique

37. Exemple : contenu dynamique

38. 12
12. Des histoires touchantes
6 émotions déclenchent le don
Colère, surprise, dégoût, tristesse, peur, joie
Choisissez des histoires qui vont créer l’émotion chez vos visiteurs
Utilisez un texte marquant (court) et des images percutantes
Illustrez votre cause et vos actions
Montrez les conséquences de l’implication de vos donateurs
Parlez de vos résultats, chiffres à l’appui
Racontez une histoire, pas des faits
Taux de conversion plus fort Augmentation des dons

39. Exemple : histoires touchantes

40. Exemple : histoires touchantes

41. 13 Des images pleines d’émotions
13.
 Privilégiez les images au texte
 Moyen plus efficace de déclencher l’émotion
 Moins demandant que le texte pour le visiteur
N’oubliez pas : l’internaute est paresseux et il a un focus de
3 secondes!

42. Exemple : image pleine d’émotion

43. 14
14. De la vidéo
Intégrez de la vidéo dès que vous le pouvez
Moyen différent pour vous adresser à vos visiteurs : beaucoup plus
interactif
Meilleur déclencheur d’émotions que les images
Élément supplémentaire à partager sur les réseaux sociaux ou via courriel
Vous pouvez créer votre chaîne YouTube et avoir vos abonnés
occasion de contact additionnel avec votre public
Attention à la qualité de vos productions!

44. Exemple : vidéo

45. Exemple : vidéo

46. 15
15. Pages d’atterrissage – campagnes intégrées
Bonne pratique : créez une page d’atterrissage spécifique
Accompagnez votre visiteur jusqu’au bout de son expérience avec une
communication cohérente
Même thématique, mêmes visuels
Pour une campagne spécifique, une page de don spécifique
Ne le dépaysez pas : dirigez-le vers l’endroit de votre site où vous voulez
qu’il aille
Chemin clair Taux de conversion en hausse

47. 16 « Nous joindre »
Cette page doit être accessible dès votre page d’accueil
Contient tous les moyens de communiquer avec votre organisme
 Adresse postale
 Numéro de téléphone
 Numéro de télécopieur
 Adresse courriel
 Profils réseaux sociaux : FB, Twitter, LinkedIn, etc…
 Chaîne YouTube
 Fenêtre de discussion instantanée
Possible de la placer à plusieurs endroits
 Navigation permanente
 Hyperlien au-dessus de la navigation
 Colonne droite ou gauche en bas
 En bas de page

48. Exemple : page « Nous joindre »

49. 17 17. Des liens fonctionnels
Les pages non fonctionnelles génèrent de la frustration
Mauvaise expérience utilisateur
Impression d’un site à l’abandon ou mal tenu
Inverse de l’interactivité et du dynamisme qu’on recherche
Testez plus d’une fois les nouveaux liens; plusieurs testeurs
Promenez-vous tous les jours au hasard sur votre site
Construisez une page 404 au ton sympathique et professionnel

50. Exemple : Page 404

51. Exemple : Page 404

52. Exemple : Page 404

53. 18 18. Intégrer la mobilité
Les formats d’appareil sont de plus en plus variés
 Smart TV (TV connectée)
 Écrans de bureau
 Ordinateurs portables
 Tablettes
 Téléphones intelligents
2012 en quelques chiffres :
 Mobiles : 20 % du trafic en Amérique du Nord (source : étude Chitika)
 De 30 % à 50 % des internautes accèdent à leurs courriels via leur mobile ou leur
tablette (source : Exacttarget)
 Plus de personnes ont acquis un téléphone intelligent qu’un ordinateur portable
2013 : il est essentiel d’adapter votre site et vos communications en ligne
aux nouvelles contraintes liées à la diversité des formats
 Optimisation du site
 Responsive design
Nécessité d’inclure le mobile dans vos campagnes intégrées

54. Exemple : mobilité intégrée

55. Exemple : mobilité intégrée

56. Inscription courriel
19 évidente sur toutes les pages
Obtenir l’adresse courriel de vos visiteurs est important
Marketing ou collecte de fonds
L’inscription doit être possible et visible partout
Cette étape doit être simple et courte
Privilégiez une bannière d’inscription qui garde le visiteur là où il est
Formulaire d’inscription = probabilité de sortie du visiteur
Faites ressortir les avantages de l’abonnement à vos infolettres ou bulletins
électroniques

57. Exemple : inscription de l’adresse courriel

58. Exemple : inscription de l’adresse courriel

59. 20
20. Réseaux sociaux et partage
Montrez votre présence sur les réseaux sociaux pour un
engagement accru
Ajoutez des boutons d’accès aux réseaux sociaux sur votre site
Profil Facebook, compte Twitter, chaîne YouTube, blogue…
Choisissez ceux que vous animez le plus
Donnez l’occasion à vos militants/donateurs de communiquer avec vous,
d’établir un dialogue
Préparez du contenu facile à partager
Personnification de votre équipe et de votre organisme
Meilleure compréhension de vos donateurs
Tirez profit des réseaux sociaux

60. Exemple : réseaux sociaux et partage

61. Exemple : réseaux sociaux et partage

62. Et votre site? Quel diagnostic?

63. Des questions?