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

Це третій випуск із серії матеріалів про журналістику даних і візуалізації, в якій «Медіамейкер» розбирається в цих питаннях разом із Євгенією Дроздовою та Юлією Дукач — журналістками незалежного українського видання Тexty.org.ua, яке із 2010 року просуває українську журналістику даних як серед української авдиторії, так і за кордоном. Євгенія очолює відділ журналістики даних, спеціалізується на створенні інтерактивних візуалізацій і карт, багато працює з геопросторовою інформацію. Юлія очолює відділ дослідження російської дезінформації та спеціалізується на роботі з даними соцмереж, аналізі тексту й тому, як за допомогою машинних алгоритмів можна виявляти російську дезінформацію. У медійниць є спільна пристрасть — постійно стежити за роботою дата-журналістів зі всього світу, помічати тренди та цікаві рішення у візуалізації даних. А також рефлексувати, що працює, а що ні, і що з цього всього можна взяти на озброєння в українських редакціях. Попередні два випуски тут і тут.

Що таке скролітелінг?

Євгенія: кілька років тому я побачила The Boat — історію про біженців із Вʼєтнаму, що тікали із країни після закінчення війни. Це мультимедійна адаптація графічного роману австралійського письменника Нама Ле. Подивіться її до кінця — вона справді захоплива.

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

Такий спосіб розповіді називається скролітелінг (від англ. scroll — прокручувати, telling — розповідати). І це, на жаль, не найпопулярніший спосіб розповідати історії в інтернеті. Але є одна сфера, де scrollytelling закріпився й успішно розвивається — це журналістика. 

Одним із перших прикладів скролітелінгу називають матеріал Snow Fall від The New York Times 2012 року. Зараз проєкт відкривається не у всіх браузерах і, ймовірно, не викличе у вас те захоплення, яке викликав у читачів NYT 12 років тому. Але він змінив світ журналістики назавжди.

Євгенія: Я вперше побачила скролітелінг у проєкті «Текстів» 2014 року про вибори до Верховної Ради. Це був простий графік-моделювання на три скроли, який показував, як окупація Криму й частини Донбасу вплинула на партійний склад українського парламенту. Та цього було достатньо, аби вразити й зачарувати мене, досі вважаю цей проєкт одним із найкращих матеріалів «Текстів».

Як створюються такі матеріали

Різноманітні, креативні й новітні способи використання скролітелінгу здатні захопити навіть фахівців із дизайну. Ми в «Текстах» часто його використовуємо й нерідко отримуємо прохання від різноманітних організацій зверстати їм проєкт чи дослідження саме у форматі скролітелінгу, а інтерни та стажери найчастіше хочуть опанувати саме цей спосіб візуалізації історій (звісно, після дослідження російської дезінформації та пропаганди). 

Юлія: Я теж була тією стажеркою, яка мріяла робити інтерактивні графіки, що змінюються із прокручуванням. Жодного «серйозного» так і не зробила — тема дослідження дезінформації перемогла. Але скролітелінг досі залишається серед улюблених способів розповісти складну тему на кшталт російської мережі окупаційних Telegram-каналів якомога ширшій авдиторії завдяки вау-ефекту.

Від читача не вимагається жодних додаткових дій, як-от клацнути на кнопку, потягнути за слайдер тощо — вся магія відбувається сама, поки людина просто скролить униз і бачить «дозовані» шматочки тексту.

За лаштунками цієї магії стоять тригери, що привʼязані до певних слів чи абзаців у тексті. Коли той чи інший шматок тексту зʼявляється на екрані, спеціальні скрипти (сценарії) перевіряють, які зміни мають відбутися разом із цим (Intersection Observer API). Такі скрипти зазвичай пишуться мовою програмування JavaScript, тобто вам потрібен програміст, щоби зверстати скролітелінг-історію. Хороша новина в тому, що спеціальні бібліотеки можуть суттєво спростити це завдання, наприклад, ScrollMagic, Lax.js, Scrollama.js тощо.

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

На мапі

Скролітелінг прекрасно поєднується з картами й найчастіше саме з ними і використовується.

Чудовий приклад скролітелінгу — матеріал німецького видання Der Tagesspiegel Oil wells in the national park про видобуток нафти в Уганді, що призводить до знищення заповідної території.

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

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

До слова, один із найпопулярніших матеріалів «Текстів» досі лишається «Свидовець. Анатомія Карпат», де скролітелінг поєднали із 3D-візуалізацією українських Карпат.

Ще один приклад скролітелінгу з картами — розслідування NYT про те, як коронавірус розійшовся по світу на основі аналізу даних мобільних операторів How the Virus Got Out. Це той випадок, коли у проєкті зацікавлює не тільки візуалізація, а й деталізація даних, з якими працювали журналісти: кожна точка на карті — один телефонний номер. Для того, щоби змоделювати поширення вірусу, журналісти проаналізували переміщення сотні мільйонів людей між країнами й континентами.

Скролітелінг і графіки: 

Старенький (2014 року), проте один із найяскравіших прикладів використання скролітелінгу — матеріал Battle at the Berrics. Тоді мобільні адаптації ще не були розповсюджені, тож матеріал доступний тільки з десктопу. 

