На узком экране длинное название свежей записи может закрыть кнопку меню. Человек пришёл за рассказом, а открыть его не получается. Проверьте это на телефоне: зайдите на главную и попробуйте найти конкретную публикацию, не увеличивая страницу пальцами. Такой короткий маршрут расскажет об удобстве сайта больше, чем аккуратный макет на большом мониторе.
Прежде чем выбирать новый шаблон, подумайте, как читатели пользуются блогом. Родитель открывает идею занятия с ребёнком одной рукой, пока в другой — пакет с покупками. Хозяйка кошки возвращается к сохранённой заметке за нужным абзацем. Обоим важно быстро найти материал, спокойно дочитать его и при случае вернуться.
Проверьте путь посетителя, а не только внешний вид
Возьмите три страницы: главную, длинную запись и контакты. Попробуйте найти тему, открыть статью, пролистать её до середины, вернуться в рубрику и отыскать способ связаться с автором. Делайте это на настоящем телефоне, по возможности через обычную мобильную сеть. Просмотр мобильного макета на компьютере полезен, но он не покажет, удобно ли попадать пальцем по ссылкам и читать текст при дневном свете.
Записывайте не только явные ошибки, но и моменты, когда пришлось задуматься. Значок меню может быть на виду, но не подсказывать, что внутри. На карточке публикации бывает красивое фото, а заголовок обрывается перед самым важным словом. В семейном блоге рубрика «Жизнь с кошкой» скорее приведёт к нужным историям, чем неопределённое «Наш уют».
Сначала устраните то, что мешает дойти до материала
- Посмотрите на первый экран. Видны ли название сайта, меню и заголовок записи? Если шапка занимает несколько экранов, до текста ещё нужно добраться.
- Откройте меню. Получается ли без труда закрыть его и выбрать пункт, не задев соседний?
- Перейдите к записи из сообщения. Читатели часто минуют главную страницу. На самой записи им тоже должно быть легко найти другие темы и контакты.
- Дойдите до конца записи. Проверьте, работают ли с телефона ссылка на следующую историю и форма комментария, если они есть.
Не меняйте одновременно меню, шрифты и рубрики. Уберите одно заметное препятствие, затем повторите тот же маршрут — так будет понятнее, помогла ли правка.
Дайте содержанию поместиться в узкий экран
Мобильная страница — не уменьшенная копия компьютерной. Две колонки на телефоне обычно удобнее расположить одну под другой. Архиву из боковой панели не место между заголовком и первым абзацем. Если всю страницу приходится прокручивать вбок, ищите слишком широкий элемент: таблицу, вставку или изображение с заданным размером.
Откройте запись с самым длинным заголовком, большим списком и несколькими фотографиями. Если взгляд теряется в длинных строках, проверьте ширину текстового блока и поля. Основной текст должен читаться без увеличения страницы пальцами. Меняя размер шрифта, посмотрите и на расстояние между строками: тесный текст быстро утомляет.
Где чаще всего прячутся сбои
- Таблицы. Расписание занятий или список вещей для поездки может не уместиться по ширине. Оставьте на телефоне только нужные столбцы либо покажите данные списком.
- Подписи к фотографиям. Проверьте, не становятся ли они слишком мелкими и не сливаются ли с соседним абзацем.
- Встроенные материалы. Видео и другие вставки должны помещаться по ширине страницы вместе с кнопками управления.
- Длинные слова и адреса. Иногда одного такого фрагмента хватает, чтобы растянуть весь блок.
Отдельно проверьте сайт с увеличенным системным шрифтом. Для многих читателей это обычная настройка. При ней заголовок не должен наползать на меню, а надпись на кнопке — обрезаться.
Упростите выбор следующего шага
На телефоне виден лишь небольшой кусочек страницы, поэтому заголовки записей и рубрик должны помогать с выбором. Если история о том, как ребёнок учился замечать привычки домашнего хорька, так и обозначьте её тему. По названию «Наш удивительный вторник» сюжет не угадаешь. Личную интонацию оставьте для самого рассказа.
Ссылки внутри записи к месту, когда продолжают мысль. В рассказе о домашних ритуалах, например, естественно упомянуть небольшие семейные традиции с кошкой на каждый день. Но переход в каждом абзаце мешает чтению: легко задеть не ту ссылку и потерять место. Между соседними ссылками и кнопками оставляйте достаточно пространства для пальца.
Если на сайте есть поиск, попробуйте обычные запросы: «кошка», «чтение», «школа». Оцените не только результаты. Видно ли поле ввода? Не закрывает ли клавиатура важные элементы? Можно ли вернуться к результатам после открытия записи? Поиск выручит того, кто помнит тему, но не название рубрики; понятного меню он всё же не заменит.
Не заставляйте ждать фотографии и формы
Фотографии придают семейному блогу характер: знакомая кошка на подоконнике порой говорит о доме больше нескольких строк. Но снимок прямо с камеры лучше не загружать без подготовки. Для записи обычно достаточно изображения под размер места, которое оно занимает на странице. Тяжёлые файлы долго открываются через мобильную сеть. Заодно проверьте, не загружаются ли все фотографии длинной записи сразу, пока читатель видит только её начало.
После обработки посмотрите на снимок с телефона. Если смысл истории держится на детском рисунке или деталях поделки, они должны оставаться различимыми; то же касается, скажем, шерсти кошки на фотографии. Для важных изображений добавьте краткое текстовое описание — оно пригодится, когда снимок не отображается или читатель пользуется озвучиванием экрана.
Формы комментариев и связи тоже стоит испытать руками. Понятны ли подписи к полям, не прячет ли клавиатура кнопку отправки, объясняет ли сообщение об ошибке, что исправить? Не просите лишних сведений ради короткого вопроса автору. После отправки читателю нужно понимать, принят ли комментарий и ожидает ли он проверки.
Проверьте сайт в условиях обычного дня
Сначала проверьте сайт дома, затем там, где связь слабее или телефон переключается между мобильной сетью и Wi-Fi. Откройте страницу по прямому адресу, а потом из сообщения в мессенджере. Иногда именно встроенный браузер приложения выявляет неудобную шапку или форму, которую не удаётся отправить.
Попросите знакомого выполнить одно задание без подсказок: найти заметку о совместном чтении и оставить комментарий. Посмотрите, на чём он замедлится, но не объясняйте интерфейс по ходу дела. Такое наблюдение полезнее догадок о том, что читателям «должно быть удобно».
После каждой заметной правки возвращайтесь к тому же короткому маршруту. Исправили меню — откройте запись с главной и вернитесь в рубрику. Поменяли форму — отправьте пробное сообщение и проверьте подтверждение. Запишите адрес страницы, модель телефона и сам сбой: «кнопка отправки уходит под клавиатуру» поможет разобраться быстрее, чем «мобильная версия опять сломалась».