{"id":14289,"url":"\/distributions\/14289\/click?bit=1&hash=892464fe46102746d8d05914a41d0a54b0756f476a912469a2c12e8168d8a933","title":"\u041e\u0434\u0438\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u043f\u0440\u043e\u0434\u0430\u0436\u0438 \u043d\u0430 5%, \u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0439 \u0447\u0435\u043a \u2014 \u043d\u0430 20%","buttonText":"","imageUuid":""}

Почему покупателям не нравится ваш сайт: 5 главных проблем

На связи Александр Степанов, руководитель Digital-агентства полного цикла “Yti Marketing”. Сегодня поделюсь с вами нюансами, которые следует исправить в дизайне и юзабилити, ведь ошибки могут свести на нет труд маркетолога.

Ошибка №1: Нет мобильной версии

Факт! За 9 месяцев 2022 года процент мобильного трафика составил около 90%.

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

Более того, мобильная версия повышает ранжирование сайта в поисковиках Яндекс и Google.

Если есть знания, время и навыки, можно создать мобильный сайт самостоятельно. Если хотите 100% результата — заручитесь поддержкой digital-агентства.

Мобильную версию можно сделать с помощью конструктора или CMS-системы. Конструкторы просты в использовании, поэтому каждый может их освоить. Самые топовые — Tilda, Wix, uKit.

Ошибка №2: Трудный путь к покупке

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

В маркетинге есть понятие Customer Journey Map (CJM) — карта клиентского пути. Здесь указаны все шаги к покупке и моменты взаимодействия человека с сайтом.

Есть 2 варианта обозначить слабые места у CJM:

Вариант №1. Самостоятельно пройдите путь клиента, заполните карту. Если есть возможность, привлеките пользователей, чтобы они протестировали CJM.

Вариант №2. Проверьте качество CJM через «Яндекс.Метрику». Через показатели конверсии вы определите проблему. Для определения причин, воспользуйтесь «Вебвизор» или тепловыми картами.

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

Ошибка №3: чрезмерное количество информации

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

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

Главным вопросом должен быть: «Можно ли сделать ещё проще?» Элементы обязаны быть логически сгруппированы — и структурно, и визуально.

Ошибка №4: Оригинальность

Возможно, удивим вас, но оригинальность не всегда есть хорошо. Особенно это касается веб-разработки: чрезмерные креатив может сбить клиента с толку.

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

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

Ошибка №5. Нет дизайн-системы

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

Оформление сайта - это единая цветовая схема. К примеру, если кнопка «Купить» на имеет различный цвет, человек будет сомневаться — одинаковую ли функцию выполняют эти кнопки. В результате он может отказаться от покупки.

Пример удачного сочетания цветов сайта

5 рекомендаций от Yti по улучшению дизайна сайта

№1. Качественные фото.

Исследования Baymard доказали, что 57% пользователей сначала смотрят на фото. Шаблонные фото надоели людям. А вот на авторских фотоматериалах они остановят свой взгляд. Не экономьте на визуалах: фото должны быть высокого качества, чтобы завоевать у ЦА лояльность.

№2. Оптимальное количество шрифтов и цветов.

Максимум на сайте должно быть не более 3 шрифтов, а для визуала — 3-5 оттенков. Иконки должны быть в едином стиле.

№3. Грамотно подбирайте цвета.

🟥 Красный — призыв к действию

🟧 Оранжевый – срочность

🟦 Синий — цвет стабильности.

🟩 Зелёный — экотема и здоровье.

🟪 Розовый и фиолетовый — красота.

№4. Верная CTA-кнопка (кнопка призыва к действию).

Размер, содержание, размещения на ресурсе - от всего зависит, купит ли пользователь продукт. Для определения лучшего варианта в помощь A/B-тестирование.

№5. Отрицательное пространство.

Расположите данные на сайте блоками, делайте достаточные пробелы между строками, выдерживайте расстояния между элементами — пространство должно «дышать», а текст - легко читаться.

Понравилась статья? Буду рад вашему лайку❤

Хотите заказать аудит юзабилити сайта у специалиста? Напишите мне в чат или оставьте заявку на сайте:

0
17 комментариев
Написать комментарий...
Виктор Петров

У вашего сайта нет мобильной версии. Используйте конструкторы Тильды и Викс.
Отличная шутка.

Ответить
Развернуть ветку
Мсье Пердю

Крайне полезная статья!! Говорю, как UX дизайнер!

Ответить
Развернуть ветку
Евгений Голубев

Это высер хромого и слепого

Ответить
Развернуть ветку
Иннокентий Фефилов

Вернули мне мой 2007-й.

Ответить
Развернуть ветку
Виктор Петров

Табличная вёрстка, флэш, Comic Sans Serif, эпилептические гифки, хаки под IE?
Ну нафиг.
Хотя, конешное дело, интересный дизайн тогда найти было всё таки попроще. Не было этой унификации, как сейчас со всем подряд.

Ответить
Развернуть ветку
Иннокентий Фефилов

Советы древние.

Ответить
Развернуть ветку
Александр Степанов
Автор

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

Ответить
Развернуть ветку
Игорь Горбунов

Я не плачу, просто 2007 год в глаза попал

Ответить
Развернуть ветку
Евгений Голубев

Эту статью написали те, у кого всратый сайт на тильде/виджеты "перезвоним"..../беда с дизайном, красный на синем (запрещенное/конфликтное/нечитаемое сочетание цветов)

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

В том время как у самих мобильная версия равноценна говну)))
Заголовки размером почти такие же как и обычный текст. И оба текста мизерные. Никакой сетки. Никакой композиции. Все набросано в кучу "напохер"

"А ты точно разработчик?"

Ответить
Развернуть ветку
Евгений Голубев
Ответить
Развернуть ветку
Евгений Голубев

"Ошибка №5. Нет дизайн-системы"

- Александр, Саша, Сашенька, Шура. Ты понимаешь как ты обосрался выкатив эту "статью" имея такой убогий сайт?)

У вас у самих нет абсолютно никакой дизайн системы) Зачем вы это пишете?

Ответить
Развернуть ветку
Александр Степанов
Автор

Добрый вечер, Евгений! Вы видите прежний дизайн сайта. Мы не стоим на месте, так как в настоящее время запущен процесс редизайна, вследствие чего мы собрали базовые рекомендации и решили поделиться.

Ответить
Развернуть ветку
Евгений Голубев

Да-да-да. Эту хурму все с десяток раз слышали. "А запостим ка мы правильные слова, будучи сами хромыми".

Это называется "Сапожник без сапог".

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

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

Отмазывайся дальше и ссы в уши всем какие вы крутые))

Ответить
Развернуть ветку
Danil Kutny

Я с помощью ИИ стал заполнять сайты как по конвейеру. Ну об этом итак все знают и грех этом не пользоваться. Мне ИИ подошел и для написания рекламны, smm, бизнес работы в соц сетях, я даже улучшил английский использую карточки. Вот хорошая аналитика, там описаны основные инструменты ИИ, так что я думаю ИИ сильно поможет с заполнением и seo продвижением сайта
https://vc.ru/u/1766003-danil-kutny/793731-iskusstven..

Ответить
Развернуть ветку
Виктор Петров

Знал парня, который отвёрткой в носу ковырял. И этим бравировал.
Ссылки нет, он не дожил до vc.

Ответить
Развернуть ветку
under construction

судя по количеству ИИ на квадратный сантиметр комментарий писал ИИ

Ответить
Развернуть ветку
Tjom

Мобильный сайт у них, конечно, огнище! Прям по всем принципам свёрстан!

Ответить
Развернуть ветку
14 комментариев
Раскрывать всегда