Прощайте, бессмысленные векторные картинки
На днях заказчик прислал сайт по моему прототипу. Обычно я подбираю дизайнера из «своих» и курирую его работу, но в этом случае клиент реализовал проект силами штатного сотрудника. Я осталась недовольна. По дизайну много замечаний, но особенно разочаровала огромная векторная картинка на первом экране.
Фотографии и иллюстрации на сайте должны вызывать эмоции, работать на задачу страницы и быть из мира читателя. Изображения должны быть такими, чтобы человек мог соотнести их с жизнью.
Покажите человеку то, чем он хочет обладать: сам продукт, результат его работы или счастливых покупателей / клиентов. Сделайте фотографии людей, на которых пользователь хочет быть похож и которые уже обладают тем, чего ему так хочется.
Вызовите доверие: создайте иллюзию присутствия, чтобы человек заочно познакомился с вашей компанией. Разместите живые фотографии заведения, сотрудников или спикеров курса.
Для примера посмотрим, как оформляет посадочные страницы Apple
Сочные фотографии продукта
— такие, что хочется взять смартфон / ноутбук / планшет в руки.
Люди, на которых мы хотим быть похожи
На странице MacBook Pro показаны крутые специалисты, которые используют MacBook в работе: разработчик игр, композитор, фотограф, художник по спецэффектам. После просмотра лендинга создается ощущение: я смогу так же, если у меня будет MacBook Pro.
Apple продает не просто ноутбук, а мечту о профессиональной реализации.
На посадочной странице Apple для бизнеса — успешные предприниматели, презентабельные офисы и эстетика инноваций.
Создается ощущение, что бизнес становится успешным благодаря продукции Apple. Рационально покупатель понимает, что это не так, но эмоционально хочет быть таким же крутым, как все эти успешные люди в красивых офисах со стильными и дорогими планшетами в руках.
А решения о покупке мы принимаем в первую очередь эмоционально.
Текст кормит рациональную часть (левое полушарие головного мозга), образы и изображения воздействуют на эмоционально-интуитивную часть (правое полушарие). Правое полушарие гораздо древнее биологически и в каждом человеке развивается раньше, чем левое (еще в доречевой период). Как бы нам ни хотелось быть разумными, эмоциональный интеллект имеет больше власти, чем рациональный, поэтому визуализация мощнее, чем текст.
Эмоции
Люди в рекламе наушников явно наслаждаются музыкой. Удовольствие — вот что вы покупаете вместе с AirPods.
Страница Apple для школ продает не просто iPad, а время, проведенное вместе с детьми, и способ выразить им любовь.
Демонстрация
— лучший способ продать продукт. Дегустация конфет в супермаркете, первые бесплатные поездки в новом такси, первое промо занятие в фитнес-центре, бесплатный вебинар перед продажей курса... В случае с Apple — демонстрация возможностей камеры, процессора, приложений.
При этом Apple показывает работы классных фотографов. На фото ниже значение имеет композиция и светотеневой рисунок. Далеко не каждый пользователь сможет сделать нечто подобное даже с iPhone 12 Pro, но Apple убеждает нас в обратном: это все алгоритмы машинного обучения и элементы управления, а вовсе не талант фотографа.
Как будто каждый сможет нарисовать так же круто, если купит iPad.
Сценарии применения
— то, что легко соотнести с жизнью: как, где, когда и зачем я буду пользоваться продуктом или услугой. Покажите, как это будет работать в жизни, и я куплю ваш продукт, если он правда про меня.
Показать мечту — это один способ использовать визуал. Другая важная цель визуала на сайте — вызвать доверие.
Устройте заочное знакомство с компанией
Когда мы соприкасаемся с продуктом / заведением / услугой онлайн, видим только плоскую страницу на экране гаджета. Никто не гарантирует, что за этой страницей на самом деле что-то стоит. Вы можете тысячу раз написать о том, как вы заслуживаете доверия, но без живых фотографий так и останетесь безликой компанией, одной из тысячи.
Создайте на странице ощущение, что человек уже побывал в вашем заведении / познакомился с вами или сотрудниками — и ваша компания станет реальной.
Фото выше — с сайта франшизы «Додо Пиццы»
Познакомьте с сотрудниками и руководителями
Первый экран сайта медицинского центра. Для клиники лучше не придумаешь: клиенты идут в первую очередь к врачу, рекомендуют друг другу врачей, за врачами уходят в другие клиники.
Пользуюсь этим принципом в своих проектах. Фото владельца бизнеса на лендинге компании, которая оказывает услуги на Кипре. Лендинг сделан силами моей команды.
Еще один пример из нашего портфолио (ниша: строительство загородных домов).
Бизнес семейный, в сфере строительства работает уже четвертое поколение — на сайте мы сделали на этом акцент, чтобы повысить лояльность аудитории. Оформили так, чтобы пользователь уловил основной смысл, не вчитываясь в текст: он видит заголовок и хронологическую линию — этого достаточно, чтобы передать суть. Фото основателя компании снижает напряжение, т.к. пользователь видит, к кому конкретно он будет обращаться с заказом.
Чтобы придать больше веса словам и еще ближе познакомить потенциальных клиентов с руководителями компании, мы добавили на сайт страницу с историей бренда.
Помните: визуал сильнее текста
Мы с вами провели небольшое исследование и посмотрели, как Apple и другие компании выстраивают визуал на посадочных страницах.
Пробегитесь по сайтам Apple и других компаний. Как вам кажется, что оказало на вас большее воздействие, текст или визуал?
Текст без фактов и визуальных доказательств не вызывает доверия. Кроме того, часто его вообще не читают — вы сами можете проверить это, если посмотрите поведение пользователей на сайте.
Читатель движется по странице примерно так:
Сначала обращает внимание на большой заголовок или фото / иллюстрацию, потом читает маленькие заголовки и подписи. Если его что-то заинтересует, может вернуться и прочитать подробнее. Но если при этом текст не подтвержден фотографиями / схемами / скриншотами — он не вызывает доверия. Написать-то я могу что угодно.
Дизайн имеет значение
Важно не только то, какой визуальный материал вы выбираете, но и то, как вы его оформляете.
Посмотрите на скриншот ниже. Какие впечатления он у вас вызывает?
Мне сайт напоминает секонд-хэнд. Знаете, такой магазин, где вещи навешаны сплошняком или набросаны в корзины и нужно потратить много времени, чтобы что-то откопать. Еще он мне напоминает Фикс Прайс или Галамарт: все вокруг кричит, товары дешевые и низкого качества.
Такой дизайн подойдет, если вы продаете дешевые продукты на массовую аудиторию.
И там, и там на первом экране — главный продукт компании. То, что люди хотят получить. Но от первого сайта веет барохолкой, а от нашего варианта — эстетикой и сдержанным профессионализмом.
У конкурентов обилие цветов и элементов, между элементами нет воздуха, свободного пространства. Сам дом при такой верстке и не видно. У нас: спокойные цвета, гармоничное сочетание пропорций, фото дома на весь экран, аккуратно и приятно.
Вернемся к Apple. Продает не только смысловая составляющая визуала, все их сайты выглядят дорого и презентабельно за счет: цветовой гаммы, крупных профессиональных фотографий и уровня дизайна.
Мы используем такой же подход в работе с заказчиками.
Компания «Cashalot» оказывает разноплановые услуги на Кипре и организует поездки по всему миру. ЦА — люди из премиум-сегмента, которым важен высокий уровень сервиса.
Как показать, что в компании сервис высокого уровня? С помощью дизайна, который выглядит сдержанно, презентабельно и дорого.
Общий скриншот передает более цельное восприятие, но лучше переходите на сам сайт
Фотографии руководителей транслируют ценности, которые разделяют клиенты. Потенциальные покупатели видят: здесь меня понимают, эта компания для таких, как я.
При работе над этим лендингом я пересмотрела более 50 сайтов от мировых веб-студий. Искала интересные идеи и формировала подборку референсов для дизайнера. Лучшими находками делюсь с вами в статье на VC.ru — «12 сайтов с крутым и эстетичным дизайном от мировых веб-студий».
Выводы
Образы воздействуют на человека на глубинном уровне, поэтому грамотно используйте их на посадочных страницах. Не делайте ставку на текст или бессмысленную графику.
Вызовите желание купить продукт:
1. Покажите читателю то, чем он хочет обладать, визуализируйте его мечты.
2. Покажите на странице такого человека, каким хотелось бы стать покупателю. По возможности используйте не моделей, а реальных людей с историей, как в примере ниже.
3. Покажите сценарии использования, чтобы покупатель понимал, как ваш продукт или услуга улучшат его жизнь.
4. Продемонстрируйте возможности продукта.
Если в вашей нише важно вызвать доверие — устройте клиенту или покупателю заочное знакомство с компанией:
1. Познакомьте с владельцем компании лично (фото или видео-обращение).
2. Покажите довольных клиентов / покупателей / посетителей.
3. Представьте клиенту ключевых сотрудников компании.
Визуальное оформление сайта должно соотноситься с жизнью, быть знакомо читателю и актуально его задачам / желаниям / проблемам.
P.s. Кидайте в комментарии свои сайты, я дам пару рекомендаций
Чтобы заказать сайт / прототип / разбор или контент для вашего бизнеса, пишите сюда:
WhatsApp, Telegram +7 999 584 46 48