5 exemples de sites internet d’associations : notre sélection

The Circle est une ONG basée à Londres luttant pour les droits des femmes et l’égalité des genres. Le développement web a été réalisé par UnitedUs, une agence de branding sous tous ces aspects.

Une conception UX convaincante

Lorsqu’on a le site internet d’une association en tête, on imagine que la réflexion de l’expérience utilisateur se concentre sur deux angles. Le premier étant de délivrer un message clair et le deuxième étant de créer l’engagement en réponse à ce message, qui est la génération de dons. La construction du site The Circle est parfaitement pensée en symétrie à ces exigences UX. En le parcourant, on constate un nombre important d’informations textuelles, ce qui prend totalement sens lorsque l’on parle d’une thématique à haute valeur sociale. C’est un sujet vaste, étant donné le nombre de problématiques à traiter, hétéroclites à travers le monde.

L’utilisateur n’est pas positionné comme un simple visiteur, mais comme un actionnaire qui doit être convaincu par la nécessité d’agir. Dès les premiers blocs en home, on peut lire un message humanisé, invitant la sensibilité des utilisateurs à participer au mouvement. L’enchainement des blocs est construit pour convaincre, alors à tout moment dès que l’utilisateur souhaite s’engager il peut cliquer sur le CTA figé au scroll.

Une toile élégante

Là où l’agence a réussi le pari, c’est en créant une lecture dynamique, ainsi qu’une atmosphère très agréable grâce au design du site. La charte est composée de couleurs marquantes et d’une typographie très élégante. On l’a trouvé pour vous, il s’agit de la font : Ayer Poster Web.  Les CTA se détachent du site grâce à un orange contrastant et des animations reprenant l’iconographie du cercle.

Le site The Circle est une jolie toile peinte par UnitedUs, suscitant des réactions et de l’intérêt. Bravo aux artistes, c’est réussi !

Équiterre est un organisme de bienfaisance canadien, œuvrant contre le réchauffement climatique et pour un changement de société juste et durable. Son site web a été réalisé par Deux Huit Huit, une agence québécoise de branding, web et tout ce qui tourne autour.

L’intelligence de la conception UX

Le site internet de cette association marque les esprits instantanément avec une utilisation particulièrement réussie du premier viewport. Avant de lire quoi que ce soit, on comprend le sujet évoqué grâce à l’application d’un montage vidéo en plein écran. On parle de l’environnement alors quoi de mieux que d’exposer sa richesse naturelle en image ? Un autre plan a été pris lors d’une manifestation pour le climat, ce montage final permet à l’utilisateur de se situer en quelque seconde sur un site engagé. L’information est intelligemment distribuée, on ne peut louper aucune entrée grâce à la navigation située en haut du viewport et doublée au sein d’un menu burger.

Là où l’UX a été conçue de manière très maligne, c’est en invitant directement l’utilisateur à faire un choix entre 3 gros CTA (Call To Action), créant instantanément son engagement dans le but de générer des dons. On retrouve cette manière de faire le long de la home, le site est conçu pour induire aux visiteurs de participer sans qu’ils aient à parcourir l’ensemble des pages.

Une direction artistique qui match

Pour couronner le tout, la direction artistique est particulièrement jolie. Toujours sur ce fameux premier viewport, on trouve une animation, déclinaison du préfixe Équi reprenant le nom de l’organisme ainsi que ses valeurs. L’espace est optimisé et agencé avec une colorimétrie cohérente, du pastel et un camaïeu de vert permettant aux CTA de couleurs orange de contraster. On note également un bon équilibre entre le texte et les images.

On peut dire que Deux Huit Huit, a réalisé un Cent faute avec le site internet de cette association !

Wenner-Gren est une fondation soutenant l’anthropologie et ses carrières à travers le monde. Le site internet de cette association a été réalisé par l’agence digitale September.

La simplicité peut être la clé

