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