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