Красивый первый экран не подтверждает удобство всей страницы. Прочитайте материал, откройте меню и пройдите форму так, как это сделает посетитель.
Текст и ширина
Начните с окна шириной 360 px, затем увеличьте его до 390 и 768 px. Проверьте длинные заголовки, подписи и ссылки. Текст не должен уходить за край экрана или требовать постоянного приближения.
Увеличьте размер текста в браузере. Убедитесь, что кнопки и подписи не перекрывают друг друга. В длинных статьях полезны короткие абзацы, заметные подзаголовки и ограниченная длина строки на широком экране.
Меню и элементы управления
Откройте и закройте меню несколько раз. Перейдите по ссылке, вернитесь назад и проверьте положение страницы. Нажимайте на небольшие элементы пальцем: соседние действия не должны срабатывать случайно.
Проверьте страницу с клавиатуры. Фокус должен быть виден, а порядок переходов — соответствовать смыслу интерфейса. Всплывающее окно должно иметь понятный способ закрытия.
Изображения и таблицы
У иллюстрации должна сохраняться важная часть кадра. Подпись остаётся текстом страницы, а не мелкой надписью внутри изображения. Длинную таблицу можно прокручивать внутри собственного контейнера: она не должна растягивать всю страницу.
Проверьте загрузку с медленным соединением. Пока изображение загружается, место под него должно быть предусмотрено, чтобы текст и кнопки не прыгали.
Приёмка по списку
Проверка в эмуляции помогает найти ошибки размеров. Перед запуском повторите ключевой сценарий на настоящем телефоне: клавиатура, адресная строка браузера и касания могут вести себя иначе.
Выберите сценарий и получите короткий план первого опыта.
Собрать свой план