Иногда заполнение и отправка web-формы превращается в проблему: например, непонятно, к какому полю относится лейбл или сообщение валидации говорит, что есть ошибка, но не говорит, где именно и т.п. Адам Силвер написал статью о том, чего лучше всего избегать при проектировании форм и чего стоит придерживаться — "Form design: from zero to hero all in one blog post".

Вот несколько интересных моментов. Следует избегать форм с многоколоночной раскладкой, так как более 10% пользователей, не могут заполнить такие формы правильно. В поля ввода, которые отвечают за ввод грамматически неправильных данных (например, email'ов), следует добавить атрибуты autocapitalize="none", autocorrect="off" и spellcheck="false", чтобы браузер автоматически не изменял вводимые данные. Используйте <select> только в самой безвыходной ситуации, потому что им неудобно пользоваться. Вместо него лучше всего использовать radio-кнопки или <select> с автодополнением для очень большого списка опций.

Статья очень хорошая с большим количеством ссылок на другие полезные статьи по теме. Рекомендую почитать.

#ux #forms

https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/

Джейсон Григсби — автор книги Progressive Web Apps (A List Apart) — попробовал заказать еду на сайте, но с первой попытки у него это не получилось. Он разобрался в причинах и написал про результаты своего небольшого исследования статью "An HTML attribute potentially worth $4.4M to Chipotle".

На сайте было сломано автодополнение данных кредитных карт. Данные карты были сохранены в браузер правильно, но при их вводе в форму с помощью автодополнения что-то шло не так. Причина оказалась в Angular-модуле ui-mask, он неправильно отсекал год истечения срока действия карты. Автор попробовал использовать вместо кастомной маски стандартные HTML5 средства валидации формы pattern="\d\d" и maxlength="2". Проблема с автодополнением года была решена.

Проводились исследования, которые показывают, что автодополнение ускоряет заполнение форм на 30%. Скорость заполнения форм в свою очередь влияет на конверсию в заказ. Джейсон провёл грубые расчёты, которые показали, что сайт Chipotle теряет более 4 миллионов долларов в год из-за проблем с автодополнением.

Рекомендации из статьи: если у вас e-commerce сайт, убедитесь, что автодополнение данных кредитных карт работает, добавьте кейс проверки автодополнения в тест-план, используйте корректные поля ввода в формах.

#ux #forms

https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/