Уявіть, що ваш сайт — це продавець у залі. У нього є кілька секунд, поки клієнт іще не розвернувся до дверей. За даними Nielsen Norman Group, більшість людей вирішують лишитися чи піти протягом перших 10 секунд візиту, і саме в цей проміжок треба донести, навіщо ви їм потрібні. Усе це рішення приймається на одному екрані — тому, який видно ще до першого прокручування.
У Netloria ми проєктуємо десятки лендингів і головних сторінок щороку, і найчастіша причина слабкої конверсії — не колір кнопки й не шрифт. Це перший екран, який не відповідає на просте запитання відвідувача: «я туди потрапив?».
Розберемо по кісточках, що має бути вище лінії згину, чим перший екран лендинга відрізняється від головної сайту, які помилки ми бачимо мало не в кожному аудиті — і як за п’ять хвилин перевірити свій.
Перший екран (його ще називають зоною над лінією згину, above the fold — термін прийшов зі складених навпіл газет, де найважливіше друкували у верхній половині) — це те, що відвідувач бачить одразу, без скролу. На десктопі це приблизно верхні 700–900 пікселів, на смартфоні — ще менше.
І про мобільний варто сказати окремо, бо саме тут ховається найбільша частина втрат. На телефоні перший екран удвічі, а то й утричі коротший за десктопний, і великий красивий банер, який на моніторі лишав місце під заголовок і кнопку, на смартфоні з’їдає їх цілком — відвідувач бачить саму картинку й мусить скролити, щоб зрозуміти, куди він узагалі потрапив. А оскільки з мобільних приходить більшість трафіку майже в будь-якій ніші, перевіряти перший екран треба спершу на телефоні, а вже потім на десктопі, а не навпаки.
Скрол не помер, це правда. Люди сьогодні гортають охоче. Але увага все одно розподілена вкрай нерівномірно: за eyetracking-дослідженням NNGroup, на зону над лінією згину припадає близько 57% усього часу перегляду сторінки, а на перші два екрани — 74%. Далі вниз інтерес спадає різко.
Звідси проста арифметика уваги. Ви можете зробити геніальний блок з відгуками й детальним описом послуги десь посередині сторінки — але якщо перший екран не втримав людину, до того блоку вона просто не дійде. Верхні кількасот пікселів працюють не як обкладинка, а як фільтр: вони вирішують, чи буде взагалі другий екран.
Коли людина відкриває сторінку, в голові у неї — не захват від вашого дизайну, а тривога й поспіх. Вона мовчки ставить три питання й чекає відповіді за секунди:
Якщо хоча б на одне з них перший екран не відповідає, відвідувач іде. Не тому що йому не сподобалось, а тому що він не зрозумів. А нерозуміння в інтернеті коштує рівно один клік «назад».
Найдорожча помилка тут — плутати красу з ясністю. Перше враження про дизайн справді формується за частки секунди, ми докладно розбирали цей механізм у матеріалі про те, як дизайн керує вибором клієнта. Але гарний градієнт не відповість на питання «це для мене?». На нього відповідають слова.
Немає єдиного шаблону, який пасує всім. Але є набір елементів, які майже завжди мають бути в полі зору без скролу — і кожен з них закриває одне з трьох питань вище.
Оффер (головний заголовок). Це не назва компанії й не гасло на кшталт «Ми робимо світ кращим». Це конкретна обіцянка результату: що клієнт отримає і для кого це. «Розробляємо інтернет-магазини під ключ за 3 тижні» працює, бо в ньому є і що, і як швидко. «Ласкаво просимо на наш сайт» — не працює ніяк.
Підзаголовок-уточнення. Один-два рядки, які знімають заперечення або додають конкретики до оффера: для кого, чому саме ви, що входить. Заголовок ловить погляд, підзаголовок утримує його ще на секунду.
Заклик до дії (CTA). Одна головна кнопка з дієсловом, а не з «Детальніше». «Залишити заявку», «Розрахувати вартість», «Замовити консультацію» — людина має бачити, що станеться після кліку. Дві-три рівнозначні кнопки поруч розмивають фокус: коли важливо все, не важливо нічого.
Доказ довіри. Хоч щось, що знімає початкову недовіру ще на першому екрані: лічильник виконаних проєктів, лого клієнтів, зірки рейтингу, коротка цифра-факт. Не обов’язково багато — обов’язково відразу.
Візуальний якір. Зображення чи короткий продукт-шот, який показує суть, а не абстракцію. Тут важлива чесність: реальне фото команди чи продукту працює краще за ідеальний сток, на якому усміхнені незнайомці тиснуть руки.
І окремо — навігація. Вона теж на першому екрані, але її завдання протилежне до оффера: не привертати увагу, а не заважати. Меню на 12 пунктів у шапці — це 12 приводів піти не туди, куди вам треба.
Часта плутанина: власник бачить крутий лендинг конкурента й хоче «так само» на головній корпоративного сайту. Але задачі різні, і перший екран у них будується по-різному.
| Елемент | Перший екран лендинга | Перший екран головної сайту |
|---|---|---|
| Головна мета | Одна дія — заявка чи покупка | Зорієнтувати й розвести по розділах |
| Оффер | Вузький, під один продукт/акцію | Ширший — суть усієї компанії |
| CTA | Одна домінантна кнопка | Головна дія + шляхи в ключові розділи |
| Навігація | Мінімальна або зовсім прихована | Повне меню — це точка входу в сайт |
| Успіх вимірюється | Конверсією в заявку | Тим, чи знайшов відвідувач свій шлях |
Ми в Netloria часто починаємо проєкт саме з цього розмежування. Якщо клієнту потрібен потік заявок на одну послугу — це лендинг, і перший екран б’є в одну ціль. Якщо потрібно, щоб різні аудиторії знайшли різне, — це головна, і її перший екран радше диспетчер, ніж продавець. Зробити навпаки — типова причина, чому дорогий сайт «не продає».
Це не теорія. Це те, що ми знімаємо на кожному другому аудиті перед редизайном.
1. Слайдер-карусель замість оффера. Здається, що три банери, які змінюються, — це три меседжі за ціною одного. Насправді людина не встигає прочитати жоден, бо наступний уже виїхав, і мозок сприймає рух як рекламний банер, який треба ігнорувати. Один сильний оффер завжди б’є три слабких, що крутяться.
2. Розмитий оффер про «якість і сервіс». «Індивідуальний підхід», «команда професіоналів», «широкий спектр послуг» — ці слова не несуть інформації, бо їх пише про себе кожен. Якщо ваш заголовок можна без змін поставити на сайт конкурента — це не оффер, а шум.
3. Кнопка «Дізнатися більше». Вона не обіцяє нічого конкретного, тому й тисне на неї мало хто. Дієслово результату завжди сильніше за дієслово процесу.
4. Стокові фото, які вбивають довіру. Ідеальні усміхнені моделі в костюмах зчитуються як «тут неправда» швидше, ніж ми це усвідомлюємо. Про це ж, до речі, важливо памʼятати і в текстах — ми розбирали, як писати чесно й по суті, у матеріалі про тексти для сторінки послуги.
5. Перевантаження. Коли на першому екрані одночасно акція, меню на 15 пунктів, чат-бот, спливне вікно й три кнопки — увага не має за що зачепитись і зісковзує. Ясність народжується з відніманням, а не з додаванням.
Оффер — це найдорожчі 8–12 слів на всьому сайті, тож над ними варто посидіти довше, ніж над рештою сторінки разом узятою. Проста робоча формула, з якої ми зазвичай стартуємо: [що ви робите] + [для кого] + [ключова вигода чи доказ]. Наприклад: «Створюємо інтернет-магазини на WordPress для локального бізнесу — з наповненням і налаштованою оплатою за 3 тижні». Тут людина за секунду розуміє і продукт, і свою причетність, і чому це швидко. А тепер приберіть будь-яку частину — і оффер починає протікати: без «для кого» він звучить як реклама всім і нікому одразу, без вигоди перетворюється на суху назву послуги, без конкретного строку чи цифри — на гасло, під яке однаково підходить половина ринку. Саме тому шаблонні «Ваш надійний партнер» чи «Якісні рішення для бізнесу» не тримають нікого: у них немає жодної з трьох частин, а отже й жодної інформації, за яку могло б зачепитися рішення залишитись на сторінці.
Другий прийом, який ми любимо в Netloria, — говорити мовою результату клієнта, а не мовою свого процесу. Людина не купує «редизайн» — вона купує більше заявок з того самого трафіку. Не «SEO-оптимізацію», а клієнтів, які знаходять її в Google самі. Перепишіть заголовок так, щоб у ньому був результат, а не назва вашої послуги, — і перший екран одразу почне звучати про відвідувача, а не про вас.
І остання перевірка — на конкретику. «Швидко» мозок пропускає повз. «За 3 тижні» — фіксує й запам’ятовує.
Не треба замовляти дороге дослідження, щоб побачити очевидне. Ось швидкий самотест, який ми радимо клієнтам ще до будь-якого редизайну.
Пройдіться цими чотирма пунктами прямо зараз. Найчастіше вже на другому стає видно, що саме тримає конверсію внизу — і це майже завжди щось, що можна виправити за годину роботи, а не переробкою всього сайту.
Перший екран — це не про красу. Це про те, чи встигне відвідувач зрозуміти, що він там, де йому треба, поки палець ще не потягнувся до кнопки «назад». Усе інше на сторінці працює тільки після того, як цю секунду виграно.
У Netloria ми проєктуємо лендинги й сайти, починаючи не з картинки, а з оффера й логіки першого екрана — того, що реально впливає на заявки. Якщо ваш сайт має відвідувачів, але мало звернень, найімовірніше річ саме тут. Замовте розробку лендинга в Netloria — розберемо ваш перший екран, знайдемо, що зупиняє клієнтів, і зберемо сторінку, яка веде до дії.
