Главная » Блог » Юзабилити и оптимизация конверсии » Топ-6 ошибок мобильной версии сайта, которые снижают его конверсию

Топ-6 ошибок мобильной версии сайта, которые снижают его конверсию

19.02.2020

Владислав Воронин, middle UX-дизайнер отдела CRO и аналитики Webpromo


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

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

В этой статье мы разберем 6 распространенных ошибок мобильной версии сайта, которые негативно влияют на его конверсию. И расскажем, как их избежать.

Содержание:

Ошибка 1. Плохая структура и логика размещения элементов интерфейса в шапке сайта.

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

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

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

Шапка не должна занимать слишком много места на первом экране. Ее «идеальная» высота составляет от 80px до 120px. Такой размер позволит компактно разместить необходимые элементы интерфейса и не перегрузить первый экран.

Ошибка 2. Отсутствие кнопки «Найти» в строке поиска.

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

Оказалось, что человек вводит запрос, но далеко не сразу понимает, что ему нужно сделать, чтобы вывести на экран результаты поиска. Сложнее всего разобраться с этим аудитории старше 40 лет.

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

Ошибка 3. Отсутствие кнопок целевого действия на первом экране.

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

Обычно это:

  • добавление товара в корзину;
  • совершение заказа;
  • вызов pop-up формы;
  • отправка заявок;
  • заказ обратного звонка.

Негативный эффект этой ошибки хорошо заметен при просмотре записей сессий в HotJar или тепловой карты скроллинга в Plerdy.

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

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

Ошибка 4. Плохая оптимизация контента.

Контент на сайте влияет на множество поведенческих факторов. Так, плохо оптимизированный контент:

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

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

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

Следует уменьшать и размер шрифта текста и заголовков. Например, если в десктопной версии сайта высота заголовков составляет 32px, то в мобильной стоит использовать 20px или 24px.

Ошибка 5. Медленная скорость загрузки страниц сайта.

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

Также медленная загрузка снижает эффективность поискового робота Google, поэтому на индексирование веб-страниц уходит больше времени.

Стратегическая цель любого сайта, которая влияет и на SEO, и на юзабилити, — загружаться быстрее сайта конкурентов.

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

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

  1. Использовать современные форматы изображений (Progressive JPEG, WebP).
  2. Включить Gzip-сжатие.
  3. Включить кеширование браузера.
  4. Использовать CDN.
  5. Использовать подходящий размер изображений.
  6. Удалить ресурсы, блокирующие отображения.
  7. Отложить загрузку неиспользуемого контента CSS.
  8. Сократить время ответа сервера (время до получения первого байта).
  9. Уменьшить размер кода JavaScript.
  10.  Уменьшить размер кода CSS.
  11.  Использовать CSS-спрайты.

Ошибка 6. Узкие баннеры на слайдерах.

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

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

Эту проблему решает создание отдельных баннеров для мобильной версии. Они должны быть больше по высоте, составляя как минимум 200-250px, а шрифт должен иметь высоту минимум 14px.

Избегайте перечисленных 6 ошибок мобильной версии вашего сайта при его проектировании — и он будет приводить вам новых клиентов!

Последние материалы рубрики

Как сделать карточку товара продающей

Как сделать карточку товара продающей: 10 простых советов

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

Как выжить бизнесу в условиях всемирной пандемии?

Как выжить бизнесу в условиях всемирной пандемии?

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

Как заказать пиццу и не сломать себе мозг

Как заказать пиццу и не сломать себе мозг: практические...

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

Как сделать редизайн интернет-магазина и увеличить...

Влияет ли редизайн интернет-магазина на конверсию и продажи? Однозначно да! Ищите доказательства в нашем кейсе для сайта гипермаркета...

Остались вопросы?
Наши эксперты готовы ответить на них

Свяжитесь по указанному ниже телефону с нашим менеджером или воспользуйтесь услугой «Перезвонить мне». Мы свяжемся с вами в ближайшее время.

Каждый участник — мастер своего дела
Ценю Webpromo за гибкость
Команда Webpromo, как продолжение нашего отдела маркетинга
Спокоен за продвижение своих проектов в интернете