14 ошибок мобильной версии вашего сайта

Время чтения:15 минут

Когда компании создают версии продающего сайта для мобильных платформ, они часто допускают довольно досадные ошибки, которые ухудшают их конверсию. Сегодня более 50% всех пользователей серфят интернет с мобильных устройств. И это не считая YouTube, Instagram, Facebook и других ресурсов, у которых есть свои собственные приложения. Если вы не адаптировали свой сайт под «мобилки», то клиенту с вами будет неудобно, он с вами не останется. А при попытках подстройки вы можете допустить ошибки, которые будут препятствовать успешным сделкам. Исправьте их и это увеличит вашу конверсию. Давайте рассмотрим 14 самых частых ошибок при создании адаптивной версии сайта.

1. Неоптимизированные формы заказов

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

Вот как, например, это сделано на сайте Olprime:

1.png

Особенно плохо к заполнению многих строк данных относятся пользователи мобильных устройств. На современных сенсорных экранах в 4-6 дюйма заполнять поля просто неудобно. Поэтому они зачастую бросают это дело сразу же, даже не начав.

Предложите клиенту при первом контакте заполнить только самую необходимую информацию. Все остальное можно вывести на следующей странице или выяснить при личном разговоре с менеджером. Это действует на психологическом уровне: единый процесс делится на несколько этапов и легче дается. Клиент не путается и не видит нагромождений из полей. Да и если он уже успел заполнить 1-2 этапа, то бросить заполнение ему будет сложнее.

2. Контакты, которыми нельзя воспользоваться сразу

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

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

Вот как это может выглядеть:

пример-телефона-на-сайте.jpg

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

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

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

adobe-flash-player.jpg

А еще лучше: вообще не используйте flash-анимацию и любые flash-элементы. Они мало того, что нагружают страницы, так еще и в 2020 году Adobe прекратит поддержку flash. Добавляйте вместо них простую текстовую информацию, JPEG и PNG файлы. Вместо крутого анимированного меню, поместите что-то попроще. Вы потеряете в wow-эффекте, зато значительно повысите конверсию сайта, убрав с него кучу ошибок и не прогружающихся окон. Плюс ко всему вы выиграете в скорости загрузки, а это еще один из факторов, которые влияют на конверсию. Но об этом позже.

4. Отдельные неоптимизированные виджеты на сайте

Это инструменты, которые помогают повысить конверсию сайта: например, виджет для мгновенной связи с консультантом или pop-up, который на автомате делает дополнительное предложение. Но если они не будут адаптированы под мобильные устройства, то просто засорят адаптивную версию сайта, наоборот, снизив конверсию. Они будут перекрывать информацию, формы заказа и другие важные элементы. Или же растягивать страницу, делая ее нечитабельной.

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

5. Нечитабельный шрифт

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

  • Не используйте вычурные шрифты: Arial будет смотреться выгоднее, чем всем приевшийся Times New Roman.
  • Не используйте более трех шрифтов на одной странице. Обилие разных шрифтов рассеивает внимание клиента, а не концентрирует его на нужной вам информации, да и смотрится это не эстетично. Плюс ко всему, при использовании большого количества шрифтов падает скорость загрузки сайта.
  • Используйте оптимальный размер текста. Как для полной версии, так и для мобильной минимальный размер основного текста – 16px. Буквы меньшей высоты плохо читаются.
  • Используйте правильный межстрочный интервал, чтобы все не сливалось в мешанину текста. Оптимальный показатель – 1px.
  • Используйте отступы. Чтобы текст не «прилипал» к краям экрана, добавьте отступы слева и справа хотя бы в 15px.
  • Используйте правильные размеры кнопок и гиперссылок для touch-экранов. Помните, что на сенсорных устройствах попасть в маленькую кнопочку становится просто невозможно. Поэтому, чтобы ваш клиент не убежал от вас после нескольких попыток попасть по желаемой ссылке, настройте их под стандартные размеры кликабельных элементов:
    • минимальный – 26px
    • оптимальный – 34px
    • идеальный – 44px

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

6. Долгая загрузка страницы

Вот теперь поговорим о скорости загрузки страницы. Качественная адаптивная версия сайта загружается за 3 секунды! Ориентируйтесь на этот показатель. Все, что больше, снижает вашу конверсию. По статистике каждая дополнительная секунда уменьшает конверсию на 3-7%, а 10 секунд отнимут у вас 20-40%! Поэтому не гонитесь за красотой, которая перегрузит вашу страницу и увеличит время загрузки.

4.gif

Чтобы понять, как быстро грузится ваша адаптивная страница, используйте в помощь эти сервисы:

  • Which Loads Faster? ‒ англоязычный ресурс, который помогает не только определить время загрузки вашего сайта, но и сравнить скорость с конкурентами.
  • Pingdom ‒ помогает понять, что конкретно следует переработать, показывая скорость загрузки и вес вашей страницы.
  • Load Impact ‒ а этот ресурс позволет понять, как ведет ваш сайт при разном количестве пользователей на нем.
  • Neustar ‒ на этом сайте помимо анализа всей страницы и можно проанализировать каждый отдельный блок.
  • Google PageSpeed Insights ‒ русскоязычный сервис, на котором вы можете протестировать свой сайт и увидеть результат в баллах в соответствии со стандартами Google.

7. Невозможность перехода на полную версию сайта в один клик и неправильная переадресация

Для правильной адаптации вашего сайта нужно настроить его так, чтобы он определял, с какого устройства зашел ваш клиент и верно направлял его на нужную страницу. Если этого не сделать, то может возникнуть ситуация, когда посетитель перешел к вам по ссылке на товар с Facebook или ВКонтакте, но редирект, определив, что он с мобильного устройства, направляет его на настроенную вами адаптивную версию главной страницы. То есть он вроде бы сделал все правильно, но недостаток в тестировании, не позволяет ему видеть желанную информацию. Чтобы этого избежать, настройте редирект таким образом, чтобы пользователь попадал на нужные страницы в подходящей для него версии сайта. Ну и для полноты картины поместите в подвал сайта возможность перехода на полную и мобильную версию сайта – это позволит пользователям планшетов и нетбуков с разными диагоналями (которые обычно распознаются как мобильники) подбирать более удобную для себя версию сайта.

8. Отсутствие автозаполнения полей

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

Чтобы настроить автозаполнение, пропишите в HTML-код:

Поле E-mail – input type=«email»

Поле Телефон – input type=«tel»

Поле Адрес – input type=«text»

Поле Индекс, номер карты – input type=«text» pattern=»\d*»

Поле Дата – input type=«date»

Поле Кнопка «Отправить» – input type= «submit»

9. Ошибка 404 с мобильных устройств

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

5.jpg

10. Отсутствие аналитики мобильных пользователей

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

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

11. Неправильно настроенный мета-тег viewport

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

12. Непродуманный дизайн мобильной версии

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

6.jpg

13. Неоптимизированный мультимедийный контент

Тяжелые картинки и длинные видео заметно снижают время загрузки сайта. Дважды подумайте, нужно ли вам это в версии для мобильных платформ. Как вы помните, чем быстрее грузит сайт, тем выше конверсия (3 секунды – ваш идеал!). Поэтому оптимизируйте весь контент на странице и упростите жизнь ваших клиентов. Чтобы этого достичь постоянно тестируйте его и не жалейте о выкинутых элементах. В помощь вам специальные сервисы, которые покажут, насколько хорошо оптимизирован ваш сайт, например, Optimizilla.

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

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

  1. Более высокие позиции в поисковых системах – алгоритмы поисковиков настроены на удобство пользователей. Поэтому они поднимают в выдаче сайты, у которых есть мобильная версия. А ресурсы без нее опускаются ниже.
  2. Универсальность и независимость от определенно устройства – мобильная версия, в отличие от адаптивной сама корректирует вид под любую диагональ. Вам не придется настраивать корректные размеры картинок и текстов под каждый размер экрана. Сайт сам подстроится под пользователя.

Как и со всеми элементами, о которых мы рассказывали выше, мобильную версию нужно тестировать – лучше все перепроверить, прежде чем пускать в дело.

Вместо заключения

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

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!