+7-913-236-37-37 Корзина 0

#Идеальный отдел продаж#Посты

Как дизайн вашего сайта влияет на продажи — и как сделать его лучше

9 августа 2021 Школа Продашь! 314

Насколько важен дизайн вашего сайта? Фактически, с ним связаны 94% первых впечатлений посетителей о бизнесе в целом. Хорошо спроектированный сайт может увеличить продажи, неудачный — отпугнуть клиентов.

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

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

Адаптивный дизайн

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

По статистике, 37% посетителей с большей вероятностью купят на сайте с адаптивным дизайном. Это подтверждают исследования Google: 61% пользователей не вернутся на сайт, который плохо выглядит и функционирует на смартфоне, 40% вместо этого уйдут к конкурентам.

Как отображаются на смартфоне сайты без адаптивного дизайна и с ним
Как отображаются на смартфоне сайты без адаптивного дизайна и с ним. Слева сложно что-то прочитать и тем более попасть в нужный раздел.

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

Негативное пространство

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

По данным HubSpot, 38% пользователей перестают взаимодействовать с сайтом, если сталкиваются с непривлекательным контентом. То есть вы можете потерять больше трети потенциальных клиентов из-за дизайна, какими бы качественными ни были ваши продукты и услуги. В исследовании SWEOR одним из критериев неэффективности сайта признали как раз загруженность (еще одним — отсутствие вменяемой навигации, но об этом чуть позже).

Загруженность сайта, пример
Фоновая картинка, миллион фотографий, кликабельная реклама на полях — тяжеловато. Плюс одно неверное движение — и вы на странице товара, который не планировали покупать
Пример использования негативного пространства
Сайт Apple — отличный пример использования негативного пространства

Негативное пространство — основа современного дизайна. Оно делает ваш сайт чистым и позволяет посетителям сосредоточиться на важной информации.

«Охотники за продажами. Типы клиентов»

Охотники за продажами. Типы клиентов

В игре участники узнают о различных типах клиентов и отработают технику идеальных презентаций.

Подробнее

Внятная навигация

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

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

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

Частые ошибки в навигации
Частые ошибки в навигации
Пример навигации «хлебные крошки»
Хорошее решение для интернет-магазина — навигация «хлебные крошки». Она показывает путь от главной страницы до той, на которой сейчас находится пользователь

Качественная графика

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

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

Пример устаревшей верстки
Шрифты а-ля Word Art, вырвиглазное сочетание цветов, нелепо обработанные фото, устаревшая верстка — такого не заслуживает даже сайт секонд-хенда
Пример качественной графики на сайте
Классные иллюстрации, анимация при наведении, качественные фото — и все хорошо с негативным пространством, заметили же?

Заметный CTA. Но не слишком заметный

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

Если ваши призывы к действию не выделяются на странице или не подсказывают, как действовать дальше, вы можете упустить потенциального клиента. Если они чересчур оригинальные — оттолкнуть. Хороший CTA легко заметить, и он дает подробное описание того, что происходит. Например, не «Нажмите здесь», а «Нажмите, чтобы получить бесплатный пробник».

Качественная графика, но не очень заметный CTA
Качественная графика, но не очень заметный CTA
Сравните CTA на кнопках слева и справа
Сравните CTA на кнопках слева и справа

Термины

Конверсия сайта — выполнение любого целевого действия на сайте. Например: заказ звонка, заявка на сайте, написание целевого комментария и т.д.

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

Еще термины

Понятные формы обратной связи

Онлайн-программа обратной связи с клиентами — это прекрасно. Но как же сильно здесь можно нафакапить. Например, посетитель хочет отправить сообщение, заполняет все поля, жмет кнопку и видит алерт «вы неверно ввели имейл». А что, сразу проверить было нельзя? Это называется валидацией, и она нужна обязательно.

А вот еще классный пример — форма с квинтиллионом полей, которые явно не обязательные, но их сделали обязательными. Типа отчества или скана паспорта твоей собаки.

Рецепт испорченной формы обратной связи
Рецепт испорченной формы обратной связи от диджитал-агентства ADN. Шаг один — добавляем побольше полей. Шаг два — делаем их обязательными

Айсберги и верхушки

Мы затронули лишь небольшую часть того, что может быть не так с дизайном сайта. А про каждый пункт реально написать отдельную статью. Но теперь вы точно знаете, на что стоит обратить внимание в первую очередь — и что инвестиции в дизайн помогут увеличить продажи. Красивый и удобный сайт произведет хорошее первое впечатление на вашу целевую аудиторию и сохранит ее интерес. (Не экономьте на дизайнерах)

Поделиться
Комментарии 0
Пишем полезные
шпаргалки по продажам
каждую неделю

5 веских причин подписаться на нашу рассылку

Полезные шпаргалки
по продажам каждую неделю

Нажимая на кнопку «Подписаться», вы даете согласие на обработку своих персональных данных.

Настольная бизнес-игра
Охотники за продажами. Возражения

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

Перейти

Написать в WhatsApp