Как подготовить сайт телеком-оператора к просмотру с телефона

У телеком-оператора мобильная версия сайта — это не уменьшенная копия десктопной, а отдельный сценарий. Человек с телефона обычно спешит: оплатить услугу, понять условия тарифа или выяснить, подключат ли его по адресу. Посмотрите в веб-аналитике, какие страницы чаще открывают со смартфонов, и начните с них.

Какие задачи посетитель решает с телефона

Как правило, их три: войти в личный кабинет и пополнить счёт, выбрать тариф или услугу, найти помощь (покрытие, офис, поддержка). Эти действия должны быть заметны без поиска по меню: «Войти», «Пополнить», «Подключить», «Проверить адрес». Кнопки делайте не меньше примерно 44×44 пикселей и с зазором между соседними, чтобы палец не попадал по чужой ссылке. Если в мобильной шапке остался десктопный набор из десяти пунктов, оставьте четыре-пять главных, а остальное уберите в раздел меню.

Как выглядит карточка тарифа на маленьком экране

Возьмём условный пример: тариф «Домашний интернет». На первом экране телефона должны поместиться:

• название и скорость;
• ежемесячная цена и срок, на который она действует;
• стоимость подключения и условия по роутеру (аренда, покупка, свой);
• кнопка «Подключить».

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

Сравнение тарифов без горизонтальной прокрутки

Широкая таблица на телефоне превращается в мелкий шрифт или в прокрутку вбок, где теряется смысл. Есть два рабочих варианта. Первый: показывать тарифы карточками друг под другом с одинаковым порядком параметров. Второй: оставить таблицу, но закрепить первый столбец и ограничить сравнение двумя-тремя тарифами. Фильтры по типу услуги и региону вынесите наверх списка, а выбранные значения показывайте над результатами, чтобы было видно, почему перечень именно такой.

Формы: номер, SMS-код и адрес

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

• поле телефона с типом tel, чтобы открывалась цифровая клавиатура; маска ввода не должна ломать вставку номера в форматах «+7…» и «8…»;
• поле SMS-кода с атрибутами inputmode="numeric" и autocomplete="one-time-code", чтобы телефон мог предложить код из сообщения;
• повторная отправка кода с видимым таймером и понятным текстом, если код не пришёл;
• подсказки при вводе адреса, чтобы не набирать длинную строку вручную;
• сообщения об ошибках рядом с полем, а не только вверху формы; после ошибки введённые данные не стираются.

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

Скорость на мобильной сети и тяжёлые блоки

Среди ваших посетителей наверняка есть те, кто как раз находится в зоне слабого сигнала, и сайт оператора с долгой загрузкой выглядит особенно неубедительно. Проверьте, что тормозит страницу: слайдеры с крупными баннерами, видео в шапке, чат-виджет, карта покрытия. Карту можно подгружать только по нажатию на кнопку «Показать карту». Для изображений задайте размеры и подберите файлы под ширину экрана, чтобы кнопки не «прыгали» во время загрузки. Страницы входа и оплаты должны быть самыми лёгкими на сайте. Проверяйте их в PageSpeed Insights или Lighthouse и вручную — на недорогом смартфоне с ограниченной скоростью соединения.

Проверочный список перед запуском

• «Войти» и «Пополнить» доступны с любой страницы в один-два касания.
• Цена, срок её действия и плата за подключение видны в карточке без перехода по сноскам.
• Сравнение тарифов читается без горизонтальной прокрутки или с закреплённым первым столбцом.
• Поле телефона вызывает цифровую клавиатуру и принимает вставленный номер.
• Код из SMS можно подставить автоматически, а повторную отправку легко найти.
• Проверка адреса работает с подсказками и не требует ручного ввода всей строки.
• Карта покрытия и чат загружаются по запросу, а не при открытии страницы.
• Заявку можно отправить с реального телефона с невысокой скоростью соединения; ошибки понятны.

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

Все статьи блога