Как проверить мобильную версию сайта самому: чек-лист для владельца

С чего начать: от задачи посетителя к списку проверок

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

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

Минимальный набор действий для самопроверки

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

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

Проверка ключевых страниц

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

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

Что проверить в навигации и меню

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

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

Текст, кнопки и поля форм

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

Прочитайте любой абзац на телефоне без увеличения: комфортно ли?
Нажмите на каждую кнопку и ссылку: попадаете ли вы туда, куда ожидали?
Заполните форму записи или заказа: видны ли все поля при открытой клавиатуре?