Топ-6 ошибок мобильной версии сайта, которые снижают его конверсию
19.02.2020
Редакция: Ольга Коцофане. Автор: Владислав Воронин
Прежде чем разбирать заявленные 6 ошибок мобильной версии сайта, разберемся, зачем она вообще нужна. Согласно последним данным, доля тех пользователей, которые заходят в интернет с мобильных устройств, превышает долю тех, кто заходит с ПК, в 3 раза. И все они ожидают увидеть удобный и информативный сайт, который максимально похож на свою десктопную версию.
Но допустим, у вас есть мобильная версия сайта. Почему же тогда она плохо конвертирует? Скорее всего, дело в ошибках, которые были допущены при ее создании. Пользователи испытывают трудности при поиске информации на сайте, при нажатии CTA-кнопок, при загрузке страниц и пр.
В этой статье мы разберем 6 распространенных ошибок, на которые нужно проверить мобильную версию сайта. Они негативно влияют на конверсию ресурса, поэтому их нужно избегать.
Содержание:
- Ошибка 1. Плохая структура и логика размещения элементов интерфейса в шапке сайта.
- Ошибка 2. Отсутствие кнопки «Найти» в строке поиска.
- Ошибка 3. Отсутствие кнопок целевого действия на первом экране.
- Ошибка 4. Плохая оптимизация контента.
- Ошибка 5. Медленная скорость загрузки страниц сайта.
- Ошибка 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. Он также подскажет, что сделать, чтобы повысить скорость загрузки на любых устройствах:
- Использовать современные форматы изображений (Progressive JPEG, WebP).
- Включить Gzip-сжатие.
- Включить кэширование браузера.
- Использовать CDN.
- Использовать подходящий размер изображений.
- Удалить ресурсы, блокирующие отображения.
- Отложить загрузку неиспользуемого контента CSS.
- Сократить время ответа сервера (время до получения первого байта).
- Уменьшить размер кода JavaScript.
- Уменьшить размер кода CSS.
- Использовать CSS-спрайты.
Ошибка 6. Узкие баннеры на слайдерах.
Часто мобильная версия сайтов страдает от некорректности отображения баннеров на слайдерах. Чаще всего они получаются слишком узкими, а информацию на них практически невозможно прочесть. Это происходит из-за использования баннеров для десктопной версии, которые просто пропорционально уменьшили.
Очевидно, что экраны телефонов не такие большие, как экраны компьютеров или планшетов. Именно поэтому изображения, которые хорошо смотрятся в десктопной версии, будут плохо выглядеть в мобильной.
Эту проблему решает создание отдельных баннеров для просмотра с гаджета. Они больше по высоте — как минимум 200–250px, а шрифт должен иметь высоту минимум 14px.
Избегайте перечисленных 6 ошибок мобильной версии вашего сайта при его проектировании — и он будет приводить вам новых клиентов!
