Керуємо глибиною переглядів

01.05.
23, 15:57 Керуємо глибиною переглядів
Керуємо глибиною переглядів

Модуль: Блок 2. Оформлюємо stories та керуємо увагою через візуал
Поговоримо про те, як ми можимо повпливати на глибину переглядів за допомогою

візуальних прийомів. Звісно, тільки за допомогою цих правил у тебе не вийде покращити
статистику. Але якщо працювати у купі: скласти ТЗ, що буде цікаве твоїй ЦА, і додати соус
«візуальний сторітейлінг» (п.с. це якраз-таки те, що допомагає збільшити глибину переглядів)
+ грамотне, зрозуміле оформлення, то результат тебе неодмінно здивує.
Тож, візуальний сторітелінг потрібен для того, аби провести користувача нативно крізь
добірку, максимально залучити його та зробити учасником твого контенту. Щоб він прочитав
кожен слайд, але навіть не задумався про те, що затримався у твоїх stories надовго. Це
називається глибина взаємодії з контентом. Чим вона більша, тим більше шансів отримати
високе охоплення, тому що, крім показників залученості при ранжуванні історій, алгоритм
Instagram звертає увагу і на час, витрачений на контент.
Чим більше часу людина переглядає твою підбірку, тим вона для неї вона цікавіша, а отже —
треба рекомендувати більшості саме твій контент. Також за допомогою цього твої stories
будуть показуватися першими у стрічці stories у твоїх підписників. Тож, давай дізнаємось, як
можна візуально зацікавити користувачів, аби вони не пройшли повз твоєї підбірки stories.
Які основні правила?

https://kukurudza.kwiga.com/courses/kurs-zi-stories/keruiemo-glibinoiu-peregliadiv 1/33
01.05.23, 15:57 Керуємо глибиною переглядів
Пам’ятай, лонгріди уже не цікаво читати, особливо в stories. Щоб користувачу було легше
сфокусуватися, розміщуй лише одну думку на одній stories.
Який з двох слайдів тобі було легше спийняти? Правильно, другий варіант.
А ще там достатньо «‎повітря»‎(вільного простору). Саме тому важливо не перевантажувати

простір зайвою інформацію та оформленням. Допоможи своєму користувачеві
сфокусуватися на потрібних тобі місцях (текст, приклади), аби не відбувався розфокус.
Тож, можемо вивести таку формулу:
1 stories = 1 заголовок + 1-3 невеличких речення + 1-2 приклади (візуалізація,

приклади, тощо) + 1 заклик + 2-5 декоративних об’єктів (за потребою; рахуються і
колонтитули, спонукальні стрілочки, тощо). Приклад:
П.с. Також на віжуалі бачимо один явний акцент – помаранчевий текст. І це цілком ОК! Адже
дуже правильно керувати увагою користувача, допомагати побачити головне і одразу зчитати
суть. Головне – не перебільшувати, акцентувати увагу на 1-3 головних об’єктах.
Подивись, наскільки другий варіант важко зчитується у порівнянні із більш мінімалістичним
першим, оку немає де зачепитися:
А ще акцентування стосується відгуків, подібних скрінів повідомлень, про які ти хочеш

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

Звісно, що не обов’язково будувати слайди на основі одразу всіх «‎‎інгредієнтів»‎‎, котрі ми
назвали, десь може не бути, наприклад, декоративних об’єктів, бо маємо активний фон (і
результат — заповнений простір):
Тепер, коли ти точно запам’ятав формулу і не будеш перевантажувати простір непотрібним

