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