Стратегії взаємодії з помилками у цифрових продуктах
Хороший дизайн не просто має гарний вигляд — він реально рятує користувачів від помилок або дає їм змогу легко «відкотитися» назад. Але, на жаль, не всі продукти з цим справляються. І ось тобі живий приклад:
Нещодавно я вирішив протестувати кілька онлайн-калькуляторів тривалості життя. Хотів подивитися, до якого року мені планувати своє життя. Більшість таких калькуляторів були дуже базовими: кілька питань — і вуаля, отримай умовну дату. Але я знайшов один крутіший варіант: з деталізованими питаннями про здоров’я, спосіб життя, родинну історію — аж 35 запитань. Все, як годиться, зі спадними списками й зручним UX.
Але трапилась одна дрібниця, яка зіпсувала весь процес:
👉 У формі було надто легко випадково натиснути кнопку Reset («Скинути») замість Calculate («Розрахувати»). Я заповнив усі поля, натиснув кнопку «Розрахувати», щоб дізнатись свій фініш... і бам! — натиснув не туди. Дані стерлися. Починай спочатку.
На скриншоті видно, що обидві кнопки — однакові за виглядом, з нечіткими підписами (сірий текст на сірому фоні 😵💫), і майже злиплися між собою. Ще й візуальна підказка «Calculate» розміщена саме над кнопкою «Reset». Тобто я чисто інстинктивно клікнув туди, де була чорна підказка, не думаючи. А далі — усе згоріло.
Такі ситуації — класика UX-помилок. І навіть базове юзабіліті-тестування могло б це виявити. Бо я дуже сумніваюся, що тільки я зробив цю дурницю.
💡 Що можна було б покращити в цьому дизайні:
- Зробити відступ між кнопками й правильно розмістити підказки — напроти відповідних дій. Або взагалі прибрати підказку, якщо кнопка вже має зрозумілий напис.
- Візуально розрізнити кнопки: наприклад, зробити «Розрахувати» більшою і зеленою, а «Скинути» — червоною і менш помітною.
- Додати підтвердження для деструктивних дій — типу «Точно хочеш усе стерти?». Це банально, але працює.
Бо хай там як, добре продуманий інтерфейс — це не просто красива обгортка. Це коли користувач відчуває себе впевнено і не боїться зробити щось не так.
Як працювати з помилками у дизайні
Щоб інтерфейс справді утримав користувача, важливо не тільки зробити його логічним і зрозумілим, а й передбачити, що може піти не так. І ось 4 стратегії, які можна застосувати:
- Зробити помилку неможливою.
Ідеальний варіант. Наприклад, блокування кнопки «Далі», доки не введено всі потрібні дані. - Максимально ускладнити можливість помилки.
Наприклад, різні кольори для кнопок дій, або автоматичне збереження даних. - Спростити відновлення після помилки.
Дозволь користувачеві повернутись на крок назад без втрати даних. Автозбереження — мастхев. - Просто дозволити їй статись.
Не робіть так. Це стратегія ледачого дизайнера.
(1) Зробіть помилку неможливою
Найефективніша стратегія — повністю виключити можливість помилки. Наприклад, порожнє текстове поле дозволяє користувачу ввести будь-яке значення, яке потім доведеться перевіряти на валідність. Натомість спадний список або інший обмежений тип вводу автоматично фільтрує неприпустимі значення.
Але цього недостатньо — потрібно переконатися, що всі значення у списку справді коректні. Досить поширена помилка: списки для вибору дати закінчення терміну дії кредитної картки, де можна вибрати рік, що вже давно минув. Або поля, які дозволяють ввести неіснуючі дати — наприклад, 30 лютого. Такі недогляди майже гарантовано призведуть до збоїв під час обробки інформації.
(2) Зробіть помилку максимально складною
Якщо повністю уникнути помилок неможливо, варто хоча б знизити ймовірність їх виникнення. У випадку з калькулятором тривалості життя автор запропонував три прості способи уникнути випадкового натискання неправильної кнопки. Суть у тому, що користувач повинен точно розуміти, чого очікувати від інтерфейсу.
Одне з ефективних рішень — чітко підписати кнопки в діалогових вікнах, щоб кожна дія логічно відповідала на поставлене запитання. Надто часто ми стикаємося з кнопками "OK" та "Cancel", які не пояснюють, що саме відбудеться після натискання. Схожа плутанина виникає з кнопками "Прийняти" та "Відхилити" — якщо запитання не сформульоване чітко, такі варіанти не дають зрозумілого вибору.
Уявімо ситуацію: користувач намагається скасувати підписку на журнал, і з’являється таке вікно:
Ви впевнені, що хочете скасувати підписку на журнал?
Тепер увага: якщо є кнопка "Скасувати", що вона означає? Скасувати скасування? Закрити вікно? А може — підтвердити скасування? Без чітких формулювань легко заплутатися. Натомість варіанти на кшталт "Так, скасувати" та "Ні, залишити" зменшують ризик помилкових дій.
Ще одна проста, але ефективна техніка — уникати дублювання вводу. Якщо користувача просять двічі ввести одну й ту саму інформацію (наприклад, адресу доставки та адресу для виставлення рахунку), краще надати опцію «Використати цю саму адресу» у вигляді чекбоксу. Це економить час і зменшує шанс на помилку.
(3) Спростіть відновлення після помилки
Навіть якщо ви доклали максимум зусиль, щоб уникнути помилок, вони все одно траплятимуться — як з боку користувача, так і внаслідок внутрішніх збоїв системи. Тому важливо проєктувати інтерфейс так, щоб користувач легко міг відновитися після таких ситуацій.
Стійкість системи — це її здатність адекватно реагувати на непередбачувані дані, події або умови. Вона значно підвищується, коли в інтерфейсі є багаторівнева функція «Скасувати/Повторити» (Undo/Redo), а також зрозумілий зворотний зв’язок, що допомагає виявити й виправити помилки.
Особливо дратує, коли при введенні некоректного символу (наприклад, у полі створення пароля або назви файлу) система просто відповідає щось на кшталт «Неправильні дані» або «Операція не вдалася». Програма знає, де саме проблема — тож чому б не підказати користувачу, який саме символ слід замінити? Змістовні повідомлення про помилки й чітко вказані правила заповнення набагато ефективніші, ніж абстрактні фрази без пояснень.
(4) Просто дозволити помилці статися — найгірше рішення
Найгірший підхід — дозволити помилці статися і залишити користувача сам на сам із її наслідками. Уявіть ситуацію: користувач запускає дію, яка залежить від виконання певних умов. Завдання системи — перевірити, чи виконані ці умови, і якщо ні — допомогти їх виконати. А не просто запускати процес і дивитись, що з цього вийде.
Інтерфейс повинен виявляти можливі перешкоди ще до початку дії — це економить час і сили користувача.
Користувачі цінують інтерфейси, які говорять з ними простою, людською мовою, допомагають уникати помилок або легко виправляти їх. Створювати такі продумані продукти не так вже й складно — особливо у порівнянні з відчуттям роздратування від сирої, непродуманої системи.
До речі, той самий калькулятор тривалості життя, який я тестував, показав, що мені залишилось ще кілька років. Гарна новина — навіть якщо він забрав у мене більше годин мого життя, ніж мав.