Çarpıcı etkileşimli bilgi grafikleri oluşturmak için ipuçları. Bir animasyon dizisinin oluşturulması. Gömülü video ve GIF

Testix makalenin bir çevirisini yayınladıRobbie Richards ... Orijinal:Etkileşimli İnfografik Nasıl Yapılır (6 Noktalı Kılavuz)

En iyilerinden biri büyük problemler Pazarlamacıların bugün karşılaştığı şey, ilgi çekici içerik oluşturma mücadelesidir.

İçeriği filtrelemek için arama algoritmaları sürekli değişiyor Düşük kalite... Yukarıdakilerin hepsiyle birlikte, bu, içerik oluşturma stratejilerinde büyük bir değişiklik yaratıyor.

Bazı markalar uzun okumalara geçti ...

... veya Brian Dean'in Gökdelen Tekniği ile tanıttığı içerik türü.

Sonuç, interneti sular altında bırakan bir içerik patlamasıdır. Bugün sadece bloglarda her gün 2 milyondan fazla makale yayınlanıyor.

Bu içerik doygunluğu seviyesi, şirketlerin stratejilerinde çarpıcı bir değişimi tetikledi.

V son yıllar Birçoğu, infografikler gibi başka formatlar ekleyerek içeriklerini çeşitlendirmek için çalıştı. Gerçek: Pazarlamacıların %58'i onları kitlelerin ilgisini çekmek için kullandıkları en iyi taktikler arasında sıralayarak, 2016 yılında infografikler inanılmaz bir büyüme yaşadı.

Örneğin, bazı pazarlamacılar, infografik oluşturmanın belirli beceriler gerektirdiğine veya pahalı olduğuna inanıyor. grafik tasarımcı... Ama durum böyle değil.

ihtiyacın yok özel ekip geliştiriciler, etkileşimli içerik oluşturma sürecini hızlandırmak ve basitleştirmek için bir dizi araç sunan platformlarınız * varsa.

Bu makalede, etkileşimli infografiklerin oluşturulmasının sadece kolay olmadığını, aynı zamanda hedef kitlenizin ilgisini çekmede statik infografiklerden daha etkili olduğunu ve okuyucularınızı potansiyel müşterilere dönüştürdüğünü göreceksiniz.

Etkileşimli Infographics neden statik muadillerini yendi.

Infographics kavramı basittir: bir içerik parçasına okuyucularınız için mümkün olduğunca fazla değer koyun ve onları daha iyi meşgul etmek için görselleştirin.

Etkileşimli infografikler tam olarak bunun içindir.

orijinal

Grafik tasarım, hem hikayenin konusuna hem de veri kümesine mükemmel uyum sağlar. Kendinizi saatte 3000 kilometre hızla seyahat ederken, Uluslararası Uzay İstasyonunu geçerek her yıl Instagram'da yayınlanan 21,9 milyar fotoğrafın en tepesine uçarken buluyorsunuz.

Etkileşimli bir infografik için görsel bir tema seçerken akılda tutulması gerekenler:

• Görüntüler ve etkileşimli öğeler, verileri hayata geçirmeye yardımcı olur mu?
• Görseller, animasyonlar ve tasarım öğeleri, içerik ortağı olarak hareket eden diğer markaların yanı sıra markanızı ne kadar iyi yansıtıyor?
• Etkileşimli grafikler nerede yaşayacak? Web sitenizde yer alacaksa tasarımın sitenizin temasına veya şablonlarına uygun olmasını isteyebilirsiniz.
• Görselleştirme fikrinin hedef kitlenizin, sektörünüzün ve genel olarak hikayenizin ilgi alanlarına uygun olduğundan emin olun. Resort Infographics, üst düzey yöneticiler için tanıtım etkinliklerinden tamamen farklı bir görsel stile sahip olacak.

Bir başka harika örnek de Joho Bean infografik:

Sulu görüntüler kullanarak kullanıcıyı alışılmadık bir multimedya macerasına çıkarıyor, kahve çekirdeklerinin olgunlaşma yerinden tüketiciye yolculuğunu anlatıyor.

