Про формы: когда форма (регистрации/анкеты/заявки) имеет большое количество полей для заполнения, нужно использовать шкалу процесса, или неких шагов. Заполнив один шаг, пользователь переходит на следующий. Воспринимая весь процесс не как длинную полосу препятствий, а как маленькие шаги до своей цели.
Такой тип является понятным и удобным, особенно если мы имеем дело с мобильными устройствами. Так проще информировать пользователей, указывая, на каком они этапе сейчас и сколько шагов осталось до победы.
Минусы: отображение шагов на мобильных формах является проблемой из-за ограниченного пространства экрана. Использование одной и той же формы процесса на десктопе и в мобильном устройстве, вызывает проблемы с читаемостью и видимостью.
Еще одной проблемой такой формы может стать то, что она закреплена в шапке приложения и отъедают до 20% полезного пространства на экране. Если интерфейс вашего приложения не пострадает, то можете смело брать ее на вооружение.
Видимость и удобство чтения
При заполнении многостраничных форм пользователи должны знать, на каком этапе они находятся, и видеть прогресс. Видимость и удобство чтения, являются ключом к этому. Когда заголовки шагов и отслеживание прогресса понятны, вероятность завершения формы увеличивается. Когда их трудно обработать, вероятность отказа от формы возрастает.
Линейные и радиальные процессы.
Линейные процессы хорошо работают для настольных форм, но не для мобильных. Когда мы используем линейное отображение процесса в своей мобильной форме, мы уменьшаем читаемость названий шагов и видимость отслеживания прогресса.
Поясняю: Пример слева. Уменьшение заголовков шагов в ограниченном пространстве приводит к уменьшению размера текста, что ведет к проблемам с чтением на мобильных экранах. Видимость прогресса становится менее ясной, потому что она показывает слишком много названий шагов и их номера одновременно. Это создает визуальный шум и затрудняет понимание пользователя.
Радиальный процесс (в примере справа) в мобильной форме, дает пользователям более четкое понимание прогресса и лучшую читаемость. Пользователь сразу понимает, на каком шаге он находится, так как радиальный процесс освобождает достаточно места для заголовков с большим количество шагами. Пользователь видит один шаг за раз, позволяя сосредоточиться только на нем. Здесь также есть достаточно места для указания следующего шага.
Пользователи смогут быстрее отслеживать свои успехи, потому что им требуется меньше времени для фиксации на радиальном процессе. Чтобы скани радиальный процесс, в действие идет только одна фиксация взгляда. При сканировании линейного процесса, уходит 4 фиксации взгляда. Меньшее количество фиксаций позволяет быстрее обрабатывать прогресс, что способствует более быстрому заполнению формы. Тем самым, больше пользователей станут вашими клиентами и воспользуются услугами. Ну классно ведь?
Спасибо, что читаешь канал. Впереди ещё много интересного и технологичного.