15 ошибок мобильной версии вашего сайта
При создании адаптивной версии для мобильных платформ вашего продающего сайта, многие из предпринимателей допускают довольно досадные ошибки, которые ухудшают вашу конверсию. Сегодня более 50% всех пользователей серфят интернет с мобильных устройств. И это не считая YouTube, Instagram, Facebook и другие ресурсы, у которых есть свои собственные приложения на мобильные телефоны и планшеты. Если вы не адаптировали свой сайт под «мобилки», то клиент просто не останется с вами из-за банального неудобства. И даже если вы все же адаптировали свой сайт для них, вы могли допустить ошибки, которые будут препятствовать успешным сделкам. Исправьте их и это увеличит вашу конверсию. Давайте рассмотрим 15 самых частых ошибок при создании адаптивной версии сайта.
1. Неоптимизированные формы заказов
Помните ‒ чем проще, тем лучше. Пользователи ленивы, поэтому требуя как можно меньше информации сначала, вы тем самым повышаете ваши шансы, что клиенты останутся с вами. А если вам все же необходимо заполнения большого количества данных, то разделите их ввод на несколько частей.
Вот как, например, это сделано на сайте Olprime:
Особенно плохо к заполнению многих строк данных относятся пользователи мобильных устройств. На современных сенсорных экранах в 4-6 дюйма заполнять поля просто неудобно. Поэтому они зачастую даже не начинают и бросают это дело сразу же.
В начале предложите клиенту заполнить только самую необходимую информацию. Все остальное можно вывести на следующей странице или выяснить при личном разговоре с менеджером. Это действует на психологическом уровне: единый процесс делится на несколько этапов и дается он легче. Клиент не путается и не видит нагромождение из полей. Да и если он уже успел заполнить 1-2 этапа, то дальше бросить заполнять ему будет сложнее.
2. Контакты, которыми нельзя воспользоваться сразу
В современном мире пользователь должен иметь возможность мгновенно связаться с вами самым удобным для него способом. И каждый из этих способов должен быть доступен практически в один клик. Одна из частых ошибок ‒ это размещать свои номера в формате картинок. Такое не следует допускать даже в полной версии сайта, ведь вы лишаете возможности удобно скопировать номер телефона, вставить его в набор номера и сразу же позвонить. Если клиенту придется постоянно переключаться между вкладками, то он уйдет от вас. Поэтому пишите свои контакты только текстом. На мобильных устройствах номера телефонов будут кликабельны и это значительно облегчат жизнь вашему клиенту.
Также будьте в тренде: вы наверняка знаете о существовании мессенджеров и о том, насколько они популярны во всем мире. Поэтому обязательно начните пользоваться (если еще не начали) теми мессенджерами, в которых присутствует ваша целевая аудитория, и разместите ссылки на ваши контакты в них на вашей мобильной версии сайта.
Вот как это может выглядеть:
Кликнув на эту кнопку, пользователь сразу же попадет в чат с вашей компанией. Помните, он не должен быть мертвым! Обязательно определите менеджера, чтобы он отвечал на вопросы ваших клиентов, либо установите и настройте бота, чтобы он смог направить их куда вам нужно. Используйте сервисы и программы, чтобы установить такие кнопки. Для этого подойдет, например, Chatfuel.
3. Контент, невоспроизводимый на мобильных устройствах
Среди такого количества разных устройств, никогда не знаешь с какого именно зайдет ваш клиент к вам на сайт. И все они поддерживают разные форматы, а некоторые вообще не поддерживают. Поэтому постарайтесь упростить адаптивную страницу насколько это возможно и не добавляйте элементы, которые могут не отображаться на мобильных устройствах. Так, например, Flash-анимация не работает на «яблочных» устройствах и вместо нужной информации, клиент увидит это:
Не используйте Flash-анимацию: вставляйте вместо нее простую текстовую информацию, JPEG и PNG файлы. Вместо крутого анимированного меню, поместите попроще. Вы потеряете в эффектности сайта, зато значительно повысите конверсию сайта, убрав с него кучу ошибок и не загрузившихся окон. Плюс ко всему вы выиграйте в скорости загрузки, а это еще один из факторов, которые влияют на конверсию. Но об этом позже.
4. Неоптимизированные отдельные виджеты на сайте
Инструменты подобного плана помогают повысить конверсию сайта за счет, например, виджета для мгновенной связи с консультантом или pop-up, который на автомате делает дополнительное предложение. Но если они не будут адаптированы под мобильные устройства, то будут просто засорять адаптивную версию сайта, наоборот снижая конверсию. Они будут перекрывать информацию, формы заказа и другие важные элементы. Или же растягивать страницу, делая ее нечитабельной.
Прежде чем запускать сайт ‒ протестируйте его на всех платформах. Проверьте его от и до, ведь иногда бывает так, что то, что прекрасно работает на компьютере, некорректно отображается на мобильных или планшетах. Настройте все ваши виджеты, а если не можете это сделать (или на это нет времени, если все надо делать срочно), то просто удалите их и замените простыми элементами – так вы выиграете себе время и не снизите конверсию. Но потом обязательно верните их с правильной настройкой.
5. Нечитабельный шрифт
Большая часть всей важной информации, триггеров и призывов к действию будут передаваться через текст. Поэтому ему тоже уделите внимание:
● Не используйте вычурные шрифты: Arial будет смотреться выгоднее, чем всем приевшийся Times New Roman.
● Не используйте более 3-х шрифтов на одной странице. Обилие разных шрифтов рассеивает внимание клиента, а не концентрирует его на нужной вам информации, да и смотрится это не эстетично. Плюс ко всему, при использовании большого количества шрифтов падает скорость загрузки сайта.
● Используйте оптимальный размер текста. Как для полной версии, так и для мобильной версии минимальный размер основного текста – 16px. Буквы меньшей высоты плохо читаются.
● Используйте правильный межстрочный интервал, чтобы все не сливалось в мешанину текста. Оптимальный показатель – 1px.
● Используйте отступы. Чтобы текст не «прилипал» к краям экрана, добавьте отступы слева и справа хотя бы в 15px.
● Используйте правильные размеры кнопок и гиперссылок для touch-экранов. Помните, что на сенсорных устройствах попасть в маленькую кнопочку становится просто невозможно. Поэтому, чтобы ваш клиент не убежал от вас после нескольких попыток попасть по желаемой ссылке, настройте их под стандартные размеры кликабельных элементов:
o минимальный – 26px
o оптимальный – 34px
o идеальный – 44px
Эти стандарты в свое время были выведены такими гигантами индустрии, как Apple и Microsoft, поэтому доверять им можно.
7. Низкая скорость загрузки страницы
А теперь поговорим о скорости загрузки страницы. Качественная адаптивная версия сайта загружается за 3 секунды! Поэтому ориентируйтесь на этот показатель. Все что больше снижает вашу конверсию. По статистике каждая дополнительная секунда уменьшает конверсию на 3-7%, а целых 10 секунд отнимут у вас 20-40%! Поэтому не гонитесь за красотой, которая перегрузит вашу страницу и увеличит время загрузки.
Для того, чтобы понять, как быстро грузится ваша адаптивная страница, используйте в помощь эти сервисы:
● Which Loads Faster? ‒ англоязычный ресурс, который помогает не только определить время загрузки вашего сайта, но и сравнить скорость с конкурентами.
● Pingdom ‒ помогает понять, что конкретно следует переработать, показывая скорость загрузки и вес вашей страницы.
● Load Impact ‒ а этот ресурс позволет понять, как ведет ваш сайт при разном количестве пользователей на нем.
● Neustar ‒ на этом сайте помимо анализа всей страницы и можно проанализировать каждый отдельный блок
● Google PageSpeed Insights ‒ русскоязычный сервис, на котором вы можете протестировать свой сайт и увидеть результат в баллах в соответствии со стандартами Google
8. Невозможность перехода на полную версию сайта в один клик и неправильная переадресация
Для правильной адаптации вашего сайта, вам необходимо настроить его так, чтобы он определял с какого устройства зашел ваш клиент и верно направлял его на нужную страницу. Если этого не сделать, то может возникнуть ситуация, когда посетитель перешел к вам по ссылке на товар с Facebook или ВКонтакте, но редирект, определив, что он с мобильного устройства, направляет его на настроенную вами адаптивную версию главной страницы. То есть он вроде бы сделал все правильно, но недостаток в тестировании, не позволяет ему видеть желанную информацию. Чтобы этого избежать, настройте редирект таким образом, чтобы пользователь попадал на нужные страницы в подходящей для него версии сайта. Ну и для полноты картины поместите в подвал сайта возможность перехода на полную и мобильную версию сайта – это позволит пользователям планшетов с разными диагоналями (которые обычно распознаются как мобильники) подбирать более удобную для себя версию сайта.
9. Отсутствие автозаполнения полей
Еще одним очень эффективным средством для повышения конверсии сайта является функция автозаполнения. Наверняка ваш клиент уже где-то заполнял свои данные (а они чаще всего одни и те же на всех сайтах: имя/фамилия, электронная почта, номер телефона или банковские данные). Это позволит пользователю в один клик заполнить все стандартные поля, что ускорит дальнейший процесс и оставит о вас приятное впечатление. Вы ведь помните, что пользователи интернета ленивы по своей сути? Вот и потакайте их желаниям упростив им нудный процесс заполнения полей.
Чтобы настроить автозаполнение, пропишите в HTML-код:
Поле E-mail – input type=«email»
Поле Телефон – input type=«tel»
Поле Адрес – input type=«text»
Поле Индекс, номер карты – input type=«text» pattern=»d*»
Поле Дата – input type=«date»
Поле Кнопка «Отправить» – input type= «submit»
10. Ошибка 404 с мобильных устройств
Ошибка 404 ‒ очень раздражает клиента. Вы смогли его заинтересовать, но тут же теряете его из-за того, что он просто не может зайти к вам на сайт. Чаще всего такое случается, когда пользователь пытается зайти с мобильного устройства на полную версию ресурса. Если во время тестов такое произошло, то поменяйте алгоритмы, чтобы каждый смог зайти с любого устройства на любую версию сайта. Ну а на случай непредвиденных проблем грамотно оформите страницу ошибки: поместите на ней лид-магнит, чтобы сохранить внимание клиента или завоевать случайного пользователя, который ошибся адресом.
11. Отсутствие аналитики мобильных пользователей
Зачастую многие предприниматели пренебрегают статистикой по пользователям с мобильных устройств и отслеживают лишь общую аналитику. Не зная, как ведут себя пользователи «мобилок» вы упускаете целый пласт полезной информации. Вдруг, из пользователей полной и адаптивной версии сайта, именно «мобильные» меньше выполняют целевые действия. Не зная этого, вы можете начать работать не в том направлении, а это сказывается на общей конверсии.
Для того, чтобы начать отслеживать этих клиентов, установите HTML-коды для отслеживания только мобильных посетителей, при этом не пренебрегая и другой статистикой. Получая информацию по всем сегментам, вы значительно повышаете шанс найти проблемные места. Для таких целей отлично подходят специальные сервисы, например, Google Analytics или Яндекс.Метрика.
12. Неправильно настроенный мета-тега viewport
Мета-тег viewport определяет выравнивание сайта на разных экранах. Если его зафиксировать по определенной диагонали, то пользователь с иной диагональю будет видеть искаженную и кривую версию вашего сайта. Это касается и десктопной версии и адаптивной. Но настраивать на удачу тоже не стоит, ведь сейчас продаются различные мобильные телефоны и планшеты и у всех них разнятся параметры экрана. Поэтому настройте мета-тег viewport так, чтобы он был гибким и сам адаптировался под разные стандарты. Отдельно для маленьких, отдельно для средних и отдельно для больших. Таким образом вы решите эту проблему.
13. Непродуманный дизайн мобильной версии
Если вы уже сделали крутой дизайн сайта и забыли при этом продумать дизайн мобильной версии, то вам остаются два варианта как это исправить. Первый – это все же заказать отдельный дизайн для мобильных устройств, но это потребует определенные затраты. Второй – это изменить существующий дизайн для его корректного воспроизведения на телефонах и планшетах. В этом случае финансовых затрат уйдет меньше, но при этом придется пожертвовать любыми элементами, которые мешают корректному отображению и быстрой загрузке сайта. Тем самым вы значительно повысите вашу конверсию. Но важно помнить, что прежде чем перелопачивать сайт для адаптивной версии, обязательно проконсультируйтесь со специалистом, чтобы он указал вам, как правильно настроить страницу для мобильных устройств.
14. Неоптимизированный мультимедийный контент
Тяжелые картинки и длинные видео заметно снижают время загрузки сайте. Дважды подумайте, нужно ли вам это в версии для мобильных платформ. Как вы помните, чем быстрее грузит сайт, тем выше конверсия (3 секунды – ваш идеал!). Поэтому оптимизируйте весь контент на странице и упростите жизнь ваших клиентов. Чтобы этого достичь постоянно тестируйте его и не жалейте о выкинутых элементах. В помощь вам специальные сервисы, которые покажут насколько хорошо оптимизирован ваш сайт, например, Optimizilla.
15. Отсутствие мобильной версии сайта
Сразу стоит сказать, чтобы вы не путались, адаптивная и мобильная версия – это не одно и тоже. Адаптация под телефоны и планшеты – по сути тот же ресурс, просто корректно отображающийся на маленьких диагоналях. А мобильная же версия кардинально отличается от нее. То есть это уже по сути другой сайт по тому же адресу. У мобильной версии по сравнению с адаптивной есть ряд преимуществ:
1. Более высокие позиции в поисковых системах – алгоритмы поисковиков настроены таким образом, что, преследуя удобство для пользователей, он подымает в выдаче те ресурсы, у которых есть мобильная версия своего сайта, а те, у кого ее нет, будет опускать на нижние позиции. Плюс напротив сайтов с мобильной версией будет стоять пометка «Для мобильных», что будет явным преимуществом перед вашими конкурентами.
2. Универсальность и независимость от определенно устройства –мобильная версия, в отличие от адаптивной сама корректирует изображение под любую диагональ. Вам не приходится настраивать корректные размеры картинок и текстов отдельно для каждого стандарта. Сайт сам подстроится под пользователя.
Как и со всеми элементами о которых мы рассказывали выше, не стоит пренебрегать тестированием мобильной версии лишь из-за этих преимуществ – лучше все перепроверить, прежде чем пускать в дело.
Вместо заключения
Каждый год выходят все новые и новые гаджеты, а уследить за модными тенденциями в новинках мобильных телефонов становится все сложнее. Мощности растут, а значит растут и возможности для мобильного web-серфинга. Пользователей, заходящих только с мобильников, становится больше, и поэтому каждому предпринимателю, который хочет успешно вести свой бизнес, помимо уже вполне прижившегося сайта, необходимо иметь и мобильную версию своего сайта. А для того, чтобы она была грамотно сделана, вам надо просто следовать нашим советам!