Діаграми і графіки для статей: як будувати і де брати інформацію

9

Ілюстрації – їх ви помічаєте першими. Будь-який текст сприймається краще, якщо додати графік, діфку або картинку. Для картинок досить фантазії, вміння знаходити асоціації та доступу до фотостокам або архівів з прикольними базами. Для графіків треба розуміти основи сприймання. Треба знати, як виділити потрібну інформацію, як її швидше засвоїть мозок, і як вигідно піднести головне.

Діаграми і графіки для статей: як будувати і де брати інформацію

C цифрами цікавіше

Про що б ви не вирішили написати, цифри роблять текст інформативніше. Наявність точних даних у статті показує її експертність. Не пишіть приблизно – навколо мільйон джерел перевіреної інформації. Ось 10 офіційних відкритих джерел, на які не соромно посилатися в статті:

  • Федеральна служба державної статистики. Офіційна інформація про всіх сферах життя суспільства. В архіві дані з 2001 року.
  • Сайт Статистика.ру. Довідковий ресурс Держкомстату. Статті, таблиці та аналітика майже по всіх галузях – від туризму і освіти до кримінології.
  • Статистична база даних по російській економіці. Розділ сайту Вищої школи економіки. Регулярно розміщують інформацію щодо стану економіки РФ.
  • Статистика Російського освіти.
  • Портал правової статистики. Показники злочинності, соціальний портрет злочинності, злочинність в регіонах і ще багато всього смачного.
  • Світова книга фактів – довідник, який регулярно випускає ЦРУ. Але не шукайте там кількість висадки інопланетян або хто з президентів – людиноподібний кіборг. Офіційні дані обмежені основною політичною та економічною інформацією по країнам світу.
  • Національні статистичні агентства. Посилання на офіційну статистику по всіх країнах світу. Англійською.
  • Доступ до даних ООН. Тут зібрані 35 баз даних і 60 мільйонів записів.
  • Number of. Або кількість чого-то там. Наприклад, муравйов в світі або Богів у релігії.
  • Дані про теракти, надзвичайні події та інших катастрофах. Все на сайті Глобальні інциденти.
  • Читайте також: Hot or not: 15 сервісів для створення теплових карт

    Коли інформації повна коробочка, не пишіть цифри полотном у тексті. Таблиця – вже добре, але ще краще – наочна ілюстрація. Мозку простіше сприймати й розуміти інформацію в такому вигляді, плюс – істотна економія місця і часу. В епоху, коли зайве пропозицію, епітет або прикметник вважається відхиленням від норми, краще не ризикувати і відразу все зводити до графіків.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Але цифри теж можна використовувати по-різному. Можна не морочитися і вибрати першу ж діаграму, а можна проявити турботу про читача і побудувати красивий і зрозумілий графік. Щоб це зробити, треба знати деякі особливості сприйняття мозком візуальної та графічної інформації.

    Як ми насправді бачимо

    Наші очі та мозок зчитують інформацію з простору зовсім інакше, ніж фото-або відеокамера. Обладнання записує картинку цілком, наскільки це дозволяють пікселі і кут зйомки. Коли ви дивитеся на відзнятий матеріал, який вмістилася 180-градусна панорама, в кожен конкретний момент часу увагу зосереджено на відрізку в 2-3 градуси. Чому залишилися ділянки не здаються розмитими плямами? У справу втручаються саккады.

    Саккады — швидкі, одночасні, суворо узгоджені рухи очей в одному напрямку. На записі виглядають як вертикальні прямі тонкі лінії.

    Якщо виражатися людською мовою, саккада – це короткий рух очей між двома точками фіксації. Майже всі рухи очей користувача на сайті саккадические. Чим більше точок фіксації, тим велику роботу здійснює нервова система, тим більше інформації доводиться запам’ятовувати. Це одна з причин, чому на головній сторінці сайту або на першому екрані лендинга не можна ліпити все підряд. Навіть якщо є, що сказати.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Читайте також: Технологія Eye Tracking, або Чого не дадуть вам сервіси веб-аналітики

    Але повернемося до наших «баранів». Саме саккады допомагають бачити картинку цілком. Швидкі рухи виривають із загальної інформації частинки зображення, компонують їх і створюють ілюзію того, що ви бачите картинку цілком. Чим більше точок фіксації і саккад, тим складніше. Це головна причина навчитися робити графіки одночасно простими та інформативними. Детальніше про тонкощі такого сприйняття у своїй книзі The Functional Art пише викладач Університету Майамі Альберто Каїро. Ось як він ілюструє процес сприйняття інформації.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Ми не зациклюємося на випадкових точках, а виділяємо для себе певні пріоритети – рух, яскраві кольори, плями незвичайної форми. Ці функції називають по-різному. Мені подобається – первинні атрибути. Тому що мозок обробляє їх першими, ще до того, як складе єдину картинку.

    Простий приклад з контрастним кольором.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Або положенням.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Або розміром.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Ніякого чарівництва, всім все і так зрозуміло, логіка на рівні першої шкільної п’ятирічки, але чомусь в кейсах і презентаціях все ще трапляються шедеври, схожі на графік бінарних опціонів.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Читайте також: 15 помилок веб-дизайну, які відлякують відвідувачів сайту

    Здатність знайти і правильно виділити первинний атрибут – найважливіше вміння для створення ефективних і ефектних діаграм і графіків. Як це працює на практиці?

    1. Вибирайте тип графіка без поспіху

    Виділяємо потрібні стовпці в Excel, робимо «тиц» в гістограми, готово. Так я раніше робив діаграми для більшості своїх статей. Скотт Беринато – автор книги Good Charts – дав би мені за такий підхід хороший стусан. Він каже, що перед тим, як будувати якусь діаграму, треба запитати себе – досліджуємо ми щось чи просто заявляємо.

    Якщо досліджуємо, конкретних даних може не бути. Наприклад, коли плануємо бізнес-процеси. А може виявитися стільки, що не влізуть в екран – дослідження закономірностей в історії або тенденцій в економіці. Тут доречно використовувати асоціації і метафори, застосовувати стрілки і складну структуру, експериментувати. Якщо графіком ми ставимо аудиторію перед фактом, тоді спрощуємо дані, виділяємо головне і добре вивчаємо ЦА. Тут логічніше використовувати звичні образи і формати діаграм.

    2. І знову про цільової аудиторії

    Знову, але не зовсім про те. У книзі Harvard Business Review Press говориться, що для побудови графіка важливо визначити, на якій стадії і в якій формі відбудеться контакт ЦА і вашої ілюстрації. Це буде презентація, де ви самі керуєте увагою, або звичайний друкований аркуш, який можна швидко викинути в найближчу урну. Чим коротше контакт, тим менше інформації повинно бути, тим яскравіше треба виділити основну цифру.

    Читайте також: Цільова аудиторія: навіщо знати свого клієнта

    3. І що?

    Це питання точно прозвучить в голові у вашої аудиторії, так що завдання графіка дати відповідь на нього. Проявіть турботу. Не робіть графік заради графіка. Так, ми вже говорили, що цифри у вигляді ілюстрації засвоюються краще, але в ідеалі замахнутися на такий собі графічний сторителлинг, коли картинка сама по собі наштовхує на якусь думку.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    4. А тепер до первинних атрибутів

    Покращити графік або діаграму можна за допомогою кольору, розмірів, правильної компонування інформації. В Excel діаграми автоматично формуються з купою всього необов’язкового. Якщо їх прибрати, ключове повідомлення стане зрозуміліше. Уявімо, що треба побудувати прогноз кількості населення на планеті. Якщо вбити простеньку табличку, перший результат, який ми отримаємо, буде виглядати приблизно так.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Якщо 2 хвилини над ним попрацювати, він перетвориться в більш зрозумілу ілюстрацію.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Читайте також: Повне керівництво по Google Docs: все, про що ви не знали, але боялися запитати

    Або ще приклад. Зобразимо графік падіння прибутку на тлі зростання інших комерційних показників. Числа приблизні – задля прикладу. Важливо підкреслити факт того, що не все райдужно в королівстві. Виділити головну думку.

    Діаграми і графіки для статей: як будувати і де брати інформацію

    А якщо так?

    Діаграми і графіки для статей: як будувати і де брати інформацію

    Прості речі, але приходять до них не всі і не відразу. Необов’язково бути крутим дизайнером, щоб робити зрозумілі кожному графіки.

  • Не використовуйте в діаграмах і графіках більше 3 кольорів. Другорядні дані заливайте сірим. Головні – яскравими квітами.
  • Легенда має бути. На графіку або в тексті, але користувач за один погляд повинен розуміти, який стовпець або лінія, що позначають.
  • Прибирайте кордону та сітки з діаграм. Якщо ви не на уроці геометрії, вони не потрібні.
  • Якщо можливо, забирайте з поля діаграми легенду, залишаючи підписи даних безпосередньо в тілі графіка.
  • Бонус: 17 інструментів для створення графіків, крім Excel

    Програма

    Доступ

    Формат вивантаження діаграм

    Excel

    C реєстрацією, платно

    gif, jpg, png, bmp

    Google Sheets

    C реєстрацією

    html, png

    Numbers (Apple)

    Платно

    pdf, png

    Onlinecharts.ru

    Безкоштовно

    jpg, png, bmp, pdf

    Creately

    Безкоштовно на 5 діаграм

    jpg, png, pdf

    Visme

    Безкоштовно

    jpg, png, pdf

    Raw

    Безкоштовно з реєстрацією

    нtml, png, svq

    Chartbuilder

    Безкоштовно

    png, svq

    Infogr.am

    Безкоштовно

    нtml, png

    Vizable

    Безкоштовно з реєстрацією

    png

    Plot.ly

    Безкоштовно з реєстрацією

    нtml, png, svq, pdf

    Quadrigram

    Безкоштовно з реєстрацією

    нtml, png, svq

    Silk

    Платно

    нtml

    Qlik Sense

    Безкоштовно

    нtml, png, jpeg, pdf

    Qlik View

    Є безкоштовна версія

    нtml, png, jpeg, pdf

    Illustrator

    Платно

    png, jpeg, pdf, svq, eps, bmp, ai

    Google Charts

    Безкоштовно

    нtml, svq

    Highcharts

    Безкоштовно для некомерційного використання

    нtml, svq