« La simplicité est le principe de l’art » disait Bruce Lee (ce n’est pas une vanne). Le site est basé sur une conception UX assez simple, le principe est de partager des contributions et recherches au secteur de l’anthropologie et de les rendre totalement accessibles. Le site est surement destiné à un public déjà initié, souhaitant se renseigner sur l’actualité de la discipline. Pour autant quelqu’un qui ne connait pas l’anthropologie n’est absolument pas perdu, il ressemble au site d’un journal en ligne.

La navigation est simple avec un enchainement de blocs assez logique. Le premier viewport présente la fondation avec photos et manifesto. C’est clair, notre compréhension n’est pas biaisée par des éléments superflus.

Ensuite on trouve les derniers articles publiés, suivi d’un bloc mettant à l’honneur certains anthropologues, qui peuvent surement être contactés au besoin d’études. Puis on arrive sur un bloc facilitant la navigation avec des entrées vers certaines pages du site. Il est agréable de le parcourir, on ne se rend pas compte qu’il y ait autant d’éléments, pourtant conséquents aux vues de toutes les catégories au sein du menu burger.

Une DA minimaliste et contemporaine

En cohérence avec la conception UX, le design graphique est visuellement assez minimaliste et cela rend un ensemble totalement agréable à consulter. En tête de home sont disposés trois cadres animés avec une jolie sélection de photographies. Ces cadres sont de tailles différentes avec une disposition assez déstructurée. Cela permet au site de dégager une certaine modernité. Sur l’ensemble du site internet de cette association on retrouve une typographie noire sur un fond clair, un parti pris minimaliste qui rend l’information textuelle totalement lisible. On se concentre sur l’essentiel, ce qui permet une lecture légère et limpide du site.

Focus sur le page « about us » : elle est particulièrement agréable à parcourir. Toujours réalisée en simplicité, elle s’apparente presque à une page d’un magazine Vogue. Le premier viewport est blanc, composé d’un manifesto centré à la typographie noire. Au scroll une image recouvrant l’écran apparait et la typographie change de couleurs pour du blanc. C’est assez smart, un niveau de navigation prend place sous le manifeso et reste figé au scroll, et l’utilisateur peut ensuite continuer la lecture de la page s’apparentant à un article assez élégamment présenté.

September prouve avec le site internet de l’association de Wenner-Gren que la simplicité peut totalement fonctionner pour attirer le lecteur. A 2 doigts de tout plaquer et devenir anthropologue.

Videnstraad.dk est le site web du conseil du savoir sur la prévention des maladies physiques et mentales, créé par l’Association médicale basée au Danemark.

L’importance du sens de lecture

Ce qui rend ce site particulièrement intéressant est l’utilisation d’une grille quadrillant l’information présente sur toutes les pages du site. Elle permet de donner un sens de lecture à l’utilisateur, en distinguant les éléments des uns des autres. On a une impression de chambre bien rangée en regardant ce site web. La conception UX est principalement basée sur cette grille et c’est assez malin. Elle est simple à mettre en place, donne un sens pratique au site et qui plus est assez moderne. Quant au menu il est plutôt simple en étant composé que de 5 entrées. Cependant chaque élément est traité en home grâce à une succession de blocs respectifs. Dès le 1^er viewport, l’utilisateur à accès à de l’information cliquable sous forme de carreaux faisant partie de la grille.

On retrouve la dernière actualité du secteur, le rapport annuel réalisé par le conseil, ainsi qu’un « à propos de nous » afin d’en connaitre plus sur leur contexte d’intervention, stratégie et vision. On a ensuite un bloc répertoriant tous les thèmes traités par leurs recherches, un bloc sur les dernières nouvelles, ainsi qu’un bloc mettant en avant un des thèmes traités par des chiffres et des faits, comme les médicaments actuellement, tout en ayant un CTA vers le rapport fourni sur le sujet. Le site est un véritable relayeur d’information, il y en a donc beaucoup mais grâce à ce système de grille chaque chose est à sa place. Sur la page consacrée à leurs rapports, ainsi que sur celle des actualités, il y a un système de filtres facilitant de nouveau l’accès à l’information.

