Een uitgebreide gids voor informatieontwerp (met voorbeelden)

Deze gids neemt een diepe duik in het fundament van goed informatieontwerp.

Aan het einde van het artikel zul je begrijpen wat het is, waar het voor dient en waarom het belangrijk is.

Ook leer je over de principes van informatieontwerp, voorbeelden en best practices om je te helpen duidelijke, nuttige en toegankelijke informatie te ontwerpen zonder dat je een heel ontwerpteam hoeft in te schakelen!

Opmerking van de redactie: Deze gids is gemaakt door het content team van Piktochart in samenwerking met Irwin Hau van Chromatix Website Ontwerp, een bekroond webdesign- en conversiebureau gevestigd in Australië.

• Wat is informatieontwerp?
• Wat is het verschil tussen informatieontwerp en datavisualisatie?
• Informatieontwerp vs. grafisch ontwerp
• Waarom is informatieontwerp belangrijk?
• Wat zijn de principes van effectief informatieontwerp?
• Het informatieontwerp proces
• Voorbeelden van informatieontwerp
• Tips en best practices voor informatieontwerp

Informatieontwerp is het presenteren van duidelijke, toegankelijke informatie. Een goed informatieontwerp helpt je lezer je gegevens of informatie te begrijpen en snel te verwerken door middel van een duidelijke en aantrekkelijke visualisatie.

Informatieontwerp is doelgericht en helpt mensen om complexe ideeën of een mening te begrijpen, een taak uit te voeren of een probleem op te lossen.

• Recepten
• Gebruikshandleidingen
• Navigatiegidsen
• e-commerce websites & infosites
• Uitlegvideo’s
• Analytics en onderzoeksrapporten
• Bewegwijzering
• Uitleg over museumstukken
• How-to-infographics
• Ondertiteling in je favoriete Netflix-serie

Een recept met pictogrammen, opsommingstekens, diagrammen en korte instructies helpt je bijvoorbeeld bij het bereiden van een maaltijd.

Een ander voorbeeld van informatieontwerp is bewegwijzering op een vliegveld. Met duidelijke pictogrammen, leesbare typografie, eenvoudige opmaak en korte instructies kunnen reizigers een routebeschrijving volgen om vlotjes van punt A naar punt B te komen.

Hieronder staan twee voorbeelden van informatieontwerp in een recept voor chocoladetaart.

Het linkse recept neigt veel meer naar vrije artistieke expressie, met minder aandacht voor bruikbaarheid.

Het recept aan de rechterkant geeft juist prioriteit aan bruikbaarheid voor de kok, met een schreefloos lettertype, veel witte vulling, nette uitlijning en lijsten met opsommingstekens.

Hoewel ze nauw verwant zijn en er allebei hetzelfde uit kunnen zien, is het einddoel ietsjes anders als het gaat om het vereenvoudigen van gegevens.

Je komt ze vaak tegen in encyclopedieën, leerboeken of prestatierapporten.

Je vindt regelmatig voorbeelden van informatieontwerp in handleidingen, recepten en opiniestukken.

Je vraagt je waarschijnlijk af: is een infographic een voorbeeld van informatieontwerp? Of komt datavisualisatie meer naar voren in infographics?

Dat hangt af van het doel van de infographic. Bekijk de onderstaande voorbeelden.

Deze infographic over exit-interviews is een uitstekend voorbeeld van een infographic die neigt naar datavisualisatie, aangezien hij cijfers en statistieken presenteert. Als kijker heb je de ruimte om de informatie in de infographic te interpreteren.

Aan de andere kant is deze infographic over het kiezen van een onderwerp voor een onderzoeksverslag een duidelijk voorbeeld van informatieontwerp in een infographic. Het helpt de lezers hun doel te bereiken, namelijk het ontwikkelen van een goed idee voor een onderzoeksverslag.

Hoewel nauw verwant, verschilt informatieontwerp van grafisch ontwerp qua aanpak van elke praktijk om een visueel stuk te ontwikkelen voor een specifiek publiek.

Zoals je in het onderstaande voorbeeld kunt zien, is het SmartStart-project van de Nieuw-Zeelandse overheid een voorbeeld van goed informatieontwerp. Deze online hub is bedoeld voor nieuwe ouders en verzorgers die op het punt staan een kind te krijgen. Je vindt er alles wat je moet weten over het registreren en opvoeden van een kind in Nieuw-Zeeland.

