10 правил для создания пользовательских веб-форм

Sep 11, 2025

Инструкции

Illustration of web forms on an iMac and tablet

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

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

Во-вторых из моих двух статей, исследующих, как построить лучшие формы ( Найти первый здесь ), вот мои 10 советов по дизайну формы, которые являются удобными для пользователя. Не совсем то, что вы ищете? Возможно, вам понадобятся наши руководства на вершину Строитель сайта или же облачное хранилище служба.

01. Спросите только то, что требуется

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

02. Порядок логически полей

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Подумайте о вашей форме, как разговор; Вы хотите группировать и заказать поля в порядке, который имеет смысл пользователю

Это полезно думать о форме как похожей на разговор. Как и любой обычный разговор, он должен быть представлен логическим общением между двумя сторонами: человеком и вашим приложением. Детали должны быть заданы в порядке, который логичен с точки зрения пользователя, а не в приложении или базе данных. Например, необычно спрашивать чей-то адрес перед их именем.

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

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

Группировка должна быть выполнена визуально, а также в коде. Например, вы можете использовать & lt; fieldset & gt; и & lt; легенда & gt; Элементы для ассоциирования соответствующих форм управления:

 & lt; fieldset & gt;
  & lt; legend & gt; Личная информация: & lt; / legend & gt;
  & lt; div & gt;
    & lt; метка для = "first_name" и GT; Имя & lt; / label & gt;
    & lt; тип ввода = "текст" name = "first_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; метка для = "last_name" & gt; фамилия & lt; / mabell & gt;
    & lt; тип ввода = "Text" name = "last_name" id = "last_name" & gt;
  & lt; / div & gt;
    & lt; этикетка для = "пол" и GT; профессия & lt; / mabell & gt;
    & lt; тип ввода = "текст" name = "Профессия" ID = "Профессия" & gt;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. Держите ярлыки короткими

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

04. Не дублирующие поля

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Не заставляйте своих пользователей вводить информацию дважды - вы только расстраиваете их, тратите свое время

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

05. Выделите дополнительные поля

В идеале лучше всего не иметь дополнительных полей. В соответствии с правилом № 1, если часть информации не требуется, нет смысла тратить время пользователя. Но если вы их используете, вы должны четко различить, какие поля ввода не могут быть оставлены пустыми. Обычно достаточно небольшой знак, как звездочка (*) или «дополнительная» этикетка.

06. Будьте осторожны с умолчанием

Избегайте включения статического по умолчанию, если вы не верите большей части ваших пользователей (например, 90 процентов) выберут это значение - особенно если это обязательное поле. Почему? С таким подходом вы, вероятно, введете ошибки, потому что люди быстро сканируют формы онлайн. Не думайте, что они найдут время для разбора всех вариантов. Они могут пропустить что-то, что уже имеет значение.

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

07. Минимизируйте необходимость ввода

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

Заполнение вашей адресной информации часто является наиболее громоздкой частью любой онлайн-формы в Интернете, благодаря нескольким полям, длинным имена и так далее. Сохраните своих пользователей от того, чтобы набрать весь свой адрес, реализуя предварительные префили для этих полей. Библиотеки, такие как Google Maps Предложить простой JavaScript API для достижения этой цели. Вы можете Найти рабочее решение здесь Отказ

08. Используйте проверку в реальном времени

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Немедленно предупреждают пользователей, если они сделают ошибку - не заставляйте их ждать, пока они не завершит всю форму

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

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

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

Петрушка это отличная библиотека проверки формы JavaScript. Это открытый источник и сфокусирован UX, поэтому вы можете переопределить почти каждое поведение по умолчанию, чтобы соответствовать вашим точным потребностям. В следующем коде представляет собой простой пример проверки петрушки для поля «Сообщение». Поле должно составлять не менее 20 символов, но не более 100.

 & lt; mabel for = "Message" & gt; сообщение (20 символов min, 100 max): & lt; / mabels & gt;
& lt; textarea id = "Message" Class = "Управление формой" Name = "Сообщение" data-parsley-trigger = "keyup" data-parsley-minlength = "20" data-parsley-maxlength = "100" data-parsley -Минленское сообщение = «Давай! Вам нужно ввести хотя бы 20 символов». Data-Parsley-Validation-Threshold = "10" & gt;

;

Вы можете Найти полный образец кода здесь Отказ

09. Избегайте фиксированных входных форматов

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

10. Не используйте кнопки сброса

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Маленький добр когда-либо пришел, включая кнопку сброса прямо рядом с опцией «Отправить»

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

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

Эта статья изначально появилась в сеть Журнал для профессиональных веб-дизайнеров и разработчиков. Подписаться на Net здесь Отказ

Статьи по Теме:

29 инструментов веб-дизайна для ускорения вашего рабочего процесса
41 лучшие бесплатные веб-шрифты
13 лучших кусочков пользовательского тестирования программного обеспечения

10 правил для создания пользовательских веб-форм

01. Спросите только то, что требуется

02. Порядок логически полей

03. Держите ярлыки короткими

04. Не дублирующие поля

05. Выделите дополнительные поля

06. Будьте осторожны с умолчанием

07. Минимизируйте необходимость ввода

08. Используйте проверку в реальном времени

09. Избегайте фиксированных входных форматов

10. Не используйте кнопки сброса

Инструкции - Самые популярные статьи

Как редактировать видео на Tiktok

Как нарисовать более реалистичные фигуры

Оставьте щетку миксер в Photoshop

Мода гибкие макеты с CSS Grid

Поверните фотографии в 3D анимацию с Photoshop

Как добавить текстуру к вашим пасцам с праймерами

Как создать удивительные эффекты с фигурами CSS

5 советов для лепки в двойном быстром времени

Категории