В одном из своих исследований ученые Стэнфордского университета приводят данные, согласно которым до 46% потенциальных клиентов формируют свое мнение о сайте на основе его дизайна. Причем часто пользователь принимает решение неосознанно. Соответственно, если дизайн человеку не нравится или как-то создает для него дискомфорт, то высок риск потери потенциального клиента. В идеале, перед началом работы над дизайном и непосредственно разработкой сайта, нужно сделать подробный маркетинговый анализ. Однако и без него можно понять некоторые закономерности визуального оформления, способные оказать влияние на продвижение сайта и его конверсию.

Что такое конверсия и какой показатель является хорошим

Конверсия - процент пользователей, совершивших на сайте нужное целевое действие: оформление подписки, нажатие на кнопку, заполнение формы, покупку и так далее. В зависимости от целей проекта конверсия может подразделяться на несколько типов, например, отправку формы и покупку. Если ее показатель высокий, то значит, что сайт хорошо справляется со своими задачами. Расчет производится на основе данных инструментов статистики, которые предварительно внедряются в код веб-ресурса. Обычно это Яндекс Метрика и Google Analytics. У них предоставлены удобные инструменты для определения целевых действий.

Сложно однозначно сказать, что такое “хорошая” конверсия. Очень много зависит от типа бизнеса, целевой аудитории, сезона, изначальных целей страницы. Например, у сайта, продающего элитную недвижимость конверсия может быть около 0.1-0.5% и это будет считаться неплохим результатом. Для ресурса же, где целевым действием пользователя является оформление бесплатной подписки или покупки недорого товара такая конверсия является крайне плохой. Обычно хорошей конверсией в этом случае будет считаться значение в 3-8%.

Не забывайте, что некоторые бизнесы сильно зависят от сезонности. Например, интернет-магазин, специализирующийся на продаже индивидуальных подарков в обычные дни будет иметь конверсию в 2-3%, а перед праздниками под 10%. Даже на тех проектах, где влияние сезонности должно быть минимальным, оно тоже имеет место быть. Например, продажи обычной бытовой техники тоже чуть увеличиваются к праздникам.

Как итог: хорошая конверсия для каждого проекта индивидуальна и является таковой, если полностью отбивает расходы и позволяет получать доход. Если же сайт долгое время работает в минус или в ноль, то это повод задуматься о изменениях либо в сайте, либо в подходе к продвижению.

Влияние визуального оформления на продвижение сайта

Хоть алгоритмы поисковых систем не научились определять “красивый” и “некрасивый” дизайн, у них есть собственный набор правил и закономерностей, касающихся оформления интерфейса. Если ресурс следует всем или большинству из них, то алгоритм поисковой системы будет более лояльным при ранжировании. В противном случае можно получить обратный эффект.

Главным образом поисковые роботы смотрят, чтобы важный контент на сайте было легко читать с основных устройств: компьютеров и смартфонов. Также обращают особое внимание на скорость загрузки страницы, поэтому от сложной анимации и тяжелого дизайнерского оформления тоже лучше отказаться. Аналогичное правило касается и окон, всплывающих автоматически.

Важные особенности визуального оформления

На конверсию в большей степени влияет наполнение сайта и правильно выстроенная рекламная кампания. Визуально красивый и удобный ресурс, созданный по всем правилам для увеличения продаж, может с треском провалить свою задачу из-за плохо проработанного контента и/или привлечения на сайт незаинтересованной аудитории в ходе неграмотной кампании.

Визуальное оформление - это обертка. Оно безусловно оказывает влияние на действия пользователей, но на первом месте все же стоят наполнение и грамотная маркетинговая стратегия. Далее рассмотрим, на что обращать внимание при разработке дизайна сайта, чтобы за счет него добиться увеличения конверсии.

Правило 1: Простота совершения целевого действия

Самое главное правило. Чем проще пользователю найти и заполнить форму, оформить заказ или подписку, тем выше вероятность того, что он это сделает. Такие элементы называются CTA-кнопками, хотя и не всегда это могут быть именно кнопки. Их важно расположить так, чтобы пользователь мог в любой момент получить к ним доступ и чтобы у него не возникло трудностей во время совершения этого действия. Самый простой вариант нажатие на кнопку или переход по ссылке, однако, чтобы от этого был какой-то толк, то посетителю нужно заполнить форму заказа/подписки.