Battle at the Berrics — це відомий конкурс зі скейтбордингу, який щорічно проходить у Лос-Анджелесі. Візуалізація показує динаміку матчів, типи трюків та іншу повʼязану статистику. Те, як тут елементи графіків падають із верхніх на нижні, змінюючи свою форму у процесі, навіть сьогодні — 10 років потому — вважається складною технікою візуалізації.

Велике дослідження про глобальне потепління на прикладі зміни погоди в Сінгапурі Is Singapore actually getting hotter? від The Straits Times.

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

Доволі простий скролітелінг часто використовують у Financial Times. Як, наприклад, коли описують тренди світових фінансових ринків цього літа. Коли графіків і даних багато, а тексту мало, скролітелінг може зробити переходи плавними, а саму статтю за відчуттями — коротшою. Головне — не зловживати й не намагатися запхати великі шматки тексту у «хмарки», що пропливають.

Скролітелінг без карт і графіків

Наприклад, це матеріал USAToday An illustrated explanation of Russia’s deportation of Ukrainians про війну в Україні. 

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

Кілька років тому «Тексти» робили ілюстровану історію перепоховання Тараса Шевченка. Це теж приклад скролітелінгу без карт і графіків.

А ось у матеріалі Millennials are screwed Huffington Post використовує скролітелінг, щоб постійно тримати на екрані «ігрового персонажа», який уособлює міленіалів. Про них, власне, і ведеться розповідь. 

Можна посперечатися, чи не занадто багато тут інтерактиву, однак це цікавий приклад використання методу. А якщо вам подобаються подібні проєкти, то тримайте ще один схожий від The Pudding Cool про історію наукової фантастики Who killed the world.

Нові способи скролітелінгу

Скролітелінг, де невеликі абзаци тексту прокручуються вниз, а під ними або поряд змінюються графіки, вже можна вважати класичним (і навіть трішки застарілим) способом використання формату, адже журналісти придумують все цікавіші способи розповідей.

Наприклад, останнім часом, популярним серед західних медіа стає скролітелінг із використанням відео, де відтворення ролика контролюється скролом миші.

Якщо ви подивитеся на цей скролітелінг від NYT про згенеровані ШІ обличчя, то помітите, що обличчя змінюють одне одного у відповідь на скрол користувача. Цього ефекту досягають завдяки тому, що анімація записана у вигляді відео.

Інший приклад від NYT із відео, яке поступово відтворюється за скролом, — історія про велику китайську стіну поселень. Тут автори за допомогою скролітелінгу на початку статті привертають увагу читачів до історії про тисячі людей, яких влада Китаю переселила в ​​нове житло, побудоване буквально за кілька кілометрів від кордонів сусідніх країн, або й узагалі на спірних територіях.

Або ось проілюстрований іспаномовний матеріал про те, як зібрати кубик Рубіка. Погодьтеся: контролювати таку інструкцію за допомогою скролу набагато зручніше, ніж постійно ставити на паузу й відмотувати назад відео в тому ж YouTube.

Різновидом скролітелінгу можна вважати і свайптеллінг (swipe-based storytelling). Коли матеріал розбитий на слайди й вони змінюються, коли читач свайпає праворуч. Це зручно для перегляду з мобільних екранів, але страшенно набридливий із десктопу метод, приклад якого можна подивитися за лінком.

Альтернатива й чому іноді краще без нього

Як бачите, ми дійсно любимо скролітелінг і захоплюємося проєктами, де він використаний органічно й де поглиблює відчуття занурення в матеріал. Але будьмо чесними: не всі редакції можуть дозволити собі тримати у штаті команду (чи хоча б одну людину), яка вміє робити магію за допомогою JavaScript. 

Натомість code free рішення (як-от скролітелінг від Flourish для їхніх преміумпідписників) все ще дорогі й орієнтовані більше на бізнес, аніж на журналістів і невеликі медіа. До того ж скролітелінг не є панацеєю й не завжди працює, а часом навіть заважає читати матеріал.

По-перше, неінтерактивні рішення досі надійніші. Вони швидко завантажуються, відкриваються навіть за умови поганого інтернет-звʼязку й точно працюватимуть на всіх девайсах, браузерах й операційних системах.

Наприклад, цей неймовірний проєкт від австралійського медіа ABC News із лазерним 3D-скануванням зруйнованих історичних памʼяток України навіть за умови швидкого домашнього інтернету на десктопі потребує пару хвилин, щоб завантажитись. До того на екрані буде лише чорний фон і текст, що пропливає повз нього. Та чи всі читачі готові зачекати?

По-друге, статичні картинки-візуалізації можуть бути навіть більш естетично привабливими й затримувати увагу читача не гірше за картинку, що динамічно змінюється. 
Наприклад, альтернативою скролітелінгу може бути довге зображення з поясненнями, як у матеріалі NYT про військові дії в Секторі Газа. У іншому матеріалі про російські «успіхи» в Україні, NYT використовує мінімалістичні карти, хоча для такої розповіді також можна було використати скролітелінг. А The Washington Post показує, як Вʼєтнам створює штучні острови, щоб оскаржити морські претензії Китаю, демонструючи довгий супутниковий знімок одного з островів із підписами та ілюстраціями на ньому. Який, до речі, однаково класно відображається і на ноутбуці, і в мобільній версії статті.