Известное высказывание «одна картинка стоит тысячи слов» хорошо подходит для описания эффективности изображений (как маркетинговых инструментов) на лендингах.
Визуальный контент привлекает внимание и качественно доносит маркетинговое сообщение, так как обрабатывается мозгом в 60 000 быстрее, чем текст, и вызывает эмоциональный отклик.
Дисплеи современных девайсов качественно отображают картинки большого размера, поэтому на сайтах и особенно посадочных страницах стали довольно часто использоваться масштабные изображения и слайдеры: некоторые маркетологи просто не могут выбрать всего одно изображение из огромного ассортимента графического контента и размещают карусели.
Ярким примером веб-дизайна, централизованного на изображении, является сайт Southwest Airlines (авиакомпания) — фоном и фокусным центром страницы является фотография семьи, отдыхающей на лыжном курорте.
Содержание
Оптимальный размер фона для сайта на примере Southwest Airlines
В каких случаях дизайн, сфокусированный на изображении, эффективен?
Оптимальное решение — сбалансированный дизайн
Как узнать размер картинки на сайте?
Как убедиться, что вы используете визуальный контент правильного?
Оптимальный размер фона для сайта на примере Southwest Airlines
Яркий пример веб-дизайна, центром которого является изображение, — это сайт Southwest Airlines (авиакомпания): фон и фокусный центр страницы — это фотография семьи, отдыхающей на лыжном курорте.
Эффективность данного подхода к веб-дизайну основана на уникальной способности графического материала вдохновлять и вовлекать в ознакомление с ресурсом.
В своей книге «Эмоциональный дизайн» (Emotional Design) Дон Норман (Don Norman) говорит о том, что картинки, просмотр которых доставляет эстетическое удовольствие, вызывают у людей сильный висцеральный отклик. К изображениям, вызывающим такую реакцию, можно отнести красочные пейзажи, товары с приятным для глаза дизайном и фотографии людей привлекательной внешности.
Однако висцеральный отклик сам по себе не обеспечивает положительный пользовательский опыт: важную роль также играют юзабилити и контент веб-ресурса.
Изображение, использованное на сайте Southwest Airlines, бесспорно, привлекательно и качественно, но такой большой размер изображения для сайта и столь сильный акцент на одном элементе оформления делает другие составляющие, выполняющие важные функции, незаметными:
- ссылки навигационного меню маленькие и не выделены фоновым цветом;
- поисковое поле заменено иконкой лупы;
- CTA-элемент «Заказать (билет) сейчас» (Book now) также слишком мал и сливается с остальными составляющими интерфейса;
- окно для поиска билетов смещено ниже линии сгиба для сохранения целостности отображения картинки, в результате чего посетитель может его не заметить, пока не прокрутит страницу.
Сравнение новой и старой версии ресурса Southwest Airlines поможет понять основные плюсы и минусы централизации оформления на визуальном контенте.
Подобно сайтам большинства авиакомпаний, ресурс Southwest Airlines был переполнен ссылками, баннерами и виджетами, что делало фоновый рисунок практически незаметным. Однако окно для поиска авиабилетов размещалось в привычном для online-потребителей месте — верхнем левом углу.
Изучим мобильную версию Southwest Airlines и обратим внимание на размер фоновой картинки сайта.
Размер картинки для фона сайта для мобильных устройств — тоже большой, но она лаконично вписывается в структуру веб-страницы. CTA-элементы также хорошо выделены и заметны на фоне картинки, а избыточность виджетов и текста устранена.
В итоге можно смело заявить, что именно мобильная версия ресурса Southwest Airlines — хороший пример качественного дизайна, центром которого является оптимального размера изображение для сайта.
В каких случаях дизайн, сфокусированный на изображении, эффективен?
Поскольку одна посадочная страница может быть направлена на разные сегменты целевой аудитории и иметь различные задачи, оптимальный подход к ее оформлению зависит от ваших приоритетов.
Какой должен размер картинки сайта? Масштабные изображения захватывает внимание пользователей и отвлекает от других элементов интерфейса. Следовательно, такой дизайн не всегда целесообразен.
Рассмотрим несколько примеров оптимального размера картинки сайта и правильной фокусировки на графическом контенте.
Фокусный центр домашней страницы Apple — это изображение последних моделей iPhone, которое служит рекламой нового продукта и помогает потенциальным покупателям увидеть разницу размеров iPhone 6 и iPhone 6 Plus невооруженным глазом.
Однако масштабная картинка не вредит юзабилити: в верхней части страницы расположен контрастно выделенный навигационный бар, позволяющий в один клик перейти на любой раздел сайта.
Размеры фонового изображения для сайта Bing (поисковая система Microsoft) велики, и эта страница — хороший пример правильного использования больших изображений.
Ключевым элементом данной страницы является поисковая строка, выделяющаяся на фоне объемной картинки.
Стоит заметить, что домашние страницы поисковых сервисов требуют специфичного оформления, которое не подходит стандартным ресурсам: главный элемент поисковика — это поисковое окно, так что придавать визуальный вес второстепенным составляющим интерфейса не требуется.
Оптимальное решение — сбалансированный дизайн
Картинки, создающие образ бренда, но не влияющие на качество отображения другого контента, — вот оптимальное решение для оформления большинства ресурсов.
На сайте State Farm (страховая компания), например, используется большая фотография владельцев транспортного средства.
Изображение подобрано правильно (страхование автомобилей является одной из основных услуг State Farm) и не вредит юзабилити интерфейса, невзирая на большой размер. Изображение фона сайта уравновешено выделенным меню навигации и окном с основными функциями ресурса, размещенным до линии сгиба.
Как узнать размер картинки на сайте?
Чтобы узнать размер картинки на сайте, кликните по ней правой кнопкой мыши. В зависимости от браузера, которым вы пользуетесь, в появившемся меню будет пункт «Свойства изображения», «Информация об изображении» или просто «Свойства». Кликните по нему, и откроется окно с размерами изображения.
Как убедиться, что вы используете визуальный контент правильного?
Ниже представлен ряд шагов, которые помогут определить оптимальный размер фото для сайта и разработать сбалансированный дизайн с акцентом на графическом контенте.
1. Определите приоритетные функции веб-страницы. Ваша задача: определить, с какой целью на страницу переходят пользователи и какую задачу она выполняет для бизнеса.
2. Проанализируйте, какие элементы интерфейса способствуют достижению ключевых целей конверсии. Изображения обычно используются для брендинга и создания привлекательного дизайна, а навигационное меню и структурированное поисковое окно являются инструментами интеракции пользователей с ресурсом.
3. Определите визуальный вес элементов на основе их приоритетности. Если составляющая интерфейса выполняет одну из ключевых целей, ей следует придать визуальный акцент, а маловажные элементы должны привлекать меньше внимания.
Данная рекомендация может показаться очевидной, однако многие веб-дизайнеры либо забывают о важности выделения ключевых составляющих сайта, либо жертвуют их качественным отображением ради привлекательности оформления.
4. Найдите визуальный контент, усиливающий образ бренда. Помните, что картинки должны использоваться не только в качестве декорации, но и для отображения вашего оффера.
5. Выберите качественные, привлекающие внимание изображения. К выбору картинок стоит приступать только после выполнения предыдущих шагов: в противном случае, графические материалы будут подобраны неправильно, и, соответственно, их внедрение будет неэффективным..
6. Не стремитесь следовать трендам. Основной задачей многих проектов по редизайну является модернизация, что нередко подразумевает внедрение трендов графического дизайна. Но, как мы неоднократно писали в статьях нашего блога, погоня за модой в веб-дизайне — это не всегда хорошо.
Типографика, структура лендинга и брендовые цвета также могут придать ресурсу более современный вид, причем использование таких инструментов дизайна не вредит юзабилити.
Не забывайте все гипотезы проверять сплит-тестированием.
Высоких вам конверсий!
По материалам: nngroup.com