візуальним шумом, а також ставити на слайд більше 1-ї думки, можемо йти далі :)
Нас навкруги оточує велика кількість візуального шуму та інформації, тому стає все
складніше концентруватися на чомусь одному. Наша задача: прискорити сканування
інформації користувачем. Уяви собі, якби дорожні знаки мали замість ілюстрації текст:
«обережно, ремонтні дороги». Скільки б аварій сталося через те, що водій витратив час на
прочитання цього тексту.
Саме тому візуалізація інформації допомагає скоротити велике полотно тексту або
візуалізувати складні терміни, процеси, а також спрощує та пришвидшує зчитування слайду,
він з більшою ймовірністю запам’ятається. Які існують види візуалізації, показали нижче:
Іконки не повинні бути надто деталізовані. За допомогою простих форм можна передати усе
потрібне і пришвидшити зчитування інформації, а також поліпшити запам’ятовування.
На прикладах бачимо, що кожний пак іконок має власний стиль. Вони відрізняються
товщиною контура, деталізацією, фірмовими кольорами. Тому і ти слідкуй за тим, щоб усі
твої іконки вдало поєднувалися не тільки між собою, а й з усім фірмовим стилем.
Іконки можна відмалювати самому відразу в Figma або використовувати готові за допомогою
відповідних плагінів чи безкоштовних стоків в Інтернеті (ми іноді беремо іконки звідси:
https://www.flaticon.com/ ). Подивись, наскільки вони можуть бути різними:
Ілюстрації чи колажі.
Краще вибрати тут щось одне, що допоможе тобі з візуалізацією, адже поєднувати і колажі, і
ілюстрації важко (а нам важливо оформлювати stories в одному стилі і бути впізнаваними).
Найкращий спосіб — замовити або намалювати ілюстрації самому. Якщо такої можливості
немає — радимо придбати готовий пакет ілюстрацій, який підійде за стилістикою. Адже брати
перші-ліпші ілюстрації за запитом «‎ілюстрації вектор»‎ми категорично не радимо. Усі вони
стокові у поганому сенсі цього слова. Були використані n кількість разів і будуть тільки
дешевити твої дизайн-рішення.
П.с. тобі не обов’язково використовувати колажі чи ілюстрації, адже у тебе в арсеналі є ще

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

простими схемами. Пояснювати щось можна довго, а використати 4 слова і при цьому
залишитися інформативним — не талант, а навичка.
Особливо зручно зчитувати такі приклади, як наведено нижче. Оскільки списки в один
стовпчик не так круто виглядають, згоден? Цей вид інфографіки найчастіше показує
характеристики предмета чи явища. Так зазвичай зображують сам об'єкт, а поруч чи навколо
— його характеристики.
Тож коли в ТЗ бачиш перелік (список), план дій (наприклад, як поетапно створити працюючі
stories), то це стовідсотково треба оформити у нескладну схему :)
А для більшого натхнення тримай статтю з класними серісами для інфографіки, звідки
можеш так само зберігти кілька цікавих рішень: https://web-academy.ua/blog/junior/10-servisov-
dlia-infographiki
Отже, перед тим, як почати оформлювати тз, краще сісти і подумати: як можна візуально
спростити подачу інформації, що можна візуалізувати (за допомогою простих асоціацій), а що
схематично зобразити. Також можна одразу піти на Pinterest за додатковим натхненням.
Фото чи мем у тему.

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

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

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

багатоплановість. Багатоплановість — це про відчуття простору, коли світлина на фоні не
просто для краси, вона взаємодіє із нашими декоративними елементами, текстом та
доданими скрінами. Це теж про цікаву подачу:
Тож, робимо висновок. Ми можемо використати декоративні об’єкти у двох випадках:

1) Треба заповнити простір + ідентифікаційна функція (фірмові елементи бренду, що роблять
stories впізнаваними).
Сіточка на фоні, колонтитули – декоративні елементи, що допомагають ідентифікувати

Кукурудзу. Але при тому вони не відволікають, адже використано неяскраві кольори, а
навпаки – наближенні до кольору тла.
2) Треба щось виділити, на чомусь акцентувати увагу.
Добре, з вільним простором та декоративними об’єктами розібралися, можемо переходити

до наступного пункту.
Роби все це різноманітним: тут фотографія, а там уже фактурний фон, невеличкий колаж і
т.д. Головне, щоб stories змінювалися, адже це допомагає утримувати увагу глядача. Який
пак stories з цих двох ти б з більшою ймовірністю додивився до кінця?
З кожним роком людям все важче концентрувати свою увагу на чомусь довго. Згадай тік-ток і
наскільки останнім часом змінився контент – відео максимум 15 секунд, аби не встигло
набриднути. Так само і зі stories. Треба дивувати – змінювати візуальний ряд, аби змінювався
на слайді не тільки текст, а й візуальне наповнення.
Тримай ще непогані приклади. Проте зверни увагу, кожен акаунт з цих прикладів має свої
фірмові кольори, шрифти та декоративні елементи (і загалом індивідуальний стиль).
Також не забувай креативити. Як ми і говорили раніше, увагу користувача важко зачепити і

іноді треба не просто правильно та естетично оформити stories чи допис. Усе це варто
«‎приправити»‎креативною подачею (яка, до речі, не повинна відволікати від суті слайда, це
усього лише приправа, а не основна страва).
Але і не перегравай… З цим тобі допоможе твоє навчене око, яке треба тренувати, аби
розуміти: де крінж, а де цікаве рішення, яке можна спробувати втілити у своїх stories.
З оформленням сторітелінгу тобі допоможуть застосунки для телефону з мільйоном

готових матеріалів (фони, декоративні елементи, стрілочки, іконки, плашки). Вони зроблять
візуал більш креативним та проілюструють інфу:
1. Loomy та 7Elements (копіюй матеріали в один клік в Instagram)

