Удобная проверка формы | Кодементор

Вы когда-нибудь создавали веб-форму, в которой было больше двух полей для входа?

Или, что еще лучше, попытались создать страницу профиля, которую пользователи заполняли бы. С радостью?

Хорошо, а теперь представьте приложение SaaS, построенное на движке ИИ, которое имеет одну и только одну цель — анализировать огромное количество данных о клиентах. И вы тот счастливчик, который имеет честь найти чрезвычайно удобный способ убедить клиентов заполнить множество различных форм, чтобы все настроить!

Это то, над чем я сейчас работаю, и мой любящий головоломки разум счастлив. 😃

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

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

Сначала это звучит безумно, но позвольте мне показать вам, где я нахожусь в этом путешествии.

Удобный скриншот механизма проверки формы

На скриншоте выше вы можете увидеть некоторые элементы, которые используются:

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

Лично я считаю, что статические изображения устарели, когда речь идет о дизайне взаимодействия и UI/UX. Впрочем, этот скриншот я выложил специально, чтобы вы могли представить себя пользователем, который находится в процессе заполнения какой-то формы с большим количеством полей…

Итак, если бы вы были этим пользователем, каким был бы ваш следующий шаг?

Бьюсь об заклад, вы бы вошли в поле Abbreviation. 😃

Давайте посмотрим, что у нас здесь есть:

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

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

Как это построено:

Таким образом, это заканчивается этой повторно используемой строкой кода:

<!--  
  AngularJS directive
  type: AE
  
  1. pass a field name (e.g. "formName.fieldName") into the "messages-for" attribute;
  2. pass a scope expression that returns "true" when users tries to submit the given form
-->
  
<!--  Validate Messages directive starts  -->
<div validate-messages messages-for="siteForm.siteName" submitted="submitted"></div>
<!--  Validate Messages directive ends  -->

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *