Изучения айтрекинга и юзабилити-тесты говорят о том, что встроенная валидация сообщений об неточностях усиливает 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
Подборка похожих статей:
-
Мастер форм (wizard): плюсы и минусы
В то время, когда дело касается ввода данных, два самый распространенных паттерна, каковые употребляются на сайтах и приложениях, — это Мастер и обычные…
-
Плюсы и минусы использования оверлеев
Показавшись всего пара лет назад, модальные окна либо оверлеи (overlays) стали элегантным решением проблемы интерактивного дизайна: как сказать…
-
Юзабилити: чего стоит избегать в сообщениях об ошибках?
Все люди время от времени ошибаются, это неизбежно: как раз для этого необходимы сообщения об неточностях. Но многие компании уделяют этому элементу…
-
Меланхолик: характеристика, плюсы и минусы характера
Меланхолик: черта личности Для меланхолика будет катастрофой то, что для сангвиника – увлекательный случай, а для флегматика – малозначительный эпизод….