Etkileşimli infografikler oluşturmanın en iyi yolu nedir? Açılış sayfalarında etkileşimli bilgi grafikleri için en iyi kullanım örnekleri

Muhtemelen çevrimiçi dünyada metin tabanlı içerikten görsel içeriğe büyük bir geçiş fark etmişsinizdir.

İnternette ve günlük hayatımızda görsellerin gücü inkar edilemez. YouTube ve Instagram'da görsel içerik hakim; YouTube, her gün Instagram'da yayınlanan 80 milyondan fazla fotoğrafla web'de en çok ziyaret edilen 3. sitedir.

Blog gönderileri ve makaleler, eğer renkli görsellere, başlıklara veya küçük resimlere sahiplerse %80 daha fazla "tüketilebilir" olurlar ve ilk saniyeden itibaren dikkatlerini çekmezse insanlar bir sitede 15 saniyeden fazla harcamazlar.

Infographics, izleyiciler ve satıcılar arasında favoridir ve bugün insanlar için 2012'ye göre %800 daha fazla ilgi çekicidir.

Üstelik, içerik endişe verici bir hızla oluşturuluyor - pazarlamacıların %60'ı her gün en az küçük bir parça yeni içerik oluşturuyor! Genel bakış makalesinde daha fazlasını bulabilirsiniz.

Gittikçe daha fazla insan içerik oluşturdukça, bir şey netleşiyor: Görünmek için öne çıkmanız gerekiyor.

Doğal olarak, içerik pazarlamacıları şimdiden görsel içeriğin geleceğini düşünüyor, şimdi neler yapabileceklerini, neler yapabileceklerini ve ufukta hangi yeni teknolojilerin bulunduğunu anlamaya başladılar. Bu tür ileriye dönük düşünme, her şeyi yaratabilecek veya tüm içerik pazarlama çabalarınızı mahvedebilecek bir şeydir; uyum sağlamak zorundasın yoksa boğulursun.

İnfografikler gibi görsel içerikle, pazarlamacılar geleceği yaklaştıkça görmek için benzersiz bir şekilde konumlandırılmıştır. Şirketler, grafik tasarımcılar ve pazarlamacılar, Infographics'i kullanmaya başlıyor - onları izleyicileri için daha da çekici hale getirmek için güncelliyorlar. İnfografikleri zaten düzenli olarak "göndermiş olsanız" bile, henüz gelişmeye başlayan trendleri bilmek için asla erken değildir, tıpkı bunları içerik pazarlama stratejilerinize nasıl uygulayacağınızı bilmek için de çok erken olmadığı gibi.

Geleceğe bakmak, hatta belki de herkesten önce birkaç numara öğrenmek istiyorsanız, şimdi tam zamanı!

İşte (yakın) gelecekte en yaygın olacak üç tür infografik.

Harika bir infografik aracı arıyorsanız, Visme'ye göz atmanızı tavsiye ederim. Yeni başlayanlar için, tasarım dışı kişiler için ücretsiz bir hesap ve harika kullanışlı özellikler sunarlar. Şimdi ücretsiz bir hesap alabilirsiniz.

1. Etkileşimli bilgi grafikleri

Etkileşimli web sitelerinin ve kullanımı kolay oyunların güzelliğini görmemize rağmen, etkileşimli infografikler kendi alanlarında hala oldukça yeni. Infographics gibi, belli ki bazı bilgiler içerirler ve genellikle dinamiktirler. Ancak etkileşimli öğelerin kullanılması, kullanıcılara bilgilerle bağlantı kurma ve kendi bilgilerini oluşturma yeteneği verir.

İşletmeniz, ürününüz, hizmetiniz veya mesajınız ne olursa olsun, insanların kendilerini derecelendirmelerine olanak tanıyan etkileşimli infografikler oluşturabilirsiniz (örneğin, “BMI'nizi buradan hesaplayın”). Kullanıcılar ayrıca, onları daha derinden hedeflenen bir kaynağa gönderecek veya açılış sayfasına geri gönderecek ve böylece trafik oluşturacak ilgili bilgileri tıklayabilir. Kitlenizle etkileşim kurmanın son derece uyarlanabilir ve eğlenceli bir yolu.

Birçok pazarlamacı bu tür infografiklere zaten adapte oldu ve bu bilgiler hızla yayılıyor. Ancak aynı zamanda, çoğu yine de temel alır basit infografik:

.... interaktif Infographics ile başka neler yapabileceğinizi hayal edin.

Deneyebilirsin:

  • Görüntüleri veya şekilleri arka planda öne çıkaran kaydırma tekniklerini kullanma
  • Metin alanlarını genişleten "açılır pencereler" oluşturma
  • Üzerine tıkladığınızda kayan resimler veya istatistikler
  • İnfografiklerinizi, kullanıcıların görüntüleyebileceği birden çok sayfaya dönüştürmek

Etkileşimli infografiklerin daha ayrıntılı bir örneği için şuna bir göz atın:

İnfografiğinizi yüksek düzeyde etkileşimli hale getirmek için (kaydırma, açılır pencereler vb. ile) HTML5 veya CSS hakkında biraz bilgi edinmeniz veya sizin için çözmesi için başka birini tutmanız gerekir.

Ekstra çabaya rağmen, benzersiz, ilgi çekici ve etkili bir içerik parçasıyla ödüllendirileceksiniz.

Neden yakın gelecekte Infographics uygulamaya çalışmalısınız?

  • Kitlenizi içeriğinizle etkileşime girmeye ve paylaşmaya teşvik eder.
  • Bu, trafik oluşturur (bağlantılar aracılığıyla)
  • Hedef kitlenize yenilikçi, becerikli ve zamanında ve ilgi çekici içerik sunmaya kararlı olduğunuzu kanıtlar.
  • Gelişimini yönlendiren etkileşimli bilgi grafiklerinin seviyeleri vardır.

2. Gömülü video ve GIF

Bu, bugün daha sık gördüğümüz başka bir infografik türüdür. Kısa videolar ve hatta GIF (Grafik Değişim Biçimi) sunan Infographics, dikkat çekmenin ve Infographic'inizi diğerlerinden farklı kılmanın harika bir yoludur. Bu, platformları sınırlarken, infografiklerinizi gerçek zamanlı olarak paylaşabilirsiniz.

Easel.ly gibi pek çok basit infografik aracı, “Yerleşik YouTube Videosu” seçeneği sunar veya Photoshop'ta oluşturduğunuz infografiklere bir video katmanı kullanarak video ekleyebilirsiniz. Powerpoint slaydınıza bir video bile ekleyebilirsiniz ve bunu infografiklere de dönüştürebilirsiniz.

Üstelik internette milyonlarca GIF bulabilir ve aynı şekilde ekleyebilirsiniz. Buradaki yakalama, sitenize düzgün bir şekilde yerleştirildiğinden emin olmak için infografiklerinizi bir URL olarak dağıtmanız gerektiğidir. Bu tür infografikleri .jpeg veya PDF formatında dağıtamaz veya kaydedemezsiniz. Kuşkusuz, bu giderek daha popüler hale geldikçe, süreci daha da kolaylaştıracak başka video ve gif ekleme araçları da olacak.

Ancak bu tür infografikleri etrafınızdaki herkesten ve hatta onların köpeklerinden önce kullanmak istiyorsanız, nasıl yapılacağını öğrenin, şimdi çevrimiçi bulduğunuz araçlarla başlayın.

Bir sonraki aşamaya geçmek istiyorsanız, zaten sahip olduğunuz infografikten bir video yapabilirsiniz. Bu, YouTube, Instagram ve hatta Vimeo, Snapchat ve diğerleri gibi video platformlarında görülmek için harika bir fırsat. Aşağıdaki video, bir infografiklerin nasıl videoya dönüştürüleceğine dair harika bir örnektir.

İnfografiklere neden videolar veya GIF'ler yerleştirmelisiniz?

  • Bu size bir sürpriz unsuru verir - insanlar resmin hareket etmeye başlamasını beklemiyor!
  • Çok eğlenceli ve orijinal, bu da insanların etkileşim kurma ve bilgi grafiğinizi paylaşma şansını artırıyor.
  • Bu, herkese markanızın benzersizliğini göstermenin iyi bir yoludur.

3. Hareketli infografikler

Animasyonlu Infographics çok sayıda görsel modele sahiptir ve çok fazla dikkat gerektirir. Bir kullanıcı bir sayfayı görüntülediğinde, genellikle hiçbir şeyin hareket etmesini beklemez, bu nedenle tüm bu teknikleri herkesten önce öğrenmeniz iyi bir fikirdir.

Birçok animasyonlu infografik oldukça karmaşık olduğundan ve bir tür grafik tasarım, kodlama ve/veya yazılım bilgisi gerektirebileceğinden dolayı oldukça beğenilmektedir.

İşte bahsettiğim şeyin bir örneği:

Animasyonlu infografiklerin nasıl oluşturulacağı hakkında daha fazla bilgi edinmek istiyorsanız, Tabletop Whale'daki bu bilgi grafiğine göz atın. Bu tür infografikler oluşturmanıza yardımcı olacak çeşitli hizmetler de bulabilirsiniz. Her durumda, bu, infografiklerin evrimindeki en zor süreçlerden biridir.

Neden zamanınızı, enerjinizi ve/veya paranızı animasyonlu infografikler oluşturmak için harcamalısınız?

  • Aslında sizi kalabalıktan ayıracak çünkü herkesin bu tür yazılımlara veya içeriğe erişimi yok.
  • Birkaç yıl içinde bu sıradan olacak - bunu ilk yapanlardan biri siz olacaksınız!
  • Animasyon, Infographics içindeki bilgileri daha akılda kalıcı hale getirecek
  • Kullanıcılarınıza sizinle çalışmak için ilham verecek.

Bütün bunlar bilim kurgu değil

Kulağa çok teknik gelebilir ve şu anda ulaşamayacağınız bir şey gibi görünebilir, ancak bu tür infografiklerin 2-3 yıl içinde çok yaygın hale gelmesi muhtemeldir. Özellikle GIF'in popülaritesi artmaya devam ederken, animasyonlu infografikler ve GIF infografiklerinde şimdiden güçlü bir atılım görüyoruz. İnfografikler, internette en çok tüketilen ve en sık oluşturulan içerik türlerinden biri haline geliyor. Niye ya? Çünkü beynin bir sembolün değerini alması ve işlemesi için sadece 250 milisaniyeye ihtiyacı vardır.

Ortalama bir kişi bir web sitesinde yaklaşık 15 saniye geçirir ve sonra sıkılmaya başlarsa, elbette onları geciktirebilecek herhangi bir şeyi ortaya çıkarmak isteyeceksiniz - veya en azından 15 saniye veya daha kısa sürede bir mesaj almak isteyeceksiniz. Hatta bazı araştırmalar, insanların bir şeye 8 saniyeden fazla odaklanamadıklarını bile göstermiştir ve bu rakam her yıl azalmaktadır.

Bu, sürekli bilgi ihtiyacımızın nedeni ve muhtemelen bir yan ürünüdür. Bilgi çağında yaşıyoruz ve tüm bilgiler bizim için mevcut. Ancak bu aynı zamanda ne kadar çok insan mesaj paylaşmaya ve olası her soruyu yanıtlamaya çalışırsa, o kadar çok içerik üretilirse arka plan gürültüsü haline gelir.

İnfografiklerin mevcudiyeti bugün bir gösterge ise, yakında her yerde olacaklar. Bu, işinizde yeni değişiklikler anlamına gelir. Tarihte hiçbir pazarlama kampanyası, her zaman aynı şeyi yaparak başarılı olmamıştır.

Buradaki fikir, infografikte bir jpeg görüntüsünden daha fazlasını görmektir. Infographics, farklı ortamlara uyarlanabilir ve çok çeşitli platformlarda kullanılabilir. Girişimciler ve pazarlamacılar bunun potansiyelini zaten gördüler. Peki sen?

Son birkaç yılda, infografikler, statik görüntülerden benzersiz içeriğe uyarlanmış animasyon ve video öğeleriyle zengin etkileşimli deneyimlere dönüştü. Artık önceden oluşturulmuş, genel şablonlarla sınırlı değildir. Ve bugünün koleksiyonu, ilginç ve bilgilendirici bir deneyimin nasıl göründüğünü göstermek için en iyi bilgi grafiklerini içeriyor.

Bu listedeki infografiklerin çoğu, tasarımcıların veri görselleştirmeye farklı yaklaşımlarını göstermek için seçilmiştir. Bununla birlikte, burada aynı zamanda infografikler ve zengin multimedya deneyimleri arasındaki çizgileri bulanıklaştırırken ilgi çekici içerik ve açılış sayfalarında ilgi uyandıran hikayeler yaratan birkaç "melez" de var. Geleneksel formlardan ayrılmak, daha karmaşık bir medya ortamına girdiğimiz anlamına geliyor ve grafik tasarımın geleceğini şekillendirmek için kritik olacak teknoloji ve hikaye anlatımıyla bu tür deneyler.

1. Rüzgar haritası

Rüzgar Haritası, rüzgarın Amerika Birleşik Devletleri üzerindeki yönünü ve hızını gösteren muhteşem bir tasarımdır. Bu tasarımın faydacı olmaktan çok sanatsal bir amacı var ve bu harika: oturup ince iplerin haritanın etrafında dönmesini izlemek çok güzel. Şekillerin yollarını gösteren infografiklerin animasyon ve hareketli grafiklerden nasıl yararlandığına dair basit ama iyi düşünülmüş bir örnek.

2. uçuşta

2014 yılında The Guardian, ticari uçuşlarla ilgili gerçek zamanlı verileri (görünüşe göre şu anda güncellenmemiş gibi görünüyor, ki bu ne yazık ki) ve havacılık tarihi üzerine bir ders gösteren bir In Flight Infographic başlattı. İnteraktif gösterinin başlangıcında uçuş ekipleri arasındaki sessiz konuşmalar özel bir atmosfer yaratıyor. Bu günlerde infografikler yavaş yavaş sinematik deneyimlere dönüşüyor gibi görünüyor. En azından "Uçuşta" bu yöne işaret ediyor ...

3. Ay'ı çevirin

Dial A Moon bilgi grafiğinde pek bir şey olmaz, ancak amacına oldukça iyi hizmet eder. 2015 yılında NASA sayesinde ay evresi infografikleri her saat güncellendi ve bu gizemli bilgiyi aramak için Google'a gidemezdiniz. Artık ay, gün ve saati manuel olarak girerek resimleri görüntüleyebilirsiniz.

4. Plüton ile Gün

Nature dergisi, bilimle ilgilenen izleyicileri için birçok ilginç infografik yayınlıyor. Bunlardan biri, Pluto yakınlarındaki bir uzay aracının ünlü uçuşu (24 Hours of Pluto) hakkındaydı. İnfografikler çok sayıda metinsel bilgi içeriyordu, ancak görseller cüce gezegenin yapısından aylarının oluşumuna kadar en ilginç olanın kolay anlaşılmasını sağladı. Artık metin kısmı internette ve ayrıca infografiklerden iki animasyonlu videoda mevcut.

5. Amerikan evleri nasıl değişti

Ev tarzlarındaki evrim yoluyla yansıtılan büyük Amerikan rüyasında bir yolculuğa çıkın. Bu iyi resmedilmiş infografik, bir arabanın direksiyonuna geçmenize (aynı zamanda çağa ayak uydurmak için ekranı kaydırırken görünümünü değiştirmenize) ve 1900'lerden 2000'lere, onlarca yıldır popüler binaların yanından geçerek gezinmenize olanak tanır. Yol boyunca, (zamanın sosyo-politik koşulları ve moda trendleri dahil) çok sayıda faydalı malzemeyle karşılaşacaksınız ve her şey, sizi Amerikan evinin geleceğini tasavvur etmeye sevk eden bir soruyla sona eriyor. The Decades Of American Homes infografik, yatay kaydırmanın harika bir örneğidir ve buraya sığar.

6. Pazarlama analitiğinin evrimi

Akıllı kullanıcı araştırma şirketi Vision Critical, Evolution of Insight bilgi grafiğinde, 1890'lardan günümüze dünya çapında pazarlama teknolojisi pazarının gelişimini takip ediyor. How American Homes Changed bilgi grafiğine benzer şekilde çalışır ve böylece iki çok farklı hikaye için etkileşimli bir zaman çizelgesi kullanmanın etkinliğini karşılaştırmanıza olanak tanır. Onlarca yıllık Amerikan Evleri infografikleri, harika Amerikan analizleriyle seyahat etmekten çok daha sezgisel olarak arabanızı hareket ettirirken evleri görme avantajına sahiptir. İyi infografikler içerik göz önünde bulundurularak oluşturulur, çevresinde değil.

7. Dünyadaki LGBT topluluğunun hakları

The Guardian, dünyadaki her ulusta çeşitli konularda (evlilik, işyeri ayrımcılığı, nefret suçları vb.) LGBT haklarının yasal durumunu açıklayan bu zarif infografik ile listemizde başka bir konuma geliyor. Yarım daire içinde hareket etmek, farklı ülkeler arasındaki istatistikleri karşılaştırmanın hızlı ve kolay bir yolunu sağlar ve infografiklerin bileşimi, küresel durumu merkezde ön planda tutar. Burada ayrıca basit farkındalık ve aktivizm arasındaki boşluğu kapatmayı amaçlayan güçlü bir eylem çağrısı var.

8. Eşitsizlik düzeltilebilir

Etkileşimli Infographics'in bir başka harika örneği olan Inequality Is Fixable, izleyiciyi kendilerini problemin içine sokmaya davet ederek onu son derece kişisel hale getiriyor. İzleyicinin, patronunun ne kadar az maaş aldığını ve nedenini anlatan materyale olan ilgisini kaybetmemesi garanti edilir. Geliştiriciler, kullanıcıyı hikayenin bir parçası haline getirerek merak uyandırır ve kullanıcıyı en sondaki harekete geçirici mesaja (Harekete Geçirici Mesaj) kadar gerekli tüm adımlar boyunca yönlendirir.

"Olmasına izin verdik - şimdi nasıl düzeltebiliriz?"

9. Kendinizi Çizin: Hane Geliri Bir Çocuğun Üniversiteye Gitme Şansını Nasıl Öngörüyor?

Bu listedeki bilgi grafiklerinin çoğu, zengin bir deneyim sağlamak için animasyon ve etkileşim kullanır. Görsel olarak, The New York Times'tan (You Draw It: How Family Income Predicts Children's College Chances) bu infografik klasik grafik formatına bağlıdır, ancak aynı zamanda proaktif ve etkileşimli gibi infografik tasarım alanını genişletmek için kullanıcı davranışına ilişkin içgörüyü kullanır. görselleştirme. Okuyuculardan kendi eğrilerini çizmelerini isteyerek, bir kişisel çıkar unsuru sunarlar ve böylece insanlara gerçekten değerli bilgiler sağlarlar.

