Ці прості правила допоможуть вам створювати форми, які користувачі захочуть заповнити
Форми існують протягом тривалого періоду часу, вони значно спрощують завдання складання скарг та інших юридичних документів. Разом із розвитком інформації та її обробки, також розвиваються засоби для збору даних. Оскільки друковані форми існують багато років, ми можемо отримати користь з їхнього дизайну.
Анатомія текстового поля
Текстові поля дозволяють користувачам вводити текст в інтерфейс. Зазвичай вони з'являються у формах і діалогових вікнах. Компонент текстового поля має забезпечувати чітку можливість взаємодії, роблячи поля такими, що виявляються в макетах, ефективними для заповнення та доступними.
Ось ключові елементи звичайного текстового поля:
1. Контейнер - інтерактивна область введення
2. Текст, що вводиться- текст, що набирається в текстовому полі
3. Текст мітки - повідомте користувачам, яка інформація належить цьому полю форми.
4. Текст-плейсхолдер - це опис або приклад необхідної інформації, яка замінюється текстом, надрукованим користувачем
5. Допоміжний або перевірочний текст (необов'язково) - надає додатковий контекст або перевірочне повідомлення
6. Іконка перед полем (необов'язково) - опишіть тип введення, який потрібен для текстового поля
7. Іконка після поля (необов'язково) - додатковий контроль над текстом, що вводиться, наприклад, приховати / показати текст тощо.
Типи текстових полів
Більшість із них засновані на звичайних текстових полях, які були змінені, щоб краще відповідати певним типам інформації, наприклад, номерам кредитних карт. Нижче наведено лише кілька прикладів типів полів введення, які найчастіше використовуються у створюваних нами інтерфейсах:
(Ми спеціально не говоримо про такі типи полів введення, як прапорці та перемикачі, про які ми розповімо пізніше в цій серії статей)
Використовуйте тип поля введення, що відповідає даним, які ви збираєте
Вибір правильного типу текстового поля для запитуваних даних допоможе користувачам вводити інформацію в правильному форматі та дасть змогу уникнути помилок, що зробить процес заповнення максимально простим і ефективним.
Текстові поля повинні змінювати зовнішній вигляд залежно від стану і взаємодій користувача
Це можна зробити, надавши візуальні підказки, які повідомлятимуть про стан текстового поля. Поля введення можуть мати один із таких станів: неактивно, наведення курсору, відключено, фокусування, перевірка, помилка. Усі стани мають бути чітко відокремлені один від одного й узгоджені за всією формою та застосуванням. Краще слідувати усталеним практикам, щоб не суперечити сформованим користувацьким ментальним моделям.
Вибір найкращого стилю текстового поля
Зазвичай у вас буде три основні варіанти розташування мітки: над полем і з вирівнюванням по лівому або правому краю. Вибір стилю залежатиме від ключових цілей і розмірів форми, бібліотеки компонентів і платформи, для якої ви проєктуєте. Усі вони мають свої переваги та недоліки.
Підкреслене поле введення, популяризоване рекомендаціями Material design - не найкращий вибір. Цей варіант було переглянуто в результаті великого дослідження "Evolution of Material Design", яке я рекомендую вам прочитати. Це ж дослідження показало, що користувачі віддають перевагу полям введення із закругленими кутами.
Мітки, вирівняні по лівому краю
Хороший вибір, коли запитувані дані не знайомі користувачам.
- Переваги: легко масштабовані мітки, раціональне використання вертикального простору.
- Недоліки: надмірна і змінна відстань між мітками і відповідними полями введення збільшує час їх заповнення.
Мітки, вирівняні по правому краю
Час заповнення полів форми майже вдвічі швидший порівняно з мітками, вирівняними по лівому краю
Переваги: мітки текстового поля і дані, що вводяться, розташовані дуже близько, це зменшує кількість рухів очей, що призводить до швидкого заповнення форми
Недоліки:складніше швидко переглянути форму і зрозуміти, для чого потрібна вся інформація
Мітки над полем введення
Найшвидший час заповнення форми і найкращий вибір для більшості випадків. Добре працюють на мобільних пристроях, так як не вимагають багато горизонтального простору
- Переваги: дають змогу користувачам одним рухом очей побачити мітку і текст, що вводиться. Найшвидший час заповнення форми
- Недоліки: потрібно більше вертикального простору
Ви можете дізнатися більше з цієї теми в статті Люка Вроблевскі "Найкращі приклади дизайну форм" і публікації Матео Пензо "Розміщення міток у формах".
Довжина текстового поля має бути пропорційною до інформації, очікуваної від користувача
Використання однакової довжини поля введення для всіх текстових полів у ваших формах зробить їх візуально приємнішими, але їх буде складніше заповнити.
Плейсхолдери не є заміною міток
Зникаючий текст-плейсхолдер напружує короткочасну пам'ять користувачів. Без міток користувачі не можуть перевірити заповнену інформацію перед надсиланням форми. Якщо вам потрібен дуже мінімалістичний дизайн форми, ви можете використовувати плаваючі мітки.
Текст-плейсхолдер всередині форми іноді може заплутати користувачів, краще використовувати текстову підказку поза полем.
Допоможіть користувачам заповнити форми
- Допоможіть вирішити частину запитів за допомогою автозаповнення. Коли ви друкуєте, ви можете натиснути або клавішу "Enter", або клавішу "стрілка вправо", щоб прийняти автозаповнення.
Знайдіть практично необмежений список для пов'язаних ключових слів і фраз за допомогою автозаповнення. Він відображається у вигляді списку з кількома реченнями у вигляді спадного меню.
Передньо заповніть поля і використовуйте розумні значення за замовчуванням значення за замовчуванням. Найчастіше ви можете легко визначити країну і місто користувача за IP або геолокацією. І на основі найпоширеніших сценаріїв, і аналітики ви можете визначити, що має бути вибрано за замовчуванням. Електронна комерція є винятком, не вибирайте ніяких переваг, пов'язаних з покупкою, наприклад, розмір або колір товару.
- Надавайте контекстну інформацію.Якщо ви знаєте, що для того, щоб ухвалити правильне рішення або уникнути помилок, користувачам знадобиться додаткова інформація, наприклад, баланс рахунку під час здійснення грошового переказу, відобразіть її.
Використовуйте вбудовану перевірку
"Перевірка в реальному часі" - це перевірка достовірності даних, введених користувачем у режимі реального часу в міру заповнення форми, на відміну від одноразової перевірки даних під час надсилання форми. Реалізуйте це правильно, щоб не завдати шкоди:
- Відображайте повідомлення перевірки поруч із полем введення
Не кричіть на користувачів. Повідомлення про помилки повинні повідомляти користувачам, як вирішити проблему, а не звинувачувати їх
Уникайте "передчасної перевірки", коли поле позначено як недійсне, до того, як користувач закінчить введення.
Подумайте про використання "позитивної перевірки", це може додати відчуття захоплення і прогресії.
Зменшіть кількість полів
Це зніме візуальне та когнітивне навантаження, і форма матиме набагато простіший вигляд.
- Не розбивайте текст, наприклад, повне ім'я і дату, на кілька полів
- Не запитуйте одну й ту саму інформацію кілька разів
- Максимально скоротіть текст міток і підказок
Приховуйте нерелевантні поля
Розкриваючи інформацію поступово, ми показуємо тільки найнеобхідніше і допомагаємо користувачам справлятися зі складністю, коли це необхідно.
Використовуйте умовну логіку
Умовна логіка дає змогу автоматично показувати або приховувати поля і пропускати сторінки у формі, ґрунтуючись на відповідях відвідувачів. Такий підхід не тільки скоротить кількість полів, а й зробить процес заповнення більш персоналізованим і схожим на розмову.
Групуйте пов'язані поля
Один із найпростіших способів спростити складні форми - почати групувати пов'язані поля. У гештальтпсихології існує кілька принципів групування, які допомагають предметам здаватися пов'язаними: близькість, схожість, безперервність, завершеність і зв'язність. Групування десятків неструктурованих полів у кілька керованих наборів значно підвищить юзабіліті форми.
Уникайте використання декількох стовпців
Один стовпець макета створює для користувача чіткий шлях заповнення форми. При використанні декількох стовпців користувачі можуть пропускати поля, вводити дані в неправильні поля або просто зупиняються, що може призвести до відмови від заповнення форми.
Розбийте складні форми на кілька простих кроків
Іноді навіть після видалення всього непотрібного деякі форми можуть бути величезними. Розбиваючи величезні завдання на низку менших завдань, форми виглядають набагато простіше і мотивують користувачів виконувати процес до кінця.
Відображайте кроки і візуально повідомляйте про прогрес, який робить користувач, це дає більше задоволення і мотивує рухатися вперед
Не дробіть форму, занадто багато кроків не допоможе, а просто дратуватиме користувачів
Продовжуйте узагальнювати ключову інформацію, щоб зменшити занепокоєння і, в кінці необхідно зробити оглядовий крок.
Мінімізуйте можливість навігації за межами майстра
Якщо форма досить велика, щоб розбити її на кілька етапів, вона заслуговує окремого чітко сфокусованого простору для роботи з нею. Надання загальної навігації або будь-яких посилань, які можуть порушити процес, просто створить плутанину. Я б також радив не використовувати багатокрокові форми в маленьких спливаючих вікнах.
Показуйте відповідний тип клавіатури
Android або iOS надають кілька різних типів клавіатури, кожен з яких призначений для полегшення заповнення інформації різного типу. Щоб спростити введення даних, клавіатура, що відображається під час редагування текстового поля, має відповідати типу вмісту поля. Пам'ятайте, де клавіатура з'явиться. Щоб без необхідності не додавати скрол, розташуйте текстові поля у верхній області.
Правильний дизайн створення пароля
- Дозвольте користувачам знімати маску зі свого пароля замість того, щоб просити ввести його 2 рази. Це також буде працювати краще для додатків, що генерують паролі.
- Постійно відображайте вимоги до пароля і вказуйте прогрес виконання всіх критеріїв. Спробуйте спростити вимоги для користувача.
- Використання вимірювачів надійності спонукає користувачів створювати більш надійні паролі
Переклад статті uxdesign.cc
Топ коментарі (0)