Главное изображение — первое, что видит посетитель сайта оператора. Если оно только красиво, а действие не подсказывает, человек не поймёт, где проверить подключение по адресу, посмотреть тарифы или оплатить услугу. Материал для первого экрана стоит выбирать под конкретную задачу страницы.
Какую задачу должно решать главное изображение оператора
Сначала определите главное действие на странице, а уже потом ищите картинку. У оператора обычно несколько аудиторий: тот, кто выбирает провайдера, действующий абонент, которому нужны оплата и личный кабинет, и бизнес-клиент. Один первый экран всех не обслужит. Выберите приоритетную аудиторию, например новых абонентов, а остальным дайте заметные ссылки рядом. Изображение должно поддерживать выбранное действие: показывать, что именно человек получит, и не отвлекать от формы или кнопки.
Фото, иллюстрация, видео или схема: что подходит
- Фотография людей. Передаёт настроение, но типовые стоковые кадры «семья с ноутбуком» одинаковы у всех операторов. Лучше подобрать снимок под сценарий: квартира, дача, небольшой офис.
- Фото оборудования. Роутер или ТВ-приставка в интерьере показывают конкретику. Следите, чтобы модель была той, которую действительно выдают, иначе ожидания разойдутся с реальностью.
- Иллюстрация. Удобна, когда нужно объяснить набор услуг: интернет, ТВ, мобильная связь. Её легко держать в фирменных цветах, а в векторном формате она весит немного.
- Видео. Тяжёлое и отвлекающее. Для оператора это особенно важно: часть посетителей открывает сайт с мобильного интернета в зоне слабого сигнала. Если видео нужно, делайте его короткой беззвучной вставкой с запасной статичной картинкой.
- Карта или схема покрытия. Уместна, если вопрос «работает ли у меня» главный. Тогда это скорее интерфейс, чем картинка, и его лучше делать интерактивным.
Что нельзя «запекать» в изображение
Цены, скорости, сроки акции, телефон и условия не должны быть частью картинки. На телефоне такой текст уменьшается или обрезается. Его не прочтёт программа экранного доступа, его нельзя скопировать, а для смены цифры придётся заново готовить файл. Опасность и в расхождении: на баннере одно, на странице тарифа другое. Пишите текст в вёрстке поверх картинки или рядом, а под текст ставьте затемнение или подложку, чтобы сохранялся контраст. Формулировки условий согласуйте внутри организации с теми, кто за них отвечает.
Вес файла и мобильная версия
Крупная картинка в несколько мегабайт задерживает показ первого экрана, и посетитель уходит, не увидев форму. Ориентируйтесь на сотни килобайт, а не на мегабайты. Это рабочий ориентир, а не норма. Подготовьте несколько размеров файла через srcset и для узких экранов делайте отдельную обрезку через picture, а не просто уменьшайте широкий кадр. Задайте цвет фона, чтобы блок не «прыгал» во время загрузки. Проверьте страницу в браузере с имитацией медленного соединения, а не только на офисном интернете.
Пример: первый экран условного провайдера домашнего интернета
Возьмём вымышленный сайт «Сеть-Дом». Слева находится заголовок живым текстом: «Интернет и ТВ для вашего дома». Под ним расположены поле «Улица и дом», кнопка «Проверить подключение» и ссылка «Условия тарифов». Справа стоит фото роутера на полке в светлой комнате, без надписей на кадре. Тарифы с ценами идут сразу под первым экраном.
На телефоне картинка превращается в узкую полосу над заголовком высотой около 120 пикселей, а форма поднимается выше. Так поле адреса видно без прокрутки.
Плохой вариант для той же страницы: фото улыбающейся семьи на весь экран с цифрами скорости, нарисованными на баннере. На телефоне цифры мелкие, форма уходит вниз, а при смене тарифа баннер придётся переделывать.
Проверочный список перед публикацией
- Понятно ли без прокрутки, какое главное действие предлагает страница?
- Выведены ли цены, скорости и условия обычным текстом, а не картинкой?
- Совпадают ли данные на первом экране с данными на страницах тарифов?
- Читается ли текст поверх изображения на телефоне и при ярком свете?
- Есть ли отдельная обрезка и несколько размеров файла для мобильных экранов?
- Показывается ли форма на телефоне раньше, чем картинка занимает весь экран?
- Есть ли у видео, если оно используется, статичная замена и отключаемый автозапуск?
- Соответствует ли оборудование на фото тому, что получает абонент?
- Есть ли у изображения осмысленное альтернативное описание, если оно несёт смысл?
