Сайт неудобно открывать с телефона: как выявить проблемы мобильной версии
Сайт помещается на экране смартфона, текст читается, меню открывается. Но пользоваться им всё равно неудобно: кнопки расположены тесно, форму скрывает клавиатура, а всплывающее окно мешает добраться до контактов. Такие проблемы проще обнаружить, если проверять реальные действия посетителя.
Мобильная версия требует большего, чем уменьшение ширины страницы. Важно пройти путь клиента: найти услугу, изучить условия и связаться с компанией. Если на одном из этапов приходится увеличивать экран или несколько раз нажимать на кнопку, стоит выяснить причину.
Начните с основных сценариев
Составьте короткий список задач, ради которых люди открывают ваш сайт. Для компании, оказывающей услуги, это поиск нужного предложения, изучение стоимости, просмотр примеров работ и отправка обращения. Для магазина добавятся поиск товара, выбор варианта и оформление заказа.
Начните со страниц, на которые действительно приходят посетители. Исправная главная страница ничего не говорит об удобстве отдельной услуги или статьи. Если доступна аналитика, посмотрите популярные посадочные страницы и устройства, затем выберите несколько типичных сценариев.
- Открыть страницу услуги и понять, что входит в работу.
- Найти цену или условия расчёта стоимости.
- Посмотреть примеры и вернуться к описанию.
- Найти телефон, адрес или форму обращения.
- Заполнить форму и убедиться, что заявка получена.
Выполните эти действия на настоящем телефоне. По возможности используйте несколько устройств с разными размерами экрана. Режим мобильного просмотра в браузере компьютера помогает обнаружить часть ошибок, но не полностью воспроизводит касания, экранную клавиатуру и поведение мобильного браузера.
Проверьте ширину страницы и читаемость
Заметный признак проблемы — необходимость двигать всю страницу вправо и влево. Причиной могут быть широкая таблица, длинная строка, изображение или блок с фиксированной шириной. Проверьте, где именно начинается переполнение, и сохраните адрес страницы.
Основной текст должен оставаться читаемым без постоянного увеличения. Заголовки не должны обрезаться, изображения — выходить за границы, а подписи — накладываться друг на друга. Увеличьте текст средствами браузера и посмотрите, остаются ли доступны кнопки и важная информация.
В пояснении W3C к перестроению содержимого описан принцип: при изменении доступной ширины информация должна оставаться доступной без необходимости прокручивать обычный текст сразу в двух направлениях. Для материалов, которым действительно нужно двухмерное представление, предусмотрены исключения.
Например, сравнительной таблице может понадобиться собственная горизонтальная прокрутка. В этом случае посетителю должно быть понятно, что внутри есть дополнительные столбцы. Сама таблица не должна растягивать соседние разделы страницы.
Оцените порядок информации
На компьютере несколько колонок видны одновременно. На телефоне они обычно выстраиваются друг за другом, и порядок становится особенно важным. Проверьте, не оказалась ли цена далеко от описания услуги, а кнопка заказа — перед условиями, которые нужно прочитать.
Необязательно убирать подробности, чтобы сократить страницу. Лучше выделить понятные разделы и разместить ключевую информацию ближе к соответствующему действию. Например, рядом с формой объяснить, что произойдёт после заявки и какие сведения потребуются для оценки.
Представьте клиента, который ищет срочный ремонт. Если перед контактами ему приходится пролистать много экранов декоративных блоков, технически адаптивная страница всё равно создаёт препятствие. Такой сценарий полезно проверить отдельно от спокойного чтения статьи.
Проверьте меню, ссылки и кнопки
На телефоне человек касается экрана пальцем, поэтому маленькие элементы и тесно расположенные ссылки чаще приводят к ошибочным нажатиям. Попробуйте пользоваться сайтом обычным способом, не стараясь специально попасть в край небольшой иконки.
Откройте меню, перейдите во вложенный раздел и вернитесь назад. Убедитесь, что меню можно закрыть, а нижние пункты доступны на небольшом экране. Проверьте, не блокируется ли прокрутка страницы после закрытия меню.
Элементы, зависящие от наведения мыши, требуют отдельной проверки. На компьютере так может появляться подменю или описание карточки. На телефоне это содержимое должно открываться понятным действием, без необходимости угадывать последовательность касаний.
Нажмите на телефон и ссылку на мессенджер. Проверьте правильность номера и получателя. Само открытие приложения ещё не подтверждает, что контакт указан верно или сообщение можно отправить нужному человеку.
Заполните форму с экранной клавиатурой
Форма часто выглядит нормально до начала ввода. После появления клавиатуры доступная область экрана уменьшается, и поле или кнопка могут оказаться под закреплённой панелью. Важно проверить весь процесс, а не только внешний вид пустой формы.
- Коснитесь первого поля и начните ввод.
- Перейдите к следующим полям, попробуйте вставить скопированный телефон.
- Оставьте обязательное поле пустым и прочитайте сообщение об ошибке.
- Исправьте данные, закройте и снова откройте клавиатуру.
- Отправьте тестовое обращение и проверьте его получение.
Для телефона и электронной почты полезна подходящая раскладка клавиатуры. Если используется маска номера, проверьте допустимые форматы и возможность исправить середину строки. Посетитель не должен заново набирать весь номер после небольшой ошибки.
Подсказки должны объяснять, что исправить. В рекомендациях W3C по уведомлениям формы подчёркивается необходимость понятной обратной связи при ошибке и успешной отправке. Одной красной рамки вокруг поля может быть недостаточно.
Если отправка не удалась, проверьте сохранение введённого текста. Особенно неприятно потерять подробное описание задачи, набранное на телефоне. При повторной попытке человек должен понимать, отправлено ли предыдущее обращение.
Посмотрите, сколько места занимают виджеты
Уведомление о cookies, кнопка чата, нижняя панель контактов и рекламное окно могут появляться одновременно. Каждый элемент по отдельности занимает немного места, но вместе они закрывают существенную часть экрана.
Проверьте первое посещение, когда уведомления ещё отображаются. Затем закройте их доступными кнопками и повторите основной сценарий. Убедитесь, что крестик закрытия виден, а после закрытия можно пользоваться страницей.
Отдельно проверьте нижнюю часть экрана с открытой клавиатурой. Там часто пересекаются кнопка формы, плавающий виджет и элементы браузера. Фиксированная панель должна помогать связаться с компанией, а не мешать завершить уже начатое обращение.
Проверьте загрузку и скачки элементов
На быстром Wi-Fi сайт может работать заметно лучше, чем у посетителя в дороге. Посмотрите, когда появляется полезный текст и можно ли взаимодействовать с меню и формой. Отдельно отметьте элементы, которые долго остаются пустыми.
Обратите внимание на перемещения содержимого во время загрузки. Человек собирается нажать кнопку, но над ней появляется изображение и сдвигает страницу. В результате касание попадает в другую ссылку или действие приходится повторять.
В руководстве web.dev о сдвигах макета разобраны причины таких перемещений, включая изображения без зарезервированного места и динамически добавляемое содержимое. Исполнитель может использовать эти наблюдения для технической диагностики.
Если основная проблема — ожидание загрузки, начните с материала «Медленно загружается сайт». Проверку скорости полезно сопоставлять с реальными действиями, а не оценивать удобство по одной цифре инструмента.
Передайте разработчику воспроизводимое описание
Для каждой проблемы запишите адрес страницы, модель устройства, браузер и последовательность действий. Приложите снимок экрана или короткую запись. Фраза «на телефоне всё съехало» не объясняет, какой элемент нужно проверять.
Например: «На странице услуги в Safari на iPhone после открытия клавиатуры кнопка “Отправить” перекрывается нижней панелью. Прокрутка не позволяет полностью показать кнопку». Такое описание задаёт конкретный сценарий для исправления и повторной проверки.
Сначала исправляйте ошибки, которые мешают обратиться: недоступные поля, перекрытые контакты и неработающие кнопки. Затем переходите к читаемости и расположению блоков. После доработки повторите исходный сценарий и проверьте соседние страницы с тем же компонентом.