Если ваша форма заполнения состоит из нескольких страниц, пошаговая визуализация прогресса обязательна. Она информирует пользователя о том, на каком но этапе и сколько ему осталось заполнить страниц. Отображение пошагового прогресса на мобильных устройствах становится проблемой, из-за ограниченного пространства на экране. Вариант, который вы используете в версии для больших экранов, на экране смартфона может плохо читаться.

Линейный или радиальный варианты

Линейное отображение пошагового прогресса хорошо работает на больших экранах, но не в мобильном дизайне. Когда вы используете этот вариант на небольших экранах, описания шагов читаются хуже (потому что шрифт мельче), и отслеживать прогресс по этой же причине сложнее.

Вы вынуждены впихивать описания шагов в весьма ограниченное пространство, из-за чего читать их становится сложно. Помимо этого следить за прогрессом становится еще менее удобно, потому что вы видите слишком много названий шагов и номеров одновременно. Это создает визуальный шум и пользователям становится сложнее различать и понимать свое текущее местонахождение в форме заполнения.

Для мобильных версий формы используйте радиальное отображение прогресса. Это поможет пользователям четче отслеживать прогресс и сделает форму более читаемой. Сразу видно на каком шаге вы находитесь, потому что радиальный вариант отображения оставляет достаточно места для больших заголовков. При таком варианте отображается один шаг за раз, и это помогает пользователям сосредоточиться на текущем моменте заполнения. А еще у вас остается достаточно места, чтобы описать следующий шаг.

Пользователь сможет отслеживать свой прогресс быстрее, потому ему потребуется меньше моментов фиксации зрения для сканирования текста и списка шагов. Сканируя визуально радиальный вариант отображения, взгляд фиксируется единожды. Линейный же вариант останавливает взгляд на каждом шаге, поэтому в примере сверху это будет четыре момента фиксации. Чем меньше количество фиксаций, тем быстрее пользователь заполнит форму.

Видимость + удобочитаемость

Во время заполнения многостраничных форм, пользователь должен понимать на каком этапе он находится и сколько ему осталось. Видимость и удобочитаемость пошагового отображения прогресса — ключ к успеху. Когда описания шагов и отслеживание прогресса понятны, вероятность того, что форма будет заполнена, растет. Когда же в происходящем приходится разбираться, растет вероятность того, что пользователь откажется от заполнения формы.

Автор статьи anthony

Перевод — Дежурка

Смотрите также: