Мобильная версия сайта: топ-10 причин потери продаж

Попап на половину сайта, съехавшая кнопка «купить» и минутная загрузка сайта — не вселенская проблема, но продажи вам подпортит. В этой статье собрали типичные ошибки в мобильной версии сайта, добавили примеров, привели статистику. Гоу смотреть, как делать не надо.

3 причины адаптировать сайт под мобайл

1. По данным StoneTemple, пользователи на 40% чаще отказываются совершить покупку с помощью телефона. Корявая верстка, длительная загрузка, избыток текста — любая деталь может оттолкнуть человека в момент покупки. 

2. Старик Google очень благосклонно относится к мобильным версиям. Когда человек в поисковик вбивает запрос, ему прежде всего предлагаются те сайты, которые обладают мобильной версией. 

3.  Если пользователь уселся за ПК, у него есть время, значит он: серфит в интернете, читает отзывы, смотрит обзоры, сравнивает варианты. У человека етсь время полазить по сайту. Когда ваш покупатель едет в машине, он быстро достает телефон, забивает в поисковик: «ресторан киев подол», «сто борщаговка», «заправка русановка и так далее». Главное для него — предельно понятный сайт, удобные кнопки, быстрота загрузки, минимум лишней информации. 

ТОП-10 ошибок, убивающих желание покупать

1. Длинная форма заказа

Клиент ленив. Ему нужно купить быстро. Учитывайте это при создании мобильной версии сайта. Забудьте о километровых формах для заполнения данных о клиенте. Сделайте форму в несколько этапов, всё остальное — с менеджером по телефону. Хороший вариант формы магазина Rozetka:

2. Неактивные контакты

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

3.Сложный контент

Сколько клиентов – столько смартфонов. Все они разные и поддерживают разные функции. Например, айфоны не дружат с флеш-контентом. Заходишь с ios на сайт, а тебе предлагают установить флеш-плеер. Никто этого делать не будет и просто закроет сайт.

Стоит использовать только самую простую текстовую информацию, JPEG и PNG форматы файлов. Флеш-анимацию можно заменить форматом GIF. Меню не стоит анимировать. Пусть оно будет обычным и понятным: кнопки, текстовые ссылки. Сайт будет выглядеть просто, зато он будет работать и загружать информацию очень быстро. Мобильный клиент будет рад.

4.Навороченный шрифт

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

5. Крошечный тач-скрин

Мышка компьютера может клацнуть на любую деталь вашего сайта. А палец пользователя смартфона – нет. Все гиперссылки, кнопки по типу: «купить», «оформить заказ», «связаться с менеджером» должны быть удобны для человеческой руки. Apple и Microsoft предлагают пользоваться следующими форматами кликабельных элементов: от минимального – 26px по горизонтали и вертикали, до 34px и до идеального – 44px. 

Плохой пример:

Хороший пример:

6. Медленная скорость загрузки сайта

Золотое время: три секунды! Это показатель идеальной мобайл-версии сайта. Если хотя бы на секунду дольше будет загружаться ваша страница, конверсия упадет на 20%. Пусть ваш сайт будет проще, но быстрее. 

7. Кнопка «назад» не работает

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

8.Назойливые всплывающие окна

Большое количество всплывающих окон раздражает. Они мешают смотреть контент, и если значок «закрыть» всплывающее окно слишком маленький, пользователь закрывает сайт.

9. Прямое переключение на полную версию

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

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

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

Итоги

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