En kötü sonuç değil! Dikey eksen, üniversiteye giden çocukların yüzdesidir. Yatay eksen - ebeveyn gelir yüzdesi

10. Amerikalılar nasıl ölür?

Başlık görüntüsü dışında, bu örnek, içeriği oluşturmak için çoğunlukla eski moda diyagramları kullanır. Ancak bu hiç sıkıcı değil, çünkü kullanıcılar imleci grafikler boyunca hareket ettirerek veriler arasında bağımsız olarak gezinebilirler. Bu, örneğin 70'lerde intiharla bağlantılı ölümlerin sayısını şimdikiyle karşılaştırmayı çok daha kolay hale getiriyor (ipucu: şimdi artıyor), statik bir tablo bunu bu kadar düzgün bir şekilde ele alamazdı.

11.

New York Times, herkesin dikkatini ve övgülerini kazanan ilk kar yağışı Projesi'nden bu yana, en son multimedya gazeteciliği konusundaki itibarını korumuştur. Yayıncılık ekibi, etkileyici bir şekilde ilgi çekici bir deneyim yaratmak için infografik tasarım ve derinlemesine hikaye anlatımının bir kombinasyonunu kullanıyor. Daha canlı örnekleri var ama The Russia Left Behind belli bir yankı uyandıran bir çalışma. Infographics, Rusya'nın etkileşimli bir turu gibi işlev görür (haritada yolunuzu çizersiniz).

