Мобильная версия: 12 мест, где теряются заявки со смартфонов

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

Из-за этого разрыва мобильная версия годами живёт с проблемами, которых никто не видит. Люди заходят, тычут в кнопку, которая не нажимается, пытаются заполнить форму, куда не помещается клавиатура, закрывают всплывающее окно, промахиваются по крестику — и уходят. В отчётах это выглядит как «мало обращений», и причину ищут где угодно, кроме телефона.

Разберём двенадцать конкретных мест, где мобильная версия теряет заявки, и что с каждым из них делать. Все они проверяются за час на собственном смартфоне.

Место 1. Телефон, по которому нельзя нажать

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

Номер должен быть оформлен как ссылка для звонка. Проверяется мгновенно: откройте сайт на телефоне и нажмите на номер. Если открылся набор — всё в порядке. Если ничего не произошло — вы теряете звонки каждый день.

То же касается адреса электронной почты и адреса офиса: нажатие на адрес должно открывать карты.

Место 2. Телефон, которого не видно

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

Что нужно: номер или кнопка звонка в шапке, видимая без прокрутки. И липкая кнопка, которая остаётся на экране при прокрутке страницы, — она особенно важна на длинных страницах услуг, где человек дочитывает до конца и должен иметь возможность позвонить, не возвращаясь наверх.

Осторожно с меню-гамбургером: прятать телефон внутрь него — распространённая ошибка. Меню открывают не все и не сразу.

Место 3. Всплывающее окно, которое не закрывается

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

Правила для всплывающих окон на мобильном:

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

Лучше всего — вообще не показывать всплывающие окна на мобильном или заменить их на неброскую полосу внизу экрана.

Место 4. Форма, в которую невозможно попасть

Поля формы на мобильном должны быть крупными. Мелкое поле высотой в двадцать пикселей — гарантия промахов и раздражения.

Что проверить:

• высота полей достаточная для пальца;
• расстояние между полями не позволяет промахнуться;
• кнопка отправки крупная и не прижата к другим элементам;
• при нажатии на поле экран не «прыгает» и не увеличивается;
• клавиатура не перекрывает то поле, которое сейчас заполняется, — страница должна прокручиваться сама;
• после появления клавиатуры видна кнопка отправки или до неё легко долистать.

Последние два пункта ломаются чаще всего и обнаруживаются только при реальной проверке на телефоне.

Место 5. Неправильная клавиатура

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

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

Заодно стоит выключить автозамену и автоисправление там, где они мешают: в поле для адреса, артикула или номера.

Место 6. Слишком длинная форма

На компьютере форма из семи полей выглядит компактно. На телефоне это три экрана прокрутки, и до конца дойдут единицы.

Мобильная форма должна быть максимально короткой: имя и телефон. Всё остальное менеджер спросит в разговоре. Если без дополнительных данных никак — разбейте форму на два шага: сначала контакт, потом подробности. Тогда даже бросивший на втором шаге человек оставит вам контакт.

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

Место 7. Согласие, которое не видно

Галочка согласия часто оказывается мелкой, а текст рядом — ещё мельче. Человек нажимает «Отправить», ничего не происходит, сообщение об ошибке выводится где-то за пределами видимой области. Он думает, что форма сломана, и уходит.

Что делать: галочка достаточно крупная, отмечена по умолчанию там, где это допустимо, а если нет — при нажатии на кнопку экран сам прокручивается к неотмеченной галочке и она подсвечивается.

Место 8. Тяжёлые картинки и медленная загрузка

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

Что съедает скорость:

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

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

Проверять надо не в офисе, а на телефоне с медленным соединением — в браузере есть режим имитации слабой связи.

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

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

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

Таблицы — особый случай. Прайс на восемь колонок на телефоне нечитаем. Такие таблицы нужно либо перестраивать в карточки, либо делать прокручиваемыми в своей области с заметным указанием, что таблицу можно двигать.

Место 10. Кнопки, которые слишком близко

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

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

Отдельно — ссылки внутри текста, идущие подряд. Если в абзаце три ссылки вплотную, человек нажмёт не туда.

Место 11. Меню, из которого невозможно выбраться

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

Что нужно:

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

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

Место 12. Каталог, который невозможно листать