Ondertussen werden onderstaande illustraties gebruikt als onderdeel van de branding voor een nieuwe huizenmarkt in Nieuw-Zeeland. Dit zijn goede voorbeelden van het gebruik van grafisch ontwerp in het bedrijfsleven voor specifieke doelgroepen. Grafische ontwerptrends blijven ook veranderen naarmate meer en meer mensen zich deze vaardigheden eigen maken!

De kern van informatieontwerp is eenvoudig: mensen helpen om informatie beter of sneller te verwerken.

Succesvol informatieontwerp is een uiterst belangrijke vaardigheid die grafisch ontwerpers, UI/UX ontwerpers, webdesigners, marketeers en bedrijven moeten beheersen.

Het ondersteunt het vermogen om belangrijke boodschappen uitgebreid en effectief over te brengen. Het kan wrijving en frustratie verminderen, van kleine, onbenullige klusjes tot het overbrengen van impactvol, diepgaand nieuws.

Iedereen die zich verdiept in informatieontwerp moet op de hoogte zijn van de volgende principes voor functioneel informatieontwerp:

Het informatieontwerp proces begint met het vaststellen van de boodschap (de informatie), de afzender (informatieverstrekker), de ontvanger (informatie-interpretatoren) en het meest geschikte medium voor de boodschap.

Ook is het belangrijk om de nodige gegevens en inzichten te verzamelen en te evalueren die later in het proces zullen worden gebruikt.

Een duidelijke en voor de hand liggende structuur van informatie vergemakkelijkt effectieve perceptie, interpretatie, begrip en leren.

Je moet rekening houden met de leesbaarheid van de teksten, afbeeldingen en lay-outs wanneer ze op papier worden afgedrukt of op een scherm worden weergegeven.

Eenvoud komt neer op de leesbaarheid van de gepresenteerde informatie, wat inhoudt dat het taalgebruik en de stijl moeten worden aangepast aan het begripsniveau van de ontvanger.

Dit principe omvat het gebruik van nadruk door middel van typografie en lay-out om de aandacht van de ontvanger te trekken, te sturen of vast te houden.

De gepresenteerde informatie moet samenhangend en consistent zijn. Inconsistenties kunnen de ontvanger in verwarring brengen. Consistentie wordt bereikt door het gebruik van accentueringstechnieken en relevante begrippen.

Informatie-ontwerpers creëren en leveren duidelijke, nuttige en toegankelijke informatie door middel van het volgende proces:

• Stap 1: Informatie plannen
• Stap 2: Project plannen
• Stap 2: Inhoud selecteren, organiseren, pagina’s of schermen ontwerpen
• Stap 3: Opstellen en testen
• Stap 4: De uiteindelijke kopie maken

De onderstaande infographic laat het proces gedetailleerd zien. Houd er rekening mee dat de gestippelde pijlen aangeven dat het informatie-ontwerpproces eerder iteratief dan strikt lineair is.

Laten we eens snel kijken naar een aantal voorbeelden van informatieontwerp in verschillende sectoren.

Zoals te zien is in de schermafbeelding hierboven, is er een duidelijke en ongecompliceerde procedure voor het indienen van klachten bij het Britse ministerie voor Werk en Pensioenen (DWP) . Ook zul je merken dat de gepresenteerde informatie is gestructureerd op een manier die gemakkelijk te navigeren en te begrijpen is.

De links zijn ook klikbaar als je wilt overslaan naar een bepaald gedeelte. Er is zelfs een sectie over wat er gebeurt als je niet tevreden bent met de reactie op je klachten!

Tia, een bedrijf voor vrouwengezondheidszorg, is goed bezig door medische informatie te delen en te presenteren dat duidelijk en gemakkelijk te begrijpen is, zoals te zien is in de voorbeelden hierboven.

Met hun pagina “Een winkelafspraak aanvragen” maakt Verizon het eenvoudig voor prospects en klanten om een zakelijke verkoopafspraak te maken door simpelweg je locatie of postcode in te voeren. Je hoeft geen lange pagina’s door te bladeren om een kantoor of winkel bij je in de buurt te vinden.

Wise, een online geldtransferservice, belooft zijn klanten dat zij één van de bedrijven zijn met delaagste transactiekosten. Ze gebruiken informatieontwerp om hun belofte “te laten zien, niet te vertellen” door middel van een vergelijkingstabel, die de keuze voor gebruikers van de service wat gemakkelijker maakt.

