Мобильная версия сайта: топ 5 ошибок

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

Рассказываем, какие допускаются чаще всего и что делать, чтобы не потерять львиную долю трафика.

Почему мобильная версия сайта — must have

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

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

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

Мобильная версия сайта: самые распространенные ошибки

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

Мелкий шрифт

Отличие смартфона даже с самой широкой диагональю от ПК в том, что мелкий шрифт читать неудобно. 10-12px, который часто ставят на десктопных версиях и по дефолту распространяют и на мобильную — некомфортный размер, который трудно воспринимать без прищура. Цветовые решения часто отличаются слабой контрастностью. Это хорошо смотрится на десктопной версии, но в сочетании с мелким текстом приводит к высокому показателю отказов. Вчитываться и вглядываться в экран никто не будет.

Оптимальный размер шрифта для мобильной версии — 14-18px.

Узкая область клика

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

Мобильная версия выстраивается по таким правилам:

• минимальный размер области для клика — 35рх;

• оптимальный — 50-60рх.

Кроме того, все интерактивные элементы должны быть крупными и контрастными.

Не мобильная версия сайта, а сжатие десктопной

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

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

Тяжеловесные видеоролики и анимации

Если пользователь пользуется корпоративным или домашним Wi-Fi, проблема может пройти незамеченной. Но мобильный трафик чаще всего работает намного медленнее, поэтому при попытке зайти на сайт из другого места, например — в транспорте, пользователь может столкнуться с проблемами.

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

То же касается анимации. Можно оптимизировать размер или упростить реализацию.

Укорачивание контента

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

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

Что рекомендуется сделать:

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

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

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