Un design simple et intelligent

Cette grille de lecture est également très intéressante en termes de design. Le rendu ressemble à un genre de patchwork, composé de textes et d’images le tout agrémenté de jolies couleurs pastel choisies par la direction artistique.

Cette grille offre une dimension sérieuse aux sujets traités, ce qui est réellement le cas, tout en rendant le site accueillant et agréable à parcourir grâce aux couleurs de chartes. Sur les différentes pages le clic est invité, grâce à des changements de couleurs ou animations s’effectuant sur les différentes cases au survol de la souris. La charte est exploitée sur toutes les pages ainsi sur les différents rapports d’enquêtes effectuées par le conseil, ce qui créer un ensemble cohérent. Les choix des typos, images et couleurs sont réalisés avec beaucoup de modernité sans être hors sujet.

Le site internet de cette association est l’exemple réussi d’un site associatif rendant le sujet traité accessible et agréable à découvrir.

L’effet coop est une initiative réalisée par le conseil québécois de la coopération et de la mutualité, coopérative œuvrant pour l’économie sociale. Le but de l’initiative est de recenser les coopératives et mutuelles du Québec, afin de leur donner de la visibilité pour créer une économie plus juste et durable. Sujet qui peut être complexe à illustrer mais qui a superbement été réalisé par l’agence Mambo Mambo.

L’utilisateur au centre de l’expérience

On peut imaginer qu’un utilisateur arrivant sur le site ne connaisse pas tout à fait cette initiative en faveur des coopératives et souhaite se renseigner. La difficulté avec ce sujet est de réussir à être clair, tout en donnant envie de rejoindre le mouvement. Le 1^er viewport est déjà utilisé de façon peu ordinaire, il est coupé en deux avec d’un côté un rectangle bleu recouvert de différentes pastilles et logos et à droite un slider permettant de découvrir les dernières actualités. Le sens de lecture est bien défini grâce à une succession de blocs clairement identifiables par leurs couleurs vives et contrastées des unes aux autres. La home est construite par un jeu de symétrie entre les différents blocs où il y a une fois sur deux un visuel à droite et du texte à gauche.

On ressence un certain nombre de CTA largement identifiables par leur teinte tranchante et leur animation. Ces visuels aux couleurs marquées attisent notre curiosité. L’expression « l’effet coop » est présentée sur le site à beaucoup de reprises, tel un slogan. On ressent vraiment la volonté de construire une communauté d’activistes, un mouvement avec ce site web.

Le pouvoir du design

Au premier clic sur le site internet de cette association, l’utilisateur est marqué par une animation, presque ludique, de différentes pastilles, ressemblant à des stickers tombant du haut de la home pour rebondir et se poser sur le ligne du premier viewport. C’est une façon originale de présenter l’autocollant « effet coop », donné aux coopératives rejoignant l’initiative. On retrouve cet autocollant à de maintes reprises sur les différentes pages. Le site est accueillant et chaleureux grâce aux différentes couleurs de charte très vives et aux formes géométriques largement utilisées.

Mambo Mambo a créé un site avec une apparence forte, marquant les esprits et donnant envie de s’intéresser à son contenu.

Reprenez votre respiration, on peut tout vous expliquer.

Réaliser le bon site internet pour une association ne relève pas du miracle, c’est l’aboutissement d’un grand nombre d’étapes clés nécessaires à sa conception qu’une agence experte à le pouvoir de maitriser.

Son rôle sera premièrement de réfléchir à l’expérience de vos utilisateurs, grâce à une identification précise de la cible visée et l’étude de ses besoins. Cela permettant de créer un parcours simple, sans obstacle jusqu’à la conversion. Une bonne conception UX s’opère de manière inconsciente dans l’esprit des utilisateurs.

Le match parfait se réalise lorsque le design du site vient confirmer ces intentions UX. Une apparence graphique différenciante ne s’oubliera pas facilement, c’est là que repose la force du visuel. Il ne faut évidemment pas en faire trop au risque de créer un site trop complexe à utiliser.