Articles

14 sätt att presentera information visuellt

klienten och Infographic – en intervju med SignalNoise.

Data kommer från var som helst – en intervju med Jer Thorp data artist

sex Infographics som våra Designers älskar – några underbara här

vad är en B2B Infographic? – några svåra frågor.

massor av information att dela? Göra en infographic? Här är 14 sätt att visuellt organisera din information, med exempel och tips om när du ska använda dem.

det finns två sätt att upptäcka det bästa sättet att presentera information eller en berättelse visuellt:

  1. lär känna dina data eller berättelse intimt. Rake din zen-trädgård och fråga dig själv ” Hur vill mina data se ut?”
  2. gå igenom hundratals infographics och försök att se om någon av de bättre passar bra för vad du vill göra eller säga.

För det här inlägget har jag försökt göra det senare för dig (om du vill odla din zen-trädgård kan jag inte göra någonting för dig).

processen:
jag gick till visuell.ly (en utmärkt källa för infographics, och samhället runt dem) och granskat ett par hundra av de mest populära infographics av sidvisningar. Denna trål avslöjade 14 visuella metaforer. Här delar jag dem och svarar på några frågor för varje:

När fungerar ett visst visuellt tillvägagångssätt verkligen?

vad är värt att tänka på, ur ett designperspektiv?

vad är några bra exempel?

de 10 + 4 visuella uppfattningarna

en anatomisk visuell eller infografisk ger en kommenterad utforskning av innehållet i ett stort och komplicerat objekt eller IDE. Det kan antingen vara metaforiskt (som ”Anatomy of an SEO” infographic nedan) eller rakt (som ”Anatomy of a Perfect Website” infographic nedan).

När använder du den? Varje gång du vill utbilda om något med många rörliga beståndsdelar, som inte är allmänt eller lätt att förstå.

design anteckningar: Även om vårt mål är att illustrera och belysa komplexitet, måste du motstå frestelsen att bli för detaljerad och tydlig.

några exempel: SEOmoz Anatomy of a Search Marketer, Anatomy of a Perfect Website, den härliga imaginära Fabriksserien av Jing Zhang och hjärnan hos en nybörjare bloggare av Infolinks.

tidslinje

dessa är bra att visa (eller skapa) en serie orsak och verkan relationer, eller evolution.

När använder du den? När förändring över tiden är din huvudpunkt

design anteckningar: Börjar du sent och arbetar bakåt eller börjar du tidigt och arbetar framåt? I allmänhet den senare, om inte den punkt du försöker göra gäller de historiska rötterna till något. Var uppmärksam på tidsskalan-försök att spara luckor och klasar.

exempel: Battlefield vs Call of Duty tidslinje och starten tidslinje (tips: det är inte rakt)

tidslinje undergenrer:
historia av … exempel: historia av väckarklockor

utveckling av … exempel: Utvecklingen av Geek

taxonomi

precis som det här inlägget försöker vi alla klassificera saker. På något sätt bucketizing saker sätter våra chimp sinnen till mods. Det låter dig också kommunicera bredd och djup.

När använder du den? Om du vill klargöra betydande och igenkännliga skillnader mellan undergrupper

designanteckningar: Använd detta endast om du har flera element som skiljer sig åt på många olika axlar (om du bara har två saker kanske du vill använda sida vid sida jämförelse (nedan); om bara en axel, kanske skala (nedan))

exempel: Nötter& bultar av diagramtyper och en ny favorit: den magnifika mängden öl av PopCharts Labs och deras 200 Super Powers diagram.

taxonomi undergenrer:
periodiskt Tabellexempel: det periodiska systemet med SEO-rankningsfaktorer, det periodiska systemet för svärning

Trädexempel: Eloqua Blog Tree

karta

kartor är jävla bra. Jag älskar dem. Du kan ta reda på var du är, vart du ska och var…andra saker är. Ingenting ger rumsliga och konceptuella sammanhang ganska som en karta.

När använder du den? När du vill kommunicera närhet, avstånd och riktning mellan ett antal olika objekt eller datapunkter.

designanteckningar: om du kan packa betydelse i layouten på din karta (det vill säga avstånd, objekt och storlekar har alla betydelse), desto bättre blir det.

några exempel: Flowtown sociala nätverk Karta, den kreativa processen kartan och den fantastiska, interaktiva Avstånd till Mars demonstration av David Paliwoda och Jesse Williams.

