Hvordan lage interaktiv infografikk: En nybegynnerveiledning til datavisualisering. Tilpass innhold med brukerinnspill

Testix publiserer en oversettelse av artikkelenRobbie Richards . Opprinnelig:Hvordan lage en interaktiv infografikk (en 6-punkts guide)

En av de mest store problemer Utfordringen markedsførere står overfor i dag er kampen for å lage engasjerende innhold.

Søkealgoritmer endres hele tiden i et forsøk på å filtrere innhold Lav kvalitet. Med hensyn til ovenstående fører dette til store endringer i strategier for innholdsskaping.

Noen merker har gått over til longreads...

...eller typen innhold Brian Dean promoterer med sin "Skyscraper Technique".

Resultatet er en eksplosjon av innhold som oversvømmer Internett. I dag publiseres mer enn 2 millioner artikler hver dag bare på blogger.

Dette nivået av innholdsmetning har forårsaket et dramatisk skifte i bedrifters strategier.

I i fjor, har mange jobbet for å diversifisere innholdet sitt ved å legge til andre formater  som infografikk. Fakta: Infographics opplevde eksplosiv vekst gjennom 2016, med 58 % av markedsførerne rangerte dem blant de beste taktikkene de bruker for å engasjere publikum.

For eksempel tror noen markedsførere at å lage infografikk krever visse faglige ferdigheter eller dyrt grafisk designer. Men det er ikke sant.

Du trenger ikke spesiallag utviklere, hvis du har plattformer * som tilbyr et sett med verktøy som fremskynder og forenkler prosessen med å lage interaktivt innhold.

I denne artikkelen vil du se at interaktiv infografikk ikke bare er lett å lage — de er enda mer effektive til å engasjere publikum enn statisk infografikk og gjøre leserne dine til potensielle kunder.

Hvorfor interaktiv infografikk slår deres statiske motstykke.

Konseptet med en infografikk er enkelt: pakk så mye verdi som mulig inn i et innhold for leserne og visualiser det for å engasjere dem bedre.

Det er nettopp dette denne interaktive infografikken ble laget for.

Opprinnelig

Den grafiske utformingen passer perfekt til både historieplottet og datasettet. Du reiser i 3000 kilometer i timen, og flyr forbi den internasjonale romstasjonen til toppen av feeden som består av 21,9 milliarder bilder lagt ut på Instagram i løpet av et år.

Her er hva du bør huske på når du velger visuelt tema for interaktiv infografikk:

• Hjelper bildene? interaktive elementer bidra til å bringe data til live?
• Hvor godt gjenspeiler bildene, animasjonene og designelementene merkevaren din, så vel som andre merker som har samarbeidet med deg for å lage innholdet?
• Hvor skal han bo? interaktiv grafikk? Hvis det skal vises på nettstedet ditt, kan det være lurt å matche designet til nettstedets tema eller maler.
• Sørg for at visualiseringsideen er relevant for publikum, bransje og historie. Infografikk om feriesteder vil ha en helt annen visuell stil enn salgsfremmende arrangementer for toppledere.

Et annet godt eksempel er denne infografikken av Joho Bean:

Den tar brukeren med inn i et uvanlig multimedieeventyr, ved hjelp av saftige opptak, og forteller om kaffebønnens reise fra modningsstedet til forbrukeren.

Brukerhandlinger bør skape et svar

Interaktiv infografikk skal være interaktiv, men det betyr ikke at de skal være begrenset til individuelle klikkbare elementer.

Hver brukerhandling bør skape en form for respons i innholdet slik at det hele skaper en virkelig personlig opplevelse — selv om det bare er en enkel siderulling.

Opprinnelig

Ikke bare skjult innhold tvinger leseren til å delta aktivt i å lære innholdet, det oppmuntrer til nysgjerrighet og lar også leserne hoppe over deler som er av liten interesse for dem.

Tilpass innhold med brukerinnspill

Du kan garantere mye sterkere engasjement hvis du tilbyr data til brukere basert på informasjonen de legger inn. Dette samsvarer med brukernes ønsker: de vil ha mer interaktivt innhold og mer personalisering.

Et fantastisk eksempel på dette er en personlig infografikk som gir innsikt i om jobben din kan være i fare for å bli automatisert av roboter:

