Помогаем пользователю заполнить сложное поле и разбираемся, чем задача отличается от проблемы. Кейс свежий, детали под NDA, поэтому всё в условном дизайне и без конкретики.

Ситуация

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

Качество товаров в России подтверждают сертификаты и декларации соответствия

Нумерация у документов ожидаемо дикая, по четыре префикса на каждый вид:

ЕАЭС [N] RU [Д,С]-XX.YYYY.A.00000

РОСС RU [Д,С]-XX.YYYY.A.00000

ТС [N] RU [Д,С]-XX.YYYY.A.00000

RU [Д,С]-XX.YYYY.A.00000

У деклараций есть N и «Д» перед дефисом, у сертификатов пишем только «С». Остальные части номера тоже хитрые: сначала русские буквы и цифры, потом они же с латиницей, потом опять русская, потом только цифры.

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

Задача

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

Нужно как-то подсветить, что часть номера может состоять как из латинских символов, так и из русских. Есть памятка во всплывающем окне, где изложен весь этот ребус. Она написана по мотивам документации, нужно переписать по-человечески:

Как заполнить номер

С или Д — кириллические буквы. Символ принадлежности номера к сертификату/декларации соответствия

ХХ — кириллические буквы и цифры. Код страны изготовителя продукции

YYYY — латинские и кириллические буквы и цифры. Код органа по сертификации, выдавшего сертификат соответствия

А — только кириллические буквы. Тип объекта сертификации

00001 — только цифры. Порядковый номер сертификата соответствия

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

Решение

Формальное. Изучим предмет и напишем памятку в понятном формате: какие бывают номера и какие буквы вводить. Про заглавные писать не будем, пусть фронты сделают перевод всех символов в верхний регистр. Остальное изложим от читателя. Заодно чуть поменяем маску, чтобы не обозначать русские буквы латинскими. Получится примерно так:

Как заполнить номер

1. Найдите номер документа

У сертификата номер в Росаккредитации указан внизу листа, а у декларации в самом верху.

Сертификат

— ЕАЭС RU С-ББ.YYYY.Г.00000

— РОСС RU С-ББ.YYYY.Г.00000

— ТС RU С-ББ.YYYY.Г.00000

— RU С-ББ.YYYY.Г.00000

Декларация

— ЕАЭС N RU Д-ББ.YYYY.Г.00000

— РОСС RU Д-ББ.YYYY.Г.00000

— ТС N RU Д-ББ.YYYY.Г.00000

— RU Д-ББ.YYYY.Г.00000

2. Начните вводить номер

Введите первые символы номера, и в поле появится подсказка с его форматом. Жирным выделена общая часть для всех номеров:

ЕАЭС RU С-ББ.YYYY.Г.00000

ББ — русские буквы и цифры

YYYY — цифры, русские или английские буквы

Г — русская буква

00000 — только цифры

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

Полное. Очевидно, проблемы у пользователя возникают в момент ввода номера, а потому отрывать его от ввода и показывать памятку бессмысленно. Её нужно открыть, прочитать и запомнить, а потом ещё и применить. Поэтому стоит просто подсказывать нужное по мере ввода. Вот примерно так:

Маску можно распознать по первому символу: все четыре вида уникальны, а тип документа мы уже знаем

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

На этом стоило бы и закончить, но у нас есть ещё два решения.

Избыточное. Можно вместо маски показывать набор полей для каждой части номера. Выглядит серьёзно, но на деле только сделает дороже разработку и поддержку. Ещё это усложнит обработку при вставке из буфера обмена, а пользователи чаще всего копируют номер документа, а не набирают его руками. Вот так не нужно:

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

Выводы

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

Тем не менее задачи стоит решать полностью, чтобы собирать портфолио постепенно убеждать окружающих в пользе UX-специалистов. А заодно подкреплять идею, что пользовательские проблемы решаются не только редактурой текста, но и организацией смысла вообще.