- Статьи
- 6 мин на чтение
- 27
Как упростить огромную форму со 100 полями
UX-приёмы для форм с большим количеством полей
Есть длинные формы, а есть огромные. Форма, которая включает более ста полей — особый случай, потому что её нельзя просто разбить на страницы и посчитать задачу решенной. Чтобы ускорить и упростить заполнение формы нужны дополнительные UX-приёмы.Например, представленная ниже форма заявки на кредит содержит 104 поля, которые расположены на одной странице. Первым делом необходимо разделить её на несколько страниц. А затем — сделать так, чтобы пользователи могли без труда перемещаться по страницам, сохранять то, что уже заполнили, и отслеживать прогресс.
Отслеживание прогресса — важный аспект в дизайне многоэтапной формы. Пользователи в любой момент должны понимать, на какой странице они находятся, какие страницы они уже заполнили и сколько страниц им осталось заполнить. Строка с чипами над формой — эффективный способ отображения этой информации.
Активный чип, который показывает текущий шаг пользователя, должен иметь видимый контраст. Светлый текст на тёмном фоне выделяет его среди неактивных чипов с тёмным текстом на светлом фоне.
Поскольку у вас будет несколько чипов для представления страниц, необходимо сделать названия чипов как можно более краткими, чтобы все они поместились по горизонтали. Длинные название могут привести к тому, что чипы выйдут за пределы ширины страницы и нарушат композицию.
На мобильном экране невозможно разместить чипы горизонтально. Поэтому следует использовать вариант чипа, который отображает все страницы в виде списка пунктов меню. Пользователи будут видеть предстоящие шаги, но не смогут переходить к ним до тех пор, пока не завершат текущий.
Сохранение прогресса так же важно, как и его отслеживание. Неверный подход — отделять кнопку «Сохранить» от кнопки «Продолжить». Это повышает когнитивную нагрузку на пользователей, потому что им придётся держать в голове то, что нужно нажать на кнопку «Сохранить» перед тем, как перейти на следующую страницу, иначе они потеряют данные, которые заполнили.
Вместо того, чтобы разделить две кнопки, объедините их в одну — «Сохранить и Продолжить». Каждый раз, когда пользователь будет переходить на следующую страницу, его прогресс будет сохраняться, потому что обе функции объединены в одной кнопке.
Как только человек сохранит заполненные данные и перейдёт к следующему шагу, у чипа предыдущего шага должна появиться зелёная галочка, которая будет указывать на сохранение данных и завершение этапа. Обратите внимание на пример ниже – внутри чипа «Информация о займе» теперь есть зелёная галочка. Она появилась после того, как пользователь нажал на кнопку сохранения.
Разбивайте длинные шаги на страницы
Пользователям сложно сохранять данные и продолжать заполнение формы, если текущий шаг довольно длинный. Они могут захотеть сохранить прогресс на полпути, но не смогут сделать этого до тех пор, пока не закончат заполнять форму на текущем этапе.
Поэтому разбивайте длинные шаги на страницы. Другими словами, разделите их на подстраницы в рамках текущего этапа. В примере выше раздел «Заявитель» содержит 18 полей. Вместо того, чтобы отображать их все на одной странице, их праспределили между двумя подстраницами.
Первый блок называется «Данные заявителя», а второй — «Домашний адрес заявителя», — всё в пределах этапа «Заявитель». С помощью элементов пагинации можно показать, что на этом этапе есть две подстраницы. Разместите их внизу между кнопками для лучшей видимости.
Скрывайте группы полей, подчинённых условиям
Вы можете упростить форму, если будете скрывать группы полей, подчинённых условиям. В данной огромной форме есть много возможностей, чтобы скрыть группы полей, подчинённых условиям. Например, если у пользователя только один ипотечный кредит, нет необходимости отображать поле «Вторая ипотека». Таким образом, скрытие этой группы полей, подчинённых условиям, — наиболее предпочтительный вариант
В результате на странице будет поле «Первичная ипотека», а ниже по умолчанию кнопка «Добавить ещё одну ипотеку». Если у пользователя есть вторая ипотека, при нажатии на кнопку «Добавить ещё одну ипотеку» появится ещё одна группа полей. Повторное нажатие на кнопку приведёт к отображению ещё одной группы полей для заполнения данных о третьей ипотеке.
Еще один пример скрытия групп полей, подчинённых условиям, — страница «Автомобили» в разделе «Обязательства». Вместо того, чтобы отображать несколько групп полей для автомобилей, пользователи могут нажать на кнопку «Добавить ещё один автомобиль», если им нужно его добавить. Это значительно уменьшит длину формы.
Вероятно, в вашей форме есть много групп полей, подчинённых условиям. Они часто выглядят, как необязательные поля. Например, на странице «Прочая недвижимость» есть только необязательные поля. Нет смысла выделять целую страницу для отображения необязательных полей, если они подчинены условиям.
Поскольку у пользователя может не быть другой недвижимости, которую нужно указать в качестве обязательства, нет необходимости отображать эти поля по умолчанию. Вместо этого лучше всего спросить, есть ли у него дополнительная недвижимость. Таким образом, можно исключить шаг «Прочая недвижимость» и добавить его в качестве подстраницы в разделе «Обязательства».
При выборе ответа «Да» появится группа полей, которые позволят пользователю добавить ещё один объект. Если человек ответит «Нет», он не увидит эти поля и сможет перейти к следующему шагу. Такой подход сокращает количество полей и шагов в форме и делает её удобнее.
Несмотря на то, что для навигации по форме у пользователей есть строка с чипами, им всё равно нужен более быстрый способ глобальной навигации для перехода к любой странице или подстранице. Поэтому важно предоставить им содержание в виде меню.
Содержание в виде меню — полный список всех страниц и подстраниц. Когда пользователи открывают содержание в виде меню, они видят визуальную иерархию с зелёными галочками напротив сохраненных и завершённых страниц. Люди могут быстро переходить к любой предыдущей подстранице, не прибегая к многократному нажатию кнопки «Назад».
Содержание в виде меню закреплено в шапке формы в правом верхнем углу. Такая шапка улучшает композицию, обеспечивает более удобный доступ к кнопке «Назад» и выделяет заголовок страницы.
Заголовок страницы, выровненный по центру, облегчает пользователям распознавание текущей страницы без отвлечения их внимания на другие элементы формы. Более того, дополнительная кнопка «Назад» в верхнем левом углу позволяет людям быстрее переходить на предыдущую страницу и не искать её внизу.
В заключение ваша форма должна содержать страницу «Итого» или «Предварительный просмотр». Она позволит пользователям предварительно просмотреть, как будет выглядеть информация, которую они заполнили, при отправке. На этой странице следует отображать все названия полей с введёнными пользователем данными в виде обычного текста для каждого этапа.
Рядом с заголовком каждой страницы следует добавить кнопку редактирования, которая позволит пользователям вернуться на нужную страницу для того, чтобы скорректировать данные. Не рекомендуется применять встроенное редактирование для каждого отдельного поля из-за большого количества этапов и страниц.
Огромная форма с более чем 100 полями требует применения большего количества UX-приёмов, чем просто большая форма. Вам придётся приложить дополнительные усилия, чтобы пользователи могли эффективно отслеживать и навигировать по страницам и подстраницам.
Также необходимо определять группы полей, подчинённые условиям, и скрывать их до тех пор, пока они не понадобятся пользователям. Почти всегда есть возможность уменьшить количество шагов и страниц. Воспользуйтесь этими возможностями, и ваша огромная форма будет успешно заполнена
Перевод статьи How to Simplify a Massive Form With Over 100 Fields из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