Opprinnelig

Brukere må velge et yrke som interesserer dem for å motta relevant informasjon.

Inkluder grafiske skjemaer for å samle informasjon

Chip virtuell virkelighet er at for andre vil du se ut som en idiot

Googles Cardboard Design Lab er en god "veiledning" for nybegynnere av virtuell virkelighet-designere

Infografikk - som et eventyrspill

Problemet med Unity er at det ikke er så lett å lage en god ting for nettet.

Virtual reality er som hodetelefoner for øynene dine

Virtuell virkelighet krever et trygt miljø; du kan ikke gå inn i det "på farten." Dette begrenser hva VR kan gjøre

Avsluttet økten første halvdel av dagen Archie Tse fra Den nye York Times med det provoserende emnet "Hvorfor NYT gjør mindre interaktivt arbeid."

NYTs arbeid er basert på tre regler for visuell historiefortelling:

1. Hvis leseren trenger å klikke i stedet for å bla, så må det skje noe utenom det vanlige.
2. Anta at verktøytips og andre sveveeffekter aldri vil bli sett av noen. Hvis innholdet er viktig, sørg for at leseren ser det med en gang.
3. Hvis du vil lage noe interaktivt, husk at det vil være dyrt å få det til å fungere på alle plattformer.

Du må tegne grafikken på nytt 2 eller 3 ganger for å få den til å fungere på både skrivebord og mobil

Hvordan disse reglene endret NYTs tilnærming:

1. De fleste visualiseringer er nå statiske
2. Det er flere tekster
3. Hvis bevegelse i bildet er nødvendig, vises det under rulling

(Det fjerde punktet sier at de fortsatt driver med interaktivt arbeid. Men nå må grunnen være VELDIG meningsfull).

Vi gjorde "flertrinn". Brukere stoppet ved trinn 3. Leserne vil bare rulle, ikke klikke

Archie Tse: Scrolling vs. klikke

De siste 18 ukene har Andy Kriebel hver søndag kveld lagt ut infografikken og dataene den er basert på på VizWiz. Oppgaven er å sette av ca en times tid på mandag, raskt analysere visualiseringen og lage din egen versjon.

Nedenfor publiserer vi resultatene fra forrige uke - Slaveri i det 21. århundre.

#MakeoverMonday av Andy Kriebel. Detaljert beskrivelse og interaktiv - på Andys blogg:

#MakeoverMonday av Andy Cotgreave. Detaljert beskrivelse og interaktiv - på Andys blogg:

Jeg lærte også at 51 % av menneskene i verden er yngre enn meg, og 63 % i Russland er eldre, og at sjansene mine for å dø akkurat nå ikke er så store. Tallene sluttet plutselig å være "statistikk" og traff meg.

Datavisualisering - bruker store datasett med færre selvlaget over design; basert på algoritmer. For eksempel det interaktive arbeidet til New York Times.

Visuell kunst - ensrettet koding. Vakre, men vanskelige å tyde visualiseringer, for eksempel beregningskunsten til Kunal Anand.

Hva er problemet?

Som et resultat tiltrekker mange verk bare sofistikerte brukere, men lar ikke uinnvidde lesere forstå essensen av problemet, og dermed beseire formålet med visualisering - å informere publikum. Dette er grunnen til at det er så viktig å gjenkjenne og forstå problemet med visuell kompetanse i sammenheng med visualisering.

En ny "visuell grammatikk" for journalistikk

Her er tre verk som eksperimenterer med måter å presentere interaktiv journalistikk på. De ser imponerende ut, men tolkningen deres kan være en vanskelig oppgave for mange.

Homofiles rettigheter i USA, stat for stat

Antallet datakilder og verktøy for å behandle dem tilgjengelig i dag viser tydelig at aldri før har så mange mennesker prøvd å venne seg til datavisualiseringens verden. Og når det er så mange materialer tilgjengelig for studier, er det bare ett spørsmål "Hvor skal jeg begynne?" kan være skremmende for hver nybegynner. Så, hvilke biblioteker er de beste og hva anbefaler fagfolkene? Dette vil bli diskutert i denne artikkelen.

