Перший екран інтернет-магазину: що має бути в перші 5 секунд

Ви заплатили за клік. Людина прийшла з Meta, відкрила ваш магазин на телефоні — і протягом наступних 3-5 секунд вирішує: залишитись чи закрити вкладку. Не «прочитати ваш оффер», не «прогорнути товари», а саме закрити. На цьому моменті згоряє більшість рекламного бюджету: трафік є, переходи є, а замовлень кіт наплакав. І винен у цьому майже завжди не товар і не ціна, а перший екран — те, що людина бачить до того, як почала скролити. Розберемо по кісточках, що там має бути, що краде конверсію і як зібрати це під Хорошоп та мобайл, не зламавши сайт і не наймаючи розробника.

Чому перший екран — це 50% сторінки, а не її початок

Звична інтуїція каже: перший екран — це вступ, головне нижче. На холодному трафіку ця інтуїція коштує грошей. За eye-tracking-дослідженням Nielsen Norman Group, люди проводять близько 57% часу над згином і 74% — у перших двох екранах (до 2160px). Майже три чверті уваги відвідувача витрачається ще до того, як він глибоко зануриться у сторінку. Скролять — так, але рішення «а чи варто взагалі скролити» формується саме нагорі.

Це міняє логіку проєктування. Перший екран не «представляє» магазин — він за 3-5 секунд має пройти тест трьох питань (метод 5-second test від NN/g, перевіряється на 5-6 людях): *Що це? Це для мене? Що робити далі?* Якщо хоч одне питання лишається без відповіді — екран не працює, скільки б гарних блоків не було нижче. Методику «п'яти секунд» детально описує Maze: показуєте екран на 5 секунд, ховаєте, питаєте людину, що вона запам'ятала. Якщо вона не може переказати оффер — холодний покупець теж не зможе.

Обовʼязковий мінімум: 4 елементи, без яких екран не продає

Перший екран товарного магазину тримається на чотирьох речах. Не на десяти — на чотирьох. Кожен зайвий елемент розмиває фокус і відтягує увагу від кнопки.

Зверніть увагу на нюанс: дескриптор ≠ УТП. Дескриптор каже, *куди людина потрапила* («Постільна білизна з мікросатину»), а оффер/УТП — *чим ви вигідніші* («−40%, відправка сьогодні, оплата при отриманні»). На першому екрані потрібні обидва: одне без іншого або незрозуміле, або непереконливе. Сильний приклад структури hero-секцій розбирає Primer: дескриптор + вигода + один доказ + одна дія.

Message match: найдорожчий важіль для холодного трафіку з Meta

Якщо вибирати один елемент, у який варто вкласти найбільше уваги — це відповідність креатив → перший екран (message match). Людина побачила в стрічці банер «Плед-травка −50%, наложка», тицьнула — і має одразу побачити той самий плед, ту саму знижку, ту саму обіцянку. Будь-який розсинхрон («у банері знижка, на сайті повна ціна»; «у банері один товар, на сайті каталог») холодний трафік читає як обман і закриває вкладку.

Наскільки це важливо — показав експеримент NextAfter: коли картинку в оголошенні замінили на той самий візуал, що й на сторінці, конверсія зросла на +47,6% (з 0,49% до 0,73%, вибірка 239 607 осіб, довіра >95%). Один лише збіг картинки — майже плюс половина до конверсії.

Звідси — практичний висновок, який досі ігнорує половина магазинів: холодний трафік не можна вести на головну сторінку магазину. Креатив про конкретний товар зі знижкою має вести на сторінку *цього* товару з *цією* знижкою, а не в каталог, де людина має сама шукати, що ви їй обіцяли. Це одна з найдорожчих помилок — детальніше про неї та інші важелі в нашому повному гайді з конверсії інтернет-магазину.

Заголовок: ясність бʼє креатив

Заголовок першого екрана — головний носій смислу. І тут є спокуса зробити «інтригуючий гачок», щоб зачепити. На холодному performance-трафіку це частіше провалює тест трьох питань: людина не встигає розгадати загадку за 5 секунд і йде. Найкращі H1 — короткі (медіана менше 8 слів, ≤44 символи), прямі, орієнтовані на вигоду або оффер.

Дефолт під холодний трафік на $300-700/тиждень — гібрид «вигода + конкретика оффера». Інтригу тестуйте тоді, коли є статистика на розкіш загадок.

Чому саме гібрид як дефолт: при бюджеті $300-700/тиждень у вас просто немає достатньо трафіку, щоб набрати статзначущість на A/B-тесті заголовків. Беріть перевірений формат, який точно проходить тест трьох питань, а ризиковану інтригу й експерименти лишіть на потім.

Ціна і довіра: те, що холодний покупець шукає очима першим

Холодний трафік не довіряє вам за замовчуванням — довіра на нулі. Тому соцдоказ на першому екрані для холодної аудиторії піднімають вище, ніж для теплої. Працюють конкретні, перевірювані речі: рейтинг із кількістю відгуків («4,8★ · 312 відгуків»), лічильник «продано N», іконки гарантії та способів оплати. У дослідженні 2000 сторінок named-customer соцпруф дав +22%, а single-stat hero (одна цифра-доказ) — +18% (DigitalApplied).

Окремо — ціна. Вона має бути видна одразу. За Baymard, 64% користувачів шукають вартість доставки прямо на сторінці товару ще до додавання в кошик — а якщо ціна «тоне» або незрозуміла, люди підозрюють сайт у маніпуляції. Знижку показуйте недвозначно: стара ціна закреслена + нова + «Економія X грн» поруч. Не «−40%» абстрактно, а конкретні гривні, які людина економить.

Тригери довіри під український B2C — окрема велика тема: Нова Пошта, оплата при отриманні (наложка), ФОП-реквізити, оплата частинами. Саме вони знімають тривогу холодного покупця, який не готовий платити передоплату незнайомому магазину. Ми розібрали їх детально в матеріалі про trust-елементи для холодного трафіку з Meta.

Мобайл — це первинний екран, а не «адаптив»

80% вашого трафіку — з телефону (по ринку загалом mobile дає 62,2% продажів, IRP Commerce, а на товарці з Meta частка ще вища). Проектуйте перший екран спершу під мобайл, під найгірший випадок. Робочий діапазон ширини в Україні — 360-414px (за Statcounter, топові 414×896 — 19%, 375×812 — 17%, 360×800 — 5%). Але реально видимо лише ~600-700px висоти після браузерного хрому — закладайтесь на ≈360×640 видимих пікселів.

• Hero-візуал — не більше ~40% висоти. Якщо картинка займає весь екран, заголовок, CTA і соцдоказ їдуть під згин, і людина бачить лише фото без жодного смислу.
• Sticky-CTA внизу — майже обовʼязковий. Зʼявляється після прокрутки вихідної кнопки, full-width, у thumb zone (зоні великого пальця), з конкретикою: «Купити за 749 ₴», а не «Детальніше».
• Тач-таргет ≥44-48px, відступи між елементами ≥8px. Дрібні кнопки на телефоні — це промахи й роздратування.
• Один екран — одна думка. Не намагайтесь впхнути все: H1, один доказ, одна кнопка. Решта — нижче.

Важливий нюанс під Хорошоп: штатний sticky-CTA на платформі обмежений, а частина підписів кнопок («Купити», «Оформити замовлення») живе в системному шаблоні через «Переклад інтерфейсу» — глобально, не на рівні окремої сторінки. Тож власну sticky-кнопку з ціною часто доводиться ставити поверх теми окремим блоком. Як не загубити покупця далі, на самому оформленні — у матеріалі про мобільний чекаут.

Швидкість першого екрана = гроші

Найкрасивіший перший екран не врятує, якщо він довго вантажиться. Поки крутиться спіннер — людина вже свайпнула назад у стрічку. Цифри безжальні: за дослідженням 2000 сторінок, при LCP <1с конверсія тримається ~4,4%, а при 4+с падає до 1,7%. Google/Deloitte у «Milliseconds Make Millions» показали, що пришвидшення лише на 0,1с дало +8,4% конверсій у retail. А think with Google наводить стійкий орієнтир: при завантаженні довше 3 секунд губиться 53% мобільних візитів.

Що з цього випливає для самих блоків: важкі автоплей-hero, неоптимізовані картинки й громіздкі скрипти — прямий злив грошей. Легкі блоки (WebP-зображення, без зайвих бібліотек, без автоплею) — це частина конверсії, а не «приємний бонус».

Одна CTA-переможець: чому другий яскравий заклик краде продажі

Класична помилка — «дамо людині вибір»: дві яскраві кнопки поруч, «В кошик» і «Купити в 1 клік», обидві контрастні. Результат — вони канібалізують одна одну. Працює принцип одного переможця візуальної ієрархії: ОДНА домінантна CTA на смисловий екран, решта дій приглушені (контур, сірий, менша вага).

Цифри підтверджують. A/B-тест магазину «Мега Подарки» (Webasyst): зв'язка «В кошик» (головна) + «Купити в 1 клік» (вторинна) дала +58% конверсії (0,59% → 0,93%) проти лише кошика. Але якщо «1 клік» зробити головною — замовлень більше, зате відмов 20% проти 7% і середній чек нижчий на 35%. Вердикт: «1 клік» — вторинна, якщо ваш середній чек це більше одного товару.

А ось текст кнопки важить у рази більше за колір. Зміна «Start Your Free Trial» → «Start My Free Trial» дала +90% кліків (Kissmetrics). Під українську товарку: на картці з ціною — «Купити» (інфінітив, не «Купи»), у кошику — «Оформити замовлення», для предзамовлення чи опту — «Замовити». Підсилення вигодою («Купити зі знижкою», «Купити за 749 ₴») бʼє нейтральне «Додати в кошик». Більше про формулювання — у глосарії Хорошоп про Call to Action і гайді Promodo.

Чек-лист: зберіть свій перший екран за вечір