12. Tahvil arabaları

Arabalarına bakarak James Bond'un tarihini tanımak istiyorsanız, o zaman İngiliz otomobil satıcısı Evans Halshaw'a teşekkür edin - size böyle bir şans verdi. Etkileşimli Infographic Bond Cars, Bond otomobillerinin her birinin modelini ve tasarımını ve ayrıca bazı ilginç gerçekleri keşfetmenize olanak tanır. Her yerde bulunan kaydırma taktiğini kullanarak, arabayı tüm metalik ihtişamıyla "gösterebilirsiniz" (varsayılan olarak yalnızca tek bir renk deseni verilir). Böylece yazarlar, infografiklerin estetiğine tam olarak uymayan fotoğrafları ekleme ihtiyacı sorununu yaratıcı bir şekilde çözdüler.

13. Hareketin renkleri

Hareketin Renkleri, filmleri yalnızca tüm karelerin birleşiminden elde edilen renk paletlerine göre analiz eden bir infografik serisidir. Hiç merak ettiyseniz, şimdi cevap sizde. Veritabanında başlığı bulamıyor musunuz? Geliştiricilere bir mesaj göndermeniz yeterlidir - istekleri kabul ediyorlar.

14. Peru'daki kraliyet mezarı

National Geographic'in "etkileşimli grafikler" (örneğin Trajan Sütunu örneğinde olduğu gibi çoğuna ayrıntılı metinsel açıklamalar eşlik eder) dedikleri oldukça etkileyici bir koleksiyonu vardır, ancak biz bu nispeten basit örneği hangisini vurgulamak için seçtik. teknikleri interaktif infografiklerde gerçekten etkilidir. "Kraliyet Wari Mezarı" (Peru Kraliyet Wari Mezarı), o zamanların soylu bir kadının cenazesinin özelliklerini ortaya koyuyor. Odak, mumyayı sarmaktan dekorasyonuna ve konumuna kaydırır. İnteraktif grafikler, bilgileri küçük parçalara ayırarak ve kullanıcının aralarında gezinmesine izin vererek en sinsi tuzaklardan kaçınır: aşırı veri yükü ve görsel efektler. Ayrıca, sonraki her etkileşim deneyimi genişleterek, her şeyin aynı anda sunulmasından çok daha ödüllendirici hale getirir. Beynimiz, baskılayıcı uyaranları reddeden bir mekanizmaya sahiptir ve bu tür bir etkileşim, kullanıcı için mükemmel bir çözüm haline gelir ve bilgiyi emmeyi kolaylaştırır.

