Прозорі кнопки — це кнопки дій. На відміну від традиційних кнопок із закликом до дії (CTA), які привертають увагу яскравими кольорами, прозорі кнопки використовують мінімалістичний дизайн, що делікатно направляє відвідувачів до другорядних чи альтернативних дій. Хоча це може здатися нелогічним, у багатьох випадках прозора кнопка робить досвід користувача інтуїтивнішим і привабливішим. Читайте далі, щоб дізнатися, як і де використовувати прозорі кнопки.
Що таке прозора кнопка?
Прозорі кнопки — це CTA-кнопки з виразно мінімалістичним дизайном. Замість заповненого фону вони мають прозорий, що відрізняє їх від стандартних CTA-кнопок. На перший погляд, їх легко не помітити, особливо якщо вони розташовані поруч із більш очевидними кнопками, що контрастують зі сторінкою, а не зливаються з нею. Звідси й назва — «прозорі кнопки».
Основні стани прозорих кнопок
Як і інші типи кнопок, прозорі кнопки мають три основні стани: початковий (rest), при наведенні (hover) та при натисканні (pressed).
Початковий стан
У цьому стані прозора кнопка виглядає простою і зазвичай безбарвною. У прикладі використовується контур, але не всі прозорі кнопки його мають. Деякі з них існують без контуру, де відображається лише текст.
Під час створення цього стану особливу увагу приділяйте контрасту кольорів, адже користувачі ще не навели курсор чи не прочитали текст кнопки. Якщо неправильно вибрати колір тексту або контуру, кнопка може залишитися непоміченою.
Стан при наведенні
Цей стан активується, коли користувач наводить курсор на кнопку. У цей момент дизайнери часто змінюють текст, контур чи фон кнопки, щоб зробити її більш помітною та показати, що вона клікабельна.
Пам’ятайте, що цей стан не відображається на мобільних пристроях, адже там немає курсорів. Щоб забезпечити доступність дизайну для всіх пристроїв, зробіть інші два стани помітними на маленьких екранах.
Стан при натисканні
Після натискання кнопка має змінюватися, щоб вказати на виконання дії. Наприклад, може з’явитися невелике контактне меню для подальшої взаємодії. Інші варіанти — зміна фону, додавання анімації завантаження або оновлення тексту.
Якщо кнопка веде на іншу сторінку, стан при натисканні з’являється лише на мить перед завантаженням. У таких випадках використовуйте швидкі та прості ефекти, наприклад інверсію кольорів або додавання тіні, що створює враження натискання.
Плюси та мінуси прозорих кнопок
Плюси:
- Унікальна функція. Їх стриманий дизайн показує, що дія, яку вони пропонують, важлива, але не настільки, щоб конкурувати за увагу. Це нюанс, який прозорі кнопки передають добре.
- Різноманітність у дизайні. Включення прозорих кнопок до системи дизайну додає нові можливості. Навіть якщо вони не використовуються у фінальному продукті, це корисний інструмент для експериментів.
- Універсальність. Ви можете творчо використовувати стани прозорих кнопок, наприклад, перетворювати їх на перемикачі, заповнюючи їх після натискання.
Мінуси:
- Слабкий контраст. Через прозорість кнопки текст у ній залежить від фону. Якщо кнопка розташована на зображенні чи градієнті, текст може не відповідати стандартам контрастності WCAG.
- Сумнівна репутація. Інколи прозорі кнопки використовують для приховування опцій, наприклад, «Відхилити всі» у налаштуваннях файлів cookie. Це може створити негативний імідж таких кнопок.
Вплив прозорих кнопок на коефіцієнт конверсії
Цікаво, що прозорі кнопки спроєктовані з нижчим коефіцієнтом конверсії. Дослідження CXL показало, що вони мають на 20% менше кліків. Це робить їх ідеальними для дій, які не є основним вибором.
Наприклад, в онбординговому UX-потоку яскраві CTA-кнопки можна використовувати для «Продовжити», а прозорі — для «Скасувати». Це допомагає користувачам швидше орієнтуватися, розрізняючи основні та другорядні дії.
Фактори, які слід враховувати при створенні прозорих кнопок
Щоб успішно додати прозорі кнопки до вашої системи дизайну, зверніть увагу на наступне:
- Прозорі кнопки не повинні бути основними. Використовуйте їх лише для другорядних дій. Для основних CTA краще підходять традиційні дизайни кнопок, які легко помітити.
- Уникайте складних фонів. Розташовуйте прозорі кнопки на фонах, де вони не зливатимуться, щоб забезпечити відповідність стандартам WCAG. Найкраще розміщувати їх на однорідному фоні, наприклад у банері чи ряді на лендінгу.
- Проєктуйте передбачувані взаємодії. Навіть якщо ваш дизайн незвичайний, усі взаємодії мають бути послідовними. Це особливо важливо для прозорих кнопок, оскільки вони відхиляються від звичних норм. Послідовність допоможе користувачам зрозуміти, як працювати з ними.