Дізнайтеся, як покращити дизайн цифрових форм
Ці найкращі практики слугують коротким помічником при створенні форм. Переконайтеся, що завжди пам'ятайте про свій контекст, щоб визначити найкращій варіант. Як і в більшості речей у дизайні, часто існують винятки з найкращих практик.
Використовуйте мітки (label)
Мітки є обов'язковими для забезпечення доступності. Програми для зчитування з екрану повідомляють користувачам про кожну мітку. Без належних міток форми будуть недоступні для багатьох людей. Переконайтеся, що кожне поле форми має label, використовуйте відповідну семантику HTML і використовуйте ARIA, коли це необхідно.
Уникайте заповнювачів (placeholder) у якості мітки
Використання заповнювача як мітки створює навантаження на короткочасну пам'ять. Мітка зникає, як тільки користувач починає вводити текст, і користувач повинен очистити введений текст, щоб знову відкрити мітку-заповнювач.
Заповнювачі створюють додаткові проблеми, коли вони занадто світлі або темні. Занадто темний заповнювач можна сплутати із заповненим текстом. Якщо він занадто світлий, деякі користувачі можуть не помітити заповнювач.
Робіть мітки короткими
Уникайте довгих етикеток, коли це можливо, щоб форми було легко читати та сканувати.
Узгодьте довжину та структуру поля з передбачуваним введенням даних
Довжина поля визначає діапазон відповідей. Використовуйте цей параметр для полів із визначеною кількістю символів, як-от номери телефонів, поштові індекси тощо.
Поля форми мають виглядати як поля форми
Креативність часто призводить до негативних результатів при розробці форм. Інноваційні на перший погляд ідеї можуть захопити навіть найбільші світові організації та знизити зручність використання для мільйонів, якщо не мільярдів людей. [Google непомітно змінив свій матеріальний дизайн текстових полів у 2017 році (https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03) після того, як виявив, що багато користувачів не знали, що можуть взаємодіяти з даними, які вводяться.
Коли справа доходить до полів введення, дотримуйтеся стандартних конвенцій дизайну. Якщо ви вирішили "винайти велосипед", обов'язково проведіть ретельне юзабіліті-тестування.
Відрізняйте поля форми від інших елементів
Поле форми повинно візуально пояснювати свою функцію. Переконайтеся, що воно достатньо відрізняється від інших елементів інтерфейсу, щоб користувачам не потрібно було здогадуватися.
Використовуйте відповідний тип вводу та тег
Типи вводу роблять форму більш доступною та покращують взаємодію з користувачем. Наприклад, використання правильного типу введення викликає відповідну клавіатуру на мобільних пристроях (цифри проти літер).
Дизайнери та розробники часто не звертають уваги на такі прості речі, як використання перемикача замість прапорця для запитань з декількома варіантами відповідей, але з однією правильною відповіддю.
Форми мають бути в один стовпчик
Форми з однією колонкою зручніше сканувати і вони краще відображаються на мобільних пристроях. Кілька колонок можуть напружувати користувача і змушувати його випадково пропускати поля.
Як і в більшості кращих практик, з цього правила є винятки (наприклад, наступне в цьому списку). Переконайтеся, що ви завжди пам'ятаєте про контекст, який ви розробляєте, щоб визначити найкращу презентацію.
Поля, які логічно йдуть одне за одним, повинні бути об'єднані в лінію
Нагромадження пов'язаних полів, таких як імена, адреси та платіжні дані, викликає непотрібне тертя і може порушити потік користувачів.
Опустіть непотрібні поля
Опустіть необов'язкові поля і подумайте про інші способи збору даних. Завжди запитуйте себе, чи можна зробити висновок, відкласти або повністю виключити питання.
Зробіть кнопки дій специфічними для конкретного завдання
Текст кнопки "Надіслати" повинен чітко і лаконічно описувати дію, яку вона викликає. Користувач не повинен заплутатися в тому, що станеться після натискання.
Згрупуйте мітки з їхніми полями введення
Показуйте мітки з відповідними даними, щоб користувачам було зрозуміло, яке поле вони заповнюють. Помилки зазвичай виникають, коли користувач прокручує сторінку вгору і вниз і робить неправильну асоціацію.
Уникайте великих літер
Між регістром речення і регістром заголовка є питанням стилю, але всі великі літери ніколи не є гарною ідеєю. Великі літери важко читати, сканувати, і вони просто виглядають неприємно.
Розташовуйте прапорці та перемикачі вертикально
Коли прапорці та перемикачі розташовано вертикально, їх легше сканувати. Однак, представлення опцій з відповідною графікою може додати додатковий вимір до дизайну, що зводить нанівець необхідність вертикальної презентації.
Показуйте всі варіанти вибору якщо їх менше 6
Розміщення варіантів у випадаючому списку приховує варіанти вибору і вимагає двох кліків для вибору варіанту. Використовуйте випадаючий список, коли є більше 5 варіантів, і включіть пошук у випадаючому списку, коли більше 25 варіантів.
Однак можна використовувати розкривний селектор для менш ніж 6 варіантів, якщо простір обмежений, наприклад, у певних ситуаціях вбудованого редагування.
Показуйте помилку біля поля де вона виникла
Намагайтеся запобігати помилкам, наскільки це можливо, будучи чіткими та лаконічними. Якщо користувач припустився помилки, покажіть йому, де вона сталася, поясніть причину і повідомте, як її виправити.
Згрупуйте пов'язані поля
Створюйте логічні групи, щоб користувач міг швидше інтерпретувати те, що запитується у формі, і керувати запитами в пакетах.
Відрізняйте первинні дії від вторинних
Щоб уникнути помилок, зробіть основну дію форми, наприклад, відправку, більш помітною, ніж другорядні варіанти, щоб уникнути помилок. І завжди запитуйте себе, чи потрібна другорядна дія взагалі.
Додайте індикацію прогресу для багатокрокових форм
Багатокрокові форми, так звані майстри форм, повинні показувати прогрес, щоб користувач знав, де він знаходиться і що далі.
Протидійте модальностям на модальностях
Взаємодія з декількома модальностями може призвести до помилок користувача. Замість цього розгляньте можливість вбудованого редагування в межах одного модального режиму.
Завжди думайте про доступність
Занадто часто дизайнери не перевіряють реалізацію своїх проектів, щоб переконатися, що вони відповідають критеріям доступності.
Щоб дізнатися більше про те, як семантично реалізувати доступні форми, я наполегливо рекомендую прочитати W3C's guidance on how to create websites that meet WCAG.
Переклад coyleandrew.medium.com
Топ коментарі (1)
Все чітко і по факту. Можна юзати як чекліст!