2. Сanva та PicsArt (створюй stories з нуля одразу в додатку)
А зараз поговорімо про основні прийоми візуального сторітелінгу, що точно доведуть

користувача до кінця добірки. Деякі з них ми уже розглянули з тобою в принципах управління
увагою, трохи доповнимо про те, що працює в нас:
1. Розрізання об’єктів на два слайди.

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

Це також спрощує «роботу» підписника: тепер йому не треба шукати продовження тексту на
кожній stories.
3. Кружечки, цифри, які показують кількість stories (трекер).

З кожним слайдом заповнюється кольором все більша кількість кружечків, це допомагає
користувачу зрозуміти об'єм інформації.
П.с. Не роби трекер надто великим. Звісно, це декоративний елемент, що виконує свою
інформативну функцію. Але при тому по ієрархії він «нижче» за заголовок, не такий
важливий. Праворуч неправильне рішення:
4. Коли видно частину наступного слайда.

Завжди хочеться підгледіти, що ж там далі.
5. Динамічні зображення чи об’єкти, які прямують зліва направо, знизу нагору. Це

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

Ми, люди, усюди хочемо бачити людей і можемо зчитувати обличчя там, де їх немає. Тобто у
випадкових об’єктах. На думку Карла Сагана (науковець і письменник-фантаст), здатність
розпізнавати людей на відстані чи в умовах поганої видимості була одним із ключових
факторів виживання для наших предків, саме тому ця навичка «вбудована» у наш мозок.
Цим ми і можемо користуватися :) Адже користувач сто відсотків подивиться туди, куди
спрямований погляд людини на віжуалі.
7. Прийом «розмиття». На перший слайд розмістити одразу дві думки, але другу заблюрити.
Вже тапнувши по екрану, людина побачить наступний слайд, де чітко видно увесь текст.
8. Графічні елементи із закликами, що збільшують шанси утримати аудиторію.

Це і про прості заклики «тапни», і про запитання + стрілочка на наступний слайд, і про
багатозначні «але…».
Подивись, як круто обіграли ідею з блюром у хайлайтс «Кейси учнів»:
Головне у цій темі — багато тренувати. Створюючи наступну підбірку stories, пройдись по
матеріалу наново і застосуй описані інстайти, аби усе точно запам’яталось та закріпилось на
практиці ❤️

Керуємо глибиною переглядів

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Керуємо глибиною переглядів

Uploaded by

Copyright:

Available Formats

01.05.

23, 15:57 Керуємо глибиною переглядів

Керуємо глибиною переглядів

Поговоримо про те, як ми можимо повпливати на глибину переглядів за допомогою

Які основні правила?

А ще там достатньо «‎повітря»‎(вільного простору). Саме тому важливо не перевантажувати

1 stories = 1 заголовок + 1-3 невеличких речення + 1-2 приклади (візуалізація,

А ще акцентування стосується відгуків, подібних скрінів повідомлень, про які ти хочеш

Тож, повертаємо до нашої формули.

Тепер, коли ти точно запам’ятав формулу і не будеш перевантажувати простір непотрібним

П.с. тобі не обов’язково використовувати колажі чи ілюстрації, адже у тебе в арсеналі є ще

Сюди ми віднесли усі можливі види інфографіки, починаючи діаграмами і закінчуючи

Фото чи мем у тему.

Подивись на світлини нижче: кілька зайвих деталей ускладнюють сприйняття інформації на

Також ти можеш змушувати декоративні об’єкти, акценти та цілком дизайн працювати на

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

Тож, робимо висновок. Ми можемо використати декоративні об’єкти у двох випадках:

Сіточка на фоні, колонтитули – декоративні елементи, що допомагають ідентифікувати

2) Треба щось виділити, на чомусь акцентувати увагу.

Добре, з вільним простором та декоративними об’єктами розібралися, можемо переходити

Також не забувай креативити. Як ми і говорили раніше, увагу користувача важко зачепити і

З оформленням сторітелінгу тобі допоможуть застосунки для телефону з мільйоном

1. Loomy та 7Elements (копіюй матеріали в один клік в Instagram)

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

1. Розрізання об’єктів на два слайди.

2. Контур, що тягнеться через усю добірку, за яким користувач слідує.

3. Кружечки, цифри, які показують кількість stories (трекер).

4. Коли видно частину наступного слайда.

5. Динамічні зображення чи об’єкти, які прямують зліва направо, знизу нагору. Це

6.Керуй увагою користувача за допомогою облич, жестів.

8. Графічні елементи із закликами, що збільшують шанси утримати аудиторію.

Подивись, як круто обіграли ідею з блюром у хайлайтс «Кейси учнів»:

You might also like