Professionele tips voor het maken van interactieve infographics

Schrijver: Randy Alexander
Datum Van Creatie: 3 April 2021
Updatedatum: 19 Juni- 2024
Anonim
7 Tips for Creating Mindblowing Animated Infographics (In 2022)
Video: 7 Tips for Creating Mindblowing Animated Infographics (In 2022)

Inhoud

Infographics zijn overal op internet en ze worden steeds interactiever. Op deze pagina heb ik voorbeelden verzameld van de beste infographics met interactieve functionaliteit, en gekeken naar wat ze geweldig maakt. Op pagina twee vindt u enkele handige bronnen en bibliotheken om u te helpen bij het bouwen van uw eigen (of bekijk ons ​​overzicht van de beste infographics-tools).

Als u een nieuwe website maakt voor uw infographics, heeft u een websitebouwer en topwebhosting nodig. Wilt u uw creaties veilig bewaren? Probeer deze opties voor cloudopslag. Of lees verder om erachter te komen hoe u een ontwerp kunt maken dat echt boeit met uw publiek.

01. Begrijp de psychologie

Voordat u begint met het maken van uw interactieve infographic, is het de moeite waard om te overwegen waarom u deze interactief maakt.

Zoals de briljante infographic Why Your Brain Craves Infographics uitlegt, zijn mensen visueel bedraad. Het is veel waarschijnlijker dat we bereid zijn om een ​​presentatie met boeiende beelden te lezen, begrijpen en onthouden. Maar hoewel visuals misschien wel het meest essentiële leermiddel zijn, kunnen ze maar zo ver gaan.


Er is ook de essentiële component van kinetisch leren, waardoor mensen beter in staat zijn om informatie vast te houden door middel van een fysieke activiteit. Het is dus logisch dat het toevoegen van interactiviteit aan het toch al krachtige veld van datavisualisatie een infographic nog gedenkwaardiger en effectiever moet maken.

Deze combinatie van visuele en kinetische benaderingen maakt interactieve infographics de datavisualisaties van de toekomst. Natuurlijk moedigen sommige infographic-onderwerpen het gebruik van interactieve elementen eenvoudigweg niet aan, maar vele andere worden er enorm door verbeterd. Interactiviteit kan helpen om de informatie te begrijpen, controle te geven aan de gebruiker en tot de verbeelding te spreken op manieren die een statische afbeelding simpelweg niet kan.

02. Voeg kruiden toe met scroll-effecten

Een van de meest populaire vormen van interactiviteit vereist slechts een beetje scrollen van de gebruikers, wat meestal animaties en overgangen activeert. Het creëert dezelfde behoefte aan voltooiing als een jack-in-the-box; gebruikers voelen zich gedwongen om af te maken waar ze aan begonnen zijn.


Het is een geweldige techniek om kijkers in een verhaal te trekken en ze zich meer betrokken te laten voelen zonder de grenzen van de belangstelling te zwaar te belasten. De bovenstaande infographic over het wassen van de handen gebruikt zowel subtiele als flitsende animaties om de reis door een nogal droog onderwerp zo leuk mogelijk te maken.

Scrollen kan ook op heel eenvoudige manieren worden gebruikt, met eenvoudige verhalen. Kijk bijvoorbeeld eens naar deze visualisatie van de iPod-capaciteit. De inhoud is ongelooflijk eenvoudig, maar de scrolfactor doet uitstekend werk om het punt over te brengen.

03. Pagineren voor een gemakkelijke spijsvertering

Uw dagelijkse dosis water zorgt ervoor dat gebruikers door pagina's klikken in plaats van scrollen, en laat zien hoe sommige concepten beter werken met deze benadering van meerdere pagina's.

Elementen op elke pagina zijn interactief buiten de eenvoudige verplaatsing tussen onderwerpen, dus door op een nieuwe pagina te klikken, heeft de gebruiker de tijd om het ene gedeelte volledig te verwerken voordat hij naar het volgende gaat.


04. Laat gebruikers bepaalde gebieden markeren

