Або чому кнопки “Скасувати” не повинні мати кольору.
Зазвичай, коли йдеться про кнопки, всі пишуть про CTA, зосереджуючись на особливості їхнього дизайну. Але в цьому випадку зміст дизайну цілком протилежний і має свої особливості, цілком альтернативний до основних кнопок. Тож давайте розберемося!
Що саме робить кнопка “Скасувати”? Вона відхиляє поточний екран користувача та повертає його до попереднього. Користувачі покладаються на цю невтішну кнопку як захист, щоб запобігти небажаним змінам у системі.
Для того, щоб ваші користувачі відчували себе в безпеці, кнопка “Скасувати” повинна означати безпеку, а не заклик до дії. Ось чому кнопки Cancel не повинні мати жодного кольору.
Нейтральний колір для нейтральної кнопки
Кнопки кольору сигналізують про заклик до дії. Кнопка “Скасувати” не є закликом до дії, оскільки після її натискання в системі не відбуваються зміни. Таким чином, ви ніколи не повинні підкреслювати це кольором, бо ви сформуєте в користувачів неправильне уявлення. Натомість вони повинні одержати враження, що ніяких змін не відбудеться.
Кнопка “Скасувати” повинна мати нейтральний колір. Коли користувачі помітять, що кнопка “Скасувати” без кольору, вони розпізнають її як резервну для швидшої безпечної дії. Це дуже важливо для користувачів, які помилково активують екран підтвердження і хочуть швидко вийти.
Коли кожна кнопка на екрані має колір, вони конкурують за увагу. Це призводить до того, що користувачі довше обмірковують кожну дію. Кнопка нейтрального кольору “Скасувати” полегшує їхнє рішення, не конкуруючи. Користувачі, які готові до дії, не будуть відволікатися на кнопку Скасувати.
“Скасувати” має багато імен
Не всі кнопки “Скасувати” позначені як “Скасувати”, але вони функціонують так само. Наприклад, кнопка “Скасувати” може мати мітку “Не зараз”, “Ні, дякую”, “Можливо, пізніше” або “Пропустити” залежно від контексту. Якщо кнопка має “скасувальну” логіку, ви повинні розглядати її як кнопку Скасувати, оскільки вона виконує ту ж саму функцію.
Чим більше кнопок на екрані, тим більш необхідним є чітке виокремлення кнопки “втечі”. Коли всі кнопки мають колір, де скасування – незрозуміло. Але коли кнопка “Скасувати” виокремлена нейтральним кольором, вона робить вибір кнопок більш інтуїтивним.
Темно-сірий
Під час використання сірого кольору на кнопці важливо зробити сірий темним. Інакше кнопка може стати нечіткою і може виглядати так, ніби вона у вимкненому стані.
Щоб переконатися, що ваша кнопка розбірлива, перевірте контрастність кольорів за допомогою інструменту співвідношення контрастності WCAG 2.0, наприклад, за допомогою веб-додатку контролер контрастності. Він дасть вам вердикт, чи сірий колір, який ви використовуєте, має необхідну для розпізнавання кнопки контрастність як доступну для дії.
Нейтралізуйте кнопки “Скасувати”
У більшості випадків, коли користувачі активують екран підтвердження, вони готові до дій. Але в той час, коли вони помиляються або змінюють свою думку про дії, кнопка “Скасувати” повинна забезпечити втечу без наслідків.
Кольорова кнопка “Скасувати” посилає неправильний сигнал. Це змушує користувачів сприймати її як заклик до дії. Нейтралізуйте кнопки “Скасувати”, щоб користувачі мали більший контроль і свободу під час використання вашого додатку.
За матеріалами uxmovement
Вам також буде ЦІКАВО: