Не так давно амстердамский аэропорт Схипхол (Amsterdam Schiphol Airport) завел себе мух: по одному в каждом из писсуаров. Зачем? – спросите вы. Чтобы сократить расходы на уборку на 80%.
А вся хитрость заключилась в том, что управление аэропорта разоблачило мужской пол в таком поведенческом шаблоне, как прицеливание. Вообще, к вашему бизнесу мухи в писсуарах отношения не имеют. Но этому приему дизайна стоит отдать дань уважения: никаких просьб, расклеенных по стенам, никаких мучительных поисков решений – всего один визуальный элемент и экономия средств в 80%! Вот на что способен элемент дизайна. Поэтому сегодня о нем подробнее.
И вот несколько принципов дизайна, который сможет убедить ваших клиентов:
- Предугадывайте вопросы пользователя и отвечайте на них
Люди задаются вопросами. Так устроена система человеческого мышления. «Что это?» – первостепенный вопрос, которым задавался еще первобытный человек. И что бы ни попадало сегодня в наше поле зрения, мы реагируем так же. В частности – когда приходим на целевую страницу. Ну а поскольку у вашего лендинга есть совсем немного времени, чтобы заинтересовать клиента, ответы на самые важные вопросы лучше давать сразу. Какие вопросы? Вот они:
- Что это такое? (Что за страница/сайт?)
- Зачем мне это? (Что я могу здесь сделать?/Это то, что я ищу?)
- Что я от этого получу? (Чем это выгодно для меня?)
И если расставлять приоритеты, то для пользователя важно: На 76% – насколько легко найти нужную информацию. На 9% – используются ли здесь передовые интерактивные технологии. На 10% – насколько эстетичен дизайн сайта. На 5% – другое (в каждом индивидуальном случае).
А потому подчеркивайте выгоду своих предложений. И, рассказывая об этом, обосновывайте, почему посетитель должен стать вашим клиентом, но никак ни покупателем ваших конкурентов.
Причем требование простоты относится не только к домашней странице, но ко всем страницам вашего сайта, включая страницы «о компании», «отзывы» и прочие. Предельно ясно и понятно – эта установка должна стать едва ли не святой для современного веб-маркетолога.
И давайте на примерах. Берем страницу и пытаемся найти в ней 3 ответа на поднятые выше вопросы:
- Что это: «Начни принимать кредитные карты сегодня же» – четко сформулированная возможность и соответствующее изображение.
- Что я могу сделать здесь: можешь получить картридер, считывающий банковские карты.
- Чем это выгодно для меня: это бесплатно, кроме того здесь самые низкие комиссионные за транзакцию – 2,75%.
Но что если бы вместо такого лендинга вы увидели текст:
Наша платежная система объединяет кассовое оборудование, программное обеспечение и социальный медиа-маркетинг в одну гигантскую машину прибыли!
Все понятно? Привлекает? Будете тратить время, чтобы разобраться?
Берите конкретикой и забудьте о прилагательных в превосходной степени
Идем дальше. Иллюстрации сильны тем, что могут визуализировать идею, на описание которой у вас ушло бы несколько слов. Длинные предложения, которые посетитель должен прочесть и осмыслить, – прошлый век! Пусть часть смысла несет картинка: человеческий мозг обработает и воспримет её в 50 раз быстрее, чем текст. И вот неплохой пример:
Единственная оговорка: люди уже не верят превосходным степеням, как в случае с этим «самым простым способом найти…», потому что сегодня все вокруг самые лучшие и продают только самое качественное по самым лучшим ценам.
Единственное исключение – это наличие доказательств. Проще говоря, можете доказать, что ваш товар превосходит аналоги по качественным характеристикам, – говорите, что он самый качественный. Официальные рейтинги подтверждают ваше лидерство среди конкурентов – ссылайтесь на них и тогда уже заявляйте о себе, как о лучших.
Логичный подход, верно? Но сплошь и рядом мы с вами видим обратное и, пожалуй, такая витрина никого из нас не удивила бы:
Сравните два предложения: «Лучшая пицца в городе» и «Домашняя паста». Почему пицца лучшая, непонятно; и наверняка у вас есть любимое заведение, где пиццу делают именно так, как вы любите. Чем тогда эта забегаловка убедительнее? Лучше уже просто «домашняя паста»: по факту, как говорится. Но что, если бы вместо сомнительной характеристики в превосходной степени вам пообещали доставку в течение 20 минут? Совсем другое дело, согласитесь. Поэтому забудьте о превосходных степенях прилагательных и сосредоточьтесь на уникальности своего торгового предложения. Это еще цепляет аудиторию.
Привлекайте визуально
Как только пользователь нашел ответы на 3 вопроса и понял, что находится в нужном месте, ваш лендинг переходит к следующей задаче – провести посетителя через воронку продаж.
Завоевывайте с первого взгляда
Помните мы рассказывали вам о том, «Как «привязать» посетителя к лендингу, больше чем на 50 миллисекунд»? Так вот не спроста это было. Ведь именно такое время нужно посетителю, чтоб оценить ваш сайт и принять решение либо уйти, либо остаться. Поспешное умозаключение – ничего не скажешь. Но такова данность, и нам ничего не остается, кроме как считаться с ней. А британские ученые как могут способствуют тому, чтобы мы делали это рационально. В числе их недавних исследований был анализ воздействия различных факторов (а именно дизайна и информационного контента) на отношение посетителя к веб-ресурсу. Каковы же результаты?
На предложение высказать свое мнение о только что посещенном сайте 94% респондентов отозвались о его дизайне, упомянув запутанную навигацию, раздражающие цвета, «тяжелые» страницы, слишком мелкий шрифт и т.д. И только 6% участников исследования начали с оценки содержания.
От комментариев мы воздержимся и… (как сами советовали выше) предугадаем вопрос, который может появиться у вас: так ли уж важно первое впечатление? Ведь потом может быть второе и третье. Либо это первое впечатление может забыться.
Так вот, первое впечатление беспрецедентно важно, поскольку:
- Оно напрямую связано с удовлетворенностью посетителя.
- Оно может «застрять» в восприятии посетителя на долгие годы.
- Визуальное оформление как бы то ни было воздействует на посетителя прежде, чем тот усвоит текстовую информацию.
Вспомним хотя бы новую Tesla Model S:
Просто фото, без каких-либо слоганов, технических характеристик и прочих уточнений. Но согласитесь, электромобиль уже расположил к себе.
Приблизительно также происходит первое взаимодействие вашего лендинга или сайта с посетителем. И поверьте, каким бы качественным ни был контент вашего ресурса, первые впечатления посетителей, если они негативные, подорвут конверсию. Логика у посетителей простая: «На плохом сайте не может быть хороших товаров».
Хороший веб-дизайн – это какой?
Одним приходится по душе фиолетовый, другим ближе оранжевый, третьи кроме классики в черно-бело-серых тонах ничего не приемлют. Мы говорили об этом в статье «Как вызвать доверие, чтоб увеличить средний чек?». Но как тогда понять, какой же веб-дизайн считается хорошим? Волшебной пилюли или универсальной формулы тут, увы, нет. Но Google исследовал этот вопрос и определил 2 критерия привлекательности сайтов для среднестатистического пользователя:
- Визуальная сложность (чем проще для восприятия, тем лучше).
- Соответствие стереотипу (пользователь представляет, как в общих чертах выглядит сайт той или иной категории, и хорошо, если реальный дизайн совпадает с его представлениями).
Так что стремитесь упрощать свои сайты, насколько это возможно, и пусть они будут узнаваемыми (клиент заходит на сайт интернет-магазина – он готов увидеть витрину и каталог товаров). Поэтому стараться выразить свою индивидуальность и выделиться среди конкурентов нужно, но экстраординарные подходы могут и навредить – ищите золотую середину.
И вот вам пример откровенно неудачного дизайна: наводишь курсор на цифру и только тогда видишь пункт меню.
Мало того, что макет не соответствует ни одному стереотипу, он еще и усложняет восприятие и пользование ресурсом.
И вот еще один пример. Согласитесь, вас нисколько не смущает голландский язык, потому что страница имеет вполне привычную и понятную структуру, а подача информации не затрудняет восприятие.
Опять-таки, структура может быть понятной, но перегруженной, что тоже не лучшим образом сказывается на конверсиях.
Как выглядят шаблоны страниц, горячо любимые интернет-пользователями? Пожалуй, так:
Подчиняйте веб-дизайн строгой иерархии
Прежде чем мы объясним, что к чему в этом пункте, взгляните на треугольники и оцените их по важности:
Мы знаем ваш ответ. И он абсолютно очевиден, потому что иерархия – естественный порядок, в котором человек воспринимает то, что видит.
Такая же визуальная иерархия должна прослеживаться и на веб-сайтах. Приоритетно важными должны считаться те элементы, которые призваны в конце концов сосредоточить пользовательское внимание на себе – заголовки, СТА-кнопки, призывы к действию. Если вы владелец сайта с расширенным меню (более 5 блоков), подумайте: равноценны ли эти блоки по важности. Возможно, некоторые из них должны быть выделены?
Но не забывайте, что определить приоритетность элемента можно не только с помощью размера: Amazon, к примеру, просто выделяет ста-кнопку цветом.
Расставляя акценты, не забывайте о бизнесе
Речь о том, что визуальная иерархия, которую вы решите применить, не должна «упасть с неба» или просто показаться вам эстетичной/логичной. Ваша иерархия должна соответствовать целям вашего бизнеса.
О том, как нужно, давайте на примере:
Ресурс Williams Sonoma специализируется на продаже посуды. Первым делом на странице бросается в глаза хороший кусок мяса (дизайнеры рассчитывали, что он привлечет внимание и даже пробудит желание). Дальше мы переносим внимание на заголовок (который поясняет оффер) и тут же выделяем для себя ста-кнопку (призывающую воспользоваться возможностью!). Четвертое по приоритетности место мы непроизвольно отдаем небольшому тексту под заголовком. После чего переходим к обещанию бесплатной доставки. Баннер же в «шапке» сайта привлекает наше внимание в последнюю очередь. Визуальная иерархия налицо!
Порой контраст работает лучше цвета
Вот очередной результат сплит-теста кнопок призыва к действию:
С одной стороны мы говорили, что зеленый цвет воспринимается посетителями лучше, чем красный. Но в данном случае красная кнопка сработала лучше: ее конверсионный показатель превосходит альтернативный на 21%. В чем же дело? А дело как раз в контрасте: среди прочего зеленого оформления красная кнопка получила должное визуальное выделение. Так что результат вполне себе логичен и отнюдь не противоречит установленным закономерностям восприятия.
«Воздух» вокруг важных элементов придает им важности
Не используете пространства по максимуму – все внимание достается тем элементам, что остались в «пустоте». В случае с этой кроватью произошло именно так:
И, конечно, не забывайте о том, что фотографии товаров едва ли не важнее для посетителей, чем характеристики. Так что пусть изображения станут вершиной визуальной иерархии.
Удерживайте внимание любой ценой
О том, что интернет-пользователи просматривают страницы по F-образному шаблону, мы уже говорили. Но можем привести и новые факты: 69% посетителей сперва смотрят именно на левую верхнюю часть страницы. Так что возможность захватить внимание у вас представлена именно здесь, и упускать её нельзя.
«Привлекательные фишки»
Нейрофизиологи утверждают, что больше всего пользовательского внимания достается большим изображениям:
Не менее сильный прием – зрительный контакт. Страницы с изображениями людей, смотрящих прямо пользователю в глаза, как при реальном диалоге имеют буквально гипнотическое воздействие:
Еще одно сильное решение – показать временной контраст «До» и «После»:
Такие примеры особенно полюбились фитнес-клубам, салонам красоты и стоматологическим клиникам, однако подходят практически любому бизнесу.
Следующий гарантированный способ привлечь и удержать внимание посетителя – удивить его или даже развеселить непривычным решением:
Но не мыслите шаблонно: привлечь внимание способна не только картинка, но и нестандартный текст. Взгляните:
Какой из плакатов по курсам копирайтинга привлечет вас больше?
Как удержать?
Привлечь внимание – полдела, если не четверть. Дальше нелегко – это внимание нужно удержать. И прежде чем приступать к активным удерживающим мерам забудьте:
1.О длинных «простынях» текста, которые на корню убивают весь интерес посетителя.
2.О бессмысленном эгоцентричном жаргоне.
«Мы рады видеть вас на нашем сайте!» – вы серьезно? Это просто в ваших интересах, тем более что такие заявления встречаются почти на каждом сайте.
«О компании» – такая страничка должна иметь место, но в ней должен быть отнюдь не портрет Её Высочества Компании, но выгоды посетителя от работы с последней.
«Наша философия» – вы шутите? И с чего вообще взяли, что посетителю это интересно? Его волнует только решение своих проблем.
Сначала займитесь созданием хорошего контента, потом «оденьте» его в привлекательную форму:
Слева – «голое» содержание. Справа – грамотная подача со стилизованными шрифтами и стрелками, направляющими посетителя. А благодаря разбивке на абзацы текст воспринимается еще легче.
«Подпитывайте» посетителей чем-то новым
Дело в том, что человеческий мозг во-первых, не обращает внимание на давно привычные вещи, а во-вторых, быстро привыкает к только что увиденному и игнорирует эти образы в дальнейшем. Поэтому, чтобы поддерживать внимание посетителя, нужно постоянно «подпитывать» его чем-то новым. Даже нейрофизиологи выступают «за!».
Среди распространенных и действенных приемов – чередование абзацев текста по вертикали: сначала справа от центра, чуть ниже – слева:
Не продавайте, а помогайте клиенту решить проблему
Это вообще золотое правило продаж, но особенно оно касается сайтов с огромными каталогами товаров. Потому что большой ассортимент приводит к параличу выбора. Не так давно мы говорили об этом в статье «Большой выбор – это плохо?!».
А потому: помогайте людям, сужая выбор. К примеру, с помощью использования фильтров по признакам товаров:
Фотографии товара
Внешний вид товара решает почти все: к изучению характеристик посетитель перейдет, только если товар понравился ему с первого взгляда.
Увы, нам с вами привычно иметь дело с такими каталогами:
В то время как эффективнее работают следующие:
Давайте поэкспериментируем. Возьмем витрину с четырьмя товарами в одной строке:
И сократим число товаров в строке до трех, но большего размера:
Что получим? Увеличение продаж на 25%!
Только одно действие на странице и только в нужное время
Все гениальное просто: если предложить посетителю сделать первое-пятое-десятое, не сосредоточив его внимание, он не сделает ничего. Поэтому действие должно быть одно и именно к нему нужно привлекать внимание понятными сигналами, именно под него строить визуальную иерархию.
Причем не нужно изобретать велосипед, чтобы дать понятный сигнал. Достаточно просто оставлять предметные надписи. Это важно. Насколько – покажет пример:
Зарегистрироваться, конечно, можно и даже бесплатно. Но какой в этом смысл?
Объяснять, что вам от посетителя нужно и почему это в его интересах, первостепенно важно. Даже важнее, чем объем текста. Это доказали маркетинговые эксперименты. В частности, сравнение короткой и длинной лид-страницы. В первом случае СТА-кнопку сопровождал текст, поясняющий, что осуществляется сбор пожертвований. И вот что интересно: «длинная» версия не только не оттолкнула посетителей, но и собрала на 75% больше средств.
По данным агентства IDC 50% покупок в Интернет-магазинах не завершаются по причине недостатка сведений о товаре. Люди хотят знать, за что отдают деньги. И чем дороже товар, тем более исчерпывающую информацию требует клиент, что вполне закономерно.
Как же резюмировать сказанное? Приведенные принципы никак не ограничивают ваши творческие решения. Но следование им помогает воздействовать на аудиторию и приводить ее к тому целевому действию, в котором мы заинтересованы. Используйте свои возможности по максимуму и ставьте личные конверсионные рекорды!