njuter av inlägget? Jag hoppas att du delar det med likasinnade människor. Tweet det. LinkedIn Dela. Eller gillar det.

rännor och stegar

Du vet spelet – du hoppar framåt och glider bakåt till synes av en slump, alltid kämpar från början till slut. Deltagarna fortsätter genom endelad design och endelad chans.

När använder du den? När du vill förklara en process, där nästan alla vill börja och sluta på samma plats (men vägen från början till slut är mycket variabel)

designanteckningar: generellt finns det lite debatt om stegen längs vägen; spendera din tid och ansträngning på språng framåt och bakåt, eftersom de kommer att dra mest uppmärksamhet.

exempel: kreditrapport 101 och Marknadsföringsrännor och stegar av Insightera.

rymden är lika med rymden

det är en av de första lektionerna från förskolan: vissa saker är stora, andra saker är små (men bara jämfört med varandra). Utrymmet är lika med rymdinfografiska plottar två eller flera saker mot varandra med samma skala.

När använder du den? När du vill kommunicera den relativa storleken eller antalet olika saker, eftersom förhållandet är oväntat eller intressant

designanteckningar: ofta är det bra att ställa in en baslinje, sedan jämföra och kontrastera med det. Att ändra baslinjen kan vara förvirrande.

ett exempel: Vad är mindre än Apple och hur stort är Game of Thrones Dragons.

skala

allt i universum, oavsett hur unikt, är på en glidande skala – vi måste bara fråga oss själva vad skalan är. Till exempel är en rosa enhörning på en glidande skala från ”är en rosa enhörning” till ”är inte en rosa enhörning” där de flesta saker i universum är mot slutpunkten för den andra gruppen.

När använder du den? När som helst du vill prioritera eller rangordna ett antal objekt mot ett kriterium som din publik särskilt kommer att tycka om

designanteckningar: top-down skalor tenderar att göra toppen ser bra ut och botten dåligt; sida till sida ranking kommer inte att ge ena änden av skalan preferens.

några exempel: Likheten hos Angry Birds, pålitligheten hos skägg

sida vid sida jämförelse

vi vet alla grunderna i denna visuella från den klassiska funktionstabellen. Du börjar med att välja en modell eller ett exempel på toppen, sedan går du ner i diagrammet för att se vad den modellen gör eller inte har. Poängen med dessa är enkel jämförelse.

När använder du den? När du har en begränsad mängd objekt som du vill jämföra eller kontrastera snabbt.

design anteckningar: När du går ner till två element kommer dessa element ofta att se ut som om de är i konflikt.

ett exempel: Geek vs. Hipster

beslutsträd

dessa kan vara fantastiska när de är raka, och dessa kan vara fantastiska när de är komiska. De är utformade för att svara på alla möjliga omständigheter med ett lämpligt svar.

När använder du den? Beslutsträd är bra för att vägleda människor mentalt och visuellt från en obestämd utgångspunkt till någon av många olika slutpunkter.

design anteckningar: Du måste strukturera varje punkt för att bara ha ett eller två slutna svar (lätt att svara), avsluta med en konkret rekommendation och komma till en slutsats mycket snabbt.

några exempel: ska jag acceptera den vänförfrågan?, Ska jag bära sweatpants?, Måste du vakna ännu?

Venn-Diagram

Venn-diagrammet kommer från filosofen Rudolf Venn-Herschelderferer som aldrig förlorade en kamp; Han lade bara till ett annat lager av komplexitet. Med all ärlighet handlar dessa diagram om att tvinga människor till avvägningar. Du kan inte ha allt, ha allt rent och ha det helt och hållet, någonsin.

När använder du den? När du vill att folk ska se att en situation inte har något idealiskt scenario, utan snarare en serie kompromisser och kompromisser. Eller för att visa en söt plats där två zoner överlappar varandra.

designanteckningar: jag har aldrig sett ett framgångsrikt Venn-diagram med mer än max. fyra stora cirklar. Det betyder inte att det inte är möjligt, men jag säger bara.

ett exempel: Hur vill du ha din grafiska design?
och det finns en stor samling av Venn diagram på denna Tumblr: Venn diagram Fuck Yeah

som det här inlägget? Dela det och vi kan göra mer!
eller kolla in vår B2B Content Marketing Strategy checklista.