animatie van visual storytelling

Visual Storytelling 
een uitgebreide uitleg met voorbeelden

Bij visual storytelling heeft beeld een belangrijke plek bij het vertellen van je verhaal.  Het is dus meer dan het toevoegen van een plaatje. De beelden zijn namelijk onderdeel van het verhaal.

Voordelen

1. Een paar cijfers

animatie van staafdiagrammen

Instagram

Als je ergens inspiratie kunt vinden voor visual storytelling is dat op Instagram. Het staat er bomvol mee. Instagram hoort dan ook bij de top 10 van de meest bezochte websites. Meer dan 1 biljoen gebruikers bezoeken maandelijks de site.

Twitter

Als je een bericht zet op Twitter kun je er maar beter een foto bij doen. De kans dat je bericht wordt gedeeld door andere gebruikers is daardoor 68% groter.

Email

Van alle gebruikers ziet 65% graag meerdere beelden in de mail.

Leren

Mensen volgen 3 keer beter de instructies op van een plaatje of video dan van tekst.

Jouw brein

Negentig procent van alle informatie die jouw brein verwerkt is visueel.

2. Je trekt mensen in je verhaal

animatie: door visual storytelling verdwijnt iemand in een computer

Er is heel veel te zien in de wereld.  We worden overspoeld met informatie.

Hiermee hangt samen dat we maar weinig aandacht hebben voor iets. Als iets ons niet voldoende boeit zijn we alweer op zoek naar iets anders.

Daardoor is het lastig om mensen je verhaal in te trekken. Met visual storytelling is dat veel gemakkelijker.

Hoe dat komt leg ik hieronder uit.

element van de site visueel verhalende site van Maria Mazarakis

Animaties die nieuwsgierig maken

Op de website van Maria Mazarakis plaatste ik allemaal kleine animaties tussen de tekst. Boven elke alinea staat een nieuwe animatie. Ze reageren op het scrollen van de bezoeker.

Visual storytelling sluit tekst dus niet uit! Het gaat juist om een goede samenwerking tussen beeld en tekst. Ze versterken elkaar.

Alle mensen die mijn site zien vertellen me dat ze nieuwsgierig worden door de animaties. Ze worden daardoor de tekst in getrokken. Ik ben daar natuurlijk superblij mee!
profielfoto Maria Mazarakis
Maria Mazarakis
Levensverhaal InZicht

3. Beeld roept emotie op

foto van man met verdriet
zelfde foto met blauw filter: krachtiger werking in visual storytelling

Hierboven zie je gelijk hoe de man zich voelt.
In Photoshop heb ik de foto rechts blauwer gemaakt.
De foto is daardoor koel.
Daarmee wordt de emotie versterkt.

Ook heb ik hier het contrast versterkt.
De uitdrukking wordt daardoor krachtiger.

Verder maakte ik de achtergrond donkerder.
De foto wordt daardoor een beetje grimmig.

Dit soort effecten worden vaak toegepast om emoties te versterken.

Beeld doet direct iets met je.
Bij een foto van een baby zijn we ogenblikkelijk vertederd.
Maar bij een foto van een slagveld voelen we gelijk afschuw.
Dat maakt visual storytelling tot een belevenis.

4. Beelden zijn effectief

heel vaak het woord roze en één keer het woord turquoise
Veel roze bolletjes met 1 turquoise bolletje ertussen

Een mens verwerkt beelden veel sneller dan tekst. Dat maakt visual storytelling heel effectief.

Kijk maar eens naar de bovenstaande 2 beelden. In welk beeld vind jij het eerste turquoise tussen al het roze?

5. Beelden worden beter onthouden

Animatie van een hoofd waar boeken uitkomen

Hier kun je zelf ervaren hoe gemakkelijk het is beelden te onthouden.
Met de onderstaande knop start je een automatische diaserie.
Kun jij daarna zien welke foto er niet in zat?

start diaserie
Welk dier heb je nog niet gezien?
This is a block of text. Double-click this text to edit it.

Bij een onderzoek lieten ze proefpersonen 2500 foto's zien. Daarna kregen de proefpersonen foto's uit deze serie te zien, samen met nieuwe foto's. Zij moesten dan aangeven welke ze al hadden gezien. Van de antwoorden was 90% juist.

bron: https://www.pnas.org/content/105/38/14325

Bij geheugentechnieken wordt er ook flink gebruik gemaakt van visualisaties.

Als je wilt dat jouw verhaal wordt onthouden doe je dus aan visual storytelling!

De regels van de werkvloer leren met een spel

Ik maakte een spelletje waardoor je leert wat voor regels er gelden in de keuken in verband met hygiëne.
Hierbij maakte ik gebruik van het principe dat je beter onthoud door beelden.
Bovendien is het zo dat mensen meer leren als zij actief met de inhoud bezig zijn.

6. Visual storytelling houdt je wakker

animatie van een wekker

De meeste webpagina's bestaan vooral uit tekst. Maar mensen lezen niet meer graag. Een stuk tekst ziet er voor de meeste mensen uit als werk.

