Ошибки мобильной версии сайта, которые легко пропустить при проверке с компьютера

Особенно неприятно, когда на разработку дизайна уже потратили деньги, рекламу запустили, посетители приходят, а заказов меньше ожидаемого.

Я решила подробнее разобраться, какие ошибки мобильной версии могут оставаться незамеченными при обычной проверке сайта. Для наглядности возьму небольшой интернет-магазин товаров для дома и покажу, как одни и те же страницы могут восприниматься на компьютере и телефоне.

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

Когда красивый баннер закрывает половину экрана

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

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

На смартфоне ситуация меняется.

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

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

Проблема здесь не только в размере изображения. На маленьком экране каждый элемент занимает часть ограниченного пространства.

Допустим, высота видимой области смартфона составляет 750 пикселей. Шапка сайта занимает 70 пикселей, рекламный баннер — 500, а уведомление внизу — ещё 100. Для основного содержимого остаётся всего 80 пикселей.

Это условный расчёт, но он хорошо показывает, почему даже аккуратно оформленная страница может оказаться неудобной.

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

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

Иллюстрация 1. Сравнение главной страницы интернет-магазина на компьютере и смартфоне. На мобильном экране большой рекламный баннер скрывает каталог товаров.

Следующая проблема обнаруживается уже после перехода в каталог.

Кнопки есть, но попасть по ним трудно

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

На смартфоне приходится нажимать пальцем.

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

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

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

Для проверки интерактивных элементов можно ориентироваться на рекомендации WCAG 2.2. Минимальный размер области нажатия на уровне AA составляет 24 на 24 CSS-пикселя либо допускает предусмотренные стандартом исключения. Для более комфортного управления часто используют области около 44 на 44 пикселя.

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

В карточке товара это особенно заметно. Если покупатель несколько раз ошибается при выборе цвета, размера или количества, процесс покупки становится раздражающим.

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

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

Иллюстрация 2. Два варианта мобильной карточки товара: тесно расположенные кнопки и исправленный интерфейс с увеличенными областями нажатия.

Как форма заказа превращается в препятствие

Допустим, покупатель выбрал настольный органайзер за 1 200 рублей и перешёл к оформлению заказа.

На компьютере форма выглядит вполне нормально. Поля для имени, телефона, адреса и комментария расположены в два столбца.

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

Человек нажимает на поле телефона и видит обычную буквенную клавиатуру вместо цифровой. Затем пытается указать адрес, но список подсказок оказывается частично закрыт клавиатурой.

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

Для пользователя это лишняя работа. Для магазина — потенциально потерянный заказ.

Что я бы изменила?

Прежде всего проверила типы полей. Для номера телефона уместен type="tel", а для электронной почты — type="email". Это помогает браузеру предложить соответствующую клавиатуру и возможности автозаполнения.

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

Третий — количество обязательных данных.

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

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

И ещё одна деталь — сохранение введённых данных.

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

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

Самая незаметная проблема — горизонтальная прокрутка

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

Это горизонтальная прокрутка.

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

В результате вся страница начинает немного двигаться влево и вправо.

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

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

При этом не каждую широкую таблицу нужно сжимать до нечитаемого состояния.

Если информация действительно требует нескольких столбцов, лучше разместить её в отдельном горизонтально прокручиваемом контейнере. Тогда пользователь сможет изучать характеристики, а сама страница останется неподвижной по горизонтали.

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

Так информация остаётся читаемой даже на небольшом экране.

Почему мобильную версию нельзя проверять только на одном телефоне

Предположим, сайт открыли на современном смартфоне с большим экраном. Меню работает, изображения не обрезаются, кнопки нажимаются.

Кажется, что всё готово.

Но на устройстве с более узким экраном название товара занимает уже три строки вместо двух. Кнопка покупки опускается ниже, а блок с вариантами комплектации перестаёт помещаться в одну строку.

Дополнительные проблемы могут появиться при увеличенном системном шрифте.

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

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

Отдельного внимания заслуживает экранная клавиатура. Когда она открывается, доступная высота страницы существенно уменьшается. Фиксированные панели и кнопки иногда перекрывают активные поля.

Иллюстрация 4. Одна и та же карточка товара на трёх экранах разной ширины. На самом узком варианте элементы интерфейса начинают накладываться друг на друга.

Есть и менее очевидная проблема — скорость работы.

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

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

Для технической проверки полезны показатели Core Web Vitals.

LCP отражает время появления крупнейшего элемента содержимого в видимой области. Хорошим ориентиром считается значение не более 2,5 секунды.

INP характеризует отзывчивость страницы на взаимодействия. Рекомендуемый порог — не более 200 миллисекунд.

CLS показывает неожиданное смещение элементов во время загрузки. Желательное значение — не выше 0,1.

Эти показатели стоит анализировать по реальным пользовательским данным, ориентируясь на 75-й процентиль, а не на единственный удачный запуск проверки.

Например, если фотография товара загружается позже остальных элементов и сдвигает кнопку покупки вниз, проблема может отражаться в CLS. Если после нажатия на фильтр страница долго не реагирует, следует изучить INP.

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

С чего я бы начала исправления

Когда ошибок много, возникает соблазн переделать всю мобильную версию сразу. Но такой подход неудобен: сложно понять, какое изменение действительно помогло.

Я бы начала с самого важного маршрута покупателя.

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

В процессе фиксировать не только очевидные технические ошибки, но и места, где приходится совершать лишние действия.

Например, если кнопку добавления в корзину закрывает всплывающее окно, это приоритетная проблема. Если второстепенная иконка выглядит немного неаккуратно, её можно исправить позже.

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

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

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

Если посещаемость позволяет, отдельные изменения можно проверить