15. İskoç Referandumu nedir? İngiliz olmayanlar için açıklama

The Guardian, New York Times gibi, multimedya gazeteciliğine güveniyor ve videoları, infografiklerin ana işlevlerinden biriyle başa çıkıyor: hacimli bilgilere kabul edilebilir bir form vermek. Birleşik Krallık dışındaki çoğumuz için referandum çok kafa karıştırıcı bir konudur. Neyse ki, bu video (İngiliz Olmayanlar İçin Açıklanan İskoç Referandumu), tarihe derinlemesine dalmanıza gerek kalmadan, önemli yönleri hakkında hızlı bir şekilde öğrenmenize yardımcı olacak.

16. Halk sağlığı

Atlantik, halk sağlığını iyileştirmek için bir vizyon geliştirmekle görevlendirildi. Population Health ile ilgili 3 bölümlük seriyi dijital hikaye anlatımına dönüştürmek için Truth Labs'ı görevlendirdi. Sanatçının birincil amacı, görsel açıdan farklı bir deneyim yaratırken, belgenin doğal kaydırmasını ve kullanıcının normal okuma deneyimini korumaktı. Vizyonlarını hayata geçirmek için sinematografiden araçlar ve stratejiler ödünç aldılar, ancak aynı zamanda temel bir kural olarak okunabilirlik ilkesini desteklemek için bir dizi tasarım ilkesine odaklandılar.

