Переделали главную, а мобильную версию не проверили — потеряли половину обращений

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

Полгода компания теряла половину заявок, объясняя это сезоном, конкурентами и «рынок просел». Разберём историю подробно: что именно сломалось, почему этого никто не увидел, во что обошлось и как принимать работу, чтобы не повторить.

Что за компания

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

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

Что сделали и как принимали

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

Дизайн отрисовали в одном варианте — под широкий экран. Мобильного макета не делали вообще: программисту сказали «сделай, чтобы на телефоне тоже нормально было».

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

Никто не открыл новую главную с телефона. Ни разу.

Что было сломано на телефоне

Когда мы разбирали сайт, картина открылась такая.

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

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

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

Блок с ценами не помещался. Таблица была свёрстана фиксированной ширины. На телефоне она вылезала за границы экрана, появлялась горизонтальная прокрутка, и часть колонок — в том числе колонка с ценой — оставалась за краем.

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

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

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

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

Почему не заметили полгода

Причин несколько, и все они типичные.

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

Статистику смотрели общей цифрой. В Яндекс.Метрике есть разбивка по устройствам, но её не открывали. Смотрели только общее число визитов — а оно почти не изменилось. Люди приходили, просто уходили без действий.

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

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

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

Сколько теряли

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

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

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

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

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

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

Как обнаружили

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

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

Что сделали

Мы взялись за исправление, и работа шла в таком порядке.

Сначала — экстренные правки. За один день вернули номер телефона текстом с возможностью нажать и позвонить, починили кнопку звонка, сделали таблицу цен адаптивной. Это три самые дорогие поломки, и они закрылись быстро. Уже через неделю поток звонков заметно вырос.

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

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

Упрощение формы. Оставили два поля: телефон и удобное время. Всё остальное уточняет менеджер при звонке. Число отправок формы выросло сразу.

Замена выпадающего списка. Выбор точки сделали обычным списком с крупными кнопками, работающим по касанию.

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

Регламент проверки. Ввели простое правило: любое изменение на сайте проверяется на реальном телефоне до публикации, и результат фиксируется скриншотом.

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

История наглядно показывает, почему нужны три точки входа, а не одна.

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

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

2ГИС. Вторая независимая точка с собственной аудиторией. Люди, которые ищут в приложении, часто вообще не пользуются поиском в браузере. Карточка с адресами всех постов, актуальными часами работы, ценами и фотографиями давала звонки все эти месяцы.

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

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

Что проверять на телефоне: чек-лист

Возьмите свой телефон, откройте сайт и пройдите по списку. Это займёт пятнадцать минут.

1. Телефон в шапке — текст или картинка? Нажмите на него. Должен предлагать позвонить.
2. Все кнопки нажимаются? Пройдите по каждой кнопке на главной.
3. Сколько времени открывается страница? На мобильном интернете, не по домашнему беспроводному соединению. Больше трёх секунд — плохо.
4. Есть ли горизонтальная прокрутка? Проведите пальцем вбок. Страница не должна ездить.
5. Читается ли текст без увеличения?
6. Помещаются ли таблицы? Цены, характеристики, тарифы — частое место поломки.
7. Работают ли выпадающие списки и меню? Всё, что на компьютере открывается по наведению, на телефоне должно открываться по касанию.
8. Открывается ли меню и можно ли из него попасть в нужный раздел?
9. Можно ли заполнить форму пальцем? Поля достаточно крупные, клавиатура не перекрывает кнопку отправки, календарь удобный.
10. Отправляется ли форма и приходит ли письмо?
11. Работают ли кнопки мессенджеров? Должны открывать приложение.
12. Видна ли карта проезда и открывается ли она в навигаторе?
13. Не перекрывают ли всплывающие окна и виджеты содержимое? На телефоне чат и всплывающее окно часто закрывают половину экрана.
14. Как выглядит первый экран? Сразу ли видно, что за компания, чем занимается и как связаться.
15. Проверьте на двух-трёх разных телефонах — старом и новом, с разными браузерами.

Как принимать работу подрядчика

Отдельно — что требовать при заказе изменений на сайте:

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

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

Итог

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

Мобильная версия — это не «тоже надо посмотреть», это основной вид сайта для большинства бизнесов. И проверять её нужно не при запуске один раз, а после каждого изменения.

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