Å snakke om datavisualisering og ikke nevne det er det samme som å snakke om skapelseshistorien personlige datamaskiner og ikke si et ord om Steve Jobs. D3 (fra engelske Data Driven Documents) er, uten overdrivelse, den viktigste og mest dominerende på markedet JavaScript-bibliotek med åpen kildekode, som vanligvis brukes til å lage SVG-grafikk. SVG (fra engelske Scalable Vector Graphics) er på sin side et format vektorbilde, støttet av nettlesere, men tidligere lite brukt.

D3-biblioteket skylder mye av sin popularitet til den plutselige interessen for SVG blant webdesignere, som i stor grad skyldes hvor fordelaktig vektorgrafikk se ut på skjermer med høy oppløsning(spesielt på Retina-skjermer som brukes i Apple-enheter), som blir stadig mer vanlig.

«La oss være ærlige, hvis oppgaven er å visualisere data på SVG basert, da var ikke alle andre biblioteker i nærheten av å løse det, sier Moritz Stefaner, en uavhengig ekspert innen datavisualisering og eier av selskapet Sannhet og skjønnhet. «Det er også ganske mange interessante prosjekter, opprettet på grunnlag av D3, for eksempel NVD3, som gir standard grafikkkomponenter - klare til bruk, men kan tilpasses; eller la oss si at Crossfilter ganske enkelt er et enestående datafiltreringsverktøy."

Scott Murray, programmererdesigner og bokforfatter Interaktiv datavisualisering for nettet, er enig med den forrige oppfatningen: "D3 er ekstremt kraftig fordi den utnytter alt nettlesere har å tilby. Selv om det også har baksiden: Hvis nettleseren ikke støtter noe, for eksempel 3D-bilder basert på WebGL (fra English Web Graphics Library), vil ikke D3 støtte det."

Og selv om dette biblioteket virkelig er universelt, er det fortsatt ikke det ideell løsning for enhver oppgave. "Den største ulempen med D3-biblioteket, så å si, er at det ikke foreskriver eller til og med foreslår noen spesiell tilnærming til visualisering," legger Scott Murray til. "Så det er egentlig et verktøy for å laste data inn i nettleseren og deretter generere DOM-komponenter basert på disse dataene."

Mens D3 er et flott verktøy for tilpassede bilder, hvis du vil lage en standardgraf uten mye arbeid på det visuelle aspektet, kan du finne et verktøy som Vega. Vega er et rammeverk utviklet på toppen av D3, og gir et alternativ for visning grafiske komponenter. Ved å bruke Vega kan du visualisere data i JSON-format European Journalism Center og Data Driven Journalism-prosjekt. Nøyaktige datoer Kurset er ennå ikke kjent, men du kan melde deg på nå.

På fem dager vil kursdeltakerne kunne lære hva datajournalistikk er, hvordan det fungerer, og hvilke nøkkelferdigheter de bør beherske for å bli spesialist på dette feltet. Finn ut hvor du skal lete etter data for å støtte historiene dine og hvordan du finner nye ideer i eksisterende data. Lær kunsten å gjøre kjedelige data til en overbevisende historie, infografikk eller til og med en interaktiv visualisering. Bli kjent med de grunnleggende prinsippene grafisk design, som en journalist trenger å vite.

Kursholderne er fem av verdens ledende eksperter innen datajournalistikk og visualisering.

Hva er interaktiv infografikk? Dette er et spørsmål kundene våre i økende grad stiller oss. Inntil nylig har et lite antall byråer og studioer til og med forstått hva vi snakker om, men i dag er kommunikasjonsselskaper som følger med tiden forpliktet til ikke bare å inkludere i prislisten denne tjenesten, men også utføre det effektivt. Dessverre kan ikke alle gjøre dette ennå.

Det finnes flere typer og definisjoner av interaktiv infografikk.

For det første: interaktiv infografikk er infografikk som involverer leseren i å kontrollere dataene som vises. Interaktivitet opprettes ved hjelp av Flash eller JavaScript, HTML 5-teknologier.

For det andre: enhver infografikk som lar deg online-modus endre dataene som vises i grafisk form.

Prosjekter for å lage interaktiv infografikk får bare fart på grunn av deres høye kompleksitet og kostnader. En av lyse eksempler interaktiv infografikk var prosjektet "Hvem gratulerte Lukashenko med presidentskapet", 2011.

Infografikk, oppdatert interaktivt, gjorde det mulig å se hvem av statsoverhodene som gratulerte A.G. Lukasjenko med valget i 2010. Dataene som vises på infografikken kan velges av presidentens bilde, landets flagg, i en tabell eller på en globus. Dermed valgte brukeren selv hvilke data han var interessert i og hvilke som skulle vises. I tabellen var det også mulig å sortere land etter hvor lenge statsoverhodet var ved makten på tidspunktet for gratulasjoner, etter staten for rettigheter og friheter, livskvalitet, pressefrihet, de facto demokratiske valg og vurdering av diktatorer. Tilgjengeligheten av gratulasjoner ble sjekket på de offisielle nettsidene til presidentene og endret manuelt.

Siden lansering av dette prosjektet Det har gått mye tid, og i dag prøver mange eksperter å sørge for at interaktiv infografikk endrer informasjonen i automatisk modus. Dette påvirker imidlertid prosjektbudsjettet alvorlig.

Store vestlige selskaper var blant de første som brukte interaktiv infografikk som et middel til å bygge et rykte eller øke brukerlojalitet, som forsto verdien av å vise komprimert informasjon i dynamikk og muligheten for å involvere brukerne.

Noen typer infografikk lar deg interaktivt justere noen parametere og få interessante data. For eksempel blir brukeren bedt om et spørsmål om å angi et visst tall, hvoretter grafen eller diagrammet endres foran øynene hans - et helt nytt informasjonsmateriale oppnås, hvis opprettelse han selv ble en direkte deltaker i.

Så for eksempel på treårsdagen Chrome-nettleser Google-selskap visualiserte historien til utviklingen av teknologier og programmer for visning av nettsider: vi anbefaler på det sterkeste at du følger lenken og nyter det fargerike opptoget av interaktiv infografikk i de beste tradisjonene i Vesten.

I eksemplet nevnt ovenfor, brukere av hoved Internett-lesere Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+ kan se to tiår med fremgang i teknologiene som brukes i nettlesere – fra http-protokoll til offline AppCache-applikasjoner.

Russiske selskaper har ennå ikke mestret interaktiv infografikk, siden selv enkel infografikk er tilgjengelig i dag god kvalitet ikke alle. Til tross for at tjenesten for å lage interaktiv infografikk snarere er et nytt produkt russisk marked, vårt byrå er klar til å utføre slike oppgaver i dag, siden dette formatet blir mer og mer etterspurt. Kostnaden for denne tjenesten er høy, siden slike teknologier er sjeldne og alltid strengt individuelle, noe som krever opprettelsen programvareprodukt med "0" for hver oppgave.

Fremtiden for datavisualisering er interaktiv.

Men hvordan lager du virkelig fantastisk interaktiv infografikk?

Infografikk er overalt, og I det siste det blir stadig mer interaktivt.

I dagens artikkel vil vi dele med deg hemmelighetene til å lage interaktiv infografikk, samt lenker til nyttige ressurser.

1. Forstå psykologi

Før du lager en infografisk interaktiv, er det viktig å forstå hvorfor du vil gjøre den interaktiv.

Som beskrevet i denne infografikken, oppfatter folk visuell informasjon bedre. Det er mye mer sannsynlig at vi leser, forstår og husker en presentasjon hvis den inneholder engasjerende visuelle hjelpemidler. er effektivt verktøy trening, men det kan bli enda bedre.

Kinetisk læring er et flott alternativ fordi folk lærer bedre gjennom fysiske aktiviteter.

Derfor vil det å legge til interaktivitet i det lovende visualiseringsfeltet hjelpe deg med å lage enda mer minneverdig og effektiv infografikk.

Denne kombinasjonen av visuell og kinetisk tilnærming gjør animert infografikk til fremtidens innhold. For noen temaer er det selvfølgelig bedre å ikke bruke interaktive elementer, men i de fleste tilfeller vil de bare forbedre innholdet.

Bevegelse gir mening til informasjon, lar brukeren kontrollere opplevelsen og engasjerer fantasien på en måte som statisk infografikk ikke kan.

2. Legg til rulleeffekter