Ни в коем случае не нужно вдаваться в крайности и ставить кнопки на протяжении всей страницы, особенно там, где их расположение неуместно. Чем их будет больше, тем больше будет отвлекающих факторов, что может негативно сказаться не только на конверсии, но и на ранжировании страницы в поисковой выдачи, так как поисковые роботы будут принимать дублированные кнопки в качестве визуального мусора. Конечно же, кнопки, формы и подобные элементы не должны отвлекать пользователя от изучения контента страницы. Всплывающие окна можно использовать, но делать их следует так, чтобы пользователь сам их вызывал, а не чтобы они появлялись автоматически.

Неплохим решением будет закрепленный блок с формой или кнопками, который будет показываться на протяжении всей страницы, но при этом не будет отвлекать от изучения основного контента. Их можно расположить в главном меню, в блоке сбоку.

Блок с CTA-кнопками закреплен справа от основного контента 

Еще их можно делать не в закрепленном блоке, а в нескольких блоках, которые будут равномерно размещены по странице. В таком случае важно не переборщить с их количеством и сделать так, чтобы CTA-элементы органично вписывались как в общее оформление, так в контент. Например, вставлять целевую ссылку в текст.

Одностраничным сайтам, специализирующимся на сравнительно небольшом перечне услуг, CTA-форму рекомендуется вообще выносить на первый экран. Правда, ниже все равно нужен будет текст с описанием услуг, цен, преимуществ и, возможно, пару дублей CTA-формы.

Правило 2: Использование отрицательных пространств

Или пробелов. Они не оказывают такого прямого влияния на конверсию, как CTA-элементы. Однако, если компоненты сайта сливаются друг с другом, то это выглядит некрасиво, может вводить пользователя в заблуждение, а также послужить причиной для возможной пессимизации со стороны поисковиков. Сайт должен быть читаемым и легко воспринимаемым пользователем, а для этого нужно пространство между основными элементами: заголовками, картинками, кнопками, формами, полями для заполнения, текстовыми блоками и так далее.

Хороший пример использования отрицательного пространства

Не нужно задавать везде одинаковые отступы. Важно соблюсти определенный баланс. Например, между блоков должны быть одни отступы, а между заголовком и обычным текстом другие. Так страница будет выглядеть более гармоничной и целостной.

И, конечно же, нужно не забывать про адаптацию отступов для мобильных устройств. Так как на смартфоне они могут выглядеть огромными, в то время как на ПК будут смотреться сравнительно неплохо.

Правило 3: Контакты на видном месте

Актуально практически для всех видов посадочных страниц и интернет-магазинов, за исключением разве что крупных маркет-плейсов, где свои товары продает несколько продавцов. На одностраничных сайта часто контактам посвящен отдельный блок на странице, правда, это тоже не всегда обязательно. Часто можно необходимые контакты и кнопку связи расположить в шапке сайта, которая будет иметь фиксированное место. Также там можно легко расположить кнопки социальных сетей.

Пример размещения контактов в главном меню

Таким образом вы делаете связь клиента с вами более легкой и повышаете уровень доверия. Вполне может быть так, что на сайте посетитель ничего не заполнял, но решил позвонить вам или написать в социальных сетях, чтобы задать уточняющие вопросы. Это очень хороший шанс заполучить нового клиента.

Правило 4: Использовать оптимальное число шрифтов и цветов в оформлении

“Золотым” стандартом является 3 разных цвета и 3 шрифта. Так меньше риск сделать сайт скучным или слишком пестрым. Конечно, важно чтобы подобранные цвета и шрифты между собой хоть как-то сочетались. Фон страницы должен контрастировать с текстом и кнопками. Самый банальный пример: белый фон, черный текст, красные кнопки.

При выборе цветов, важно учитывать и психологию:

  • красный и его оттенки обычно провоцируют человека на какие-то срочные действия, поэтому их можно часто встретить при оформлении кнопок;
  • синий ассоциируется с чем-то спокойным, поэтому часто используется для оформления сайтов страховых, финансовых, медицинских, образовательных компаний;
  • зеленый ассоциируется со здоровьем и экологией, поэтому его тоже часто используют на медицинских сайтах, ресурсах по продаже натуральных продуктов, дизайн-бюро, работающих с растениями и ландшафтом.