Enkele van de beste infographics zijn degenen die een onpraktische hoeveelheid gegevens nemen en deze distilleren in een enkele, beheersbare afbeelding. Maar deze visualisaties vergen vaak nog wat geduld en doorzettingsvermogen om te begrijpen. Interactieve markering van verschillende delen kan de aanvankelijke verwarring helpen minimaliseren, wat essentieel is voor het aantrekken en behouden van de gemiddelde, gemakkelijk afleidende internetgebruiker.

De infographic over IRS-belastingaangiften hierboven, Hoeveel wordt er elk jaar niet opgeëist, had het aantal personen en bedragen aan niet-opgeëiste geld per staat in één grote grafiek kunnen weergeven, maar als je elk afzonderlijk weergeeft, is het veel minder verwarrend.

Occupational Outlook (hierboven) die percentages vacatures weergeeft op zowel beroeps- als opleidingsniveau, heeft een vergelijkbare presentatie. Maar deze infographic bevat zoveel informatie dat deze noodzakelijkerwijs op verschillende pagina's is opgesplitst.

De rollover-functionaliteit is echter op alle pagina's hetzelfde, waardoor het lijkt alsof de informatie uit één stuk bestaat. Als je niet de tijd of middelen hebt om zoiets robuusts te bouwen, kun je dit vaak aanvullen met een paar goed geplaatste animaties.

Op een veel eenvoudigere manier gebruikt deze zakelijke gids voor immateriële activa scrollende animaties om pit te geven aan de anders alledaagse grafieken en grafieken, waardoor de aandacht van de gebruiker op de hele pagina wordt vastgehouden.

05. Verberg wat informatie

Een andere geweldige manier om gebruikers actief te laten deelnemen aan de infographic-ervaring, is door klikken of rollovers te hebben die meer informatie bieden. Dit stimuleert niet alleen het gevoel van nieuwsgierigheid en verkenning van de gebruiker, het stelt hen ook in staat om kleine onderwerpen over te slaan die voor hen niet interessant zijn, zonder hen te ontmoedigen om door te gaan met de rest van de infographic.

Aan de meer complexe kant van de voorbeelden is de SimpliSafe-gids voor thuisbeveiliging (hierboven weergegeven). Er is veel meer dan alleen klikbare links tijdens deze reis door de verschillende lagen van thuisverdediging, maar de opname ervan zorgt voor een rijkere leerervaring.

06. Gebruikersparticipatie is aantrekkelijk

You vs John Paulson toont een voorbeeld van het type infographic dat de informatie vult op basis van de specifieke gegevensinvoer van de gebruiker. Door uw jaarsalaris in te voeren, krijgt u een vergelijking met het bedrag dat buitenlandse handelaar John Paulson in enkele minuten verdient (samen met een paar andere voorbeelden, gewoon om naar huis te rijden).

Omdat dit soort interactiviteit alleen werkt voor een minderheid van de onderwerpen, komt het minder vaak voor dan de andere op deze lijst. Het is echter waarschijnlijk ook het meest overtuigende, niet alleen omdat het de meeste gebruikersparticipatie uitnodigt, maar ook omdat het gepersonaliseerde informatie gebruikt.

Volgende pagina: bronnen om u te helpen uw infographics tot leven te brengen

Meer Details
Geanimeerde CSS-effecten met fallbacks
Lees Verder

Geanimeerde CSS-effecten met fallbacks

Kenni nodig: Tu enliggende C , ba i Java cript, geavanceerde HTMLVerei t: Een fat oenlijke tek teditor, een moderne webbrow erProject tijd: Zolang je het maar kunt verdragen eraan te werkenOnder teuni...
Deze gratis Chrome-extensie geeft je een plat Facebook-herontwerp
Lees Verder

Deze gratis Chrome-extensie geeft je een plat Facebook-herontwerp

Na 10 jaar i Facebook een van de mee t gebruikte ite geworden… du waarom ziet het er nog teed 10 jaar oud uit?Alle andere factoren terzijde, de kritiek op het verouderde de ktopontwerp van Facebook i ...
BLOG VAN DE WEEK: Brand Perfect
Lees Verder

BLOG VAN DE WEEK: Brand Perfect

ind Creative Bloq draait, zijn we in contact gekomen met talloze andere geweldige de ignblog die we niet ander kunnen dan dagelijk bezoeken. Deze omvatten alle van andere peciale ontwerpweb ite tot p...