Kullanıcı eylemleri bir yanıt oluşturmalıdır

Etkileşimli bilgi grafikleri etkileşimli olmalıdır, ancak bu, tek tek tıklanabilir öğelerle sınırlı olmaları gerektiği anlamına gelmez.

Her kullanıcı eylemi, bütünün gerçekten kişisel bir deneyim yaratması için içerik içinde bir tür yanıt oluşturmalıdır - bu yalnızca sayfanın basit bir kaydırması olsa bile.

orijinal

Gizli içerik yalnızca okuyucuyu içerik çalışmasına aktif olarak katılmaya zorlar, merakı teşvik eder ve ayrıca okuyucuların kendilerini çok az ilgilendiren bölümleri atlamalarına izin verir.

İçeriği kullanıcı girişi ile kişiselleştirin

Kullanıcılara girdikleri bilgilere dayalı veriler sunarak çok daha güçlü etkileşimi garanti edebilirsiniz. Bu, kullanıcıların istekleri doğrultusunda: daha fazlasını istiyorlar etkileşimli içerik ve daha fazla kişiselleştirme.

Bunun harika bir örneği, işinizin robotlar tarafından otomatikleştirilme riski altında olup olmadığı konusunda size bir fikir veren kişiselleştirilmiş bir infografiktir:

orijinal

Kullanıcıların elde etmek için ilgilerini çeken bir meslek seçmeleri gerekir. ilgili bilgiler.

Bilgi toplamak için grafik formları dahil edin

Etkileşimli bilgi grafikleri ve haritalar oluşturmayı öğrenmek isteyen herkes için yararlı olan veri görselleştirmeye yeni başlayanlar için bir kılavuz.

Infographics ve etkileşimli haritalar aktivistler, gazeteciler ve toplumsal hareketler tarafından hayata geçirilen birçok projenin parçası oldu. Peki tam zamanlı bir tasarımcısı olmayan kuruluşlar ne olacak? Yine de, yüksek kaliteli görsel malzemeler oluşturabilirsiniz - Gardiyan nasıl yapılacağını anlattı.

Veri

Yapmanız gereken ilk şey, ne tür verileri görselleştirmek istediğinizi anlamaktır.

Diyelim ki dünya çapında daha iyi temizlik için çağrıda bulunan bir kampanya yürütüyormuşsunuz. Bunun ne kadar önemli olduğunu göstermek için, halen kaç ülkenin sahip olduğu vurgulanmalıdır. Sınırlı erişim tuvaletleri temizlemek ve bu durumun son 10 yılda ne kadar az değiştiği. Bu derste, Dünya Bankası'ndan bir veri seti kullanacağız.

Şimdi elimizde 10 yıllık veri var ama sadece 2000 ve 2012 rakamlarına ihtiyacımız var. Bu nedenle verileri kendimiz için yükledikten sonra gereksiz satır ve sütunları siliyoruz (ipucu: kaydet Orijinal dosya verilerle).

Artık verileri temizlediğinize göre, işlemeye hazırsınız. Bizim durumumuzda, oluşturmadan önce başka bir sütun eklendi - 2000 ile 2012 arasındaki yüzde farkı.

Etkileşimli bir grafik nasıl oluşturulur

Verileri bir grafikte görüntülemek, bilgileri görselleştirmenin en hızlı ve en kolay yoludur. Datawrapper, Infogr.am ve PiktoChart gibi siteler, çeşitli grafikler ve çizelgeler oluşturabileceğiniz ve bunları herhangi bir siteye yerleştirebileceğiniz hafif ve kullanımı kolay araçlardır.

Datawrapper tartışmasız en sezgisel ve aynı zamanda ücretsizdir. Zayıf taraf Bu araç, büyük veri kümelerini görüntülemede pek iyi değil, bu nedenle yalnızca son 10 yılda en fazla değişikliği yaşayan 10 ülkeyi görselleştireceğiz.

