Готовий переклад Веб формы: распространенные ошибки и как их исправить / Веб-форми: розповсюджені помилки та способи їх вирішення: контент

Будь то потік реєстрації, багатокроковий степпер, або монотонний інтерфейс введення даних, форми є одним із найважливіших компонентів проектування цифрових продуктів. Ця стаття присвячена різним «так» і «ні» дизайна форм. Майте на увазі, що це загальні рекомендації, і із кожного правила є вийнятки.

Форма має складатися із однієї колонки

(картинка) Кілька колонок порушують вертикальну дінаміку користувача

Написи потрібно розміщувати над полями для введення

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

Згрупуйте назви полів із, власне, самими полями для введення

(картинка) Розмістіть поля та їх назви поруч, але переконайтеся, що між ними існує достатній проміжок.

Не вписуйте назви полів ВЕЛИКИМИ буквами

(картинка) Слова, які написані заголовними буквами важко читати і переглядати

Якщо опцій менше шести – відобразіть їх усі

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

При можливості не використовуйте текст-заповнювач

(картинка) Для заощадження місця на екрані, ви можете захотіти використати текст-заповнювач замість назв полів. Це призведе до більшої кількості проблем з юзабіліті, які були описані Кеті Шервін із Nielsen Norman Group.

Для вищої читабельності розмістіть чекбокси і радіокнопки один над одним

Зробіть CTA з описами

(картинка) Всі CTA мають виражати намір

Вкажіть причину помилок

(картинка) Покажіть користувачу де саме було припущено помилки і з якої причини.

Використовуйте перевірку тільки після того, як користувач заповнить форму

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

Не приховуйте основний текст-підказку

(картинка) При можливості показуйте додатковий текст. Якщо текст складний, то розгляньте варіант його розміщення біля поля для введення, коли воно знаходиться у фокусі.

Відокремте основні дії від другорядних

Використовуйте довжину поля у якості аффорданса

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

Замість * використовуйте словесне позначення необов'язкових полів

(картинка) Користувачі не завжди знають, що значить символ *, тому, замість нього, необов'язкові поля краще позначати словесно.

згрупуйте пов'язану інформацію

(картинка) Користувачі думають комплексно, тому створення логічних груп допоможе розпізнати контент.

Навіщо питати?

Опустіть необов'язкові поля і подумайте про інші способи збору даних. Завжди питайте себе, чи можна відкласти питання, або повністю його виключити.

Збирання даних все частіше й частіше автоматизується. Наприклад, мобільні пристрої та розумні годинники збирають великі об'єми даних без погодження користувача. Подумайте про те, як можна використати діалоговий UI, SMS, OCR, e-mail, голос, розміщення, відбитки пальців, біометрію, і т.д.

Зробіть процес кумедним

Життя коротке. Ніхто не хоче заповнювати форми. Будьте товариським. Будьте веселим. Залучайте користувача поступово. Дивуйте. Роль дизайнера у тому, щоб виразити бренд своєї компанії, щоб викликати емоційну реакцію. Якщо все зроблено правильно, це збільшить швидкість заповнення. Просто переконайтеся що ви не порушуєте правила, перераховані вище.

джерело: https://uxdesign.cc/design-better-forms-96fadca0f49c

Перекладено у ПАЛЯНИЦІ
http://translate.thealphacentauri.net/book/153/674

Перекладачі: TSpell

Настройки

Готово:

100.00% КП = 1.0

Скачати як .txt файл
Посилання на цю сторінку
Зміст перекладу
Інтерфейс перекладу