Как Apple и другие компании продают с помощью визуала на посадочных страницах
Прощайте, бессмысленные векторные картинки
На днях заказчик прислал сайт по моему прототипу. Обычно я подбираю дизайнера из «своих» и курирую его работу, но в этом случае клиент реализовал проект силами штатного сотрудника. Я осталась недовольна. По дизайну много замечаний, но особенно разочаровала огромная векторная картинка на первом экране.
Фотографии и иллюстрации на сайте должны вызывать эмоции, работать на задачу страницы и быть из мира читателя.
Покажите человеку то, чем он хочет обладать: сам продукт, результат его работы или счастливых покупателей / клиентов. Сделайте фотографии людей, на которых пользователь хочет быть похож и которые уже обладают тем, чего ему так хочется.
Вызовите доверие: создайте иллюзию присутствия, чтобы человек заочно познакомился с вашей компанией. Разместите живые фотографии заведения, сотрудников или спикеров курса.
Для примера посмотрим, как оформляет посадочные страницы Apple
Сочные фотографии продукта
— такие, что хочется взять смартфон / ноутбук / планшет в руки.
Люди, на которых мы хотим быть похожи
На странице MacBook Pro показаны крутые специалисты, которые используют MacBook в работе: разработчик игр, композитор, фотограф, художник по спецэффектам. После просмотра лендинга создается ощущение: я смогу так же, если у меня будет MacBook Pro.
На посадочной странице Apple для бизнеса — успешные предприниматели, презентабельные офисы и эстетика инноваций.
Создается ощущение, что бизнес становится успешным благодаря продукции Apple. Рационально покупатель понимает, что это не так, но эмоционально хочет быть таким же крутым, как все эти успешные люди в красивых офисах со стильными и дорогими планшетами в руках.
А решения о покупке мы принимаем в первую очередь эмоционально.
Текст кормит рациональную часть (левое полушарие головного мозга), образы и изображения воздействуют на эмоционально-интуитивную часть (правое полушарие). Правое полушарие гораздо древнее биологически и в каждом человеке развивается раньше, чем левое (еще в доречевой период). Как бы нам ни хотелось быть разумными, эмоциональный интеллект имеет больше власти, чем рациональный, поэтому визуализация мощнее, чем текст.
Эмоции
Люди в рекламе наушников явно наслаждаются музыкой. Удовольствие — вот что вы покупаете вместе с AirPods.
Страница Apple для школ продает не просто iPad, а время, проведенное вместе с детьми, и способ выразить им любовь.
Демонстрация
— лучший способ продать продукт. Дегустация конфет в супермаркете, первые бесплатные поездки в новом такси, первое промо занятие в фитнес-центре, бесплатный вебинар перед продажей курса... В случае с Apple — демонстрация возможностей камеры, процессора, приложений.
При этом Apple показывает работы классных фотографов. На фото ниже значение имеет композиция и светотеневой рисунок. Далеко не каждый пользователь сможет сделать нечто подобное даже с iPhone 12 Pro, но Apple убеждает нас в обратном: это все алгоритмы машинного обучения и элементы управления, а вовсе не талант фотографа.
Сценарии применения
— то, что легко соотнести с жизнью: как, где, когда и зачем я буду пользоваться продуктом или услугой. Покажите, как это будет работать в жизни, и я куплю ваш продукт, если он правда про меня.
Устройте заочное знакомство с компанией
Показать мечту — это один способ использовать визуал. Другая важная цель визуала на сайте — вызвать доверие.
Когда мы соприкасаемся с продуктом / заведением / услугой онлайн, видим только плоскую страницу на экране гаджета. Никто не гарантирует, что за этой страницей на самом деле что-то стоит. Вы можете тысячу раз написать о том, как вы заслуживаете доверия, но без живых фотографий так и останетесь безликой компанией, одной из тысячи.
Создайте на странице ощущение, что человек уже побывал в вашем заведении / познакомился с вами или сотрудниками — и ваша компания станет реальной.
Покажите атмосферу
Фото из галереи выше — с сайта франшизы «Додо ПиццыЁлочки»
Познакомьте с сотрудниками и руководителями
Бизнес семейный, в сфере строительства работает уже четвертое поколение — на сайте мы сделали на этом акцент, чтобы повысить лояльность аудитории. Оформили так, чтобы пользователь уловил основной смысл, не вчитываясь в текст: он видит заголовок и хронологическую линию — этого достаточно, чтобы передать суть. Фото основателя компании снижает напряжение, т.к. пользователь видит, к кому конкретно он будет обращаться с заказом.
Чтобы придать больше веса словам и еще ближе познакомить потенциальных клиентов с руководителями компании, мы добавили на сайт страницу с историей бренда.
Помните: визуал сильнее текста
Мы с вами провели небольшое исследование и посмотрели, как Apple и другие компании выстраивают визуал на посадочных страницах.
Пробегитесь по сайтам Apple и других компаний. Как вам кажется, что оказало на вас большее воздействие, текст или визуал?
Текст без фактов и визуальных доказательств не вызывает доверия. Кроме того, часто его вообще не читают — вы сами можете проверить это, если посмотрите поведение пользователей на сайте.
Читатель движется по странице примерно так:
Сначала обращает внимание на большой заголовок или фото / иллюстрацию, потом читает маленькие заголовки и подписи. Если его что-то заинтересует, может вернуться и прочитать подробнее. Но если при этом текст не подтвержден фотографиями / схемами / скриншотами — он не вызывает доверия. Написать-то я могу что угодно.
Дизайн имеет значение
Важно не только то, какой визуальный материал вы выбираете, но и то, как вы его оформляете.
Посмотрите на скриншот ниже. Какие впечатления он у вас вызывает?
Мне сайт напоминает секонд-хэнд. Знаете, такой магазин, где вещи навешаны сплошняком или набросаны в корзины и нужно потратить много времени, чтобы что-то откопать. Еще он мне напоминает Фикс Прайс или Галамарт: все вокруг кричит, товары дешевые и низкого качества.
И там, и там на первом экране — главный продукт компании. То, что люди хотят получить. Но от первого сайта веет барохолкой, а от нашего варианта — эстетикой и сдержанным профессионализмом.
У конкурентов обилие цветов и элементов, между элементами нет воздуха, свободного пространства. Сам дом при такой верстке и не видно. У нас: спокойные цвета, гармоничное сочетание пропорций, фото дома на весь экран, аккуратно и приятно.
Вернемся к Apple. Продает не только смысловая составляющая визуала, все их сайты выглядят дорого и презентабельно за счет: цветовой гаммы, крупных профессиональных фотографий и уровня дизайна.
Мы используем такой же подход в работе с заказчиками.
Компания «Cashalot» оказывает разноплановые услуги на Кипре и организует поездки по всему миру. ЦА — люди из премиум-сегмента, которым важен высокий уровень сервиса.
Как показать, что в компании сервис высокого уровня? С помощью дизайна, который выглядит сдержанно, презентабельно и дорого.
Фотографии руководителей транслируют ценности, которые разделяют клиенты. Потенциальные покупатели видят: здесь меня понимают, эта компания для таких, как я.
При работе над этим лендингом я пересмотрела более 50 сайтов от мировых веб-студий. Искала интересные идеи и формировала подборку референсов для дизайнера. Лучшими находками делюсь с вами в статье по ссылке ниже.
Выводы
Образы воздействуют на человека на глубинном уровне, поэтому грамотно используйте их на посадочных страницах. Не делайте ставку на текст или бессмысленную графику.
Вызовите желание купить продукт:
1. Покажите читателю то, чем он хочет обладать, визуализируйте его мечты.
2. Покажите на странице такого человека, каким хотелось бы стать покупателю. По возможности используйте не моделей, а реальных людей с историей, как в примере ниже.
3. Покажите сценарии использования, чтобы покупатель понимал, как ваш продукт или услуга улучшат его жизнь.
4. Продемонстрируйте возможности продукта.
Если в вашей нише важно вызвать доверие — устройте клиенту или покупателю заочное знакомство с компанией:
1. Познакомьте с владельцем компании лично (фото или видео-обращение).
2. Покажите довольных клиентов / покупателей / посетителей.
3. Представьте клиенту ключевых сотрудников компании.
P.s. Делаю разборы сайтов. До 20 августа вы можете выиграть разбор бесплатно за комментарии к моим статьям
Пример разбора и условия участия — в статье:
Чтобы заказать сайт / прототип / разбор или контент для вашего бизнеса, пишите сюда:
inst @redactor_ot_bloga
WhatsApp, Telegram +7 999 584 46 48
Комментарий недоступен
Если продукт некачественный, то упаковка ему не поможет.
Если качественный продукт плохо упаковать, то ему не поможет то, что он качественный.
Успех Эпл - это качество + дизайн самих продуктов + мощная рекламная кампания. Все составляющие сыграли свою роль.
А поскольку мы тут говорим про маркетинг, а не про качество продукции или бизнес в целом, то маркетинг мы и рассматриваем
Комментарий недоступен
Бля почти все примеры типа «хорошего» дизайна - чёрные или черно-белые уебищные и депрессивные?
Омагад омагад я от такого «визуала» хочу сразу закрыться пачкой антидепрессантов.
Уж лучше та первая яркая рисованная хрень
Вроде была такая же статья
Да, вот она. Даже скриншоты те же.
https://vc.ru/227475
Да, она была опубликована просто на моей странице, а сейчас я ее перепубликовала в рубрике "Маркетинг", чтобы больше людей увидели. Плюс вторая часть полностью переделана в обоих вариантах :)
Сейчас бы сравнивать сайт говнокурса с apple, компанией, где работают одни из лучших профессионалов в мире.
Даже если у apple не было бы сайта, их продукцию все равно бы покупали, потому что дело не в визуале, не в сайте и не в дизайнерах - дело в продукте.
от первого сайта веет барахолкой, а от нашего варианта - эстетикой и сдержанным профессионализмом.Лол. От вашего варианта воняет дешевым тильдовским шаблоном, который собрал джун за 300 рублей в час.
Выводы:
Векторные картинки это дёшево (чаще всего бесплатно) и их вполне достаточно для большинства мелких сайтов, у которых нет бюджета на «дизайнерские студии».
Если ваш продукт дерьмо - никакой визуал на сайте это не исправит.
Если продукт некачественный, то упаковка ему не поможет
Если качественный продукт плохо упаковать, то ему не поможет то, что он качественный.
Рада, что у вас есть свое мнение. Это прекрасно.
Сожалею, что в вас так много желчи и желания ее куда-то излить. Надеюсь, в будущем ваша жизнь станет лучше.
Оставьте свою жалость и шаблонные фразочки себе :)
Я тоже так могу:
Мне очень жаль вас, ведь вы не в состоянии проанализировать мое мнение, понять, что оно сугубо субъективно, и желчи там нет ни грамма :)
Надеюсь, что ваша жизнь станет лучше, вы перестанете использовать дерьмовенькие шаблоны на тильде и однажды сделаете шедевр, как у apple.
Не всегда сайтам нужен в качестве визуала фотоконтент, особенно стоковый. Любую задачу можно решить разными путями, например с помощью шрифтовых композиций, типографской техники и микроанимаций. https://zorka.agency/
Чем дальше дизайнеры отодвигают рамки общепринятого, тем коммуникация становится интереснее и запоминающейся. А как известно, чем сильнее и необычнее взаимодействие с системой интерфейсом и пространством продукта, тем сложнее и длительность выхода из взаимодействия.
На вкус и цвет....:-)
Николай, вы о чем?
На вкус и цвет товарищей нет. :-) Мне например понравилась картинка с векторной графикой :-)
Понравилось — это одно, картинка симпатичная, вопрос в том, продает ли она? Она неимформативна, не показывает что-то, чем пользователь хотел бы обладать, не вызовет ассоциаций, не знакомит пользователя со спикером или компанией, не вызывает доверия. Просто симпатичная картинка
А вы проводили тестовую РК, A/B тестирование? Или вы посмотрели и решили, что не продает?)
Все прекрасно, спасибо за статью.
Единственное, что резануло, про два полушария, да ещё с таким акцентом.
Максим, спасибо за отклик.
А что не так с полушариями?
Эта концепция была опровергнута в результате современных исследований.
Есть пруфы? Статья, например?
Я впервые услышала эту теорию на лекции Максима Ильяхова в Школе Редакторов, а потом, когда проходила базовое обучение на психолога от профессиональных психологов, поэтому у меня есть причины доверять этой теории
Хотя, конечно, психология - молодая наука и там многое представлено лишь в виде гипотез
Вот статья. Там есть ссылки на источники.
https://cmtscience.ru/article/mif-o-levom-i-pravom-polusharii-mozga
Это красивый маркетинговый миф. Но если вы такое слышите от психолога, то стоит уточнить на сколько он вообще следит за наукой.
Психология - не наука, опять же )
Последнее утверждение, конечно, предмет для спора, но давайте не будем :)
Я попозже подробнее прочитаю статью и, может быть, отредактирую свою.
И, может быть, люди еще не нашли рационального объяснения каким-то вещам, но то, что бессознательное имеет над нами больше власти, чем сознательная часть - это реальность, которая просто работает в жизни, стоит только понаблюдать за собой и другими.
Что образы на нас воздействуют сильнее, чем текст - тоже реальность. Что решения о покупке чаще принимаются эмоционально - тоже реальность. Если человек больше рациональный и все взвешивает, он все равно на эмоции опирается. Просто прежде чем купить то, что ему понравилось, у компании или человека, которые ему приятны, он еще логически посмотрит и подумает. И может быть, увидит, что покупка не выгодна, и покупать не будет. Такой человек просто не совершает импульсивные покупки
Со вашим тезисами я абсолютно согласен. И Ильяхов вызывает у меня чувство глубокого уважения. Проблема была только в этих полушариях. Согласитесь, остальные факты могут быстро сойти на нет, если поймал автора на банальном провале в фактчекинге 😉.
Но ваш стиль текста мне нравится, с удовольствием буду читать ещё, если что-то напишете.
Согласна, отредактирую статью, когда будет время. Спасибо :)
Комментарий недоступен
Сергей, давайте все-таки не сравнивать рекламу с религией и искусством :)
Чтение книг придает эмоций, потому что вы задействуете воображение и представляете себе картинку / представляете себя героем / представляете героя и импонируете ему и т.д. То есть все равно образы, только вы их сами генерируете. Может быть, рекламный текст и может такой эффект вызвать, но я таких текстов не встречала, особенно коротких.
Может быть, само построение фразы у меня в статье неверное, но визуал в рекламе остается сильнее текста и вызывает больше эмоций ( о том, что текст вообще могут не прочитать, упоминать не будем).
Во-первых, зайдите на какой-нибудь сайт, у вас автоматически возникает чувство: приятно - неприятно, нравится - не нравится. Это считывается по визуалу сайта.
Во-вторых, очевидно, что картинка, например красивого дома, который построила компания, сильнее чем надпись "Мы строим красивые дома". И рядом с домом, допустим, счастливая семья и не стоковая, а реальная, фото живое, не шаблонное - очевидно, что это сильнее, чем текст "Вы будете счастливы в вашем новом красивом доме". Текст не вызовет эмоций, а вот картинка - да.
Безусловно, текст тоже воздействует на нашу эмоциональную часть, но образы сильнее впечатываются в сознание и действуют тоже сильнее - только мы говорим о рекламе, а не об искусстве :)
Ну и опять же, смотря что за ниша. Если, например, это франшиза, то здесь цифры, скриншоты из ЦРМ и т.д. (то есть факты) будут работать лучше всего.
Комментарий недоступен
Я все время говорю только про рекламу на лендинге, а вы все приводите примеры никак с рекламой не связанные, да еще и такие грубые.
Комментарий недоступен
@Маркетинг Free
Что это значит?
Что такое визуал?
Визуальное оформление сайта: дизайн, верстка текстовых блоков, цвета, линии, изображения и фотографии и т.д.
Согласны, визаул одна из самых важных составляющих любого продукта и его рекламы. Отличные примеры в статье!
Спасибо!
Можно как угодно оценить сайт и примеры компании-автора, но сама статья очень по делу. И в подтверждение этому предлагаю посмотреть сайты поставщиков софта для создания интернет-магазинов.
Нет, далеко не у всех будет красивая страница с красивой упаковкой их продукта, дефолтную тему и внешку которого перелопатят потом до неузнаваемости. Но для большинства этих компаний важно, чтобы магазин на их платформе продавал (а иначе нафига мерчанту платить $Xk за лицензию в год), поэтому эти поставщики уже давно продвигают максимум инструментов для создания первой страницы, где будет товар-локомотив или, например, флагман.
Иван, спасибо за отклик!
Я с вами не соглашусь. В примере сайта курсов видно, что картинка стоит, как заплатка, до лучших времен (вот наймем фотографа, сделаем фото и т.д.). Сайт эпл может себе позволить выводить свой продукт на первый фрейм, потому что он вкусен. Посмотрите сайты с цифровыми товарами, они используют "векторных человечков" и это, вроде как, работает. Вы привели свои примеры.
1. Фото с врачами хорошее, но что делать, когда есть кадровая текучка? Каждые полгода новое фото? Все на сайте кривое и косое.
2. В меня утыкается угол крыши и окно, это не товар лицом. Все на сайте кривое и косое.
3. Белый текст на фото с белыми элементами? На что кликать? Невозможно мелко. Листаем ниже, а тут видео, на нем текст. Смотреть? Читать?
Мне кажется, сайт с курсами не так уж и плох. Я думаю, что и ЦА сайта будет довольна. Вы могли бы говорить, что он плох, если бы ваши работы были на высоком уровне. Еще немного про апл, какие бюджеты уходят у них на создание визуала, и какие можем позволить себе мы "маленькие" предприниматели?
Я говорю о том, что живые фотографии и живое наполнение всегда лучше, т.к. векторные картинки - это просто фон. Может быть, он и не отталкивающий, но не информативный.
Про бюджет: здесь мы говорим про "Эпл" как про эталон, вторая часть статьи как раз для тех, у кого нет таких бюджетов и таких красивых товаров: живые фото, атмосфера, знакомство с сотрудниками, доверие. Всегда есть к чему стремиться, и есть как сделать оптимально при небольшом бюджете. Сайт с домом, где "утыкается угол крыши и окно" как раз был сделан очень бюджетно. Основная проблема была в том, что компания не работала над созданием портфолио, иначе был бы слайдер с лушими работами на первом экране. Но сейчас у них нет фотографий, надо договариваться со старыми клиентами и ездить по домам, фоткать. Надеюсь, однажды у компании найдутся на это ресурсы. Я думаю, мы неплохо вышли из ситуации с тем, что имели. Показываем маленькую компанию с душой. Выбрали минимализм, чтобы привлекать клиентов с теми же ценностями, тем более, что компания маленькая, и нужно всего 2-3 заказа на год.
У верхнего «Блекхом» конверсия будет выше чем у нижнего. От первого ощущение «у нас много всего, мы давно и много продаем и занимаемся этим, а не вылизыванием сайта». От нижнего все наоборот
Да, для массового покупателя, возможно. Проблема компании, для которой мы делали нижний сайт — она маленькая, фотографий для портфолио почти нет, т.к. никто никогда этим не занимался + компания не может взять много заказов, они берут 1-2 и все силы на него, поэтому мы ориентировались на покупателей с похожими ценностями, любовью к эстетике и чувством вкуса, которым захочется, чтобы дом был сделан с душой, индивидуально.
Я сама бы выбрала такую вот маленькую, уютную компанию с эстетичным сайтом и историей. И Блэкхом могли бы сверстать поаккуратнее, согласитесь. Пусть и сохранить свой кричащий стиль