17. Joho'nun tahılları

Avusturyalı kahve üreticisi Joho, kahve çekirdeklerinin kökeninin hikayesini anlatmak için Joho's Bean ile etkileyici bir multimedya deneyimi yarattı. Anlatı, kullanıcının neredeyse tüm duyularını harekete geçiren ses, video ve fotoğraf materyallerini uyumlu bir şekilde bir araya getiriyor. torbalanmış kavrulmuş kahve çekirdeklerinin sesi ve şehrin yoğun caddelerinin ve trafiğinin gürültüsü.

Joho's sizi kahve çekirdeklerinin kökenini anlatan bir yolculuğa çıkarıyor

18. İlkel yol

Vahşi Yol, Canvas ile oluşturulmuş etkileşimli bir seyahat hikayesidir. Ana öğe, sayfayı kaydırırken haritadaki yolu canlandıran haritadır. Proje tüm tarayıcılarda çalışmayabilir. Ancak, infografik oluşturmak için perde arkasındaki tüm teknolojileri açıklayan eşlik eden bir makale eşlik ediyor.

19.

Guardian'ın (Canlı Seçim Sonuçları) 2016 ABD başkanlık seçimlerini kapsaması, ciddi yüzdeler ve sandık merkezleri meselesine eğlenceli bir unsur getirdi. Etkileşimli bilgi grafikleri dört eyalette oyları takip etti. Varsayılan olarak, grafik tüm ülke için sonuçları gösterdi ve kullanıcı imleci haritadaki herhangi bir alanın üzerine getirdiyse, adayların oraya hangi sayıları yazdığı gösterildi. Başkan adayları komik pikselli avatarlar olarak sunuldu. İnfografikler canlı yayında güncellenirken, küçük adamlar kazandıkları eyaletleri renklendirdiler. Zaman zaman, adayın yanında bir baloncukta adayın bir alıntısı görünürdü.

Seçim sonuçlarının gerçek zamanlı olarak yansıması

Veri görselleştirmenin geleceği etkileşimdir.

Ancak gerçekten çarpıcı etkileşimli infografikleri nasıl yaratırsınız?

Infographics her yerde ve son zamanlarda giderek daha etkileşimli hale geldi.

Bugünün makalesinde, etkileşimli infografikler oluşturmanın sırlarını ve faydalı kaynaklara bağlantılar paylaşacağız.

1. Psikolojiyi anlayın

İnfografikleri etkileşimli hale getirmeden önce, onu neden olduğu gibi yapmak istediğinizi anlamak önemlidir.

Bu infografikte detaylandırıldığı gibi, insanlar görsel bilgiyi daha iyi algılar. İlgi çekici görseller içeriyorsa, bir sunumu okuma, anlama ve ezberleme olasılığımız çok daha yüksektir. etkili bir öğrenme aracıdır, ancak daha da iyi hale gelebilir.

İnsanlar bilgiyi fiziksel eylemlerle daha iyi özümsedikleri için kinetik öğrenme harika bir alternatiftir.

Bu nedenle, gelecek vaat eden bir görselleştirme alanına etkileşim eklemek, daha da akılda kalıcı ve etkili infografikler oluşturmanıza yardımcı olabilir.