Для определения цветов, которые будут сочетаться между собой используют цветовые круги. Например, очень удобные круги есть на сайте Adobe и Color Scheme. Там же можно создать свою цветовую палитру, которую будет использовать в работе.

Цветовой круг и палитра

Что касается шрифтов, то рекомендуется использовать 2-3 варианта: 1-2 для заголовков и 1 для основного текста. Иногда можно и вообще один шрифт, но выбирать разные начертания. Они должны быть гармоничны по отношению к дизайну сайта. Рекомендуется избегать рукописных и необычных шрифтов, так как они часто плохо читаются с первого раза. Их допускается использовать для оформления каких-то акцентных деталей.

Правило 5: Иконки в едином стиле

Без них сложно обойтись, особенно в современном дизайне. Идеально, если есть возможность отрисовать индивидуальный сет иконок в едином стиле для конкретного проекта. Однако есть возможность использовать сет иконок, который был уже разработан кем-то. Существуют как платные, так и бесплатные сеты. Иногда они подразумевают возможность вноса изменений для лучшей кастомизации под конкретный проект. Но важно, чтобы стилистика была из одного сета. Иконки разных стилей в одном блоке создают эффект дешевого и непрофессионального дизайна.

Набор иконок

По возможности старайтесь использовать фотографии, а не иконки. На них пользователи заостряют внимание сильнее, чем на иконки, следовательно, конверсия будет чуть выше.

Правило 6: Покажите, что продаете

В дизайне сайта, если там продается какая-то материальная вещь, лучше продумать место для расположения видео и фото-галереи, чтобы все это гармонично смотрелось в дизайне. Показ продаваемого продукта способен значительно поднять конверсию, поэтому в дизайне важно предусмотреть отдельные блоки, куда можно было бы выложить фотографии и видео.

Правило 7: Предусмотреть “крючки захвата”

Под ними понимаются специальные виджеты, которые используются для обратной связи. Их редко разрабатывают под конкретный сайт, так как в основном пользуются уже готовыми решениями. В дизайн-макете они редко учитываются, но разработчику желательно установить эти виджеты на страницах, чтобы повысить конверсию. Главное, настроить виджет так, чтобы он не отвлекал пользователя звуком, всплывающими окнами.

Пример виджетов онлайн-консультантов

Помимо окна с онлайн-консультантом, под “крючками захвата” могут пониматься:

  • окошко с подпиской на рассылку;
  • предложение дополнительных скидок в обмен на контактные данные пользователя;
  • онлайн-калькуляторы;
  • формы для оформления и отправки заявки;
  • таймеры обратного отчета.

Эти компоненты желательно предусмотреть именно в дизайн-макете и разработать с нуля, а не пользоваться готовыми виджетами.

Правило 8: Использование “живых” фото и видео

“Живых” в смысле не с фотостоков, особенно, бесплатных. Такие фото и видео уже давно примелькались и вызывают скорее отторжение. Идеально, если есть возможность сделать фото товара или услуги вместе с счастливым покупателем. К таким материалам автоматически становится больше доверия. Если же такой возможности нет, то рекомендуется подбирать платные и максимально релевантные фото и видео со стоков.

Заключение

Вот такие выводы можно сделать о необходимости грамотного визуального оформления для повышения конверсии:

  • грамотно подобранные пробелы между элементами важны, так как помогают сделать нужные акценты и улучшить читаемость страницы;
  • предоставьте больше уникальной информации о товаре, особенно, авторские видео и фото;
  • грамотно подбирайте цвета и шрифты - лучше меньше, но гармонично;
  • иконки старайтесь держать в одном стиле для всего сайта;
  • по возможности размещайте крючки захвата: калькуляторы, таймеры, формы онлайн-консультанта;
  • не забывайте проводить аналитику сайта после внесения правок в дизайн и функционал.

На конверсию сильно влияет наполнение страниц и рекламная кампания, в то время как визуальное оформление можно сравнить с оберткой. Однако, если она сделана грамотно и внешне привлекательно, то это сделает рекламные кампании более эффективными, а ваше предложение более привлекательным.