Het is slim om de prikkels die je uitzendt te variëren. Hiermee maak je van jouw visual story een belevenis. Je kunt foto's toevoegen, animaties of video's laten spelen of gebruik maken van illustraties. Daarnaast kun je geluid laten horen en gebruik maken van virtual of augmented reality.

Visual storytelling in Virtual Reality

Ik maakte een tekening in Virtual Reality over de voordelen van het basisinkomen. Dit is een versie die je kunt bekijken zonder bril. Dat vind ik gemakkelijk voor mijn websitebezoeker.

Ik maakte ook een versie die je kunt bekijken met je telefoon en een Google Cardboard. Als je de brillen erbij uitdeelt trakteer je echt op een belevenis. Jouw voordeel is dat je weer een boodschap op de bril kwijt kan.

portretfoto
Johan Luijendijk
Betrokken bedrijfseconoom
De animatie over het basisinkomen was zoals altijd bij Frank, vrolijk, verrassend en inhoudelijk sterk van opzet.

We hebben uiteindelijk 75.000 handtekeningen opgehaald, reken maar dat deze animatie daaraan heeft bijgedragen.

De kracht van verschillende media

Foto's en video's leveren bewijs

man heeft vis gevangen

Foto’s en video vergroten de betrouwbaarheid van je verhaal. Je kunt wel vertellen hoe groot de vis was die je ving.  Maar een foto bewijst dat het ook echt zo was.

Ik zet de complimenten van mijn klanten op mijn site. Het heeft echt een meerwaarde dat ik een foto van hen laat zien. Ik laat zien dat ze echt bestaan.

Visual storytelling met overtuigingskracht heeft dus echt foto's en/of video nodig.

Visual storytelling met video's als bewijs

Voor gemeente Wageningen maakte ik een interactief overzicht over zelf groen beheren in je buurt. De bedoeling was dat mensen dit meer zouden gaan doen.

Ik heb hier er bewust voor gekozen om mensen die dit al doen op video aan het woord te laten. Je krijgt informatie van voorbeelden. De informatie is heel echt en eerlijk.

Illustraties focussen de aandacht

illustratie van streekproducten

Als je een illustratie maakt heb je volledige controle over wat je wilt laten zien. Er is geen ruis.

Een illustratie is niet afhankelijk van weersomstandigheden, de juiste locatie en het juiste licht. Dat maakt een illustratie vaak goedkoper om te maken.

In een illustratie kun je bovendien gemakkelijker een stijl doorvoeren. Je kunt bijvoorbeeld de kleuren van je huisstijl gebruiken. Hierdoor ontstaat er eenheid in je verhaal. Dat ziet er niet alleen qua vormgeving heel goed uit. Het helpt ook bij de herkenbaarheid van de afzender.

Zelf werk ik veel met illustraties in SVG omdat deze heel snel laden op het web. Deze illustraties zijn qua grootte slechts een fractie van hetzelfde formaat als foto.

Bij visual storytelling zijn illustraties dus een heel goed hulpmiddel!

Animaties zijn handig voor processen en betrokkenheid

animatie van een vinger die een menu bedient op een website

Animaties zijn zeer geschikt als je een proces wilt laten zien. Hoe een machine werkt bijvoorbeeld. Of hoe een lawine ontstaat.

In het bovenstaande voorbeeld wordt iets voorgedaan. Bij praktische vaardigheden is dit het effectiefste om te leren. De spiegelneuron treedt in werking. Deze zorgt er bijvoorbeeld ook voor dat wij gedrag van onze naasten kopiëren.

Animaties vragen de aandacht van de kijker. We kunnen onze ogen er niet vanaf houden. Dat kan voor irritatie zorgen als je animaties niet goed doseert. In alle andere gevallen verrijkt het de ervaring van je bezoeker.

Scrol-animatie

Vooral omdat animatie zoveel aandacht vraagt ben ik groot fan van de scrol-animatie. Dit is een animatie die in gang wordt gezet als de gebruiker scrolt. Ik pas deze techniek heel vaak toe.

Het grote voordeel is dat de kijker niks ziet bewegen als hij leest. In dat geval scrolt hij immers niet. De animatie zal hierdoor nooit gaan irriteren. Jouw visual story blijft een feest!

Visual storytelling met scrol-animatie

Voor Marc Siepman maakte ik een scrol-animatie over permacultuur. Het is een vrij complex onderwerp wat hij uitstekend uitlegt in één van zijn video's. Hij legt een aantal natuurlijke principes uit die erom vragen geanimeerd te worden. De lezer snapt daardoor veel sneller wat hij bedoelt.

Frank Los

Weer een Los!

Verteld, getekend en geprogrammeerd door één persoon: Frank Los

Meer weten over visuele communicatie?

Ik stuur regelmatig
mijn nieuwste werk
naar je met de mail.

Bonus: e-book met poster
met tips voor uitleg
die tussen de oren komt.
Ja, ik blijf graag op de hoogte!

Jouw visuele verhaal uitbesteden?

Of het nu gaat om overzichten of om een verhaal.

Ik maak voor jou de meest optimale visualisatie.

Want jij wilt
dat jouw informatie
de aandacht krijgt
die het verdient.

Bekijk hier wat mijn klanten te zeggen hebben

Delen is fijn!

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book!