Для магазинов и больших каталогов — отдельный набор проблем.

Фильтры. На компьютере они сбоку, на телефоне их обычно прячут за кнопку. Часто получается, что применить фильтр можно, а понять, какие фильтры уже применены, — нет. Нужна видимая строка активных фильтров и кнопка «сбросить».

Карточка товара в списке. Должна показывать главное: картинка, название, цена, наличие. Всё остальное лишнее.

Бесконечная прокрутка. Удобна, но ломает возврат: человек пролистал сто позиций, зашёл в товар, вернулся — и оказался в начале. Это одна из самых частых причин ухода из каталога. Нужно сохранять позицию при возврате.

Кнопка заказа. На странице товара она должна быть в зоне досягаемости большого пальца, а не только вверху.

Как проверить всё это за час

Порядок, который даёт полную картину:

1. Возьмите свой телефон, откройте сайт не по закладке, а через поиск — как посетитель.
2. Нажмите на номер телефона. Открылся набор?
3. Прокрутите главную. Видна ли кнопка связи всё время?
4. Дождитесь всплывающего окна и попробуйте закрыть его одним пальцем.
5. Откройте меню, найдите нужный раздел, закройте меню.
6. Найдите страницу услуги через поиск по сайту.
7. Заполните форму целиком: проверьте клавиатуры, видимость кнопки, галочку.
8. Отправьте заявку и проверьте, дошла ли она.
9. Откройте каталог, примените фильтр, зайдите в товар, вернитесь назад.
10. Проверьте, не уезжает ли страница вбок ни на одном экране.
11. Включите медленное соединение и посмотрите, за сколько грузится главная.
12. Попросите сделать то же самое человека, который сайт не видел, и молча посмотрите, где он застрянет.

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

Где смотреть цифры

Ощущения ощущениями, а подтверждение лучше искать в данных.

В Яндекс.Метрике разделите статистику на компьютеры и смартфоны и сравните:

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

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

Ещё полезна карта нажатий: она показывает, куда люди тыкают. Часто обнаруживается, что нажимают на элементы, которые вообще не кликабельны, — например, на картинку или на цену.

Как это связано с продвижением 3 в 1

Мобильная версия — то место, где сходятся все три канала обращений, и её поломка обесценивает работу по каждому из них.

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

Яндекс Справочник. Карточка компании в Яндекс Картах открывается почти всегда с телефона. Человек нажимает ссылку на сайт прямо из карточки и попадает на мобильную версию. Если она тяжёлая и неудобная, весь смысл заполненной карточки теряется.

2ГИС. Здесь ситуация ещё жёстче: 2ГИС — это в первую очередь мобильное приложение, и переход на сайт оттуда всегда мобильный. Аудитория, которая приходит из 2ГИС, обычно спешит и настроена на конкретное действие: позвонить, уточнить, приехать. Медленный сайт с некликабельным номером убивает этот поток целиком.

Вывод простой: можно сколько угодно работать над тремя каналами привлечения, но если мобильная версия теряет людей на входе, результат будет неполным по всем трём направлениям сразу. Обращения с карт при этом стоит считать наравне с заявками с сайта — по числу нажатий на телефон в карточках Яндекс Бизнеса и 2ГИС видно, сколько людей до вас дошло, и это хорошая точка сравнения с тем, что показывает статистика сайта.

Что чинить в первую очередь

Если времени мало, вот порядок по отдаче:

1. Кликабельный телефон и видимая кнопка связи.
2. Работоспособность формы: клавиатуры, размеры полей, видимость кнопки и галочки.
3. Всплывающие окна: убрать или сделать закрываемыми.
4. Скорость: сжать картинки, убрать лишние скрипты.
5. Горизонтальная прокрутка и мелкий текст.
6. Меню и размеры кнопок.
7. Каталог: фильтры и возврат из товара.

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

Если нужна помощь

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

Специалисты компании «Сайты Профессионально» проводят разбор мобильной версии по всем перечисленным местам, показывают записи реальных визитов, где люди теряются, и приводят сайт в порядок так, чтобы заявки с телефонов доходили. Напишите нам — бесплатно посмотрим ваш сайт на смартфоне и пришлём список того, что теряет вам обращения прямо сейчас.