Глава 4. Увеличение продаж на сайте
Говорящая палитра: как выбрать удачный цвет для сайта
Неправильно подобранный цвет может сказаться на продажах. Цвет – это один из психологических инструментов, которые позволяют привлечь внимание к сайту. Как правило, у него есть несколько секунд, чтобы заинтересовать своего посетителя. Очень важно, чтобы цвет отражал тематику вашего бизнеса. Иначе есть риск оттолкнуть и даже потерять посетителей. И наоборот, правильная цветовая гамма, удачное сочетание цветов могут повысить ваши продажи.
РЕШЕНИЕ
Подбирая цветовую гамму для сайта, стоит начать с трех вопросов.
1. Для чего нужен сайт? Какие услуги, товары будут на нем представлены?
2. Какие эмоции сайт должен вызывать?
3. Кто ваша целевая аудитория (например, возраст, пол и т. д.)?
В зависимости от этого можно выбрать основные цвета сайта, учитывая, какие эмоции он несет и для какой сферы бизнеса больше подходит.
КЛЮЧИ к эмоциям
Каждый цвет в спектре способен вызывать определенные ассоциации и нести свой эмоциональный заряд.
Вот несколько примеров.
Белый цвет
Ассоциативный ряд: простота, чистота, невинность.
Тематика бизнеса: лучше использовать как фон.
Черный цвет
Ассоциативный ряд: солидность, серьезность, сила, изысканность, элегантность, люкс, гламур, роскошь, тайна.
Тематика бизнеса: ритуальные услуги, ночные клубы, дорогой алкоголь. Черный цвет хорошо работает при продвижении престижной продукции.
Красный цвет
Ассоциативный ряд: любовь, предупреждение, угроза, действие, возбуждение, страсть, сила.
Тематика бизнеса: эротические сайты, рестораны быстрого питания, энергетические напитки, сайты об автомобилях и спорте, сайты, связанные с действиями.
Синий цвет
Ассоциативный ряд: надежность, профессионализм, серьезность, доверие, власть, спокойствие.
Тематика бизнеса: юридические компании, банки, интернет-магазины (особенно продающие кондиционеры, морепродукты, лодки, воду и фильтры для воды и т. д.), консалтинговые компании, интернет-технологии, авиакомпании, туризм, социальные сети, платежные системы.
Зеленый цвет
Ассоциативный ряд: натуральность, природа, здоровье, лечение, животные, деньги, гармония, спокойствие, безопасность.
Тематика бизнеса: банки, медицина, услуги для животных, расслабляющие услуги. Сайты о здоровье, лекарствах, экологически чистых продуктах, еде, детях, даче.
Желтый цвет
Ассоциативный ряд: веселье, развлечения, любопытство, счастье, удовольствие, привлечение внимания.
Тематика бизнеса: широко применяется, пожалуй, только на рынке такси. Я бы не рекомендовала делать его основным цветом сайта. Лучше использовать как акцентирующий, в сочетании с другим цветом.
Оранжевый цвет
Ассоциативный ряд: праздник, веселье, творчество, молодежь, комфорт, энергичность, жизнерадостность.
Тематика бизнеса: организация праздников, развлечения, детские товары. Оранжевый цвет часто интерпретируется как «дешевый». Поэтому этот цвет можно удачно обыграть, если компания продает товары в дешевом ценовом сегменте.
Розовый цвет
Ассоциативный ряд: сладость, молодость, нежность, невинность, мягкость, романтичность.
Тематика бизнеса: женские сайты и товары, знакомства, косметика и парфюмерия.
Коричневый цвет
Ассоциативный ряд: земля, тепло, уют. В большом количестве воспринимается как тяжелый цвет.
Тематика бизнеса: кофе, изделия из дерева, антиквариат, строительство, сайты, посвященные археологическим раскопкам, историческая информация. В дизайне данный цвет стоит минимизировать, чтобы он не оказывал подавляющего воздействия.
Серый цвет
Ассоциативный ряд: нейтральность, разумность, рациональность.
Тематика бизнеса: еще один цвет, который стоит минимизировать или вообще не использовать на сайте.
ПРАКТИЧЕСКИЕ РЕКОМЕНДАЦИИ
• Цвета выигрывают за счет удачных сочетаний друг с другом. Кроме того, сочетание цветов позволит лучше передать весь спектр эмоций, которые вы хотите заложить в дизайн.
• Некоторые цвета являются «эмоциональными стимуляторами»: они побуждают посетителей к действиям и провоцируют на импульсивные покупки. В первую очередь это красный, синий и оранжевый. Эти цвета используют для кнопок или других побуждающих элементов на сайте.
• При выборе цвета нужно учитывать, кто ваша основная целевая аудитория – женщины или мужчины. Многочисленные исследования показывают, что женщинам больше нравятся такие цвета, как синий, фиолетовый, зеленый. Не нравятся серый, коричневый, оранжевый. Мужчинам в целом ближе такие цвета, как синий, зеленый и черный, а оранжевый и коричневый они, скорее, не любят.
• Если ваш бизнес ориентируется на зарубежные рынки, то важно проверить, не будет ли выбранный цвет вызывать какие-то дополнительные ассоциации, связанные с культурой данной страны. Например, зеленый цвет в Южной Америке – цвет смерти. Голубой цвет в США ассоциируется с патриотизмом, а в Китае – с исцелением. В некоторых странах Азии белый цвет несет смысл траура. Поэтому цвет сайта нужно выбирать с учетом культурных особенностей целевой аудитории.
• Цвет, который увидят посетители сайта, может быть совсем не таким, каким он выглядит на экране вашего компьютера. Например, многое зависит от уровня освещенности и настроек монитора пользователя. Вы можете сделать свой сайт спокойно-зеленым, а пользователи увидят его в ядовито-зеленой гамме. Или дама, которая хочет купить красную юбку, увидит ее в розовых тонах.
• Чтобы цвет сайта одинаково воспринимался всеми посетителями, нужно использовать специальные цвета для web, а перед окончательным запуском дизайн стоит протестировать на разных компьютерах и в разных помещениях.
WEB-ЦВЕТА ДЛЯ САЙТА
Вашему вниманию предлагается палитра цветов, рекомендуемых для сайтов.
При создании изображения для публикации в сети главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает похожий или смешивает несколько соседних цветов палитры.
Иногда первоначальный цвет может быть заменен на что-то совершенно неподходящее.
Цвета из данной палитры везде будут отображаться правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов.
КАК ПОЛЬЗОВАТЬСЯ ПАЛИТРОЙ
Палитра состоит из 36 сочетаний 6 оттенков красного, зеленого и синего.
Над каждым цветом указаны два значения – RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).
Таблица «безопасных» цветов
Цветовые предпочтения мужчин и женщин: любимые и нелюбимые цвета. «Дешевые» цвета.
ЗАДАНИЕ
1. Проверьте цветовую гамму вашего сайта.
2. Ответьте на вопрос: соответствуют ли цвета вашему бизнесу?
3. Если нет, выберите для вашего сайта 2-3 основных цвета.
Адаптивный сайт: стоит ли он того?
В настоящее время люди получают доступ к Интернету через большой спектр устройств с разными экранами. Это создает некоторые проблемы для сайтов, которые предназначены только для просмотра с компьютера. То есть сайт адаптирован только под одно расширение экрана и не может трансформироваться при меньшем расширении. В итоге компании теряют с каждым годом все больше своих посетителей – и новых, и старых.
Как же их сохранить?
РЕШЕНИЕ
Прямой способ достижения этой мечты – адаптивный сайт. Сайт должен подстраиваться под различные расширения экрана. Хорошо отображаться и работать на различных устройствах. Не только на компьютере, но и на Android-телефоне, IPad и т. д.
Что такое адаптивный сайт?
Адаптивный сайт – это когда каждая страница сайта изменяется в зависимости от размера экрана.
Сайт, учитывая размер экрана, может какие-то элементы дизайна переставить, скрыть; увеличить или уменьшить шрифт, изображения и т. д.
Например, на компьютере сайт может использовать 2-3 колонки, в то время как для телефона, планшета из-за ограничения малого экрана преобразуется в сайт с одной колонкой. Если какая-то часть контента не является существенной, то переносить его в мобильную версию нет смысла, дабы не захламлять столь малый экран.
Таким образом, адаптивный дизайн сделает содержимое сайта доступным для любого устройства. Сайт будет хорошо выглядеть и работать как на телефоне, планшете, так и на обычном компьютере.
Нужно учитывать важный момент: если на компьютере посетитель взаимодействует с сайтом с помощью мыши, то в тел ефонах, планшетах используется сенсорный экран, взаимодействие с помощью пальцев. Это заставляет ставить ссылки, кнопки и другие элементы на определенном расстоянии друг от друга, чтобы пользователь не нажимал их случайно. В итоге структура сайта, меню, навигация и другие элементы должны быть полностью переосмыслены.
Есть ли смысл переходить на адаптивный сайт или все оставить так, как есть?
• Мобильный трафик с каждым годом растет, становясь приоритетнее для быстрого поиска информации. Количество посетителей, просматривающих сайт через мобильные устройства, неуклонно увеличивается.
• Поисковые системы Яндекс и Google изменили алгоритм ранжирования в пользу адаптивных сайтов. Именно такие сайты быстрее продвигаются в top по запросам.
Да, переход на адаптивный дизайн стоит того. Этот путь экономически эффективен. Игнорирование этого может стоить бизнесу слишком дорого.
Адаптивный сайт – это будущее, а ставки на будущее – вряд ли плохая идея. Согласны?
ЗАДАНИЕ
1. Если у вас до сих пор нет адаптивного сайта, то пора его сделать.
Правильная «карусель» на главной странице
«Карусели» (от англ. carousel, также «слайдер», «слайд-шоу») на сайтах очень популярны, особенно на главной странице. Но неправильно оформленная «Карусель» может только все испортить, а не помочь. Например, быстрое мелькание баннеров раздражает и вызывает желание быстрее покинуть сайт. Как же сделать так, чтобы вызывать интерес, а не гнев посетителей?
РЕШЕНИЕ
Рассмотрим основные моменты при проектировании слайдеров.
Все баннеры должны быть составлены по принципу ОДП:
«О», или оффер. Конкретное предложение для вашего клиента. Какую выгоду, пользу несет ваш продукт.
«Д», или дедлайн. Ограничение вашей акции (по времени, по количеству или по цене).
«П», или призыв к действию (купить, подробнее и т. д.).
Хороший баннер содержит столько информации, сколько достаточно для клика.
Рассмотрим поподробнее 3 варианта дедлайна:
1. ОГРАНИЧЕНИЕ ПО ВРЕМЕНИ
Часто используемый вариант – ограничение спецпредложения. Суть в том, что вы предлагаете «вкусное» условие, которое действует до такого-то числа. А еще лучше, если акция действует 24 часа или 3-4 дня. Чем меньше времени у посетителей на раздумья, тем выше отклик на ваше предложение.
2. ИЗМЕНЕНИЕ ЦЕНЫ
Продемонстрируйте, сколько времени осталось, чтобы купить товар или услугу по выгодной цене. Дайте посетителю понять, что через N дней цена на товар изменится, и укажите, сколько он вынужден будет переплатить, если не купит товар сейчас.
3. ОГРАНИЧЕНИЕ ПО КОЛИЧЕСТВУ
Нужно показать клиенту, что товар заканчивается. Например: «Осталось всего 17 экземпляров». Для большего эффекта укажите, что 5 из 17 уже забронированы. Все это вынуждает покупателя поторопиться с решением.
Ниже приведены примеры правильно созданных продающих баннеров. Все баннеры созданы в нашей компании. При желании можете обратиться к нам за услугой.
2-3 БАННЕРА В СЛАЙДЕРЕ
Не нужно создавать большое количество баннеров. Это бессмысленно, поскольку пользователи проводят не так много времени на главной странице, чтобы успеть просмотреть все ваши акции. Как правило, основное внимание будут получать первые 2-3 предложения.
Вместо слайдера лучше разместить один статичный баннер. Он позволит лучше запомнить вашу акцию, не раздражая посетителей мельканием картинок.
Но если вы хотите разместить 2-3 баннера, то следует учитывать следующие особенности.
1. СКОРОСТЬ
Баннеры не должны вращаться быстро, в противном случае пользователь не будет иметь достаточно времени, чтобы просмотреть заинтересовавшее его предложение. В итоге он почувствует себя некомфортно, если вынужден будет ждать, когда же снова появится нужный ему баннер в слайдере. Не вызывайте у ваших покупателей ощущение, что они не могут контролировать ситуацию – это очень раздражает.
Однако если автоматическое вращение слишком медленное, то будет иметь место противоположный эффект. Пользователям просто надоест смотреть на слайдеры, которые им малоинтересны.
Таким образом, постарайтесь найти золотую середину. Настройте скорость ротации баннеров так, чтобы было не быстро, но и не медленно – достаточно для просмотра. Обычно хватает 5-7 секунд, если текста не слишком много.
2. ПОСЛЕДОВАТЕЛЬНОСТЬ БАННЕРОВ
Большинство пользователей не успеют посмотреть все баннеры в слайдере, даже если вы установили автоматическое вращение. Они просто не проводят так много времени на главной странице. Как правило, они скроллят или переходят на другую страницу задолго до того, как все баннеры будут показаны. Поэтому так важна последовательность предложений в слайдере.
Первый баннер получает большее внимание, чем все последующие. Если он не заинтересует посетителя, то велика вероятность, что остальные вовсе не будут просмотрены. Таким образом, последовательность баннеров должна быть тщательно продумана.
3. АВТОРОТАЦИЯ В СОСТОЯНИИ ФОКУСА
Как уже было сказано, быстрая ротация приводит к тому, что пользователи не успевают просмотреть оффер. Поэтому автоматическое вращение должно быть временно приостановлено, когда баннер находится в состоянии фокуса, то есть при наведении мыши на него. При этом нужно визуально показать посетителю, что карусель реагирует на его движения, чтобы не вводить его в заблуждение, будто слайдер перестал работать.
Авторотация возобновляется, как только мышь пользователя покидает слайдер.
4. РУЧНОЕ ВЗАИМОДЕЙСТВИЕ
Автоматическая ротация должна быть прекращена после любого активного взаимодействия пользователя со слайдером. Например, когда он нажимает на кнопки (следующий / предыдущий), чтобы отобразить новый баннер в карусели.
Некоторые пользователи игнорируют карусель из-за «баннерной слепоты». Другим может просто не нравиться такой элемент дизайна. Придерживайтесь всего вышесказанного, чтобы получить наилучшие результаты при использовании слайдера. Посетители станут находить их более заманчивыми и полезными. А первое впечатление, как правило, очень важно для сайта. Именно оно может повлиять на желание продолжить его изучение.
ЗАДАНИЕ
1. Проверьте, соответствуют ли ваши баннеры всем изложенным требованиям. Если нет, исправьте. Либо обратитесь к нам для создания продающего баннера.
Как улучшить поиск на сайте
Часто встречаются сайты, где поиск вроде присутствует, а результат на запрос не выдается. Или выдается результат, который не соответствует ожиданиям посетителей. Знакомо?
Что делает посетитель после этого? Правильно, уходит с сайта. Как же этого избежать? Пришло время улучшить состояние поиска на сайте, и начинать нужно с поддержки 10 типов основных запросов.
РЕШЕНИЕ
Рассмотрим 10 типов запросов, которые нужно учитывать в поиске на своем сайте. Они отражают самые основные из тех, что могут ввести посетители. Большинство сайтов ограничиваются скудным набором типов запросов. Как правило, они ограничиваются запросом по названию продукта.
10 ТИПОВ ЗАПРОСОВ:
1. НАЗВАНИЕ ПРОДУКТА
Точный поисковый запрос конкретного продукта по названию.
То есть посетитель уже знает, что ему нужно. Например, планшет Apple iPad Pro 12.9.
Откуда он знает точное название? Все просто:
• либо он скопировал его с другого сайта, и теперь ему нужно определиться, на каком сайте выгоднее купить его;
• либо он где-то слышал название этого продукта и хочет познакомиться с ним поближе. Он может не знать, как правильно пишется наименование, и тогда возникают опечатки. Эти особенности нужно иметь в виду при разработке функционала «Поиск». То есть выяснить наиболее частые опечатки пользователей и учесть их в поиске.
Как это можно сделать?
Просмотрите вашу историю поиска на сайте через Яндекс.Метрику или Google Analytics. Если вы еще только разрабатываете данный функционал, то узнайте, каковы самые частые опечатки посетителей в wordstat.
Также нужно учитывать альтернативные названия ваших товаров или услуг. Данный вариант тоже должен быть обработан корректно.
Если сайт не может обработать запрос пользователя по точному названию товара, то это решающий фактор в пользу того, чтобы уйти с сайта. Как думают посетители? Если товар не отобразился в поиске, значит, его нет на сайте.
2. НАЗВАНИЕ КАТЕГОРИИ
Когда пользователь не знает, какой конкретно товар ему нужен, то поиск осуществляется по категориям. Это более общий поисковый запрос. Например, посетитель ищет просто «ноутбук».
Почему он вводит это в строку запроса? Почему не обратится к данной категории в меню?
Тут три ответа:
• в поиске ему удобнее искать нужную категорию товара;
• либо у него возникли сложности с поиском данной категории товара. Он просто не смог ее найти на сайте. То есть сайт так сложно организован, что пользователю трудно на нем сориентироваться в первый раз. Например, данная категория спрятана от глаз посетителей, поскольку является частью основной категории;
• либо ваши категории имеют не те названия, которые обычно используют посетители в своей жизни. Просто им непонятно, что вы имеете в виду.
При общем запросе нужно учитывать синонимы, которые пользователь может использовать. Альтернативные варианты. Например, кто-то ищет принтер, для других – это копировальный аппарат.
Конец ознакомительного фрагмента.