Главное
Проверьте перенос текста на узкой ширине, затем пройдите основной сценарий на телефоне и с клавиатуры. Запишите дефект так, чтобы другой человек смог повторить его по шагам.
Выберите один путь посетителя
Для лендинга студии это может быть переход от первого экрана к выбору времени. Для каталога — от категории к нужной карточке. Запишите исходную страницу, действие и ожидаемый результат. Так проще заметить препятствие, которое теряется при беглом просмотре.
Пройдите путь на обычном телефоне в портретной ориентации. Затем повторите в режиме адаптивного просмотра браузера. Телефон покажет реальную работу касаний и экранной клавиатуры, а режим браузера поможет воспроизвести дефект на конкретной ширине.
Проверьте узкий экран и длинные подписи
Начните с 320 CSS-пикселей ширины как ориентира для проверки переноса основного контента. Введите длинное название или найдите карточку с большим заголовком. Посмотрите, остаются ли видны цена, кнопка и важные условия. Для отдельных элементов, например содержательных широких таблиц, может понадобиться своя область прокрутки.
Отдельно проверьте ширину, на которой меняется раскладка меню или карточек: один экран чуть уже этой границы и один чуть шире. Ошибка часто появляется именно в момент переключения между вариантами.
Что проверить в первом проходе
- Основной текст читается без горизонтальной прокрутки.
- Длинная подпись не закрывает соседнее действие.
- Меню открывается и возвращает к выбранной странице.
Пройдите форму с ошибкой и клавиатурой
Откройте форму, коснитесь поля и проверьте, видно ли подпись и нужную кнопку при появлении экранной клавиатуры. На тестовой копии отправьте пустое обязательное поле: по сообщению должно быть понятно, где ошибка и что исправить.
На компьютере пройдите ту же форму с клавишами Tab, Shift+Tab и Enter. Фокус должен быть виден, порядок перехода — соответствовать форме. Сравните увиденное с макетом. Если в макете нет состояния ошибки, добавьте его перед передачей страницы в разработку.
Запишите дефект и повторите проверку
Пример: «Экран 320 px. Открываю меню, выбираю длинную категорию. Название выходит за край, стрелка скрыта. Ожидаю перенос названия и доступную стрелку». Приложите снимок и укажите браузер. После правки повторите исходный путь и проверьте соседнюю ширину.
Упражнение: найдите на своей странице один сбой переноса и один сбой взаимодействия. Запишите каждый отдельно. После исправления попробуйте пройти сценарий с другой длиной текста.
