Поле ввода с подсказками
Помогаем пользователю заполнить сложное поле и разбираемся, чем задача отличается от проблемы. Кейс свежий, детали под 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-специалистов. А заодно подкреплять идею, что пользовательские проблемы решаются не только редактурой текста, но и организацией смысла вообще.