Владелец компании, которая ставит видеонаблюдение, сигнализацию и контроль доступа, обычно смотрит свой сайт на мониторе. Клиент же часто открывает его на телефоне: в магазине, где вчера что-то случилось, на парковке у офиса или между встречами. Если на маленьком экране не видно, что делать и как связаться, он вернётся к поисковой выдаче и позвонит конкурентам. Ниже разобрано, какие решения для сайта это предотвращают.
Что человек ищет на телефоне в первую очередь
У посетителя такого сайта обычно одна из трёх задач. Первая: срочно вызвать специалиста, например если сигнализация ведёт себя странно или нужно закрыть уязвимое место на объекте. Вторая: прикинуть, что нужно для его помещения, и понять порядок затрат. Третья: убедиться, что фирма настоящая и работает именно с такими объектами. Для каждой задачи нужен свой короткий путь: позвонить, оставить заявку, посмотреть примеры работ и документы. Если эти пути спрятаны в бургер-меню или внизу длинной страницы, часть людей их не найдёт.
Как должен выглядеть первый экран: условный пример
Возьмём вымышленную страницу «Видеонаблюдение для магазина». На экране смартфона, до всякой прокрутки, стоит разместить:
- заголовок «Видеонаблюдение для магазина: установка под ключ»;
- одну строку о том, что входит в работу: выезд и замер, подбор оборудования, монтаж, настройка просмотра с телефона;
- кнопку «Позвонить»: номер оформлен как телефонная ссылка, и нажатие сразу открывает набор;
- вторую кнопку «Рассчитать стоимость», которая ведёт к короткой форме;
- строку про зону выезда, например список районов или городов. Указывайте только то, что компания действительно выполняет.
Фотографии камер и лозунги про надёжность можно поставить ниже. Сначала человек должен понять, туда ли он попал и как с вами связаться.
Формы и кнопки: что сделать, чтобы они работали пальцем
- Оставьте в форме заявки минимум полей: имя, телефон, тип объекта (список: квартира, магазин, склад, офис). Адрес и подробности менеджер уточнит по звонку.
- Для поля телефона задайте тип, который открывает цифровую клавиатуру. Не заставляйте переключать раскладку.
- Шрифт в полях делайте не мельче 16 пикселей: на iPhone при меньшем размере страница сама увеличивается при вводе и «уезжает».
- Высота кнопок и пунктов меню — около 44 пикселей, между соседними ссылками нужен промежуток, чтобы не попадать не туда.
- После отправки покажите понятное сообщение: что заявка принята и в какое рабочее время ответит менеджер. Время называйте только реальное.
Закреплённую панель с кнопкой звонка внизу экрана можно использовать, но проверьте, что она не закрывает текст и поля форм.
Схемы, прайсы, видео и документы: что делать с тяжёлым
Для отрасли характерны материалы, которые плохо переносят мобильный экран и слабую связь, а в подвалах и на складах интернет часто нестабилен.
- Таблицу сравнения комплектов превратите в карточки по одному комплекту либо сделайте её прокручиваемой по горизонтали с заметной подсказкой.
- Прайс в PDF дублируйте текстом на странице. Файл можно оставить как дополнение, но не единственный вариант.
- Фотографии объектов сжимайте до размера экрана, а не загружайте исходники с камеры.
- Видео не запускайте автоматически, показывайте обложку с кнопкой.
- Лицензии и сертификаты показывайте миниатюрой, которая открывается крупно, и добавьте подпись текстом: что за документ и кем выдан.
- Не используйте Flash: на смартфонах он не работает.
Что чаще всего мешает на смартфоне
Типичные ошибки: всплывающее окно со скидкой, которое закрывает весь экран, а крестик крошечный; меню с десятком уровней вложенности; карта на всю ширину страницы, которая перехватывает прокрутку пальцем; онлайн-консультант, перекрывающий кнопку «Отправить». Каждый такой элемент проверяйте отдельно: попробуйте дойти от первого экрана до заявки одной рукой.
Проверочный список перед запуском мобильной версии
- В коде страницы задан параметр масштаба (viewport), и текст читается без увеличения щипком.
- Номер телефона нажимается и открывает набор на всех страницах услуг.
- Первый экран каждой услуги содержит заголовок, суть предложения и два действия: позвонить и оставить заявку.
- Форма отправляется на реальных iPhone и Android, письмо или уведомление доходит сотруднику.
- Нет горизонтальной прокрутки всей страницы.
- Таблицы и схемы читаются, PDF не единственный источник цен и условий.
- Страница открывается приемлемо при медленном соединении: проверьте через мобильный интернет, а не только офисный Wi-Fi.
- Всплывающие окна и чат не закрывают кнопки и поля.
Лучший тест — дать телефон человеку, который не знает сайт, и попросить связаться с компанией по поводу конкретной задачи, например «нужны камеры на склад». Если он справился за полминуты без подсказок, основа готова. Если запнулся, вы увидели, что именно нужно менять. Перед доработкой решите, какие действия на сайте для вас главные, и стройте мобильные страницы вокруг них.
