3. • 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
27. 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.
28. 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.
29. 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 asso
clientes
Lever les dernières
interrogations des
personnes dubitatives sur
certains points :
Une Foire à Question
34. 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
37. 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
41. 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 !
Hmmm
Surement dans la section « s’associer »
Je clique
Je veux voir les partenariats AUVM en
cours !
Hmmm
Peut être que ici, mais pas certain… Je
vais continuer à chercher ailleurs
42. 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
47. 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
48. Titre : 63 px; Gotham SSm A
La police
Corps : 20 px; Gotham SSm A
Sous-titre : 22 px; Gotham SSm A
53. • 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édition
En savoir plus sur
l’expédition
54.
55. Votre boîte à outils
+ Palleton.com
Flatuicolopicker.com
58. 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
59. Les agences de communication
500 € / j
de développement
5000 € mini
La 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 »
60. Les Freelancers & connaissances
1500 € mini
La 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
61. 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)
62. En résumé …
Quoi qu’il en soit, soyez vigilants sur quelques points :
Propriété du code
Le développeur / l’agence
doit être compétent
Le code vous appartient
Le développeur / l’agence doit être
compétent
Le contenu facile à
mettre à jour
Le code vous appartient
66. Un site internet ….
…n’est jamais fini
…doit évoluer en fonction des technologies
exemples : 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 !