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

Сделайте СТА описательными
0Зробіть CTA з описами
Для лучшей просматриваемости разместите чекбоксы и радиокнопки друг под другом
0Для вищої читабельності розмістіть чекбокси і радіокнопки один над одним
(картинка) Для оптимизации экранного пространства, вы можете захотеть использовать текст-заполнитель вместо названий полей. Но такой подход приводит к большому количеству проблем с юзабилити, которые были описаны Кэти Шервин из Nielsen Norman Group.
0(картинка) Для заощадження місця на екрані, ви можете захотіти використати текст-заповнювач замість назв полів. Це призведе до більшої кількості проблем з юзабіліті, які були описані Кеті Шервін із Nielsen Norman Group.
По возможности не применяйте текст-заполнитель
0При можливості не використовуйте текст-заповнювач
(картинка) Выбор опции, размещенной в выпадающем меню требует двух кликов, а затем скрывает меню. Если вариантов больше пяти, то примените выпадающее меню. Также, если опций больше 25, то внедрите в выпадающее меню контекстный поиск.
0(картинка) Вибір опції, розміщеної в випадаючому меню потребує двох кліків, а потім приховує меню. Якщо варіантів більше п'яти, то застосуйте випадаюче меню. Також, якщо опцій більше 25, то вбудуйте у випадаюче меню контекстний пошук.
Если опций меньше шести – отобразите их все
0Якщо опцій менше шести – відобразіть їх усі
(картинки) Слова, написанные заглавными буквами сложно читать и просматривать
0(картинка) Слова, які написані заголовними буквами важко читати і переглядати
Не вводите названия полей заглавными буквами
0Не вписуйте назви полів ВЕЛИКИМИ буквами
(картинки) Расположите поля и их названия рядом, но убедитесь, что между ними существует достаточный зазор.
0(картинка) Розмістіть поля та їх назви поруч, але переконайтеся, що між ними існує достатній проміжок.
Сгруппируйте названия полей с самими полями ввода
0Згрупуйте назви полів із, власне, самими полями для введення
(картинка) Пользователи заполняют такие формы быстрее, чем формы, в которых надписи выровнены по левому краю. Также, верхнее выравнивание лучше адаптируется к мобильным устройствам. Однако, левое выравнивание можно применять для записи большого набора данных с разными опциями поскольку в этом случае, метки полей легче просматривать вместе с вводимой информацией.
0(картинка) Користувачі заповнюють такі форми швидше, ніж форми, в яких написи вирівнені по лівій стороні. Також, верхнє вирівнювання краще адаптується на мобільних пристроях. Проте, вирівнювання зліва можна застосовувати для запису більшого набору даних з різними опціями оскільки у цьому випадку, мітки полів легше переглядати разом із введеною інформацією.
Надписи нужно располагать над полями ввода
0Написи потрібно розміщувати над полями для введення
(картинка) Несколько колонок нарушают вертикальную динамику пользователя
0(картинка) Кілька колонок порушують вертикальну дінаміку користувача
Форма должна состоять из одной колонки
0Форма має складатися із однієї колонки
Будь то поток регистрации, многошаговый степпер, или монотонный интерфейс ввода данных, формы являются одним из наиболее важных компонентов проектирования цифровых продуктов. Эта статья посвящена разным «да» и «нет» дизайна форм. Имейте в виду, что это общие рекомендации, и из каждого правила есть исключения.
0Будь то потік реєстрації, багатокроковий степпер, або монотонний інтерфейс введення даних, форми є одним із найважливіших компонентів проектування цифрових продуктів. Ця стаття присвячена різним «так» і «ні» дизайна форм. Майте на увазі, що це загальні рекомендації, і із кожного правила є вийнятки.

Резюме
Стать:
чоловік
Рідна мова:
українська
З нами:
з 11 жовтня 2016 р. (1394 дня)
Діяльність:
540 версій перекладу з загальним рейтингом 3
91 коментар
Написати TSpell приватне повідомлення