Нераздражающая валидация

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

Валидация в UX\UI — это проверка вводимых пользователем данных на соответствие стандартам приложения. Так программа защищает себя от ситуаций, когда невозможно понять и обработать запрос пользователя.

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

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

В первом случае интерфейс не допускает того, чтобы пользователь ошибся (то есть отправил запрос с некорректными данными), а во втором случае даёт шанс на ошибку и информирует его.

Приёмы предупреждения ошибок ввода:

Способы информирования об ошибке:

Я расскажу, на что обращаю внимание при проектировании систем валидации.

Общая нагруженность формы

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

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

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

Способ заполнения формы

Я проектирую формы, в которых очень много обязательных полей, ввода дат, телефонов, адресов. Кроме того, присутствует сложная валидация данных: непересечение дат и блокирующие друг друга условия. На всё это удовольствие моему пользователю выделяется 15 минут — столько длится приём гражданина специалистом.

В данном случае в ход идет почти всё: маски, подсказки, разбиение форм на простые объёмы данных, подключение справочника адресов и особой подход к обязательным полям.

Наверное, однажды я напишу об этом отдельно :)

Сложность системы валидации

Я сталкивалась с ситуациями, когда некорректно заполненным может оказаться практически каждое поле. Если под каждым из них появится сообщение об ошибке, вся форма структурно поедет.

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

Кто пользователи

Есть случаи, когда нельзя пользоваться цветом как способом передачи информации. Например, проектируется сайт «доступная среда». Среди пользователей будут люди, которые видят цвета не так как все, и допустим красная подсветка незаполненных полей ничего не даст.

В этом случае помогут формы с пошаговым заполнением, спокойные анимации, автофокус, подсветка элементов за счет утолщения линий.

Отдельно вынесла этот пункт, потому что мой внутренний менеджер не смог промолчать.

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

Так же стоит учитывать возможности фреймворков и платформ. Безусловно, нет ничего невозможного, но это вопрос времени и стоимости.

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

Иногда меры — это переработать интерфейс. Допустим, предложить степпер с пошаговым заполнением вместо длинной формы.

К чему это всё

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