Airbnb creëerde marketing- en promotiemiddelen voor verhuurders om hen te helpen meer winst te maken en hun bedrijf te laten groeien op de online marktplaats.

Bruikbaarheid en toegankelijkheid vormen de kern van informatieontwerp.

Als je stappen wilt zetten in de richting van de hierboven genoemde principes voor informatieontwerp, moet je je gebruikelijke grafische ontwerpensemble opzij schuiven van ongeschikte typografiestijlen,kleurenpaletten met weinig contrast en onregelmatige lettergroottes.

Overweeg in plaats daarvan de volgende best practices:

Contrast is het verschil tussen elementen in een ontwerp waardoor ze naast elkaar opvallen.

In informatieontwerp hebben we het vaak over kleurcontrasten. Dit is cruciaal om je lezer of kijker op duidelijke wijze alle elementen te laten zien.

Sterk contrasterende kleuren worden aanbevolen voor zowel drukwerk als het web. Als je informatie online publiceert, kun je met het RGB-model een iets helderder kleurenspectrum krijgen dat je normaal gesproken niet kunt bereiken met drukwerk.

Neem bijvoorbeeld de routebeschrijving in een winkelcentrum. Een licht getint kleurenschema van zonnig geel en beige ziet er misschien mooi uit, maar is onpraktisch voor een shopper die 300 meter verderop staat, vooral als die persoon dringend naar het toilet moet.

In dit geval zou een kleurenschema met meer contrast, zoals geel en zwart, veel nuttiger zijn.

Kortom: vermijd deze kleurcombinaties met een laag contrast:

• Donkere kleuren en zwart
• Lichte kleuren en wit

Bij informatieontwerp is het belangrijk dat de lezer de tijd krijgt om informatie snel op te nemen en te begrijpen. Dezelfde manier waarop sprekers in het openbaar eventjes stil blijven voor extra effect.

Dit kan worden geïmplementeerd in informatieontwerp met voldoende witruimte rond tekst, pictogrammen of secties. Dit zorgt er ook voor dat lezers efficiënter kunnen scannen en de informatie die ze zoeken beter kunnen opnemen.

Hier is een voorbeeld van uitstekend informatieontwerp in een testimonial visual, met veel witruimte rond de geschreven tekst om de leesbaarheid te verbeteren en de gebruiker visuele focus te geven. De beeldspraak komt in dit voorbeeld op de tweede plaats.

Bij het doorgeven van informatie zijn er meestal bepaalde delen die belangrijker of gewilder zijn dan andere.

Lezers zullen meestal je inhoud doorbladeren en op zoek gaan naar deze weetjes. Het is aan jou als ontwerper om de prioriteit van informatie te organiseren en meer nadruk te leggen op de meest gewenste informatie.

Let bijvoorbeeld op de grootte van je koppen als je een handleiding maakt, want ze moeten in verhouding tot elkaar staan. Zo kun je een goede visuele hiërarchie aanbrengen, of met andere woorden, duidelijk maken wat belangrijk is om eerst naar te kijken en wat er op de tweede plaats komt.

Een ander goed voorbeeld is wanneer je de nadruk legt op de cijfers bij het presenteren van statistieken als bewijspunten op een landingspagina. Door middel van gegevens zijn bewijspunten zeer geschikt om de geloofwaardigheid van een merk te vergroten en gebruikers te helpen begrijpen hoe een bedrijf hen kan helpen.

Dikkere nummers met grotere lettergroottes en letterstijlen maken het voor online lezers gemakkelijker om hun gezochte informatie te vinden. Online lezers hebben vaak een kortere aandachtsspanne en zullen de inhoud eerder doorbladeren.

Een goed informatieontwerp vereist dat ontwerpers de perfecte balans vinden tussen visueel aantrekkelijke esthetiek en bruikbaarheid.

Dit is waar Piktochart kan helpen.

Piktochart is het hulpmiddel voor informatieontwerp voor mensen uit verschillende bedrijfstakken en met verschillende achtergronden. Maak in slechts een paar minuten prachtige infographics, rapporten, presentaties, posters en brochures. Je hebt geen ontwerpvaardigheden nodig.

Je kunt elke tekst- of gegevensrijke inhoud snel omzetten in een visual die meteen de aandacht trekt.

Met Piktochart kun je informatie ontwerpen die interacties soepeler laat verlopen, gebruikersbehoeften tegemoet komt en problemen oplost.

Probeer Piktochart vandaag nog gratis uit.