comment (re)créer le site de son association - 26 novembre 2015
TRANSCRIPT
ATELIER : COMMENT (RE)CRÉER LE SITE DE SON
ASSOCIATION
Objectifs de l’atelier
• Acquérir une méthodologie pour construire son site
• Avoir les clés pour échanger avec les prestataires
• Connaître les bonnes pratiques
• Connaître les bons outils
• S’inspirer d’exemples et de contre-exemples associatifs
3
LES OBJECTIFS
Etape 1 :Définir ses objectifs et destinataires
Les destinataires potentiels
Etape 2 :Faire l’état des lieux
Pourquoi changer ? 1
Design
Ergonomie
Autonomie
Responsive
Contenu
Ciblage
Test de comptabilité mobile Google
S’inspirer2
Themeforest
Etape 3 :Construire la structure
Etape 4 :Construire ses pages
Organiser l’information1
VS
LES OBJECTIFS
Les étapes :
• Déterminer les messages que l’on veut faire passer
• Organiser ces messages
• Les mettre en forme
Fournir à l’internaute un contenu organisé, pour que celui-ci soit sensibilisé, tenu informé et/ou passe à l’action.
Cas d’usage : Refonte de la page Tarifs d’AssoConnect
Objectif : Faire comprendre aux utilisateurs nos tarifs, et les inviter à tester l’outil.
Messages :
• Faire en sorte que la personne comprenne rapidement notre grille tarifaire • Informer la personne sur nos différentes formules• Répondre aux éventuelles questions / interrogations de la personne sur la
solution• Les inviter à tester l’outil• Les conforter dans leur choix, en leur montrant qu’ils ne sont pas les seuls à
utiliser l’outil.
Informations principales Informations secondaires Aller plus loin…
Faire comprendre notre grille tarifaire : En une phrase la personne doit saisir que le tarif évolue en fonction de la taille de l’association, et que toutes les fonctionnalités sont disponibles dès la formule la moins chère.
Communiquer les formules proposées : 4 tarifs, avec 2 mois offert si engagement annuel
Les inviter à tester
Communiquer sur les options possibles en plus des formules : Achat de nom de domaine, Formations sur l’outil, création du site, etc.
Inviter les plus grosses associations à nous contacter. Pour leur proposer un RDV téléphonique et cerner leurs besoins
Lui donner des preuves « sociales » de notre action : Logos de quelques assoclientes
Lever les dernières interrogations des personnes dubitatives sur certains points : Une Foire à Question
Des modèles de pages qui fonctionnent
2
Les outils pour concevoir vos modèles de pages
Logiciels Mockups Powerpoint Et surtout…
du papier et un crayon
Regardez autour de vous
Les meilleurs sites associatifs Les sites non associatifs
Le contenu3
Un constat
Steve Krug : « Nous ne lisons pas les pages, nous les scannons. »
• Nous sommes souvent pressés ou n’avons tout simplement pas envie de lire• Seulement certaines sections nous intéressent
• Le temps d’attention moyen par page est de 30 à 60 secondes.
Une solution : Variez les types de contenus
Restez simple4
Eliminez les sources de confusions inutiles
Evident Nécessite de la réflexion
Partenariat Association à AUVM
Je veux voir les programmes de partenariats AUVM en cours !
Je clique
Je veux voir les partenariats AUVM en cours !HmmmSurement dans la section « s’associer »
Je clique
Je veux voir les partenariats AUVM en cours !HmmmPeut être que ici, mais pas certain… Je vais continuer à chercher ailleurs
L’utilisateur doit trouver intuitivement l’information qu’il cherche
Eliminez les sources de confusion inutiles
Pour cela, il est utile d’éliminer au maximum toutes les sources de confusion
Le design
Partenariat
Partenariat
Partenariat
Le texte
Partenariat
Association à AUVM
Ne réinventez pas la roue5
Où afficher les boutons dons ?
Comment gérer le process de dons?
www.croix-rouge.fr/ www.electriciens-sans-frontieres.org/
Les problèmes de police6
Assurez vous que les polices soient faciles à lire.
Taille 14 minimum
2 styles de polices maximum
Gardez une certaine cohérence !
Titre de taille 41
Sous-titre de taille 18
Texte principal de taille 16
Choix des polices
Titre : 63 px; Gotham SSm A
La police
Corps : 20 px; Gotham SSm A
Sous-titre : 22 px; Gotham SSm A
Votre boîte à outils
+ GoogleFont, daFont
Les couleurs7
• Evitez l’excès de couleurs (3 couleurs maximum)
• Pour les polices, optez pour une couleur grise sombre / noire
• Choisissez toujours des couleurs avec un contraste important.
Quelques règles à suivre dans le choix des couleurs
Mon texte Mon texte
S’inscrire à l’expéditionEn savoir plus sur
l’expédition
Votre boîte à outils
+ Palleton.com
Flatuicolopicker.com
Etape 5 :Prestataires et outils
Les acteurs1
Je soustraite le développement
Les différentes options pour le développement de son site
Je développe en interne
À une agence de communication
À un free-lanceur
Utilisation d’un CMS
Partir d’une feuille blanche
Les agences de communication
500 € / j de développement
5000 € miniLa création du site
(10-20 pages assez simple avec formulaire de contact,
newsletter, etc.)
Frais de maintenance
Les chiffres
Les avantages
• La qualité du rendu Demandez les références de l’agence • Le temps passé Sous-traitance de toute la partie développement• Le suivi Un site internet n’est pas une opération « one shot »
Les Freelancers & connaissances
1500 € miniLa création du site
(pour une prestation très simple)
Les chiffres Les avantages & inconvénients
• La qualité du rendu Variable• Le temps passé Sous-traitance de toute la partie
développement• Le suivi Souvent pas ou peu de suivi• Le risque La personne n’est plus
Développement en interne
Les avantages & inconvénients
Les avantages :• Le prix – Gratuit ou très peu cher (compétences en interne)• Les améliorations – Tester rapidement les pages telles que vous les avez conçues, et
pourrez les faire évoluer sans voir les coûts de développement s’envoler
Les inconvénients :• La qualité – Moins abouti que si vous sous-traitiez une agence• Risqué si développé sans CMS – Quid si la personne part ?
Les outils à disposition (CMS ou Systèmes de Gestion de Contenu)
En résumé …
Quoi qu’il en soit, soyez vigilants sur quelques points :
Propriété du codeLe développeur / l’agence
doit être compétent
Le code vous appartientLe développeur / l’agence doit être
compétent
Le contenu facile à mettre à jour
Le code vous appartient
Les CMS2
Synthèse3
Un site internet ….
…n’est jamais fini
…doit évoluer en fonction des technologiesexemples : Sites internet développés sous Flash, Google intègre
l’aspect Responsive dans son algorithme.
Il faut donc prendre ces facteurs en compte dans votre budget, et votre choix de développement !
Pour approfondir