Görsel ve kinetik yaklaşımların bu birleşimi, animasyonlu infografikleri geleceğin içeriği haline getiriyor. Elbette bazı temalar için etkileşimli öğeler kullanmamak daha iyidir, ancak çoğu durumda bunlar yalnızca içeriği iyileştirecektir.

Hareket, bilgiye anlam katar, kullanıcıya deneyimi kontrol etme yetkisi verir ve statik infografiklerin yapamayacağı şekilde hayal gücünü harekete geçirir.

2. Kaydırma efektleri ekleyin

Sanal gerçekliğin hilesi, başkalarına aptal gibi görünmenizdir.

Google'ın Karton Tasarım Laboratuvarı, gelecek vadeden sanal gerçeklik tasarımcıları için iyi bir "eğitici"

Infographics bir macera oyunu gibidir

Unity ile ilgili sorun, web'de iyi bir şey yapmanın kolay olmamasıdır.

Sanal gerçeklik gözleriniz için kulaklık gibidir

Sanal gerçeklik güvenli bir ortam gerektirir, hareket halindeyken buna giremezsiniz. Bu, VR olanaklarını sınırlar

Sabah oturumu kapattı Archie tse The New York Times'tan "NYT Neden Daha Az Etkileşimli Çalışıyor" başlıklı kışkırtıcı bir temayla.

NYT'nin çalışması, görsel hikaye anlatımının üç kuralına dayanmaktadır:

  1. Okuyucunun kaydırması değil tıklaması gerekiyorsa, olağan dışı bir şey olması gerekir.
  2. Araç ipuçlarının ve diğer fareyle üzerine gelme efektlerinin asla kimse tarafından görülmeyeceğini varsayın. İçerik önemliyse, okuyucunun hemen görmesini sağlayın.
  3. Etkileşimli bir şey yapmak istiyorsanız, unutmayın - tüm platformlarda çalışmasını sağlamak pahalı olacaktır.

Her şeyin hem masaüstünde hem de mobilde çalışması için grafiklerinizi 2 veya 3 kez yeniden çizmeniz gerekecek

Bu kurallar NYT'nin yaklaşımını nasıl değiştirdi:

  1. Çoğu işleme artık statik
  2. Daha fazla metin
  3. Resimde harekete ihtiyacınız varsa, kaydırma sırasında görünür.

(Dördüncü nokta, hala etkileşimli çalışma yaptıklarını söylüyor. Ama şimdi nedeni ÇOK anlamlı olmalı).

"Çok adımlı" adımlar attık. Kullanıcılar 3. adımda durdu. Okuyucular tıklamak değil sadece kaydırmak istiyor

Archie Tse: Kaydırma Vs. tıklama

Andy Kriebel 18 hafta boyunca her Pazar gecesi VizWiz'de bilgi grafikleri ve veriler yayınlıyor. Görev, Pazartesi günü yaklaşık bir saat ayırmak, görselleştirmeyi hızlı bir şekilde analiz etmek ve kendi versiyonunuzu oluşturmaktır.

Aşağıda geçen haftanın sonuçlarını yayınlıyoruz - XXI yüzyılda Kölelik.

#MakeoverPazartesi, Andy Kriebel tarafından. Ayrıntılı açıklama ve etkileşimli - Andy'nin blogunda:

Andy Cotgreave'den #MakeoverMonday. Ayrıntılı açıklama ve etkileşimli - Andy'nin blogunda:

Ayrıca dünyadaki insanların %51'inin benden genç, Rusya'da ise %63'ünün daha yaşlı olduğunu ve şu anda ölme şansımın o kadar da büyük olmadığını öğrendim. Rakamlar birdenbire "istatistik" olmaktan çıktı ve beni hızlı yola soktu.

Veri goruntuleme - Daha az manuel tasarım çalışmasıyla büyük veri kümeleri kullanır; algoritmalara dayanmaktadır. Örneğin, New York Times'ın interaktif çalışması.

Görsel Sanatlar - tek yönlü kodlama. Kunal Anand'ın hesaplama sanatı gibi güzel ama deşifresi zor görselleştirmeler.

Sorun nedir?

Sonuç olarak, birçok eser yalnızca sofistike kullanıcıları cezbeder, ancak deneyimsiz okuyucuların konunun özünü anlamalarına izin vermez, böylece görselleştirmenin amacına zarar verir - halkı bilgilendirmek. Bu nedenle görsel okuryazarlık sorununu görselleştirme bağlamında anlamak ve anlamak çok önemlidir.

Gazeteciliğin yeni "görsel dilbilgisi"

