Comment construire les pages de votre site associatif ?

Vous êtes en train créer le site internet de votre association, vous avez défini la structure de votre site et collecté le contenu que vous souhaitiez y mettre ? Avant toute chose, félicitations !

Maintenant, nous allons maintenant voir comment structurer vos pages pour que votre contenu soit mis en valeur.

Il existe en effet quelques règles et bonnes pratiques pour créer des pages de site internet efficaces. Le but ? Renvoyer une bonne impression de votre association, permettre aux visiteurs de trouver facilement ce qu’ils cherchent et leur faire passer vos principaux messages.

Pour cela, nous avons découpé cet article en quatre parties :

• • La règle d'or : hiérarchisez l’information !
  • 3 modèles performants de pages
  • Les maquettes (« mock-up ») : un outil pour hiérarchiser l’information de vos pages
  • La boîte à outils pour construire des maquettes

Prêt ? Allez, suivez-nous !

La règle d'or : hiérarchisez l’information !

Avant toute chose, il faut déterminer la structure de votre site internet. Vos pages doivent être claires... comme de l’eau de roche. Et pour cela, une bonne hiérarchisation de l’information s’impose, en accord, bien sûr avec les objectifs de votre site internet. 

Respectez une "hiérarchie visuelle" sur l’ensemble de vos pages : sur votre page, vous souhaitez que les utilisateurs voient certaines informations en premier, puis d’autres dans un second temps. 

Il y a encore d’autres informations qui sont moins importantes, mais nécessaires pour les personnes souhaitant aller plus loin. C'est pour cela que lister le contenu du site internet de votre association peut vous être utile.

Etape 1 : Listez les blocs de contenu de la page

Sans aucune hiérarchisation, voici pêle-mêle les blocs de contenus :

• • Bouton permettant d’accéder au paiement,
  • Laïus sur les bénéfices de l’adhésion pour l’adhérent,
  • Formules d’adhésions possibles,
  • Témoignage d’un adhérent,
  • Liste de quelques personnes déjà adhérentes,
  • Information sur la sécurité des transactions,
  • Rubrique "En savoir plus"
  • Phrase d’accroche sur les adhésions.

Etape 2 : Triez les informations listées

Informations principales :

• • Bouton permettant d’accéder au paiement,
  • Formules d’adhésions possibles,
  • Phrase d’accroche sur les adhésions.

Informations secondaires :

• • Liste de quelques personnes déjà adhérentes,
  • Témoignage d’un adhérent,
  • Laïus sur les bénéfices de l’adhésion pour l’adhérent.

Informations "Aller plus loin" :

• • Information sur la sécurité des transactions,
  • Rubrique "En savoir plus" (nous contacter, voir l’actualité des adhérents, etc.)

Etape 3 : Mettez en forme

En arrivant sur la page, la première chose qui doit apparaître est un titre expliquant où le visiteur se trouve, accompagné d’un bouton de call-to-action (CTA). Le CTA renvoie à l’action principale que vous voulez que vos visiteurs fassent.

Dans notre exemple d’une page d’adhésion, le titre peut donc être par exemple "Adhérez à l’association" et le CTA peut indiquer "J’adhère".

En descendant, les informations suivantes peuvent être le "Pourquoi adhérer" avec quelques explications et éventuellement des témoignages.

Enfin, si le visiteur n’a pas eu suffisamment d’éléments pour vous convaincre, un nouveau bouton renvoyant vers "Plus d’informations" peut être ajouté.

En trois étapes simples, vous avez créé une page efficace !

3 modèles performants de pages web

Maintenant que vous avez compris le principe, allons encore plus loin ! Dans cette partie, nous vous montrons trois modèles de pages d'organisation de site internet vous permettant de bien trier vos informations et de mieux les hiérarchiser.

Modèle 1 : les pages de type "top-down"

Les pages dites "top-down", littéralement "de haut en bas", s’avèrent redoutables lorsque vous souhaitez raconter une histoire (en communication, on parle souvent de "storytelling").

Pour suivre la suite de l’histoire, vous souhaitez que l’utilisateur balaye rapidement la page vers le bas jusqu’à ce qu’il passe à l’action en cliquant sur votre bouton situé en bas de page.

Conseil : Si vous partez sur une telle option, épurez votre contenu au maximum pour encourager le scroll, c’est-à-dire l’action de glisser vers le bas.

Modèle 2 : les pages avec plusieurs options

Ce genre de structure est à privilégier quand vous souhaitez proposer plusieurs options à un utilisateur.

Cela fonctionne par exemple très bien si vous collectez des dons pour plusieurs projets et que vous voulez laisser l’utilisateur choisir parmi ces différents projets.

Dans ce cas, étant donné qu’un choix est laissé au visiteur de la page, vous pouvez placer un bouton d’appel à l’action sur chaque option.

Modèle 3 : les pages de type Landing Pages

Les landing pages, ou “pages de destination” en bon français, ont pour but de présenter de l’information, mais surtout de pousser l’utilisateur à l’action.

Pour les associations, ce type de page est par exemple très efficace dans le cadre d’une campagne d’adhésion.

Parmi les éléments que doit contenir une landing page :

• • Le message principal avec un bouton de "call-to-action",
  • Une image ou vidéo illustrant votre message principal,
  • Les avantages liés au passage à l’action,
  • Les preuves sociales de votre action, il s’agit généralement d’exemples concrets ou de témoignages qui permettent de s’identifier à la situation.

Les maquettes ("mock-up") : un outil pour hiérarchiser l’information de vos pages

Pour bien concevoir vos pages, il est vivement conseillé de réaliser des maquettes au préalable.

Les maquettes fonctionnelles représentent de façon visuelle les éléments qui sont sur une page (titre, images, vidéos, textes, boutons, etc.), leurs emplacements et leurs tailles.

Elles permettent de mieux visualiser le rendu des informations sur la page et de se poser les bonnes questions.

Les maquettes n'ont pas besoin d'être parfaites ou très soignées, elles sont davantage des bases de discussion avec votre équipe et un moyen très flexible de tester différents agencements de pages.

Il s’agit d’une étape primordiale : si vous passez directement au design de votre site internet, chaque modification ou oubli d'éléments vous prendra par la suite beaucoup plus de temps !

La boîte à outils pour concevoir des maquettes

Avec un peu d’imagination, vous pouvez réaliser vos plans de pages avec à peu près tous les outils.

Vous pouvez utiliser PowerPoint, un outil certes basique mais qui peut convenir à de nombreux besoins, sa facilité d’utilisation et le fait que vous soyez sûrement déjà familier avec le logiciel est un réel avantage.

Vous pouvez également utiliser des logiciels de mockups, spécialisés dans la conception de pages internet. Parmi eux, vous avez par exemple :

• • Balsamiq, un outil très performant mais payant (à partir de 9€/mois ou 90€/an) et en anglais,
  • Cacoo, un outil français qui propose une formule complètement gratuite,
  • Mockflow, un outil gratuit mais uniquement disponible en anglais.

Enfin, vous pouvez aussi choisir tout simplement de créer vos maquettes… sur papier ! Un bon vieux crayon et un carnet sont aussi des outils simples permettant d’organiser une page web de manière efficace. Une méthode d’ailleurs souvent utilisée par les designers pour gagner du temps sur leurs premières maquettes.

Vous avez maintenant toutes les bases pour vous lancer sur vos projets de création ou de refonte de votre site internet.

En retenant les principaux conseils de cet article, et en le complétant avec notre guide téléchargeable ci-dessous, nous sommes convaincus que le résultat ne peut être qu’excellent. Il n’y a plus qu’à vous lancer, à vous de jouer maintenant !