Error message з кількома невідомими

Як в книжці

Error message (далі EM) — це когнітивно важкий елемент. Червоний колір, сухий технічний текст, невизначеність щодо подальших дій та інші фактори змушують користувачів стресувати та заважають їм досягнути цілі.

Source: support.avira.com

EM повинен вирішувати проблему, а не описувати її. Алгоритм корисного повідомлення про помилку виглядає як:

$що_сталося + $як_пофіксити = $меседж + $текст_кнопки

Як зробити EM кращим

Перше речення: причина помилки зрозумілою (= нетехнічною) мовою
Друге речення: як можна вирішити проблему
Тримати загальний діапазон у 10-20 слів
Уникати технічних термінів
Зняти напругу, якщо дозволяє Tone of Voice, але не борщити

Як зробити EM ще кращим

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

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

А окреме місце в раю отримують iOS-розробники, які ставлять нумеричну клавіатуру там, де потрібно: введення мобільного номеру, PIN-коду та інших даних, що не потребують літер.

Source: mobilespoon.net

Як було в мене

Задача з зірочкою — прописати error message, не знаючи ні причини помилки, ні конкретних подальших дій. Помилка відбувалась на боці third-party інтеграцій, тож ми могли лише логувати її ID та передавати техсапорту. Бонус: на фронт-енд часу немає, тому імплементуємо браузерним alert()-меседжем.