Мобильная версия — это не уменьшенный сайт
Хорошая мобильная версия проектируется отдельно: что человеку с телефона нужно увидеть первым, как он будет нажимать пальцем, а не мышкой, и как быстро сможет написать или позвонить. Поисковики тоже оценивают сайт в первую очередь по мобильной версии.
Доступность — следующий шаг. Это значит, что сайтом могут пользоваться люди со слабым зрением, пожилые клиенты, люди, которые читают на солнце или держат телефон одной рукой. Почти всё, что делает сайт доступнее, делает его удобнее для всех.
Мобильный чек-лист
- Основной текст не меньше 16 пикселей, его не нужно увеличивать пальцами
- Кнопки и ссылки достаточно крупные, между ними есть расстояние
- Телефон и WhatsApp открываются одним нажатием
- Форма короткая, поле телефона открывает цифровую клавиатуру
- Меню открывается и закрывается без ошибок
- Нет горизонтальной прокрутки и обрезанных таблиц
- Всплывающие окна не закрывают весь экран
Доступность: самое важное
- Контраст
- Серый текст на сером фоне трудно читать. Текст должен заметно отличаться от фона.
- Подписи к картинкам
- Описания изображений для программ чтения с экрана и для поиска по картинкам.
- Подписи полей
- У каждого поля формы — понятная подпись, а не только серая подсказка внутри.
- Управление с клавиатуры
- Все кнопки и ссылки доступны без мыши, видно, где находится фокус.
Как проверить за полчаса
Недорогой Android
Откройте сайт на самом простом телефоне в семье, через мобильный интернет.
Одной рукой
Попробуйте найти услугу, цену и оставить заявку, держа телефон одной рукой.
Крупный шрифт
Включите в настройках телефона увеличенный шрифт и посмотрите, не ломается ли вёрстка.
Lighthouse
В Chrome на компьютере есть встроенная проверка доступности — она покажет основные проблемы.
Попросите старшего родственника
Дайте телефон с сайтом маме или бабушке и попросите записаться на услугу. Где она запнётся — там ваши клиенты тоже теряются.
Как мы проектируем мобильную версию
Мы начинаем с телефона, а не с компьютера: сначала решаем, что увидит человек на маленьком экране и какой путь пройдёт до заявки, потом расширяем дизайн на большие экраны. Кнопка связи всегда в зоне большого пальца, телефон и WhatsApp доступны с любого экрана, а формы короткие и подсказывают формат ввода.
Каждый сайт перед запуском проверяем на нескольких реальных устройствах, включая недорогие Android-смартфоны, и в режиме увеличенного шрифта. Это занимает немного времени, но заметно влияет на конверсию.
Формы на телефоне: где теряются заявки
Форма — самое уязвимое место мобильной версии. Каждое лишнее поле снижает число заявок, поэтому спрашивайте только то, без чего нельзя перезвонить: имя и телефон. Остальное менеджер уточнит в разговоре. Поле телефона должно открывать цифровую клавиатуру и сразу показывать формат номера с кодом +7.
Ошибки должны быть понятными и появляться рядом с полем, а не в общем сообщении наверху страницы. После отправки человек должен видеть, что заявка дошла и когда ему ответят. Если форма отправилась, а на экране ничего не изменилось, многие нажимают кнопку несколько раз или уходят, думая, что сайт сломан.
И помните о кнопке WhatsApp: на телефоне написать в мессенджер для многих проще, чем заполнять форму. Лучше дать оба варианта.
Картинки и видео на телефоне
Фото работ и товаров на телефоне должны открываться крупно по нажатию, а галерея — листаться пальцем. Видео лучше показывать с заставкой и запускать по нажатию: автоматическое видео на первом экране тратит мобильный трафик клиента и замедляет загрузку.