Évaluation en 20 points de votre site Web

Déjeuner-conférence du 30 janvier 2013

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

Le premier moment de vérité

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

Pourquoi investir dans votre site Web?

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)

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

Notre diagnostic en 20 points

1. Un design simple

Design Web : manière dont est conçu un site Internet

Arborescence du siteOrganisation des pagesNavigationIdentité visuelle

Le chemin à suivre doit être clair pour le visiteur

1

Exemple : design simple

2. Une navigation intuitive et claire

Le but : amener votre visiteur là où vous le décidez

Déterminez les objectifs de votre siteInformer, générer des dons, organiser un événement…

Adaptez votre navigation à ces objectifsPriorisez l’information à communiquerSuivez 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

2

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

2. Une navigation intuitive et claire2

Exemple : navigation intuitive

Exemple : navigation intuitive

3. Des messages priorisés

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.

3

Principe du Blink test : Le visiteur de votre site doit

trouver ce qu’il cherche en3 secondes. Sinon, il en sort.

L’internaute est prévisible.Son œil suit le F-pattern.

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 1er écranAttention : gardez en tête les différents formats d’appareil

4

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

5

Exemple : mission en évidence

Exemple : mission en évidence

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

6

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 possibleImpé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

7

Exemple : appels à l’action clairs

Exemple : appels à l’action clairs

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

8

Exemple : bouton « Je donne »

Exemple : bouton « Je donne »

9. Un formulaire de don efficace

C’est la dernière étape dans votre tunnel de conversion.Surveillez son taux d’abandon!

Simplifiez votre formulaireTestez votre page jusqu’au boutTitre : phrase « encourageante » au lieu de « Formulaire de don »Incluez une photo touchanteGrossissez (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!

9

Exemple : formulaire de don

Exemple : formulaire de don

Exemple : formulaire de don

10. Des couleurs et une charte graphique cohérentes

Votre visiteur doit immédiatement savoir qu’il est « chez vous »

Respectez l’identité graphique de votre organismeEncadrez son chemin vers les pages objectifsImage 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

10

Exemple : identité visuelle cohérente

Exemple : identité visuelle cohérente

Exemple : identité visuelle cohérente

11. Du contenu dynamique et interactif

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 blogueLe 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.

11

Exemple : contenu dynamique

Exemple : contenu dynamique

Exemple : contenu dynamique

12. Des histoires touchantes

6 émotions déclenchent le donColè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 percutantesIllustrez votre cause et vos actionsMontrez les conséquences de l’implication de vos donateursParlez de vos résultats, chiffres à l’appuiRacontez une histoire, pas des faits

Taux de conversion plus fort Augmentation des dons

12

Exemple : histoires touchantes

Exemple : histoires touchantes

13. Des images pleines d’émotions

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!

13

Exemple : image pleine d’émotion

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!

14

Exemple : vidéo

Exemple : vidéo

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 visuelsPour 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

15

« 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

16

Exemple : page « Nous joindre »

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 tenuInverse de l’interactivité et du dynamisme qu’on recherche

Testez plus d’une fois les nouveaux liens; plusieurs testeursPromenez-vous tous les jours au hasard sur votre siteConstruisez une page 404 au ton sympathique et professionnel

17

Exemple : Page 404

Exemple : Page 404

Exemple : Page 404

18. Intégrer la mobilité

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

18Les 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

Exemple : mobilité intégrée

Exemple : mobilité intégrée

Inscription courriel évidente sur toutes les pages

Obtenir l’adresse courriel de vos visiteurs est importantMarketing 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

19

Exemple : inscription de l’adresse courriel

Exemple : inscription de l’adresse courriel

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 siteProfil Facebook, compte Twitter, chaîne YouTube, blogue…

Choisissez ceux que vous animez le plusDonnez l’occasion à vos militants/donateurs de communiquer avec vous, d’établir un dialoguePréparez du contenu facile à partager

Personnification de votre équipe et de votre organismeMeilleure compréhension de vos donateurs

Tirez profit des réseaux sociaux

20

Exemple : réseaux sociaux et partage

Exemple : réseaux sociaux et partage

Et votre site? Quel diagnostic?

Des questions?