Уявіть: ви хочете приєднатися до списку очікування на сайті ресторану. Перед вами велика кнопка «Приєднатися»… але вона неактивна й виділена сірим кольором. Ви пробуєте натиснути — марно. У підсумку залишаєтесь розгублені. Це типовий приклад поганого UX.
Що таке неактивна кнопка
Неактивна (disabled) кнопка — це елемент інтерфейсу, з яким неможливо взаємодіяти. Найчастіше її роблять сірою, щоб позначити недоступність дії. Формально це не порушує WCAG, але для користувача результат один — розчарування.
Чому вони шкодять користувачам
- Обманюють очікування. Кнопка закликає натиснути, але нічого не відбувається.
- Погано читаються. Сірий текст на сірому тлі — марна інформація.
- Немає пояснення. Людина не знає, що зробити, щоб «розблокувати» дію.
- Ускладнюють дизайн. Замість простого повідомлення про помилку команда мусить вигадувати складні валідаційні перевірки.
Коли неактивні кнопки можуть бути корисними
Є ситуація, коли неактивна кнопка справді працює на користь. Це момент, коли дія вже запущена, обробляється або стала недоступною. У такому випадку зміна стану кнопки на «сіру» діє як мікро-взаємодія: вона показує користувачу, що система працює, і водночас запобігає повторним діям.
Наприклад:
- після того, як користувач запросив SMS-код, неактивна кнопка не дає надіслати кілька запитів підряд, що може перевантажити систему;
- під час відправки форми це допомагає уникнути дублювання даних.
Як покращити дизайн неактивних кнопок
Отже, що це все означає для нас, як дизайнерів? Ось кілька дієвих порад:
- Використовуйте їх лише за вагомої причини. Наприклад, щоб показати недоступну дію, запобігти дублюванню відправлень або сигналізувати про процес, що триває.
- Зробіть їх інклюзивними. Кнопка має залишатися фокусованою для користувачів клавіатури, а скрінрідери повинні оголошувати її стан.
- Давайте пояснення. Покажіть, чому кнопка неактивна і що потрібно зробити далі: підказка, повідомлення про помилку чи інший візуальний сигнал.
- Уникайте плутанини. Активні кнопки не повинні виглядати так само, як неактивні, інакше користувач не знатиме, на що можна натискати.
Висновок
Неактивні кнопки можуть бути корисними в окремих випадках, але часто вони приносять більше шкоди, ніж користі. Використовуйте їх обережно, робіть доступними та завжди пояснюйте своїм користувачам наступний крок.
Пам’ятайте: неактивна кнопка без пояснення — це як замкнені двері без ручки. Ви бачите, що вони є, але не знаєте, як їх відчинити або чому вони зачинені. Хороший дизайн завжди дає ключ або хоча б табличку «Вихід».
Посилання по темі:
