10 Правила для створення зручних веб-форм

Sep 14, 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; Legend & 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; / label & gt;
    & lt; Вхідний тип = "Текст" NAME = "LAST_NAME" ID = "LAST_NAME" & GT;
  & lt; / div & gt;
    & lt; етикетка для = "ґендер" & gt; професія & lt; / label & 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, якщо частина інформації не потрібна, немає сенсу витрачати час користувача. Але якщо ви їх використовуєте, ви повинні чітко розрізняти, які вхідні поля не можуть залишити порожнім. Зазвичай невелика марка, як Asterisk (*) або "необов'язкова" етикетка.

06. Будьте обережні з за замовчуванням

Уникайте включення статичного дефолту, якщо ви не вважаєте, що велика частина ваших користувачів (наприклад, 90 відсотків) вибере це значення - особливо, якщо це необхідне поле. Чому? За допомогою цього підходу ви можете запровадити помилки, тому що люди сканують швидко в Інтернеті. Не припускайте, що вони знайдуть час, щоб розібрати через всі варіанти. Вони можуть сильно пропустити щось, що вже має значення.

Єдиним винятком для цього пункту є розумні за замовчуванням - подібні до тих, хто передає країну користувача на основі даних геолокації, що може зробити завершення форми швидше та більш точної. Але ви все ще повинні використовувати це з обережністю, тому що користувачі, як правило, залишають попередні поля, як вони є.

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

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

Заповнення вашої адресної інформації часто є найбільш громіздкою частиною будь-якої онлайн-реєстраційної форми, завдяки кількох полів, довгих імен тощо. Збережіть своїх користувачів від необхідності вводити їхню адресу, здійснюючи попередження для цих полів. Бібліотеки, такі як Google Maps Пропонуйте простий API JavaScript досягти цього. Ти можеш Знайти робочий розчин тут .

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; label for = "повідомлення" & gt; повідомлення (20 символів min, 100 max): & lt; / label & gt;
& lt; textarea id = "повідомлення" class = "form-control" name = "повідомлення" data-parsley-trigger = "keyup" data-parsley-minlength = "20" data-parsley-maxlength = "100" data-parsley -MinLength-message = "Прийдіть! Ви повинні ввести принаймні 20 коментарів символу". data-parsley-privation-threyhold = "10" & gt; & lt; / textarea & gt;

Ти можеш Знайдіть повний зразок коду тут .

09. Уникайте фіксованих вхідних форматів

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

10. Не використовуйте кнопки скидання

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

Кнопка скидання майже ніколи не допомагає користувачам. Важко уявити, що хтось хоче, щоб кнопка, яка скасовує всю свою роботу, не кажучи вже про те, що вони хочуть, щоб ця кнопка сидить поруч із кнопкою, яка її зберігає. Веб буде більш щасливим місцем, якщо практично всі кнопки скидання були видалені.

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

Ця стаття спочатку з'явилася сітка , журнал для професійних веб-дизайнерів та розробників. Підписатися на мережу тут .

Пов'язані статті:

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

10 Правила для створення зручних веб-форм

01. Тільки запитайте, що потрібно

02. Замовлення полів логічно

03. Тримайте етикетки короткі

04. Не дублюйте поля

05. Виділіть додаткові поля

06. Будьте обережні з за замовчуванням

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

08. Використовуйте перевірку в режимі реального часу

09. Уникайте фіксованих вхідних форматів

10. Не використовуйте кнопки скидання

Як - Найпопулярніші статті

Як зробити мем у Photoshop

Початок роботи з WebVR

Як зробити Мандельбульб

Що таке лінія термінатора?

Як спроектувати ізометричну типографіку

Як розплавити 3D-об'єкт з трьома.JS

Як побудувати повний веб-сайт в кутовій

Як взяти свій векторний логотип від 2D до 3D

Категорії