Vorig jaar verzorgden we de vormgeving van het WICER-rapport en maakten ter promotie van het rapport een uitleganimatie. WICER (Water in Circular Economy and Resilience) is een initiatief van de Global Water Practice van de Wereldbank. Onder druk van een groeiende wereldbevolking, waarvan meer dan de helft in steden woont, zijn we genoodzaakt om op een nieuwe manier naar de de stedelijke watercyclus te kijken, geïnspireerd door de circulariteit van water in de natuur.

‍

Nu hebben we als vervolg op het rapport en de animatie een quick assessment tool ontwikkeld. Doel van deze tool is om:

• de gebruiker vertrouwd te maken met het WICER-framework, 
• te helpen beoordelen of een project, systeem of stad ‘WICER’ is en 
• oplossingen, richtlijnen en middelen te bieden om circulair en veerkrachtig te worden en tegelijkertijd economische en financiële voordelen te behalen.

‍

De doelgroep bestaat uit projectleiders, waterschappen, stadsbesturen en regionale overheden.

‍

Het WICER-framework wordt verbeeld met een cirkelvormige infographic met daarin de 9 stappen die de doelgroep moet nemen om te komen tot een volledig circulair en veerkrachtig watersysteem. De online tool bestaat uit 9 vragen waarmee de gebruiker per stap kan zien in welke mate zijn project voldoet aan de criteria die bij die stap horen.

‍

In de tool wordt veel gebruik gemaakt van animatie. Waarom? Casper: “In het algemeen wordt animatie gebruikt om de gebruikerservaring te verbeteren. Je kunt er content mee tot leven brengen. Je wil dat mensen feedback krijgen op wat ze doen. Als je mij een blanco vragenlijst geeft dan heb ik daar minder plezier in om dat in te vullen. Animaties moedigen aan om door te gaan. Het wordt een soort spel. En spelletjes zijn leuk!” 

‍

Op welke manieren is er gebruik gemaakt van animatie? “Er wordt in de eerste plaats gebruik gemaakt van micro-animaties op knoppen en dergelijke. Dus een knop verandert van grootte en kleur als je erover heen beweegt of op klikt. 

Daarnaast hebben we transitie-animaties gebruikt. De tool bestaat uit meerdere vragen. Op de overgang van vraag naar vraag zit telkens een animatie. De WICER-cirkel draait mee met de vraag. Het onderwerp waarover de vraag gaat klapt uit. Het werkt als een soort plaatsaanduiding. Net als in sommige games waarin je een mini-map hebt die je laat zien waar je je bevindt in de fictieve wereld. 

Verder schuift er telkens een andere illustratie in beeld. De illustratie verbeeldt het onderwerp waar de vraag over gaat.

Tenslotte bouwt er, als men alle vragen heeft ingevuld, een met kleurtjes gevulde infographic op waarin je de uitslag kunt zien. Hoe meer er groen kleurt, des te meer het project voldoet aan de WICER criteria.” 

‍

Wat voor soort animatie-technieken worden er gebruikt? Er worden drie soorten technieken gebruikt:

• CSS*-animaties voor de transities en interacties
• lotti-animatie. Dat is een animatie die gemaakt is in After Effects* en daarna geëxporteerd als JSON-file*. Deze techniek is gebruikt om de infographic te laten draaien
• voor het resultatenscherm gebruikten we een SVG* waarvan de kleurwaardes worden aangepast op basis van de antwoorden die de gebruiker geeft. Dit laatste gebeurt met behulp van een Javascript*.

‍

Vond je het een leuk project om aan te werken? “Dit project was echt een cross-over project tussen allerlei disciplines. We hebben er bijna met het hele team aan gewerkt. De tool is vormgegeven door mijn collega’s Jolanda en Daisy. De illustraties zijn gemaakt door Ron. Vervolgens heb ik als creative developer mij gefocust op de eerste online opzet van de tool en de animaties. Het backend werk werd door Matthijs gedaan en JP zette qua frontend de puntjes op de i. Ik vind het leuk om met creatief development bezig te zijn. Het is uitdagend werk, omdat ik telkens nieuwe technieken kan uitproberen.” 

‍

‍

*CSS

Cascading Style Sheets, afgekort CSS, is een programmeertaal die zorgt voor de opmaak van HTML bestanden.

Een HTML-bestand is de basis van elke pagina op een website, dat zorgt voor alle inhoud die je te zien krijgt (tekst, afbeeldingen, links). 

‍

*After Effects

After Effects is een videobewerkingsprogramma van Adobe dat voornamelijk gebruikt wordt in de video, film en televisie branche om animaties en special effects mee te maken.

‍

*JSON

Een JSON-bestand is een bestand dat eenvoudige gegevensstructuren en objecten opslaat in de indeling JavaScript Object Notation (JSON), een standaardindeling voor gegevensuitwisseling. JSON wordt vooral veel gebruikt om data van een server te versturen naar een webpagina. JSON-bestanden zijn lichtgewicht, op tekst gebaseerd, leesbaar voor mensen en kunnen worden bewerkt met een teksteditor.

‍

*SVG

SVG is een populair bestandstype voor de weergave van tweedimensionale afbeeldingen, grafieken en illustraties op websites. Het is een vectorbestand en dat heeft als speciale eigenschap dat je het kunt vergroten en verkleinen zonder verlies van resolutie.

‍

*Javascript

JavaScript is een veelgebruikte scripttaal om webpagina's interactief te maken en webapplicaties te ontwikkelen.