Як працювати з увагою користувача через дизайн

Час читання: 15 хвилин

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

1. Виділи кольором

Коли ми дивимося на картинку, ми звертаємо увагу на те, що є контрастним. Тут згадай, що таке компліментарні кольори та як працює контраст.

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

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

Пам'ятай, що необов'язково робити все однакового розміру, щоби показати рівну цінність кожного об'єкта. Головне, щоби був баланс.

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

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

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

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

Кожен елемент на своєму місці: у своєму розмірі, у своєму кольорі. Але головний висновок — не тільки розмір впливає на сприйняття масштабу, а його колір.

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

3. Контрастом

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

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

Розмитість другорядних елементів та фону акцентує увагу на головних об'єктах.

Прийом тобі відомий з популярної теми скломорфізму. Спробуй, використовуй, але слідкуй за трендами. Якоїсь миті навіть те, що на піку популярності, стане моветоном.
5. Розрив патерну

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

Це те, що точно привертає увагу завжди. Людей як об'єкт композиції можна обігравати абсолютно по-різному і від цього композиція лише виграє.
Порада: головне не зациклюйся на тому, що ці 8 прийомів потрібно використовувати все і відразу чи тільки один. Вони певною мірою перетинаються один з одним, ти можеш комбінувати деякі з них і отримувати класний результат.
Як керувати увагою користувача
Тут немає чітких правил як у математиці. Це радше комплекс правил і принципів, які допоможуть тобі розібратися, як звернути увагу користувача туди, куди потрібно. Давай розбиратись.

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

Правило внутрішнього та зовнішнього — окремий випадок принципу близькості. Вони досить взаємопов'язані. Ми розглянемо всі на прикладах.

Принцип близькості: об'єкти, розташовані близько один до одного, сприймаються пов'язано.

Правило внутрішнього та зовнішнього: внутрішнє ≤ зовнішнього. Зовнішня відстань має бути більшою (або рівною) внутрішньої відстані.

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

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

Ще більше божественних прикладів можеш знайти у статті.

2. Принцип вирівнювання

Принцип вирівнювання говорить: ніщо не повинно розміщуватися на сторінці довільно. Кожен елемент повинен мати візуальний зв'язок із чимось іншим на сторінці.

Як ти пам'ятаєш, є кілька видів вирівнювання тексту:
  • по лівому краю;
  • з правого краю;
  • по центру.

Багато хто, коли працює з текстом, може заплутатися у вирівнюваннях: поставити частину тексту по центру, іншу — по лівому краю, третю — по правому, вважаючи, що так креативно. Але так не варто робити. Це вносить хаос у сприйняття тексту та в композицію.

Принцип вирівнювання допомагає пов'язати за змістом об'єкти з відривом.
Бо дивись, яка каша може вийти, якщо не дотримуватися цього правила:
3. Принцип повтору, рима

Ми можемо доповнити та посилити зміст допису за допомогою додаткового тексту. Давай розглянемо на прикладі Маяковського і порівняємо два візуали: який цілісний за композицією та за змістом?
Зверни увагу, що другорядний текст має один стиль (Regular, 18 pt): він невеликий, нейтральний і не відволікає нас від головного тексту.

Стилі тексту та інші візуальні елементи дизайну (кольори, фігури, тексти, лінії) мають повторюватися. Це і є рима. З допомогою повтору формується стиль.

4. Контраст. Як досягти контрасту

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

(якщо ти помітив, це трохи схоже на те, як виділити головне від другорядного)

Давай порівняємо попередній візуал, якби не було контрасту:
Давайте розглянемо кілька типів контрасту на прикладі заголовок + підзаголовок.

Контраст розмірів. Заголовок робимо більшим кеглем, ніж опис. Тим самим, за масштабом виділяється заголовок.

Контраст товщини. Заголовок трохи більше підзаголовка, але за рахунок товщини (напис Heavy) заголовок виділяється.
Контраст кольору. Заголовку даємо контрастний до фону колір — і вуаля, ми відразу звертаємо увагу на нього.

Контраст разом. Тут і зображення важке, і розмір, і колір — використовуємо всі способи привернути увагу.
Створюй ієрархію тексту
Правильно створюй ієрархію у тексті

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

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

Наприклад, у тебе є суцільний текст:

  1. Розділи його на смислові групи (визнач, де заголовок, де текст, де цитата, що може бути декором тощо)
  2. Розбий та познач ієрархію:
  • заголовок (H1 — так позначають головний заголовок)
  • підзаголовок (H2),
  • текст (text),
  • текст-декор (H3),
  • цитата (qoute) тощо.
3. Тепер дай їм відповідний стиль (кегль, зображення, колір тощо), де масштаб відповідає його смисловій групі.

