Людина не повинна розгадувати інтерфейс
Уявімо форму запиту на розробку сайту. Відвідувач описав завдання, залишив контакт і натиснув кнопку, але побачив лише червону рамку. Що сталося: не вистачає номера, зник інтернет чи запит уже надісланий? Така невизначеність є проблемою дизайну, а не неуважності людини. У макеті корисно показати не тільки ідеально заповнену форму, а й незавершене введення, кілька помилок, очікування та успішний результат. Це невеликі екрани, від яких залежить зрозумілість усього шляху.
Поясніть вимоги до введення
Кожному полю потрібна зрозуміла назва; WAI рекомендує пов’язувати її з елементом введення. Приклад формату не замінює назву поля. У нашому умовному брифі можна окремо позначити, що телефон необов’язковий, якщо достатньо електронної пошти. Не варто вимагати повну адресу компанії, коли для першої розмови вона не потрібна. До малювання форми складіть список її полів і поясніть призначення кожного. Якщо пояснення не знаходиться, поле варто переглянути. W3C WAI: Labeling Controls
Назвіть конкретну проблему
Виявлену помилку потрібно описати текстом і вказати відповідне поле; одного кольору недостатньо. Замість абстрактного «Некоректні дані» можна написати «Додайте адресу електронної пошти». Для нашої форми запиту варто підготувати окремі тексти для порожнього контакту, неповного опису та тимчасової недоступності сервісу. Не змішуйте їх в одну червону плашку: помилка введення і збій надсилання потребують різних дій. W3C: Error Identification
Дайте шлях до виправлення
Коли спосіб виправлення відомий і безпечний, запропонуйте його. Наприклад, для поля з конкретним обмеженням довжини поясніть це обмеження, а не просіть «спробувати ще». У багатопольовій формі загальний список проблем із переходами до полів може доповнювати підказки біля них. Уникайте ситуації, коли повідомлення перекриває введений текст. Перевіряйте сценарій клавіатурою: людина має знайти проблемне місце, виправити його і продовжити без перезаповнення всього брифу. W3C: Error Suggestion
Не плутайте перевірку з доставкою
Перевірка в браузері не замінює серверну перевірку. Так само правильний формат адреси ще не означає, що повідомлення доставлено. Текст результату має відповідати фактичній відповіді системи. Для нашого прикладу «Запит збережено» і «Не вдалося надіслати» є різними станами. Не додавайте обіцянку дзвінка за п’ять хвилин, якщо такого процесу немає. Окремо продумайте повторне натискання, повільне з’єднання та повторне відкриття сторінки. MDN: Client-side form validation
Перевірте не лише зелений сценарій
WAI радить повідомляти і про успіх, і про невдачу надсилання. Перед запуском пройдіть власний короткий маршрут: порожня форма, один неправильний контакт, довгий текст, виправлення, успішний запит і збій сервісу. Перевірте збільшений текст, телефон та клавіатуру; для доступності потрібна й перевірка допоміжними технологіями. Такий список не є сертифікацією, але допомагає побачити, чи форма справді підтримує людину замість того, щоб зупиняти її. W3C WAI: User Notifications