Design web interactif pour la conservation

Un site web interactif pour la conservation conçu autour du bois tombé

Second Spring commence par un tronc tombé plutôt que par un formulaire de don. Une branche traverse l’écran en diagonale sous un grand titre en caractères à empattements, tandis que des feuilles encadrent les bords extérieurs. Le passage sur le bois fait pousser une plaque de mousse temporaire. Dans l’état capturé, l’interface indique une couverture de mousse de 20 % ; ce nombre décrit l’effet à l’écran, et non l’habitat restauré.

La composition attribue une fonction différente à chaque couche. Le centre pâle préserve la lisibilité du titre, l’écorce texturée identifie la surface interactive et une rangée étroite de commandes regroupe les actions de rotation, de pluie, de réduction des animations, de réinitialisation et de capture. Les visiteurs peuvent comprendre l’invitation principale sans devoir d’abord étudier les commandes.

01

Une surface qui invite au toucher

Le tronc est le plus grand objet tactile de la page. Sa position diagonale attire l’attention à travers l’écran et offre au pointeur une cible reconnaissable. Le fait de limiter l’effet au bois relie l’interaction au sujet ; une animation qui suivrait le curseur partout raconterait une histoire moins précise.

02

Un retour sans tableau de scores

La couverture de mousse apparaît à côté des commandes de la scène dans un texte discret. Elle confirme que l’interaction a produit un effet sans rivaliser avec le titre de la campagne. Comme la croissance s’estompe ensuite, présenter ce pourcentage comme une réussite cumulative dénaturerait l’expérience. Le libellé de l’état de repos aide à distinguer l’inactivité d’un dysfonctionnement de la scène.

03

Maîtriser l’atmosphère

La rotation et la pluie disposent de commandes distinctes, de sorte que le mouvement et la météo ne forment pas nécessairement un effet indissociable. La rotation était en pause pour la capture du visuel principal, tandis que la pluie continuait. C’est utile dans une scène d’exploration : les visiteurs peuvent examiner une zone sans perdre toute l’atmosphère qui lui donne son caractère distinctif.

Relier les montants de soutien à des activités concrètes

La section de soutien transforme trois prix en trois types de travaux différents. Chaque colonne reprend le même ordre : montant, activité, brève explication et action. Cette structure répétée rend les options comparables, tandis que les noms des activités empêchent les nombres de devenir des paliers de prix arbitraires.

Les unités sont volontairement différentes, de sorte que la page n’établit pas de comparaison entre prix et impact. Une véritable campagne devrait apporter des preuves de ces relations. Ici, chaque bouton indique Support (simulated), et la confirmation locale répète qu’aucun paiement n’a lieu. Le design permet de tester la manière dont les utilisateurs comprennent les choix avant de connecter un quelconque système de transaction.

Des récits du sol forestier au formulaire de bénévolat

Après le visuel principal, quatre observations présentent le sol, l’eau, les champignons et la canopée. Elles sont proposées comme une séquence éditoriale plutôt que comme des récompenses débloquées en faisant pousser de la mousse. La page indique explicitement que la lecture ne dépend pas de la progression de l’interaction. Une personne qui ignore la scène peut donc accéder à la même explication et aux mêmes options de participation.

1. Expliquer d’abord l’objet

   La première observation relie le bois mort au sol forestier. L’eau, les champignons et la canopée élargissent ensuite le sujet autour de ce même objet. La lecture reste ainsi liée au tronc que le visiteur a déjà vu, au lieu de basculer brusquement vers une déclaration de campagne sans rapport.

2. Proposer plus qu’une action financière

   Give a morning fait suite aux options de soutien avec un formulaire de bénévolat distinct. Il demande le nom, l’adresse e-mail et une journée sur le terrain. Le sélecteur de journée mentionne un relevé du bois mort, la plantation de jeunes arbres et une promenade de suivi de la mousse, de sorte que le choix décrit une activité plutôt qu’une date inexpliquée.

3. Rendre visible la limite du formulaire

   L’avis d’inscription simulée se trouve au-dessus des champs, où il peut être lu avant la saisie des informations. C’est plus important qu’une clause de non-responsabilité dissimulée dans le pied de page. Pour un véritable service, cette même zone devrait expliquer honnêtement où vont les informations et ce qui se passe ensuite.

Ce que démontre ce prototype consacré à la conservation

L’aperçu local présente une scène interactive rendue, des animations configurables, du contenu éditorial et des interfaces de participation simulées. La boîte de dialogue de soutien à £15 a été ouverte et confirmée localement. Aucun paiement, aucun e-mail ni aucun travail de restauration n’en a résulté. Les noms des journées sur le terrain et les montants de soutien sont des exemples fictifs ; le pourcentage de mousse de la scène ne doit pas être présenté comme un impact environnemental.