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

Ошибки сайтов

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

Рассказываем, какие проблемы на лендингах и интернет-порталах сильнее всего снижают конверсию из посетителей в клиентов и мешают вам зарабатывать.

Содержание статьи
  • Ошибка №1. Отсутствие мобильной версии
  • Ошибка №2. Сложный путь к покупке
  • Ошибка №3. Избыток информации
  • Ошибка №4. Оригинальность
  • Ошибка №5. Отсутствие дизайн-системы
  • 5 способов улучшить дизайн сайта
  • Выводы

Ошибка 1. Отсутствие мобильной версии

Пользователи всё чаще совершают покупки со смартфонов. Согласно подсчетам технических специалистов SlickJump, за 9 месяцев 2022 года доля мобильного трафика в рунете достигла 90%. Отсутствие мобильной версии сайта в лучшем случае создаст неудобства для посетителя, в худшем — сподвигнет искать ресурс, которым удобно пользоваться со смартфона или планшета. Кроме того, мобильная версия улучшает ранжирование сайта в поисковой выдаче Яндекс и Google.

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

  • Адаптивный дизайн. При использовании этого подхода элементы сайта будут подстраивается под размер экрана устройства, обеспечивая максимальное юзабилити для пользователей.
  • Отдельная версия сайта для мобильных устройств. При этом сценарии создаются два отдельных сайта, они работают под разными доменами. Пример: vk.com и m.vk.com.
  • Мобильное приложение. Самостоятельный продукт, который функционирует наряду с сайтом и обслуживается отдельно. Это самый дорогой вариант, поэтому его используют преимущественно крупные компании и маркетплейсы.

При наличии ресурсов и знаний мобильный сайт можно сделать самостоятельно. Более надёжный вариант — обратиться в digital-агентство. Мобильную версию сайта можно создать в конструкторе или CMS-системе. Конструкторы просты в использовании, поэтому подходят для непрофессионалов. Самые популярные — Tilda, Wix, uKit. 

CMS-системы, такие как WordPress или Webasyst, предоставляют больше опций, но это вариант для тех, кто разбирается в технологиях или готов потратить бюджет на разработчиков.

Ошибка 2. Сложный путь к покупке

Современные пользователи привыкли к тому, что покупки можно делать в один клик. Длинные анкеты, требования завести личный кабинет, подтвердить почту и прочие действия — частая причина отказа от покупки.

В маркетинге есть такое понятие, как Customer Journey Map (CJM) — карта клиентского пути. Её можно создать самостоятельно в виде таблицы или инфографики, расписав все шаги к покупке и детали взаимодействия пользователя с сайтом. Подробнее о том, как это сделать.

Есть два способа выяснить, какие слабые места есть у вашего CJM:

  • Способ 1. Пройдите путь клиента лично и заполните карту. Если есть возможность, привлеките потенциальных покупателей, чтобы они помогли вам протестировать CJM.
  • Способ 2. Оцените качество CJM с помощью «Яндекс.Метрики». По отчёту конверсии вы установите факт наличия проблемы. Для установления причин, поможет «Вебвизор» или тепловые карты и аналитика форм, если они доступны (зависит от механики авторизации на ресурсе).

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

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

Ошибка 3. Избыток информации

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

Почему сайт плохой
Главная страница сайта ARNGREN. Перегруженная панель навигации, избыток изображений и отсутствие структуры могут оттолкнуть посетителей

Именно поэтому в стилистике оформления популярен минимализм. А бегущие строки, множество баннеров и несколько всплывающих форм — всё это признаки устаревшего сайта. В текстах следует стремиться к лаконичности, количество элементов должно быть ровно столько, сколько требует проект — без излишеств. Всегда задавайте себе вопрос: «Можно ли сделать ещё проще?» Элементы должны быть логически сгруппированы — как структурно, так и визуально. А для того чтобы узнать, как именно их сгруппировать, нужно исследовать целевую аудиторию. Один из вариантов — используя возможности МТС Исследований.

Проблемы конверсии
Главная страница интернет-магазина МТС. Пример лаконичного, структурированного дизайна страницы.

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

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

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

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

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

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

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

Продуманная дизайн-система обеспечит единообразие оформления и избавит от проблем с юзабилити.

Ошибки юзабилити
Пример удачного сочетания цветов в оформлении сайта косметики Lancome

5 способов улучшить дизайн сайта

  • Качественные изображения. Исследование Baymard показало, что 56% посетителей сайта в первую очередь обращают внимание на фото. Не берите шаблонные картинки, они скучны и неинтересны пользователям. Намного лучше работают авторские фотоматериалы. Не экономьте на визуалах: фотографии должны быть высокого качества, чтобы вызвать положительный отклик у целевой аудитории.
  • Оптимальное количество шрифтов и цветов. Для текстовой информации на сайте используйте не более трёх шрифтов, для визуала — три-пять цветов. Иконки делайте в одном стиле.
  • Грамотно выбирайте цвета: красный — призыв к действию, оранжевый – срочность, синий — цвет стабильности, зелёный — экотема и здоровье, розовый и фиолетовый — красота. Удачные сочетания подбирайте по цветовому кругу, например, здесь.
  • Правильная CTA-кнопка (кнопка призыва к действию). От её размера, содержания и размещения на странице зависит, произойдёт ли конверсионное действие. Найти лучший вариант поможет A/B-тестирование.
  • Отрицательное пространство. Размещайте информацию на сайте блоками, делайте достаточные пробелы между строками, выдерживайте расстояния между элементами — пространство должно «дышать», текст легко читаться.

Выводы

Если конверсия сайта низкая, анализируйте «Яндекс.Метрику»: прежде всего изучите отчёты о посещаемости и выполнении заданной цели. Определите, на каком этапе пользователи уходят с сайта и оптимизируйте его.

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

  • Анкетирование через SMS работает следующим образом: респонденту приходит сообщение с приглашением принять участие в опросе. За прохождение опроса можно предложить аудитории скидку или промокод. Абонент переходит по ссылке, попадает в анкету и отвечает на вопросы. Вопросы могут быть разного типа: закрытые и открытые, с вариантами ответов, табличного типа.
  • Анкету можно отправить по вашей базе контактов, а можно собрать сегмент для рассылки с помощью таргетингов от Big Data МТС. В среднем на такой опрос откликается около 2,5% респондентов.
  • В финале вы получаете файл в формате Excel, SPSS, csv или презентацию с результатами исследования. Информация покажет, где есть проблемы и с чем нужно работать.

Подробнее об этом и других видах исследований читайте на странице МТС Исследований.

МТС МаркетологТаргетированные SMS-рассылки,
реклама в соцсетях, баннеры,
CPA-реклама и programmatic
О сервисеТаргетированные SMSSMS по своей базе PROТаргетированный обзвонБаннерная рекламаРеклама в соцсетяхProgrammatic-рекламаCPA-рекламаИсследованияRCSБлогСправкаКонтактыРаскрытие информацииДокументы ПАО «МТС»Политика обработки cookiesКомплаенс и деловая этика