Jak zrobić piękne wykresy i infografiki na swoich stronach?

Artykuł napisany przez:
  • Polecane artykuły
  • Zaktualizowano: Oct 10, 2019

Ogłoszenie: _usort_terms_by_ID to przestarzałe od wersji 4.7.0! Zamiast tego użyj wp_list_sort (). w /home/218053.cloudwaysapps.com/wmdtwanpyt/public_html/wp-includes/functions.php w wierszu 4565

Jeśli Internet to jedno, to jest wizualne.

Ludzie uwielbiają szybkie, łatwo dostępne informacje i infografiki, które zapewniają właśnie ten typ wizualizacji danych. Nawet złożone dane są łatwiejsze do zrozumienia w połączeniu z wykresem kołowym, wykresem lub fotografią.

Zgodnie z infografiką Top Marketing Schools, infografika może dotrzeć do około 15 milionów ludzi.

Dlaczego infografiki?

Marketing compnay, Bell Pottinger, odnotował 55% wzrost budżetów biznesowych na produkty cyfrowe, takie jak infografiki.

W infografiki o infografiki, Unbounce stwierdza, że ​​liczba osób poszukujących infografiki wzrosła o 800% w ciągu ostatnich dwóch lat. Przy takich statystykach trudno zaprzeczyć, że wizualizacje danych w postaci infografiki to dobra treść / marketing dla stron internetowych i blogów.

Korzyści # 1 - nowi goście

Dodawanie infografiki rysuje nowych użytkowników witryny na kilka sposobów.

  • Wyszukiwania w Internecie: Internauci mogą robić badania na temat, na którym działa infografika. Jeśli jesteś jedyną witryną, która ma infografikę, dlaczego jagody sprawiają, że jesteś mądrzejszy, wtedy dostaniesz ruch od każdego, kto szuka infografiki na ten temat. Ci, którzy szukają konkretnie zdjęć, mogą również spotkać się z Twoją infografiką.
  • Media społecznościowe: Infografika z Top Marketing Schools wskazująca, że ​​tradycyjny post dostaje o tweetach 75, a infografika dostaje prawie 600. Ponieważ ludzie są o wiele bardziej skłonni udostępnić swoją infografikę na Twitterze niż zwykły post, Twój potencjał dotarcia do nowych użytkowników za pośrednictwem mediów społecznościowych jest olbrzymi.

Nielson / Norman Group szacuje, że średnia odwiedzin strony trwa mniej niż minutę. Jeśli nie zainteresujesz się czytelnikiem, rzuci okiem na twoją stronę i przejdzie do następnej strony.

Odwiedzający witrynę mają zwyczaj przewijania informacji i wiadomości. Jest to kolejny powód, dlaczego infografika działa tak dobrze, aby przyciągnąć uwagę czytelnika. Wizualna reprezentacja interesującego faktu jest szybszym sposobem prezentacji informacji niż akapitów tekstu. Czytelnicy mogą szybko przeglądać infografikę, wchłonąć potrzebne informacje i pozostaną nieco dłużej, aby sprawdzić, co jeszcze masz do zaoferowania, lub dodać zakładkę do swojej witryny do późniejszego wykorzystania.

Techniczne wyzwanie związane z serwowaniem bogatych w informacje infografik

Należy jednak pamiętać o tym, że infografiki dodają wartości, ale ciężkie obrazy, których ładowanie zajmuje dużo czasu, mogą zniechęcić odwiedzających. Badania Pew Internet szacują, że przeciętny użytkownik witryny oczekuje, że strona załaduje się w czasie krótszym niż trzy sekundy. Im szybciej ładuje się Twoja strona, tym lepsze będą współczynniki konwersji.

Zachowanie równowagi polega na upewnieniu się, że witryna oferuje bogate wizualnie wrażenia, a jednocześnie ładuje błyskawicznie. Najlepszym sposobem na osiągnięcie tego są szybkie serwery i zoptymalizowane obrazy. Zauważysz w naszym recenzje hostingu, kładziemy duży nacisk na szybkość i przeprowadzamy liczne testy prędkości podczas oceniania hosta.

Korzyści # 2- Zatrzymaj odwiedzających

Nielson / Norman Group szacuje, że średnia odwiedzin strony trwa mniej niż minutę. Jeśli nie zainteresujesz się czytelnikiem, rzuci okiem na twoją stronę i przejdzie do następnej strony.

Odwiedzający witrynę mają zwyczaj przewijania informacji i wiadomości. Jest to kolejny powód, dlaczego infografika działa tak dobrze, aby przyciągnąć uwagę czytelnika. Wizualna reprezentacja interesującego faktu jest szybszym sposobem prezentacji informacji niż akapitów tekstu. Czytelnicy mogą szybko przeglądać infografikę, wchłonąć potrzebne informacje i pozostaną nieco dłużej, aby sprawdzić, co jeszcze masz do zaoferowania, lub dodać zakładkę do swojej witryny do późniejszego wykorzystania.

Należy jednak pamiętać o tym, że infografiki dodają wartości, ale ciężkie obrazy, których ładowanie zajmuje dużo czasu, mogą zniechęcić odwiedzających. Badania Pew Internet szacują, że przeciętny użytkownik witryny oczekuje, że strona załaduje się w czasie krótszym niż trzy sekundy. Im szybciej ładuje się Twoja strona, tym lepsze będą współczynniki konwersji.

Równoważeniem jest upewnienie się, że witryna oferuje bogate wizualnie wrażenia, a jednocześnie błyskawicznie ładuje się błyskawicznie. Najlepszym sposobem na osiągnięcie tego jest szybkie serwery hostingowe i zoptymalizowane obrazy. Zauważysz, że w naszych opiniach dotyczących hostingu kładziemy duży nacisk na szybkość - patrz Przegląd hostingu A2 na przykład lub sprawdź nasze inne recenzje aby dowiedzieć się, który hosting najlepiej spełnia Twoje wymagania dotyczące prędkości.

Korzyści #3 - Dodaj upoważnienie

50% naszego mózgu jest zaangażowane w przetwarzanie wizualne (źródło).

Większość ludzi to osoby uczące się wzrokowo. NeoMam zebrał badania z takich źródeł, jak Google Trends, Nielson i Pearson, które sugerują, że procent receptorów czuciowych 70 znajduje się w oczach, a ludzie mogą zająć i zrozumieć scenę wizualną tuż pod 1 / 10th sekundy.

Ludzie zwykle wierzą w to, co widzą, ponieważ lepiej to pojmują. Wykonywanie badań i tworzenie kopii zapasowych w infografice może dodać autorytetu do Twojej marki. Upewnij się, że:

  • Oferuj solidne statystyki
  • Dodaj dobrze szanowane zasoby na końcu infografiki
  • Dodaj wykresy i tabele, które pokazują te statystyki w sposób wizualny

Łącząc wizualne zmysły z funkcjami interaktywnymi, takimi jak infografika NeoMam, z których pochodzą te statystyki, nie tylko wychwytujesz zainteresowanie czytelnika, ale angażujesz go.

Co zauważasz więcej? Czy zauważysz zwykłą grafikę na stronie lub taką, która porusza się, miga lub może rozpoczyna wideo?


Co sprawia, że ​​dobry plansza?

Idąc dalej, przyjrzymy się niektórym z najlepszych zasobów i narzędzi do wizualizacji danych dzisiaj. Nieważne, że jesteś zwykłym blogerem, który po prostu chce stworzyć piękne infografiki dla celów brandingowych lub graficznego projektanta kariery, który musi głębiej zagłębić się w tę dziedzinę; Jestem pewien, że ten post będzie dla ciebie przydatny.

Architektura informacji

Ogólnie rzecz biorąc, dobra wizualizacja danych składa się z trzech głównych elementów:

  1. Sensowne dane,
  2. Właściwe projekty informacyjne, oraz
  3. Piękna grafika.

Należy pamiętać, że chociaż infografiki i wykresy mają tendencję do przyciągania uwagi ze strony blogów i użytkowników mediów społecznościowych; Powinni zrobić coś więcej niż tylko promocję marki - Infografie i wykresy mają przede wszystkim dostarczać nudne i niechlujne dane w przyjazny dla użytkownika sposób.

Dlatego wcześniej tworzenie wykresu lub infografikabędziesz musiał 1) Uporządkuj, filtruj i udoskonal swoje dane; 2) Zdecyduj, jak zaprezentować swoje dane (również projekty wizualizacji danych).

Data Mining

Wejdź do OpenRefine - potężne narzędzie do eksploracji danych, które zapisuje nas od porządkowania danych wiersz po wierszu w arkuszu programu Excel. Dawniej znany jako Google Refine (i Freebase Gridworks), to narzędzie pomaga użytkownikom w wyszukiwaniu i czyszczeniu danych, przekształcaniu danych z jednego formatu w drugi i rozszerzaniu go o różne usługi sieciowe.

W przypadku, gdy pracujesz z dużymi nieuporządkowanymi danymi, OpenRefine zdecydowanie musi znajdować się w twoim pakiecie narzędzi. Narzędzie jest obecnie hostowane na GitHub, możesz odwiedź tę stronę dla wszystkich niezbędnych informacji i pomaga. Aby uzyskać dalsze informacje i najnowsze wiadomości, należy również zapoznać się z jej nowo uruchomioną witryną pod adresem http://openrefine.org/

Prezentacja danych

Gdy będziesz gotowy z danymi, nadszedł czas, aby zdecydować, w jaki sposób zaprezentujesz je widzom.

Istnieje wiele sposobów, aby to zrobić: wykres kołowy, diagram, wykres liniowy, histogramy, mapa ciepła, schemat blokowy, układ okresowy i tak dalej. Każde z tych podejść doskonale pasuje do określonego rodzaju danych (i źle się podraża, jeśli zostanie niewłaściwie użyte).

W jaki sposób przedstawić swoje dane, aby statystyki były piękne, przyciągały uwagę i łatwe do zrozumienia?

W tym wydaniu Wizualna umiejętność czytania zbudował niezwykle przydatny układ okresowy we wszystkich opcjach, które można wykorzystać do wizualizacji danych (widok poniżej).

Zwróć uwagę, że podczas przewracania myszką tabela okresowa wyświetla wiele interesujących przykładów, więc upewnij się, że wyświetlasz rzeczywistą tabelę na stronie.

Tablica okresowa z wizualizacji danych

Jeśli szukałeś nietradycyjnych podejść, powinieneś sprawdzić ten niesamowity artykuł w Smashing Magazine. Post został opublikowany jakiś czas temu, ale nadal uważam go za bardzo pomocny.


Infografika i narzędzia do ładowania do użycia

Gdy tylko skończysz z architekturą informacji, nadszedł czas na prawdziwą produkcję. Stworzenie dobrze wyglądającego wykresu z surowych danych nigdy nie jest łatwym zadaniem, na szczęście istnieją niezliczone narzędzia do wykonania zadania.

Tak, niezliczona ilość narzędzi do wizualizacji danych. Istnieją wszechstronne narzędzia, które generują interaktywną grafikę ze złożonych danych; istnieją również proste aplikacje internetowe, które nic nie robią, ale generują proste wykresy liniowe osi 2.

Ze względów praktycznych przyjrzymy się obu stronom i wyszczególnimy wiele narzędzi graficznych zarówno dla zaawansowanych, jak i przypadkowych użytkowników.

Zaawansowane narzędzia do tworzenia wykresów

Najpierw spójrzmy na niektóre z zaawansowanych rzeczy.

1. ggPlot2 i R

R i ggplot2

R jest językiem komputerowym i środowiskiem do manipulacji danymi, obliczania i wyświetlania graficznego. ggplot2, z drugiej strony, jest systemem kreślenia dla R, który pomaga w tworzeniu złożonej wielowarstwowej grafiki. Na przykład powyższa HeatMap jest zbudowana przy użyciu ggplot2 i R.

Jeśli chcesz nauczyć się R i ggplot2, LearnR jest świetnym blogiem do dalszego czytania (choć blog nie był od jakiegoś czasu aktualizowany).

2. jqPlot

jqPlot

jqPlot to wtyczka do drukowania i tworzenia wykresów dla środowiska JavaScript jQuery. jqPlot produkuje piękne wykresy liniowe, słupkowe i kołowe. Narzędzie zawiera kilka ciekawych funkcji, takich jak generowanie punktów interaktywnych, które mogą być dostosowywane przez użytkowników w przeglądarkach internetowych. Warto jednak zauważyć, że to narzędzie nie jest dokładnie testowane i może nie być obsługiwane przez niektóre przeglądarki - mianowicie Chrome i IE poniżej 7.

3. JP Graph

JP Graph

JP Graph to oparte na PHP narzędzie do tworzenia wykresów, które obsługuje różne typy wykresów. Jeśli piszesz program PHP, który potrzebuje biblioteki do tworzenia wykresów, powinieneś się tym zająć. Nie powiedziałbym, że JP Graph jest łatwym narzędziem dla początkujących, ale narzędzie (lub biblioteka PHP) jest bardzo pomocne, gdy trzeba generować wykresy i wykresy z serwera WWW. JP Graph jest darmowy do użytku niekomercyjnego i potrzebujesz serwera WWW, który obsługuje PHP 4.3.x lub nowszy.

4. JS InfoVis Toolkit

JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit to biblioteka opracowana przez Nicolasa Garcię Belmonta. Biblioteka oferuje szeroki zakres opcji wizualizacji i jest całkowicie bezpłatna.

5. IBM Analytics (wcześniej znany jako Many Eyes)

IBM Analytics to bezpłatne narzędzie, które umożliwia użytkownikowi tworzenie wizualizacji z niemal każdego zestawu danych.

Hostowany na serwerach IBM, Multi Eyes to coś więcej niż wizualizacja danych - pozwala użytkownikom przesyłać własne zestawy danych, a także generować nowy model wizualizacji na podstawie dowolnych danych przechowywanych na serwerze.

6. Wykres Google

Wykres Google

Wykres Google jest bezpłatny, wydajny, elastyczny i obsługiwany przez wiele innych narzędzi programistycznych.

Wykresy na wykresie Google są oparte wyłącznie na technologii HTML5 / SVG; Narzędzie pomaga tworzyć wykresy w różnych formatach z piękną animacją i interaktywnymi kontrolkami.

7. Oś

Oś

Axiis to framework do wizualizacji danych open source opracowany przez Toma Gonzaleza i Michaela VanDanikera. Narzędzie jest specjalnie zaprojektowane dla początkujących i zaawansowanych programistów. Axiis udostępnia zarówno gotowe komponenty wizualizacji, jak i abstrakcyjne wzory układów i klasy renderowania, które pozwalają tworzyć własne unikalne wizualizacje.

Łatwe narzędzia do planowania dla początkujących

Prawdą jest, że większość blogerów (łącznie z mną) nie potrzebuje kompleksowych narzędzi do tworzenia wykresów powyżej do ich regularnych operacji blogowania. Częściej potrzebujemy tylko prostej aplikacji internetowej lub prostego narzędzia, aby szybko wykonać pracę.

Mając to na uwadze, oto lista narzędzi do tworzenia, które wymagają bardzo niewiele wysiłku uczenia się i przyjazny dla użytkownika.

1. Visme

visme

Visme to platforma DIY, która pozwala użytkownikom tworzyć profesjonalne prezentacje i infografiki.

Więcej niż osoby i organizacje 350,000 (w tym użytkownicy dużych firm, takich jak IBM i Disney) wykorzystują to narzędzie do lepszej komunikacji dzięki interaktywnej grafice i prezentacjom.

2. Venngage

Venngage to przyjazne dla użytkownika narzędzie wizualne, które istnieje od 2011. Narzędzie oferuje łatwy sposób tworzenia infografiki za pomocą edytora „przeciągnij i upuść”, płótna o dowolnej formie oraz przykładów i gotowych szablonów 1,000 +.

3. Easel.ly

Easel.ly

Easel.ly pomaga w łatwym tworzeniu i udostępnianiu danych wizualnych online. Aplikacja internetowa ma prosty interfejs z niektórymi gotowymi szablonami i funkcjami przeciągania i upuszczania. Chociaż Easel.ly nadal znajduje się w fazie beta, ale ma już więcej niż 130,000, stworzonych przez użytkowników wizualizacji na swoim serwerze.

4. Vizualize.me

VIsualize.me

Vizualize.me pomaga tworzyć piękne infografiki o osobach (tak, stąd nazwa Vizualize Me). To zabawne narzędzie do zabawy i tworzy piękne CV lub profil w zaledwie kilku kliknięciach. Jeśli jesteś na LinkedIn, powinieneś naprawdę to wypróbować - narzędzie może łączyć się z Twoim profilem LinkedIn i generować oszałamiającą grafikę na podstawie twoich danych.

