Типові проблеми під час створення станів помилок (error states) та як їх уникнути

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Всім привіт. Мене звати Олена Шевченко, я Senior UI/UX Developer у компанії Svitla Systems. У цій статті я опишу найбільш поширені помилки, яких припускаються під час створення станів помилок (error states), та способи їх уникнення.

Спочатку давайте розберемо, що ж таке помилка (error) і стан помилки (error state).

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

Стан помилки — це частина форми або компонент, з якою взаємодіє користувач на певний момент, трансформований із дефолтного стану в стан помилки.

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

Добре продумані стани помилок спонукають користувача діяти правильно та допомагають у вирішенні проблем.

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

Головні характеристики станів помилок (error states)

1. Помилки повинні бути добре помітними

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

• Використовуйте від 2 до 3 кольорів. Уникайте невдалих комбінацій з червоним та зеленим, червоним та синім, синім та фіолетовим, зеленим та сірим.
• Користуйтесь інструментами для користувачів-дальтоніків. Спробуйте Adobe Color. Він зручний в користуванні і максимально підходить для таких цілей.

2. Стилі помилок, такі як колір, тип шрифту, розмір та іконки, повинні використовуватися послідовно та виглядати однаково.

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

3. Помилка повинна знаходитись безпосередньо там, де відбувся збій.

Я часто бачу випадки, коли поле для тексту не валідується, але відповідного повідомлення немає. Ще один приклад — повідомлення про помилку з’являється в іншій частині екрану, тому залишається непоміченим та призводить до блокування наступних дій.

4. Текст помилки повідомляє про проблему та підказує, як її вирішити.

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

Зауважте, що для людей з вадами зору, повідомлення про помилку може бути єдиним способом зрозуміти, що ж сталося. Саме тому змістовні повідомлення про помилки такі важливі.

5. Зміст помилок повинен створюватись з думкою про користувача.

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

Дизайн-компоненти, що сигналізують про помилки (errors)

Давайте розглянемо найбільш поширені дизайн-компоненти, які повідомляють про стани помилок.

Текстові поля (text fields)

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

Текстові області (text areas)

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

Повідомлення типу toast

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

Toasts зі станами помилок можуть поділятися на два типи:

Попередження (warning). Попередження з’являються, коли дія не може бути виконана через зовнішній фактор. Його або можна усунути, або ні.

Помилка (error). Помилка типу toast відображається, коли користувач завершив дію, проте система перешкоджає цьому через певні проблеми.

Сповіщення (alerts)

Сповіщення (alert) містить контекстне попередження щодо дій користувача.

Кнопки сповіщення (alert buttons)

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

Поради щодо створення кнопок сповіщень

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

У 2017 році Hagtvedt & Brasel провели експерименти з тестування впливу насиченості кольору на сприйняття розміру об’єктів. Виявилось, що майже 65% піддослідних вважали об’єкти з більш насиченими кольорами більшими. Ще один цікавий експеримент показав, що одні й ті самі об’єкти привертали більше уваги.

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

Знаючи такі патерни поведінки, ви можете передбачити реакцію користувача при розробці компонентів помилки.

• Текстові кнопки (text buttons) найменше впадають в око, але водночас допомагають звернути увагу на те, які дії слід виконати.
• Контурні кнопки (outline buttons) вважаються середніми за рівнем привернення уваги та менш «тривожними». Вони сповіщають про дії, які можна виправити.
• Однотонні кольорові кнопки (solid color background buttons) привертають більше уваги та попереджають про дії, які користувач не матиме змоги виправити, наприклад, втрата даних або неможливість скасувати дію.

Висновок

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

Однак, дотримання «найкращих практик» щодо створення ефективних станів помилок допоможе запобігти помилкам користувача.

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

А в наступній статті ми розглянемо використання помилок у додатках та на вебсайтах на реальних прикладах і поговоримо про те, як можна виправити неправильно оформлені стани помилок у дизайн-компонентах.