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

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

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

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

Больше материалов в https://t.me/avsoln

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

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

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

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

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

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

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

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

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

Пример использования негативного пространства — Сайт Apple — отличный пример использования негативного пространства

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

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

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

Подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Термины

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

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

Ещё термины

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

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

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

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

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

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

Классные видеоотрывки, которые помогают продавать больше, в нашем телеграм-канале.

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

Наши бизнес-игры