5. Hohli

Hohli

Potrzebujesz prostego narzędzia do tworzenia wykresów? Następnie Hohli jest miejscem do odwiedzenia. Te aplikacje internetowe obsługują różne typy wykresów w dwunastu różnych rozmiarach - wszyscy użytkownicy muszą mieć klucz do danych i szczegółów projektowych.

6. Piktochart

Piktochart to oparte na szablonie narzędzia infograficzne, które pomagają projektantom tworzyć piękną grafikę i wykresy.

Narzędzie obsługuje funkcje przeciągania i upuszczania i zapewnia szeroki wybór wstępnie zdefiniowanych szablonów, iconów, wektorów i obrazów. Jeśli szukasz łatwego narzędzia graficznego i nie masz nic przeciwko płaceniu niewielkich opłat za usługę, Piktochart jest zdecydowanie jednym z twoich najlepszych wyborów.


Before You Started: Infograficzne inspiracje

Czy jesteś gotowy do stworzenia własnej infografiki? Czekać. Nadal mamy trochę więcej do zrobienia.

Oto niektóre z najpopularniejszych infografik i wykresów uchwyconych z Internetu.

Jestem pewien, że widziałeś niektóre z nich w sieciach społecznościowych w przeszłości - co udowadnia, że ​​ładna grafika ze znaczącymi danymi trzyma się!

Ponadto istnieją powody, dla których obecnie galerie infografików są tak ciężkie.

Odwołując się do dzieł innych, dowiadujemy się, co dobrze działa z odbiorcami.

  • Jaki jest średni rozmiar popularnej infografiki?
  • Jaki temat jest najbardziej pożądany przez widzów?
  • Czy do wykresów należy dołączyć jak najwięcej danych?
  • Ile punktów należy pokryć w infografikach?
  • Co sprawia, że ​​ta infografika jest popularna?

Prawdziwe przykłady życia: Rodzaje Infografika

Oto pytania, które należy zadać podczas przeglądania próbek.

Napoje kawowe ilustrowane

Napoje kawowe ilustrowane
Źródło: lokeshdhakar.com

Field Guide For Fan Boys

Przewodnik dla fanów PC World Fan Boys
Źródło: PC World

Najlepsze piwo w Ameryce 2008

Najlepsze piwo w Ameryce
Źródło: Mikewithart.com

Okresowe tabele krojów

Tablica czcionek

Bailout Tracker

Bailout Tracker
Źródło: New York Times

Ewolucja telefonu

Infografiki osi czasu
Źródło: Pow Wow Now

Sprawdź na wykresie

infografika wykresu
Źródło: Four Square

Digging Deeper

Podczas moich badań dla tego posta natknąłem się na dziesiątki interesujących blogów i stron internetowych związanych z naszym tematem. Poważnie, jest tak wiele do przeczytania, nauki i zabawy! Nigdy nie wiedziałem, że tak wiele danych jest dostępnych bezpłatnie Gap Minder i Lepszy strumień światowy; Dużo czytałem na stronach informacyjnych / blogach UX Booth (nie w pełni związane z wizualizacją danych, ale istnieje wiele przydatnych artykułów na temat tego, w jaki sposób wizualizacje poprawiają komfort korzystania z Internetu), Diagramy dynamiczne, Płynne dane; i głęboko podziwiam wszystkie wspaniałe dzieła, które są wyświetlane Randy na Pintereście i Chart Porn.

Jeśli dopiero zaczynasz wizualizację danych, gorąco polecam odwiedzić strony i blogi wymienione powyżej.

Jeśli nie wykorzystałeś możliwości wizualizacji danych w swojej kampanii marketingowej, teraz jest czas na rozpoczęcie.

O Jerry Low

Założyciel WebHostingSecretRevealed.net (WHSR) - przegląd hostingu zaufany i używany przez użytkowników 100,000. Więcej niż doświadczenie 15 w hostingu, marketingu afiliacyjnym i SEO. Współpracuje z ProBlogger.net, Business.com, SocialMediaToday.com i innymi.