De uitdaging:
Maak in één oogopslag duidelijk hoe het is gesteld met de vitaliteit van de cultuur in ons land
De Cultuurindex brengt al het beschikbare cijfermateriaal uit de culturele sector bij elkaar om zo ontwikkelingen over een langere termijn en in onderlinge samenhang te tonen. De cijfers zijn geïndexeerd over de periode 2005-2011 rond vier pijlers: capaciteit, participatie, geldstromen en concurrentie. Daaronder vallen een enorme hoeveelheid indicatoren en kernindicatoren.
Oplossing 1: Stel de cijfers centraal
Door de grafiek van de index centraal te presenteren en al zo veel mogelijk informatie in de grafiek te verstrekken kan de gebruiker in een oogopslag zien waar de cultuurindex over gaat en hoe het ervoor staat.
Oplossing 2: Geef cijfers betekenis met duiding en context!
Door het gebruik van nieuws - en achtergrondartikelen en sector pagina's geschreven door experts uit de betreffende sectoren kan de gebruiker meteen zien wat de cijfers betekenen. De teksten moeten zo geschreven worden dat er geen mening of conclusie gepresenteerd wordt maar slechts een mogelijke duiding.
Oplossing 3: Vertel een verhaal
Cijfers en data zijn droge kost. Voor veel mensen is het zien van getallen en grafieken al genoeg reden om weg te klikken. Een oplossing hiervoor zou kunnen zijn de data er spannend of zelfs cool uit te laten zien. Het gevaar hierbij is dat er een mooi plaatje ontstaat maar dat de echte betekenis naar de achtergrond verdwijnt. De focus ligt dan op sfeer en uiterlijk en niet op de inhoud. het vertellen van een verhaal kan zorgen voor een verbinding met de inhoud. geïnspireerd door een rijke en interactieve omgeving is de gebruiker geneigd de data gedetailleerd te verkennen.
Werkwijze
Om in staat te zijn snel en to-the-point te kunnen werken is er besloten met de Scrum methode te werken. We hebben een team geformeerd met daarin een Drupal programmeur, een ontwerper en frontend ontwikkelaar en een project manager (scrum master). Aan de kant van de opdrachtgever (de Boekman Stichting) maakten twee mensen deel uit van het team: iemand voor de data en de content en een product owner. Daarnaast hebben we besloten een klankbord groep in het leven te roepen bestaande uit verschillende betrokkenen: potentiële gebruikers, experts uit de verschillende culturele sectoren en experts op het gebied van onderzoek in de cultuursector. Op verschillende momenten tijdens het project hebben we de ideeën en de voortgang gepresenteerd en op basis van feedback het product verder verbeterd.
Interaction design: explorers versus consumers
Als eerste hebben we geprobeerd een goed overzicht te krijgen van de content en de functionaliteit. Op basis daarvan zijn we gaan schetsen en begonnen met het maken van mockups. We hebben 2 typen gebruikers gedefinieerd: de onderzoekende (explorer) en de consumerende gebruiker. Voor beide hebben we user scenarios uitgewerkt op basis van de vragen die deze gebruikers zouden kunnen stellen.
Om snel tot iets tastbaars te komen hebben we dat verder uitgewerkt tot een prototype in htlm. We hebben dit klikmodel gepresenteerd aan de klankbord groep, nog helemaal zonder vormgeving of identiteit. Het was mooi om te zien hoe potentiële gebruikers reageerden op ons prototype. Dit heeft veel waardevolle informatie opgeleverd.
Geef de gebruiker een ervaring die hem uitdaagt echt in de data op onderzoek uit te gaan.
Vormgeving
Pas vrij laat in het proces zijn we begonnen met het ontwerpen van een visuele identiteit. Het mooie was dat de aanpak, de content en het interaction design al bekend waren. het ontwerp-proces was al halverwege voordat er ook maar een kleur of vorm gekozen was.
De website als datavisualisatie
We zijn het visuele ontwerp proces begonnen met het maken van een moodboard en een style guide. Daarin hebben we alle vormgevingselementen gedefinieerd. Pas daarna hebben we dat uitgewerkt in een mockup van de homepagina en enkele andere belangrijke pagina's. Om trouw te blijven aan de gedefinieerde oplossingen hebben we voor de vormgeving ook de data centraal gesteld: we hebben het principe van de grafiek op de gehele website toegepast. De site werd zo een grote datavisualisatie. De kleuren van de pijlers uit de grafiek dienden als kleuren voor de betreffende website secties en de legenda van de grafiek op de homepagina werd meteen de navigatie van de website.
Steekwoorden
Onafhankelijkheid, autoriteit, betrouwbaarheid, neutraliteit, universaliteit, objectiviteit, helderheid, nieuwsgierigheid.
Vanuit de steekwoorden is er gekozen voor heldere, warme en duidelijke kleuren. De vier kleuren worden ondersteund door secundaire kleuren. Om tot op indicator niveau een eigen kleur te kunnen gebruiken zijn er ook nog vier schakeringen per kleur (naar wit toe).
Kleur: het leidende principe
Iedere pijler heeft zijn eigen kleur en iedere sector ook. Door de navigatie van de website en de legenda van de grafiek te verbinden en door kleur als navigatieprincipe te gebruiken, wordt de hele website als het ware een grote grafiek of infographic. In de grafiek hebben de kernindicatoren een schakering van de pijler kleur. De gewone indicatoren zijn grijs.
Cijfers
Inhoudelijk centraal staan de cijfers. Om dat te benadrukken kunnen de cijfers ook als los beeld gebruikt worden en in grootte variëren. Grote cijfers dienen als blikvanger en om de nieuwsgierigheid te wekken.
Dymanisch logo
Het logo heeft geen vaste kleur maar alleen een vaste vorm. Op basis van de plek in de site past de kleur van het logo zich aan op de inhoud. Zo wordt er een connectie gelegd met de indeling en de logica van de cijfers (de kleuren in de grafiek).
Vormentaal
De geabstraheerde vorm van de lijn diagram dient als basis voor de vormentaal. Alle gebruikte vormen zijn gebaseerd op bekende vormen van grafieken en daarnaast op duidelijkheid en helderheid. Geometrische, strakke vormen met heldere overgangen, geen ver- loopjes.
Typografie
Voor kopteksten gebruiken we Lato. Een letterype zonder schreven: helder, open en modern. Bij goed kijken valt op dat er kleine rondingen te zien zijn waardoor het font ook warmte uitstraalt. Voor de body tekst gebruiken we Georgia, een schreeflettertype. Dit font refereert aan kranten, aan traditionele onafhankelijke bronnen. Feitelijkheid en betrouwbaarheid staan hierbij voorop.
Onze samenwerking: keihard werken, veel nieuwe inzichten, goede resultaten en heel veel lol...