Покупець із виробництва заходить на ваш сайт і бачить головне зображення з елегантним SaaS-дашбордом. Потенційний клієнт із фінтеху отримує те саме зображення. Жоден не відчуває, що сторінку створено для нього, і обидва йдуть за лічені секунди. Проблема не в тому, що на лендингу бракує зображень. Проблема в тому, що всім показують ті самі зображення, незалежно від того, хто вони і що їм потрібно.
Зображення для лендингу обирають один раз — зазвичай той, хто проєктував сторінку, — а потім показують усім відвідувачам. На B2B-сайті з кількома галузями й ролями покупців це означає, що більшість відвідувачів бачать картинку з чужого світу. Підбір головного зображення під галузь, роль чи етап відвідувача — одна з дешевших форм персоналізації, бо не потребує нового тексту, але допомагає лише тоді, коли зображення говорить щось конкретне. Ця стаття пояснює, для чого кожен тип зображення, коли відео варте свого «ваги», як зіставляти візуал із сегментами, а також деталі продуктивності й доступності, від яких залежить, чи все це спрацює.
Чому типові зображення на лендингах не працюють у B2B
Зображення — зазвичай перше, на що падає погляд відвідувача, тож вони формують перше враження ще до того, як прочитано заголовок. Типове зображення саме по собі не дуже шкодить; втрата — це упущена можливість показати відвідувачеві щось, що він упізнає.
Для B2B-компаній із кількома персонами покупців єдиний набір зображень створює структурний недолік. VP of Engineering, що оцінює вашу платформу, має інші візуальні очікування, ніж CMO, що робить те саме. Один хоче бачити технічну архітектуру, інтеграції чи потоки даних. Інший реагує на дашборди, метрики кампаній чи графіки ROI. Коли обидва бачать те саме загальне фото офісу, жоден не отримує сигналу релевантності, що змушує гортати далі. Те саме стосується оголошення, яке їх привело; наш посібник про те, коли використовувати адаптивні медійні оголошення, пояснює, як узгоджувати медійні креативи зі сторінкою.
Стокові фото людей, що тиснуть руки в скляному офісі, — звичний порушник. Їх легко розпізнати як сток, тож вони нічого не додають і займають місце, де міг би бути скриншот продукту, реальний клієнт чи схема робочого процесу. Якщо тестуєте щось одне у візуалі лендингу, протестуйте реальне зображення (ваш продукт, ваші клієнти, ваша команда) проти стокового.
Підбір візуалу під сегменти відвідувачів
Ідея персоналізованих зображень — скоротити час між заходом на сторінку й думкою «це для мене». Практичний спосіб — зіставити варіанти зображень із сегментами, які ви вже відстежуєте. Якщо ви використовуєте ідентифікацію відвідувачів, щоб визначати галузь, розмір чи географію компанії, ті самі дані можуть визначати, які зображення з’являються на сторінці.
Способи зіставити сегменти із зображеннями:
Візуал за галуззю. Показуйте виробничий цех відвідувачам із виробництва. Торговий зал — фінансовим послугам. Процеси в лікарні — охороні здоров'я. Продукт той самий, але візуальний контекст змінюється відповідно до щоденної реальності відвідувача.
Візуали для різних ролей. Технічні покупці реагують на архітектурні схеми, фрагменти коду й потоки інтеграцій. Бізнес-покупці — на дашборди, графіки й метрики результатів. Відповідність візуальної мови експертизі покупця сигналізує, що ви розумієте його погляд.
Візуали за етапом. Новим відвідувачам корисні загальні ілюстрації переваг, що пояснюють, чим ви займаєтеся. Відвідувачі, що повертаються й уже переглянули контент про продукт, краще реагують на детальні скриншоти, порівняльні таблиці чи докази від клієнтів.
Розмір компанії. Корпоративні відвідувачі можуть реагувати на зображення, що показують масштаб, сертифікати безпеки чи робочі процеси кількох команд. Менші компанії відгукуються на зображення про швидкість, простоту й швидкі результати.
Типи зображень і коли кожен працює найкраще
Різні візуальні елементи виконують на лендингу різні функції. Розуміння цих відмінностей допомагає свідомо вирішувати, що персоналізувати, а що залишати статичним.
Головні зображення формують перше враження й задають рамку для всієї ціннісної пропозиції. Вони займають найцінніше місце на сторінці. Головне зображення, що показує продукт у роботі, бажано на даних чи в обстановці, знайомій відвідувачеві, говорить більше, ніж абстрактна графіка. На персоналізованих сторінках саме головне зображення найлогічніше змінювати першим, бо його бачить кожен, хто потрапляє на сторінку.
Скриншоти продукту дають конкретний доказ того, що ви продаєте, але за необережного використання можуть перевантажити сторінку. Один анотований скриншот із найрелевантнішими для сценарію відвідувача функціями працює краще, ніж кілька без анотацій. Якщо ваші дані сегментації показують, що відвідувача цікавить аналітика, покажіть дашборд аналітики. Якщо інтеграції — покажіть панель інтеграцій.
Ілюстрації та власна графіка чудово спрощують складне. Коли потрібно пояснити абстрактний робочий процес або багатоетапний процес, власні ілюстрації за секунди передають те, на що знадобилися б абзаци. Вони особливо корисні на персоналізованих сторінках, де пояснення має змінюватися залежно від технічного рівня відвідувача. Зазначайте, який візуал потрібен кожному розділу, у брифі на тексти для лендингу, щоб дизайн і копірайтинг планувалися разом.
Зображення соціальних доказів — це логотипи клієнтів, фото команди та мініатюри кейсів. Їх можна персоналізувати, показуючи логотипи з галузі або рівня розміру відвідувача. SaaS-компанія середнього сегмента, бачачи логотипи інших SaaS-компаній свого рівня, почувається впевненіше, ніж бачачи логотипи Fortune 500, з якими не може себе асоціювати. Наші приклади B2B-лендингів показують, з якого доказу має починатися кожен тип сторінки.
Фонові зображення створюють атмосферу, не вимагаючи уваги. Ледь помітні градієнти чи геометричні візерунки часто працюють краще за фотофони, бо додають глибини, не відволікаючи. Їх рідко потрібно персоналізувати, бо їхня роль — підтримувати, а не сигналізувати про релевантність.
Відео на лендингу: коли воно виправдане
Відео — найважчий візуальний елемент, який можна додати, і за вагою сторінки, і за увагою, якої він вимагає. Наша позиція: відео на лендингу має відповідати на одне запитання, на яке відвідувач не знайде відповіді на знімку екрана, — зазвичай «як це виглядає, коли хтось справді цим користується?». Якщо відео повторює заголовок під музику, вдало підібраний знімок екрана зробить те саме швидше. Про відео поза лендингами — у нашому посібнику з B2B-відеомаркетингу.
Де відео зазвичай окупається на B2B-сторінках:
- Демонстрації продукту на сторінках демо та реєстрації. Шістдесят-дев’яносто секунд, що показують основний робочий процес, дають відвідувачу змогу самому оцінити відповідність, перш ніж бронювати дзвінок. Рухайте курсор повільно, а інтерфейс має бути читабельним у тому розмірі, у якому відтворюється відео.
- Історії клієнтів на сторінках пізніх етапів. Клієнт, який своїми словами пояснює проблему, — це доказ, який логотип дати не може. Розміщуйте його поруч із твердженням, яке він підтверджує, а не в окремій відеогалереї.
- Сторінки вебінарів і подій. 30-секундний фрагмент зі спікером показує, що сесія варта часу. Після події його замінює запис.
І де зазвичай ні: як фоновий ролик з автовідтворенням за заголовком (він конкурує з текстом і збільшує час завантаження) і як єдиний спосіб отримати ключову інформацію (багато B2B-відвідувачів переглядають сайти на роботі з вимкненим звуком).
Як додати відео, не сповільнивши сторінку
- Використовуйте постер і завантажуйте плеєр за кліком. Повне вбудовування YouTube чи Vimeo завантажує свої скрипти ще до того, як хтось натисне «відтворити». Документація Google Lighthouse рекомендує ліниве завантаження сторонніх вбудованих елементів за фасадом — статичним попереднім переглядом, який під час взаємодії замінюється справжнім плеєром.
- Ліниве завантаження вбудованих елементів нижче першого екрана. Додавання
loading="lazy"до iframe відкладає завантаження плеєрів поза екраном, як описано в посібнику web.dev з лінивого завантаження iframe. - Додавайте субтитри до всього. Субтитри потрібні глядачам без звуку і є вимогою доступності для попередньо записаного відео зі звуком.
- CTA має бути видимим без відео. Форма чи кнопка ніколи не повинні залежати від того, чи додивиться хтось відео до кінця.
Як виміряти, чи допомагає відео
Розширене вимірювання GA4 фіксує події video_start, video_progress і video_complete для вбудованих відео YouTube з увімкненою підтримкою JS API. Два показники важать більше за перегляди: частка запусків (запуски, поділені на відвідувачів сторінки) і коефіцієнт конверсії відвідувачів, які запустили відео, порівняно з тими, хто цього не зробив. З другим будьте обережні. Відвідувачі, які натискають «відтворити», уже більш залучені, тож вищий коефіцієнт конверсії серед глядачів не доводить, що причиною стало відео. Чесна перевірка — A/B-тест сторінки з відео та без нього, оцінений за конверсіями, а не за часом перегляду.
Відео також добре персоналізується. Відвідувач із виробництва і відвідувач із софтверної компанії можуть бачити той самий розбір, записаний на двох різних демонстраційних наборах даних, і коли сценарій уже є, це дешевше, ніж здається.
Візуальна ієрархія на персоналізованих сторінках
Зображення визначають, як відвідувачі рухаються сторінкою. На сторінках із великою кількістю тексту люди зазвичай переглядають верх, а потім ліву частину вниз (F-патерн); на розріджених сторінках погляд часто рухається зигзагом зліва направо вгорі й униз. Розміщуйте зображення з урахуванням цих траєкторій.
Розмістіть персоналізоване головне зображення вгорі F-патерну, куди погляд падає насамперед. Допоміжні візуали — вздовж вертикальної лінії перегляду. Якщо в зображеннях є напрямні підказки, як-от погляд людини чи стрілка на схемі, спрямовуйте їх на заклик до дії, а не від нього.
Розмір створює ієрархію. Більші зображення сигналізують про важливість. Якщо ви хочете, щоб відвідувач із цільового акаунта зосередився на конкретному результаті чи можливості, зробіть це зображення домінантним на сторінці. Другорядні зображення, як-от логотипи клієнтів чи допоміжні скриншоти, мають залишатися меншими, щоб підсилювати, а не конкурувати.
Дайте головному зображенню простір. Одне чітке зображення, що відповідає сегменту, з вільним місцем довкола сприймається швидше, ніж три стиснуті, що змагаються за увагу, і його легше підтримувати — один варіант замість трьох.
Покроковий процес персоналізації зображень на лендингу
Впровадження персоналізації зображень не вимагає перебудови всього сайту. Ось практичний процес, що починається з малого й масштабується.
Крок 1: оберіть найбільші кваліфіковані сегменти. Візьміть дані з аналітики чи інструмента ідентифікації відвідувачів. Які галузі, розміри компаній або ролі становлять основну частину вашого кваліфікованого трафіку? Почніть із сегментів, достатньо великих для вимірювання і достатньо відмінних, щоб різні зображення справді мали сенс.
Крок 2: перевірте зображення на поточних лендингах. Перелічіть усі зображення на лендингах із найбільшим трафіком. Для кожного запитайте: чи однаково воно відгукується всім трьом сегментам? Якщо так, це або сильне універсальне зображення, або типове, яке не відгукується нікому. Позначте зображення, де варіант для конкретного сегмента міг би додати релевантності.
Крок 3: створіть 2–3 варіанти зображень для кожного позначеного місця. Повний редизайн не потрібен. Для головних зображень це можуть бути три версії того самого макета з різним фоновим зображенням, різними скриншотами продукту чи різними ілюстраціями сценаріїв. Зберігайте композицію та розташування CTA незмінними, щоб тестувати вміст зображення, а не структуру сторінки.
Крок 4: налаштуйте правила показу за сегментами. У платформі персоналізації призначте кожен варіант своєму цільовому сегменту. Визначте стандартний варіант для відвідувачів, які не відповідають жодному сегменту. Перевірте, що потрібні зображення показуються потрібним відвідувачам, переглянувши сторінку з тестовими акаунтами кожного сегмента.
Крок 5: вимірюйте та вдосконалюйте. Відстежуйте коефіцієнт конверсії за сегментами, а не лише загалом. Головне зображення, яке підвищує конверсію для відвідувачів із виробництва, може погіршити результати для SaaS-відвідувачів. Проводьте A/B-тести в межах кожного сегмента, щоб відокремити вплив змін зображень від інших елементів сторінки. Визначте розмір вибірки до початку тесту (як це зробити, показано в нашому посібнику про розмір вибірки для A/B-тесту), проводьте тест щонайменше два повні тижні й не зупиняйте його достроково лише тому, що на панелі все виглядає добре.
Технічна продуктивність: швидкість проти візуальної якості
Персоналізований головний блок, який з’являється із запізненням, гірший за загальний, що з’являється вчасно. Зображення в головному блоці часто є елементом Largest Contentful Paint, тож його розмір і порядок завантаження визначають, наскільки швидкою здається сторінка.
Використовуйте сучасні формати. Документація Google повідомляє, що зображення WebP із втратами на 25–34% менші за порівнянні JPEG, а WebP без втрат — на 26% менші за PNG. AVIF часто стискає ще краще. Віддавайте AVIF або WebP із резервним JPEG через елемент <picture>.
Замість того щоб копіювати чужі обмеження розміру, задайте бюджет для власних сторінок: перевірте розмір файлу головного блоку й LCP у PageSpeed Insights у мобільному профілі та вважайте помилкою будь-який варіант, помітно важчий за варіант за замовчуванням.
Використовуйте адаптивні зображення з атрибутами srcset. Показ зображення шириною 2000 px мобільному відвідувачу марнує трафік і затримує рендеринг. Дозвольте браузерам обирати зображення відповідного розміру залежно від ширини вікна перегляду. Для персоналізованих сторінок це означає, що кожному варіанту зображення потрібен власний набір адаптивних розмірів, але інструменти збирання можуть це автоматизувати.
Не застосовуйте ліниве завантаження до головного зображення. Воно над згином, тож ліниве завантаження його затримає; натомість позначте його fetchpriority="high", а ліниво завантажуйте лише зображення нижче. Для варіантів сегментів найчистіше налаштування — визначати варіант на сервері або на edge, щоб потрібне зображення було в HTML від самого початку. Якщо заміна відбувається на клієнті, зарезервуйте розміри зображення, щоб макет не «стрибав» під час завантаження.
Доступність для всіх варіантів зображень
Кожен персоналізований варіант зображення потребує власного alt-тексту. Головне зображення з виробничим процесом має мати alt-текст, що описує саме цю сцену, а не загальний текст, який підійшов би до будь-якого варіанта. Програми зчитування екрана озвучують те, що є на сторінці, і alt-текст має відповідати тому, що насправді бачать зрячі відвідувачі цього сегмента.
Хороший alt-текст стисло описує вміст зображення у зв'язку з навколишнім контекстом. Тримайте його в межах 100 символів. Декоративні зображення (фони, роздільники) мають використовувати порожні атрибути alt, щоб програми зчитування з екрана їх пропускали. Функціональні зображення, як-от графіка з посиланням, потребують alt-тексту, що описує місце призначення посилання.
Якщо зображення не завантажилося, на його місці показується alt-текст, тобто він слугує запасним варіантом навіть для зрячих відвідувачів із повільним з'єднанням. Якщо у вас є персоналізовані варіанти зображень, це ще одна причина, чому кожному варіанту потрібен унікальний описовий alt-текст, а не спільна заглушка.
Поширені помилки з персоналізованими візуалами
Команди-новачки в персоналізації зображень часто перестараються. Заміна кожного зображення на сторінці залежно від сегмента створює навантаження на підтримку й розмиває вплив змін, які справді важливі. Зосередьте персоналізацію на одному-двох слотах зображень із найбільшим впливом (зазвичай перший екран і основний блок соціального доказу), а решту залиште незмінними.
Ще одна поширена помилка — використання даних сегментів для припущень, що здаються нав’язливими. Показати відвідувачеві логотип його компанії до того, як він назвався, — це перетин межі. Показати зображення, релевантні його галузі, — корисно. Показати його офісну будівлю — тривожно. Різниця між контекстною релевантністю та стеженням.
Третя пастка — тестування надто багатьох варіантів одночасно. Чотири сегменти на три слоти зображень, по кілька варіантів у кожному, вже дають десятки комбінацій — значно більше, ніж може протестувати B2B-трафік. Тестуйте одну змінну за раз у кожному сегменті, чекайте статистичної значущості і переконайтеся в кожній зміні, перш ніж додавати нові.
Для команд, які працюють за ширшим планом оптимізації B2B-лендингів, персоналізація зображень — розумний ранній крок, бо вона потребує менше нового контенту, ніж персоналізація текстів. Проблема в тому, що вона залежить від наявності справжніх візуальних матеріалів для конкретних сегментів; якщо все, що ви можете зробити, — інше стокове фото для кожної галузі, краще витратьте час на тексти.
З чого почати
Візьміть свій найвідвідуваніший лендинг і подивіться на головне зображення з одним запитанням: чи впізнав би відвідувач з вашого найбільшого сегмента в ньому свою роботу? Якщо ні, замініть його на знімок екрана продукту чи фото клієнта, яке він упізнає, і протестуйте проти поточного. Лише коли справжнє зображення переможе стокове, варто створювати варіанти для сегментів. Markettailor пов’язує дані ідентифікації відвідувачів з контентом на сторінці, включно із зображеннями, якщо ви хочете показувати ці варіанти, не налаштовуючи правила самостійно.