Давай розглянемо приклад. Ми мали текст, ми зробили ієрархію: заголовок першого рівня (H1), текст і заголовок другого рівня (H2)
І тепер нашій ієрархії даємо стилі. Наприклад заголовок (H1) — він найважливіший, тому найбільший. Текст (text) теж важливий, але робимо його меншим, оскільки він досить об'ємний і потрібно зробити його нейтральним, щоб не втомитися читати. І є дата, яка другорядна, і її доречно зробити найменшою і навіть можна зробити її не такою яскравою за кольором.
Ще хороші приклади ієрархії тексту, спробуй самостійно розділити його на смислові групи і простежити ієрархію.
Ще один приклад з ієрархією з життя — квиток у музей (кіно, виставу, куди завгодно). Подивися, в якому порядку ти зчитуєш інформацію на них, як розташовані елементи в ньому і який текстовий стиль цих елементів (кегль, накреслення, колір).

Розбір прикладів
Давай розглянемо роботи попереднього потоку та розберемо типові помилки в типографіці. Ще раз акцентуємо на них увагу, щоб точно запам'ятати :)
Підсумуємо:
  • Робимо ієрархію в тексті та підбираємо під кожну смислову групу (H1, H2, H3, text) свій текстовий стиль (шрифт, зображення, розмір).
  • Не залишаємо висяків та вдів.

Наступний приклад — карусель. Розглянемо його складові як одне і подивимося, як цей допис можна поліпшити. Дивимося відео, так буде наглядніше.
Підсумуємо:
  1. Використовуємо 1-2 шрифти максимум
  2. Вирівнюємо текстові блоки по одній лінії (або за одним принципом: якщо по центру, то на всіх картинках по центру)
  3. Якщо потрібно виділити якесь словосполучення, то робимо це за допомогою кольору або накреслення (якщо ж хочеться експериментів, то краще затвердити з дизайнером; або якщо це вже закладено в айдентику і дизайн-систему)
  4. Якщо є пункти, то робимо їх однаковими на всіх картинках

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

Зазвичай останнім малюнком у каруселі ставлять інтерактив. Використовуй інтерфейсні іконки, щоб тригернути користувача (у хорошому контексті), спонукати його до дії.
2. Вводь додаткову графіку, щоб змустити прогортати карусель

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

Розглянь приклади — це може бути як лічильник, так і лінійний шлях. Вияви фантазію :)
3. Користуйся контрастом

Використовуй контраст там, де хочеш акцентувати увагу:

  • наприклад, для тієї ж останньої картинки каруселі, щоб розрядити обстановку при гортанні. Зроби на ній контрастне тло (якщо вся карусель була з білим бекграундом, останню зроби з чорним). Або зроби її у відео-форматі та додай несподівану музику.
4. Роби графічні акценти

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

До того ж подібна графіка розбавляє контент і його хочеться розглядати.
5. З'єднуй візуально дописи в каруселі

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

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

Подивися на роботу однієї з учениць із минулого потоку. Вона попрацювала з контентом і дописи стало набагато приємніше та цікавіше читати.
Особливості Instagram у дизайні
Наша особиста біль — це коли не враховують інтерфейс Інстаграм у сторіс та дописах.

1. Зважай на інтерфейс Інстаграм. У сторіс — не заповнюй важливими елементами низ і верх, пам'ятай про «безпечну зону». Також не розташовуй там деталізовані елементи, вони візуально будуть сперечатися з інтерфейсом програми.

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

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

У цих облікових записах все гармонійно: setters.me, kukuruza_blog, omg__agency
Але якщо твоя стилістика — не дотримуватися стилістики, то дотримуйся її до кінця (srsly.ru, dzen.hub ).
Наприклад, srsly.ru складно відстежити систему шрифтів, композиції, кольорів, всі дописи досить різні, але в цьому і є їхня фішка, в цьому і є їхня стилістика. Це такий симбіоз-пародія на дизайн 2000-х, епоху мемів та діджиталізації. І якщо побачиш їхній допис у стрічці, ти відразу зрозумієш чий він (правда загвоздка в тому, що зараз подібних акаунтів все більше і більше).
3. Дотримуйся своєї дизайн-системи

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

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

Що потрібно обов'язково включити в дизайн-систему акаунта в Instagram:

Колористика. Вибери кольори, їх поєднання та градієнти, якщо вони будуть у тебе.

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

Графіка. Ті елементи, які ти використовуєш на дописах: кола, точки, різні форми, іконки у певній стилістиці тощо.

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

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

Робота із текстом (2). У деяких рубриках перше коротке слово заголовка можемо подавати під кутом.

Робота з типографікою (3). Якщо великий масив тексту, можемо розбити його за допомогою кольорових плашок.

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

Підготувавши всі ці пункти, тобі буде простіше працювати з оформленням, і твійакаунт буде виглядати цілісно.

Чек-лист:

  • зважай на візуал інтерфейсу Інстаграм;
  • використовуй можливості Інстаграм на повну;
  • завжди дотримуйся своєї стилістики та айдентики;
  • розроби та використовуй свою дизайн-систему.