Відвідувач вирішує, чи читати далі, ще до скролу. Більшу частину цієї роботи роблять п’ять елементів першого екрана.
Більшість відвідувачів лендінгу бачать лише перший екран. Тому в нього одне завдання: пояснити, що це за продукт і чому варто прокрутити ще раз. Усе нижче підтримує рішення, яке починається тут.
П’ять елементів
- Заголовок, який каже, що робить продукт і для кого. Якщо його можна без змін поставити на сайт конкурента — він надто загальний.
- Підзаголовок, який додає «як» або результат. Один-два рядки, без гасел.
- Одна головна дія. «Спробувати безкоштовно», «Записатись на демо» — одна, щонайбільше з непомітним другорядним посиланням.
- Сам продукт. Справжній інтерфейс, за потреби спрощений, а не абстрактна ілюстрація.
- Один доказ поруч із дією: логотипи клієнтів, рейтинг, коротка цифра, яку ви можете підтвердити.
Типові помилки
- Дотепний заголовок, який стає зрозумілим лише після всієї сторінки.
- Дві рівноцінні кнопки. Відвідувач має обирати раніше, ніж знає достатньо для вибору.
- Скрін, який неможливо прочитати. Покажіть одну частину продукту великою, а не весь дашборд дрібно.
- Анімація, що затримує контент. Вона має вести погляд до дії, а не стояти між відвідувачем і текстом.
- Меню з десяти посилань на сторінці, зробленій під одну дію.
Як перевірити свій перший екран
Покажіть його людині поза командою на п’ять секунд і спитайте три речі: що робить продукт, для кого він і що б вона натиснула. Якщо хоч одна відповідь — здогадка, над екраном треба попрацювати раніше, ніж над рештою сторінки.
Потім відкрийте його на телефоні. Заголовок, дія і хоча б частина зображення продукту мають вміщатися без скролу — на мобільному перший екран ще коротший.
Чому ми проєктуємо його першим
У наших проєктах перший екран затверджується до того, як намальовано решту сторінки. Він задає тон, шрифти й рівень деталізації для всього нижче, і це найдешевший момент змінити напрям. Результат такого підходу видно в наших роботах — наприклад, на головній для Heroes of Digital.
Сильний перший екран не врятує сторінку, на яку ведуть не той трафік. Узгодьте заголовок із рекламою чи пошуковим запитом, що приводить людей.
