Пишу о дизайне, интерфейсах и управлении собой

Спросить немного

Иногда приходится дизайнить интерфейс, состоящий из форм со множеством полей, регистрацией на каком-то этапе и множеством «вилок» с условиями, которые меняют состав форм. Плохой подход — вывалить всю форму на один экран. Можно попытаться просто разбить на шаги, но не поможет если в зависимости от выбора вариантов в контролах форма сильно меняется.

Хороший прием — разбить на шаги и задать на первом шаге те вопросы, которые определят что показывать пользователю на последующих. Так решается несколько задач:

  1. Комбинирование всех последующих экранов;
  2. Информирование пользователя — особенно полезно если предложение непривычное или неизвестное, как анкета на ипотеку — ее не заполняют каждый день. Показ кусочка поможет составить представление о следующих шагах и увеличит доверие;
  3. Иногда можно тут же в форме «на лету» и мягко решить задачи, которые обычно делаются через модальные окна — авторизация и регистрация, подписка.

Вот например как в Альфа-Банке заполняется заявка на ипотеку:

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

А вот как выглядит заполнение ипотечной анкеты на сайте Пика:

Сначала — проект и данные, необходимые для регистрации.
Затем подтверждение номера и переадресация в созданный личный кабинет.
Кусочек личного кабинета с последующими шагами.

Можно пойти дальше — при онлайн-покупке спрашивать способ оплаты (при ипотеке и рассрочке шаги могут быть различны) и указывать созаемщика (тогда количество автоматически созданных форм в кабинете умножится на два).

Поделиться
Отправить
Запинить
 31   2020   интерфейс