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

Оригінал російською Переклад українською

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

#1

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

TSpell 4.07.17 в 16:38

Форма должна состоять из одной колонки

#2

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

TSpell 4.07.17 в 16:39

(картинка) Несколько колонок нарушают вертикальную динамику пользователя

#3

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

TSpell 4.07.17 в 16:39

Надписи нужно располагать над полями ввода

#4

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

TSpell 4.07.17 в 16:40

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

#5

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

TSpell 4.07.17 в 17:05

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

#6

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

TSpell 4.07.17 в 17:07

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

#7

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

TSpell 4.07.17 в 17:08

Не вводите названия полей заглавными буквами

#8

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

TSpell 4.07.17 в 17:09

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

#9

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

TSpell 4.07.17 в 17:10

Если опций меньше шести – отобразите их все

#10

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

TSpell 4.07.17 в 17:11

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

#11

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

TSpell 4.07.17 в 17:17

По возможности не применяйте текст-заполнитель

#12

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

TSpell 4.07.17 в 17:18

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

#13

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

TSpell 4.07.17 в 17:21

Для лучшей просматриваемости разместите чекбоксы и радиокнопки друг под другом

#14

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

TSpell 4.07.17 в 17:23

Сделайте СТА описательными

#15

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

TSpell 4.07.17 в 17:24

(картинка) Все СТА должны выражать намерение

#16

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

TSpell 4.07.17 в 17:25

Укажите причину ошибок

#17

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

TSpell 4.07.17 в 17:25

(картинка) Покажите пользователю где именно была допущена ошибка и по какой причине.

#18

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

TSpell 4.07.17 в 17:26

Используйте встроенную проверку только после того, как пользователь заполнит форму

#19

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

TSpell 4.07.17 в 17:26

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

#20

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

TSpell 4.07.17 в 17:28

Не скрывайте основной вспомогательный текст

#21

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

TSpell 4.07.17 в 17:29

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

#22

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

TSpell 4.07.17 в 17:30

Отделите основные действия от второстепенных

#23

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

TSpell 4.07.17 в 17:30

Используйте длину поля в качестве аффорданса

#24

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

TSpell 4.07.17 в 17:32

(картинка) Длина поля должна говорить о длине предполагаемого ответа. Применяйте эту практику для полей, с определенным количеством символов, например, в случае с полями ввода номера телефона, почтового индекса, и т.д.

#25

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

TSpell 4.07.17 в 17:34

Вместо * используйте словесное обозначение необязательных полей

#26

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

TSpell 4.07.17 в 17:35

(картинка) Пользователи не всегда знают, что обозначает символ *, поэтому, вместо него, необязательные поля лучше обозначать словесно.

#27

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

TSpell 4.07.17 в 17:36

Сгруппируйте связанную информацию

#28

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

TSpell 4.07.17 в 17:37

(картинка) Пользователи думают комплексно, поэтому создание логических групп поможет им быстрее распознать контент.

#29

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

TSpell 4.07.17 в 17:37

Зачем спрашивать?

#30

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

TSpell 4.07.17 в 17:37

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

#31

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

TSpell 4.07.17 в 17:39

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

#32

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

TSpell 4.07.17 в 17:43

Сделайте процесс забавным

#33

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

TSpell 4.07.17 в 17:43

Жизнь коротка. Никто не хочет заполнять формы. Будьте общительным. Будьте веселым. Вовлекайте пользователя постепенно. Удивляйте. Роль дизайнера в том, чтобы выразить бренд своей компании, чтобы вызвать эмоциональную реакцию. Если все сделано правильно, это увеличит скорость заполнения. Просто убедитесь, что вы не нарушаете правила, перечисленные выше.

#34

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

TSpell 4.07.17 в 17:48

источник: https://uxdesign.cc/design-better-forms-96fadca0f49c

#35

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

TSpell 4.07.17 в 17:48

Хвилинку...