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