Юзабилити: плюсы и минусы встроенной валидации форм

Изучения айтрекинга и юзабилити-тесты говорят о том, что встроенная валидация сообщений об неточностях усиливает UX. «Живая внутренняя валидация» в настоящем времени контролирует введенные знаки (в лид-формах, полях регистрации и пр.) Это эргономичнее проверки пост-фактум — в то время, когда сообщения об неточностях появляются по нажатию кнопки, а информация довольно часто исчезает.

В соответствии с тестам, внутренняя валидация переживает взрывной рост: в 2012 году лишь 13% сайтов использовали ее, а к 2016 — уже 60%. Но страно, что 40% больших eCommerce-сайтов до сих пор игнорируют встроенную валидацию. Вторая неожиданность — потенциальные подводные камни способа не обрисованы, но наряду с этим страшны:

1. Преждевременная валидация. Эти маркируются как неверные раньше, чем пользователь закончил ввод. Совокупность заставляет исправлять то, чего нет.

2. Затянутая валидация. Сообщение не исчезает, кроме того в то время, когда неточности исправлены.

Эти подробности критически серьёзны для пользовательского опыта, но 20% сайтов со встроенной валидацией попадаются в одну либо обе ловушки. Сейчас разглядим 5 преимуществ живой встроенной валидации и 2 подводных камня ее внедрения.

Валидация лид-форм — полное управление

5 UX-преимуществ способа

Юзабилити-тесты говорят о том, что встроенная валидация — лучший выбор на сегодня.Юзабилити: плюсы и минусы встроенной валидации форм

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

1. Поиск неточностей упростился

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

Визитёр сайта L.L.Bean опечатался, собрав email без @. Сообщение об неточности показалось по окончании перехода к второму полю. Человек заметил, что адрес недействителен — и за пара секунд исправил опечатку. Главное преимущество встроенной валидации — скорость устранения неприятностей.

2. Сохранение контекста

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

На примере выше, человек проверил каждое поле по окончании ввода, и лишь позже постарался послать эти. Другие испытуемые растолковывали такое поведение привычкой и страхом ошибки контролировать эти. Желание упредить неточности особенно очень сильно, в случае если пользователь сталкивался с валидацией ранее.

Юзабилити: чего стоит избегать в сообщениях об неточностях?

3. Хорошая встроенная валидация повышает доверие

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

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

Испытуемый надавил «Review Order» и столкнулся с неточностью — забыл указать телефон. Введя номер, он повторил заказ и опять взял сообщение об неточности — неверный формат номера. Живая встроенная валидация предотвратила бы оба случая.

10 несложных идей по улучшению конверсии лид-форм

4. Пропустить ответственные поля сложнее

Не считая проверки данных, встроенная валидация выделяет пропущенные поля. В случае если ответственная информация не введена, человек определит об этом.

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

5. Платежная информация сохраняется, не снижая PCI (стандарт безопасности платежных данных)

Для безопасности онлайн-платежей, сайты eCommerce не хранят данные по картам пользователей на собственных серверах. Вместо этого, клиенты вводят эти лишь при оплате. Недочёт — обновление страницы либо валидация неточностей очищают заполненные формы.

Конечно, поскольку компания не хранит платежные эти ни в каком виде.

Но встроенная валидация предотвратит неточности и «холостые» обновления страниц оплаты. К примеру, в случае если номер карты некорректен, пользователь заметит это сходу.

Не смотря на то, что преимущества на лицо, 40% сайтов до сих пор избегают встроенной валидации. Действительно, она также не безукоризненна. У данной валидации имеется подводные камни, каковые способны принести больше вреда, чем пользы.

Кроме того большие торговые марки спотыкаются о них. Анализ 50 влиятельных сайтов eCommerce продемонстрировал, что 20% ресурсов с «живой» валидацией попадаются хотя бы в одну из ловушек.

Пользовательский опыт и юзабилити на сайтах eCommerce

Ловушки встроенной валидации форм 1. Преждевременные уведомления

Совокупность даёт предупреждение об неточности в то время, когда пользователь не закончил ввод. К примеру, вы написали первый знак email а, а валидация уже сработала — метод не видит знака @ и активирует предупреждение. Согласитесь, это злит.

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

Пользователь не ввел ни знака, а уже взял «выговор».

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

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

Словом, люди занялись поиском несуществующей неточности — вместо заполнения анкеты.

Исходя из этого избегайте преждевременных валидаций. Эти не должны проверяться, пока пользователь не закончил ввод. Очевидный совет, но 10% сайтов eCommerce не знают этого.

На сайте Hayneedle выскакивает сообщение об неточности, стоит лишь начать ввод.

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

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

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

Соответственно, нет неспециализированного правила для типов и всех полей данных.

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

2. Затянутые уведомления

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

Выше испытуемый совершил ошибку при вводе email, исправил проблему, но уведомление провалилось сквозь землю не сходу. Разумеется, это вводит в заблуждение и злит.

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

Но в то время, когда человек заново ввел пароль в первое поле, и опять кликнул на второе, показалась зеленая галочка. Снова же, взглянуть на путь пользователя между двумя полями.

На протяжении тестов участники редко покидали поле, исправляя неточность — вместо этого они опять и опять вводили эти, ожидая, что уведомление провалится сквозь землю. Немногие осознали, что необходимо выйти из поля. Люди не принимают это интуитивно — а разработчики почему-то вычисляют в противном случае.

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

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

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

Тонкости настройки лид-форм, каковые разрешат вашей конверсии взлететь вверх

Хорошая встроенная валидация

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

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

Хорошая встроенная валидация активизирует прогресс и усиливает опыт не склонных к риску визитёров. В случае если человеку характерно перепроверять формы, хорошая валидация придется ему по вкусу.

В соответствии с изучениям, лишь 20% ведущих eCommerce-сайтов применяют хорошую встроенную валидацию. Не желаете опередить остальные 80%?

5 рекомендаций по созданию эргономичной и действенной лид-формы

Вместо заключения

Тесты последних лет последовательно обосновывают — верная встроенная валидация усиливает UX при исправлении неточностей. К счастью, способ увидели eCommerce-разработчики — за четыре года популярность встроенной валидации выросла в четыре раза.

Но реализуя подход, не забывайте о подводных камнях и деталях — выше мы разглядели их. Через чур стремительные уведомления, как и чересчур медленные, вредят пользовательскому опыту. Избегайте преждевременной валидации. Контролировать эти стоит по окончании того, как пользователь покинул поле (не считая необыкновенных случаев).

А вдруг неточность исправлена, уведомление должно сходу исчезать.

Высоких вам конверсий!

Image source: baymard.comImage source: Doran

Случайные статьи:

Производительность дисков, сравнение RAID 5 c RAID 10


Подборка похожих статей:

riasevastopol