Ako vytvoriť interaktívne infografiky: 9 dôležitých tipov

S pomocou infografiky môžu obchodníci prekonať ochranu pred informačným šumom a sprostredkovať svoje správy spotrebiteľom. Účinnosť tohto typu obsahu je znásobená interaktivitou. V tomto článku nájdete tipy, ktoré vám pomôžu vytvoriť interaktívne infografiky.

Tip č. 1: Naučte sa tajomstvu efektívnej interaktívnej grafiky.

Osoba vníma vizuálnu informáciu 60 000-krát rýchlejšie ako text. Tu sú niektoré ďalšie faktory, ktoré určujú účinnosť infografiky:

  • Takmer polovica neurónov ľudského mozgu sa podieľa na spracovaní vizuálnych informácií.
  • 70% senzorických receptorov je v očiach.
  • Dnes človek denne spotrebuje 5-krát viac informácií ako v polovici osemdesiatych rokov.
  • Priemerný návštevník číta iba 28% slov uverejnených na stránke.
  • Infografika pomáha prekonávať ochranu pred informačným šumom, pretože vizuálny obsah zvyšuje motiváciu návštevníkov čítať váš materiál o 80%.
  • Lekárski odborníci zistili, že osoba absorbuje iba 70% informácií z pokynov liekov, ktoré obsahujú len text. Ak k inštrukcii pridáte obrázky, osoba získa 95% informácií.
  • Ľudia dodržiavajú pokyny s ilustráciami o 323% lepšími ako pokyny bez ilustrácií.
  • Osoba si pamätá 10% informácií, ktoré počuje. Pamätá si 20% čítania. Ľudia si spomínajú na 80% toho, čo vidia a robia.

Venujte pozornosť poslednému faktoru. Ľudia si spomínajú na 80% toho, čo vidia a robia. V tomto prípade sú kombinované dva kanály vnímania informácií: vizuálne a kinestetické. Tajomstvom účinnosti interaktívnej infografiky je aktivácia vizuálneho a kinestetického kanála vnímania.

Inými slovami, interaktívne infografiky spôsobia, že osoba počas čítania vykoná akékoľvek cielené akcie. To značne uľahčuje prenos a asimiláciu informácií.

Tip # 2: Urobte používateľovi rolovanie stránky

Mnoho používateľov internetu trpí fyzickou nečinnosťou. Vzhľadom k tomu, že nechcú robiť cvičenia a chodiť v parku, prinútiť ich aspoň pohnúť prstami. Tým sa zvýši interaktivita vašej grafiky.

Pomocou rolovania môže užívateľ aktivovať animáciu a prejsť zo snímky na snímku. V tomto prípade bude presne naskrutkovať infographic až do konca, pretože by bolo škoda, že by mohol prestať s tým, čo začal v polovici. Pozrite sa, ako odborníci WHO pomocou rolovania urobili z nudnej témy infographic celkom zábavnú a vzrušujúcu.

Board číslo 3: použite stránkovanie

Paginácia je štruktúrovanie informácií pomocou stránok. Táto metóda zvýšenia interaktivity grafiky je takmer rovnaká ako rolovanie. Ak chcete zobraziť ďalšiu stránku, užívateľ bude musieť presunúť prst a kliknúť na tlačidlo myši.

Dbajte na nižšie uvedené infografiky. Jeho tvorcovia používali stránkovanie a iné spôsoby, ako zvýšiť interaktivitu. Ak si ho chcete pozrieť úplne, kliknite na obrázok.

Tip č. 4: Umožnite používateľom zvýrazniť položky grafiky a získať ďalšie informácie.

Najlepšie infographic vzory sú jeden malý graf, ktorý možno čítať celé hodiny. To sa dosahuje prostredníctvom možnosti výberu prvkov a získavania informácií o nich.

Nižšie je uvedený príklad implementácie tohto riešenia. Informácie o výške nevyžiadaných daňových refundácií medzi štátmi by mohli mať 50 diapozitívov. Namiesto toho autori vytvorili jednu snímku. Zvýraznením stavu záujmu užívateľ dostane potrebné údaje. Len málo ľudí odoláva pokušeniu vybrať si niekoľko susedných štátov a potom vidieť, ako sa veci nachádzajú na havajských ostrovoch a na Aljaške.

Tvorcovia nasledujúcich grafov skombinovali dva prístupy: stránkovanie a výber grafických prvkov pre viac informácií. Ak si ho chcete pozrieť úplne, kliknite na obrázok.

Tip č. 5: Dovoľte mi získať ďalšie informácie s kliknutiami.

To je ďalší jednoduchý a efektívny spôsob, ako dostať užívateľa k tomu, aby získal potrebné informácie. Tvorcovia interaktívnej mapy mozgu podnecujú používateľov, aby klikli na kresbu mozgu a prečítali si informácie o funkciách jej oddelení.

Tvorcom infographic o bezpečnosti bývania sa podarilo spojiť kliknutia a rolovanie. Výsledkom bol kognitívny interaktívny sprievodca pre majiteľov domov.

Tip č. 6: Použite údaje o zákazníkovi

Požiadajte používateľa, aby poskytol akékoľvek informácie a použil ho v infografike. Tu je príklad implementácie tohto prístupu: užívateľ zadá informácie o jeho ročnej mzdy, a systém ukazuje, koľko minút trvá supertrader John Paulson zarobiť tieto peniaze.

Tu je ďalší príklad použitia zákazníckych dát. Webová aplikácia vytvára grafický model, ktorý zobrazuje distribúciu tweetu jedného alebo iného používateľa služby mikroblogovania.

Tip # 7: Naučte sa prechody CSS3, transformácie, animácie, filtre.

Rastúca popularita interaktívnych infografík koreluje s podobným nárastom počtu manuálov a učebníc o prechodoch CCS3, animáciách a ďalších vlastnostiach a schopnostiach. Na tejto stránke nájdete podrobné recenzie a návody na používanie prechodov CSS, animácií, transformácií vrátane 3D a filtrov. Užitočné informácie v ruštine možno získať v on-line HTML5 návode.

Tip # 8: Skúste tieto cool prechody.

Na tejto stránke nájdete kolekciu prechodov, ktoré môžete použiť pri vytváraní infografiky.

Číslo Rady 9: na vytvorenie objektov D3 použite knižnicu JavaScript

Táto knižnica vám umožňuje animovať údaje rôznymi spôsobmi pomocou HTML, SVG a CSS. Knižnicu je možné používať úplne zadarmo. Kto vie o existencii tejto knižnice, nikdy nevytvorí statickú grafiku.

Na zapojenie čitateľa je potrebná interaktivita.

Najjednoduchší spôsob, ako zapojiť návštevníka webu, je využiť jeho zvedavosť a urobiť z neho otočenie kolieskom myši. Skutočne interaktívne infografiky však nie je možné bez skutočne hodnotných a užitočných informácií. Majte to na pamäti pri vytváraní vizuálneho obsahu.

Zanechajte Svoj Komentár