Як створювати ефективні повідомлення про помилки

Ефективні повідомлення про помилки – помітні, конструктивні та транслюють шанобливе ставлення до зусиль користувача.

Понад 30 років тому Якоб Нільсен сформулював 10 евристик юзабіліті, загальних рекомендацій щодо проєктування цифрових продуктів. Сьогодні ці евристики, як і раніше, актуальні. Евристика № 9 стосується оформлення повідомлень про помилки: «Допомагайте користувачам розпізнавати, діагностувати та виправляти помилки».

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

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

  • Візуальна доступність: у якому вигляді повідомлення про помилки надаються користувачам.
  • Комунікація: що повідомлення про помилку розповідає про проблему та можливі рішення.
  • Ефективність: як повідомлення про помилку допомагає користувачеві подолати розрив між оцінкою та виконанням (цей розрив описує дві основні проблеми, які потрібно подолати, щоб успішно взаємодіяти з будь-яким пристроєм: після виконання користувачі повинні оцінити результат, спланувати виконання наступного кроку, оцінити цей результат тощо), поки досягнуто бажаної кінцевої мети).

Рекомендації щодо візуальної доступності

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

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

👎🏻 Коли користувач вводить недійсний URL у профілі Instagram в нижній частині екрана з'являється малопомітне повідомлення про помилку

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

Крім того, пам'ятайте про рекомендації щодо забезпечення доступності! У світі близько 350 мільйонів людей з порушеннями сприйняття кольору, тому ніколи не використовуйте тільки колір або анімацію для позначення помилок.

👍🏻 Amazon використовує поєднання кількох індикаторів помилки: червоне обведення поля, іконку та червоний текст

👍🏻 CafePress показує анімований банер, щоб привернути увагу користувача до порожнього поля.

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

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

👍🏻 Компанія Kohl's показує повідомлення без стандартного червоного оформлення, щоб повідомити користувачів про можливі затримки доставки.

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

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

👍🏻 CLEAR розміщує поруч із текстовим полем чіткі вимоги до пароля та доступну інформацію про їх дотримання. Це правильне рішення, оскільки створення пароля — взаємодія з високим ризиком помилок
👎🏻 На сторінці продовження реєстрації транспортних засобів у Техасі відображається помилка, якщо користувач переміщає фокус з поля введення email, нічого в ньому не набравши: людині повідомляють, що вона зробила щось не так, хоча вона просто вивчала інтерфейс

Рекомендації щодо комунікації

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

Вибирайте зрозумілі формулювання. Повідомлення мають бути написані простою мовою, а сам текст має бути читабельним та розбірливим. Уникайте технічного жаргону, натомість вибирайте формулювання, знайомі вашим користувачам. Найпоширеніше в Інтернеті повідомлення про помилку — сторінка 404 — виняток з правил. В інших випадках використовувати коди помилок або абревіатури не варто.

Коротко і точно опишіть проблему. Розпливчасті повідомлення, наприклад «Відбулася помилка», позбавлені контексту. Опишіть конкретні проблеми, щоб допомогти користувачам зрозуміти, що сталося, але не вдавайтеся в технічні деталі, щоб не заплутати їх.

👎🏻Коли користувачі вибирають велику кількість фільтрів у пошуку ресторанів, Disneyworld намагається пом'якшити відсутність результатів каламбурами замість того, щоб чітко роз'яснити ситуацію.

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

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

👍🏻 На скриншоті ми бачимо повідомлення Target про те, що користувачі повинні витратити більше, щоб їх замовлення було доставлено того ж дня. Зверніть увагу, акцент у повідомленні зроблено саме на сумі, магазин не звинувачує клієнта, що він набрав недостатньо продуктів.
👎🏻 Якщо неповнолітній користувач вибирає пункт Магазин у меню на сайті National Geographic Kids, йому не кажуть, що робити далі. Повідомлення було б ефективніше, якби в ньому роз'яснювалося, що користуватися магазином можуть лише дорослі і що дитина має звернутися до них за допомогою

Рекомендації щодо ефективності

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

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

👍🏻 Сучасні поштові програми виявляють поширені помилки, наприклад, відсутність вкладення, і попереджають про них

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

👍🏻 Якщо користувач натискає Назад після додавання зображення до Instagram-сторіс, система пропонує зберегти чернетку

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

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

👍🏻 Компанія Vistaprint повідомляє, що станеться з текстом, що виходить за межі області друку
👎🏻 Хоча компанія Zazzle позначає область друку за допомогою рамки, вона не попереджає користувача про обрізаний текст, що може призвести до створення та купівлі бракованої футболки

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

Саме в такі моменти (їх слід уникати за будь-яку ціну) поєднання вибачень з чимось несподіваним або новим може врятувати ситуацію, яку користувачі, швидше за все, запам'ятають через правила піку та завершення. 

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

👍🏻 AI-інструменти, такі як ChatGPT, можуть використовувати вимушені паузи для розваги та навчання користувачів. На скриншоті: ChatGPT виявився тимчасово недоступним, і на екрані з'явився приклад сценарію, який він здатний написати
👍🏻 Хоча Twitter перестав використовувати кита Fail Whale (художник Yiying Lu) для сповіщення користувачів про збої в роботі сервісу, зображення стало більше, ніж просто повідомленням про помилку, і набуло популярності як приклад дотепного зображення зусиль (кит символізує навантаження сервера, а пташки, логотип соцмережі, намагаються його підняти)

Джерело

🖤
Якщо тобі сподобався цей матеріал, підпишись на наші соціальні мережі Instagram / Facebook / Linkedin / Telegram. Там ти знайдеш більше цікавих матеріалів про дизайн.💬 Дизайн-чат