İşte interaktif gazeteciliği sunmanın yollarını deneyen üç örnek. Etkileyici görünüyorlar, ancak yorumlamaları birçokları için göz korkutucu bir görev olabilir.

Amerika Birleşik Devletleri'nde eyalet eyalet eşcinsel hakları

Bugün mevcut veri kaynaklarının sayısı ve bunların işlenmesi için kullanılan araçların kendi içinde zaten açıkça gösteriyor ki, bu kadar çok insan veri görselleştirme dünyasında asla rahat olmaya çalışmadı. Ve çalışmak için bu kadar çok materyal varken, geriye tek bir soru kalıyor. "Nereden başlamalı?" her acemi korkutabilir. Peki en iyi kütüphaneler hangileri ve profesyoneller ne tavsiye ediyor? Bu makalede tartışılacak olan budur.

Veri görselleştirmeden bahsetmeden bahsetmek, kişisel bilgisayarların tarihinden bahsetmek ve Steve Jobs hakkında tek kelime etmemek gibidir. D3 (Veriye Dayalı Belgeler), abartmadan, SVG grafikleri oluşturmak için yaygın olarak kullanılan, piyasadaki en önemli ve baskın açık kaynaklı JavaScript kitaplığıdır. SVG (Ölçeklenebilir Vektör Grafikleri), web tarayıcıları tarafından desteklenen, ancak daha önce çok az kullanılan bir vektör görüntü formatıdır.

D3 kitaplığı, popülaritesinin çoğunu, web tasarımcılarının SVG'ye olan ani ilgisine borçludur; bu, büyük ölçüde kazanan vektör grafiklerinin yüksek çözünürlüklü ekranlarda (özellikle Apple cihazlarında kullanılan Retina ekranlarda) nasıl göründüğünden kaynaklanmaktadır. daha yaygın hale geliyor.

Bağımsız veri görselleştirme uzmanı ve şirket sahibi Moritz Stefaner, “Dürüst olalım, görev SVG tabanlı veri görselleştirme ise, diğer tüm kütüphaneler bunu çözmeye yakın bile değildi” diyor. Gerçek ve Güzellik... “Ayrıca, kullanıma hazır ancak özelleştirilebilir standart grafik bileşenleri sağlayan NVD3 gibi D3'e dayalı birkaç ilginç proje var; ya da, diyelim ki, Crossfilter olağanüstü bir veri filtreleme aracıdır."

Scott Murray, programcı-tasarımcı ve kitap yazarı Web için Etkileşimli Veri Görselleştirme, önceki görüşe katılıyorum: “D3, tarayıcıların sunduğu her şeyi kullandığı için son derece güçlü. Bunun bir dezavantajı olmasına rağmen: tarayıcı bir şeyi desteklemiyorsa, örneğin WebGL'ye dayalı 3D görüntüler (İngilizce Web Grafikleri Kitaplığından), o zaman D3 bunu desteklemeyecektir. "

Bu kitaplık gerçekten çok yönlü olmasına rağmen, yine de her görev için ideal çözüm değildir. Scott Murray, "D3 kitaplığının ana dezavantajı, tabiri caizse, herhangi bir özel işleme yaklaşımı önermemesi ve hatta önermemesidir" diye ekliyor. "Yani gerçekten bir tarayıcıya veri yüklemek ve ardından bu verilere dayalı DOM bileşenleri oluşturmak için bir araçtır."

D3, özel görüntüler için harika bir araç takımı olsa da, fazla görsel çalışma olmadan standart bir grafik oluşturmak istiyorsanız, vega... D3 tabanlı bir çerçeve olarak Vega, grafik bileşenleri görüntülemek için bir alternatif sunar. Vega'yı kullanarak verileri JSON formatında Avrupa Gazetecilik Merkezi ve Veriye Dayalı Gazetecilik projesinde görselleştirebilirsiniz. Kursların kesin tarihleri ​​henüz bilinmiyor, ancak şimdi kayıt olabilirsiniz.

Beş gün içinde, kurs katılımcıları veri gazeteciliğinin ne olduğunu, nasıl çalıştığını ve bu alanda uzman olmak için hangi temel becerilerde ustalaşmaya değer olduğunu öğrenebilecekler. Planlarınızı desteklemek için verileri nerede arayacağınızı ve verilerde yeni fikirleri nasıl bulacağınızı belirleyin. Sıkıcı verileri etkileyici bir hikayeye, infografiklere ve hatta etkileşimli görselleştirmeye dönüştürme sanatını öğrenin. Bir gazetecinin bilmesi gereken grafik tasarımın temel ilkeleriyle tanışın.

Kurs eğitmenleri, veri gazeteciliği ve görselleştirme alanında dünyanın önde gelen beş uzmanıdır.