Datawrapper kullanarak bir grafik nasıl oluşturulur:

1. Datawrapper web sitesine kaydolun ve yeni bir grafik oluşturun.
2. Ayrıntılarınızı kopyalayıp özel alana yapıştırın.
3. Ayrıntılarınızı kontrol edin.
4. Şimdi eğlenceli kısım için - bir grafik şablonu seçin. Bu görselleştirme için basit bir etkileşimli program ama aralarından seçim yapabilirsin Büyük bir sayı Sitede sunulan seçenekler.
5. Son adım, programınızın son düzenlemesidir. Renkleri değiştirebilir, başlık, açıklama vb. ekleyebilirsiniz.

Etkileşimli bir harita nasıl oluşturulur

ilgili verileri göstermek için Farklı ülkeler, bir harita kullanmak en iyisidir. Size üç genel bakış sunuyoruz ücretsiz araçlar yeni başlayanlar için.

veri sarmalayıcı

Bu araç artık verilerinize dayalı bir degrade oluşturmak için bir choropleth haritası seçeneğine sahiptir. Datawrapper kullanan haritalar, grafiklerle aynı şekilde oluşturulur.

Başına: en hızlılarından biri ve basit araçlar... Veri sarmalayıcı, yanlış ülke adını girdiğinizde sizi uyaracaktır. Bu aracın bir başka artısı da, üzerine gelirseniz belirli renk efsanede, haritada yalnızca bu renge sahip ülkeler vurgulanacaktır.

Karşısında: tek tek ülkeler veya şehirler için şablon yoktur.

Başına:ücretsiz ve kullanımı kolaydır (özellikle harita üzerinde noktalar oluşturmak için).

Karşısında: Ek özelliklerör. değişiklik renk uyumu yeni başlayanlar için göz korkutucu görünebilir (ancak KML dosyalarını mevcut verilerle nasıl birleştireceğinizi biliyorsanız, böyle bir harita oluşturabilirsiniz). Haritaya bir efsane eklemek zor.

İlk başta göz korkutucu görünebilir, ancak bu araçla çok çeşitli haritalar oluşturabilir ve haritada görmek istediklerinize bağlı olarak bunları özelleştirebilirsiniz.

Başına: birçok ayar yapmanıza ve ek katmanlar eklemenize olanak tanır. Mobil cihazlarda çalışır.

Karşısında: 5'ten fazla kart oluşturmayı planlıyorsanız ve ayda 10.000'den fazla sayfa görüntülemeyi bekliyorsanız, bu aracı kullanmak için ödeme yapmanız gerekir.

Geleneksel bir infografik nasıl oluşturulur?

Geleneksel infografikler statiktir, renkli görüntü, hangi bilgilerin sayılar ve simgelerle görüntülendiği. Daha önce bahsedilen araçlar - Infogr.am ve PiktoChart - böyle bir görüntü oluşturmanıza yardımcı olacaktır. Kullanımı kolaydır - sadece sürükleyip bırakabilirsiniz gerekli bilgi ve grafikler oluşturmak için verilerinizi ekleyin. Mevcut şablon sayısı ücretsiz sürümler araçlarla sınırlıdır.

Infogr.am kullanarak veri kümemizin hızlı görselleştirilmesine bir örnek:

Bu kılavuzda sunulan araçlarla, becerileri ne olursa olsun herkes güzel bir interaktif infografik veya harita oluşturabilir ve mesajlarını daha geniş bir kitleye iletebilir.

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 zamanlar giderek daha etkileşimli hale geliyor.

Bugünün makalesinde, etkileşimli infografik 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 daha iyi algılıyor görsel bilgi... İlgi çekici bir sunum içeriyorsa, bir sunumu okuma, anlama ve hatırlama olasılığımız çok daha yüksektir. görsel yardımlar... bir etkili araçöğrenme, ancak daha da iyi olabilir.

Kinetik öğrenme - harika bir alternatifçünkü insanlar bilgiyi fiziksel eylemlerle özümsemekte daha iyidirler.

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