Помилки у веб-формах і всяке таке

Розповідає Василь Яремій

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

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

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

 

Унеможливлюємо некоректний ввід даних

Насамперед, не можна дозволити помилці трапитися. Потрібно автоматично виправити те, що можна:

• використовувати маски для введення (+380 XX XXX-XX-XX);

• виправляти кирилицю на латиницю і навпаки;

• пропонувати вибір з набору варіантів замість простого поля введення;

• блокувати недоступні дати в календарі.

 

Не показуємо помилку, якщо поле не заповнене

Деякі розробники вважають помилкою незаповнене обов’язкове поле. Регулярно трапляються форми, в яких не можна натиснути таб декілька разів і не замастити всю форму помилками.

 

 

Форму можна заповнювати в будь-якому порядку, заходити і виходити з полів, і ніякої помилки в цьому не повинно бути.

 

Про помилки повідомляємо при виході з полів

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

 

Корисність повідомлення

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

• Що трапилося? — Не вистачає грошей на карті (погано: Щось пішло не так. Проблема з картою).

• Які наслідки? — Оплата не пройшла, але кошти лишилися на карті.

• Що далі робити? — Поповніть карту і повторіть спробу, або купіть в кредит.

Текст помилки слід виводити біля поля, в якому вона була допущена. Потрібно заздалегідь передбачити для неї місце.

 

 

В складних формах біля всіх неочевидних полів бажано вказувати відповідний коментар.

 

 

При незаповнених обов'язкових полях блокуємо кнопку відправки

Якщо користувач не заповнив обов’язкове поле, краще повідомити про це при відправці або взагалі блокувати кнопку відправки.

 

 

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

Якщо користувач натискає на неактивну кнопку, має відбуватися повернення до першого не заповненого поля чи поля з помилкою.

 

 

Але не варто блокувати кнопку в формах з єдиним полем пошуку. Складається враження, що вся форма недоступна.

 

 

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

 

Зрозуміла кнопка

Будь-яка форма завершується кнопкою, що відправляє всі дані на сервер. Підпис повинен відповідати дії, яка відбудеться при натисканні на кнопку. Наприклад, пошуковій формі потрібна кнопка «Знайти», формі авторизації — «Увійти», а формі замовлення в інтернет-магазині — «Замовити».

 

 

Бонус-трек

Для форми реєстрації і входу використовуємо лише одне поле для паролю. Поле «пароль ще раз» — зайва формальність, відновити пароль можна в будь-який момент. По замовчуванню приховуємо в полі символи зірочками чи крапочками. Водночас даємо можливість користувачу побачити, що він вводить, натиснувши на відповідну іконку показати/приховати символи.

 

 

Користуйтеся на здоровля!