Юзабіліті для чайників: якими повинні бути кнопки на сайті

427

Ідеальні кнопки — це коли відвідувачі сайту не відволікаються на них, але постійно натискають. Гарна кнопка повинна виглядати природно і органічно, щоб користувач не оцінював її на свідомому рівні, а автоматично слідував вказаною заклику. З цієї статті ви дізнаєтеся, якими повинні бути ідеальні кнопки на сайті.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Коли використовувати кнопки замість посилань

Практично на будь-якому ресурсі ви знайдете більше посилань, ніж кнопок. Кнопки являють собою зображення, для створення яких необхідно витратити певні зусилля. А посилання можна зробити за секунду. При цьому лінки та кнопки вирішують практично однакові завдання. В яких випадках необхідно використовувати кнопки, а коли можна обійтися посиланнями?

Якщо на сторінці використовується занадто багато кнопок, вона повільно завантажується. Крім того, користувач може заплутатися, побачивши кілька закликів до дії. Тому використовуйте кнопки, коли вам необхідно закликати користувача зробити важливе для вас дія: купити, скачати, зареєструватися і т. п. У всіх інших випадках підійдуть посилання.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Як відрізнити важливе дію від менш важливого? Задайте собі питання: «чи Впливає дія на мій бізнес або мій сайт?»

Важливі дії зазвичай вимагають від користувача активних зусиль. Він повинен реєструватися, коментувати, оформляти замовлення і т. п. Менш важливі дії не вимагають активних зусиль. Користувач переходить зі сторінки на сторінку і споживає контент.

Як правильно використовувати градієнти

Дизайнери використовують градієнти, щоб забезпечити природний зовнішній вигляд елементів інтерфейсу. Коли джерело світла висвітлює об’єкт зверху, це створює ефект природного освітлення і надає об’єктам глибину. Користувач сприймає освітлені області об’єкта наближеними до джерела світла, а затемнені області віддаленими.

Створюючи кнопки, пам’ятайте:

  • Людина сприймає кнопку, освітлену у верхній частині і затемнену в нижній, як випуклу.
  • Людина сприймає кнопку, освітлену в нижній частині і затемнену у верхній, як увігнуту або натиснуту.
Юзабіліті для чайників: якими повинні бути кнопки на сайті

Користувач повинен бачити опуклу кнопку до того моменту, поки він не натиснув на неї. Якщо користувач натиснув кнопку, він повинен бачити її увігнутою. Цього ефекту можна домогтися за допомогою градієнтів.

Як зробити кнопку переконуючої

Кнопки практично завжди містять CTA, однак користувачі далеко не завжди на них натискають. Щоб підвищити клікабельність, вам необхідно зробити кнопки переконують. Що це означає з точки зору юзабіліті?

  • Використовуйте градієнти, тіні і закруглені кути, щоб зробити кнопку реалістичною

Чим реалістичніше виглядає кнопка, тим частіше користувачі на неї натискають. Ви можете добитися ефекту тривимірної кнопки з допомогою градієнтів, тіней і закруглених кутів. Людина автоматично натискає десятки кнопок протягом дня: він викликає ліфт, включає телевізор або кондиціонер, відповідає на телефонні дзвінки і т. п. Чим більше цієї виглядає кнопка на сайті, тим більше шанс, що користувач натисне її автоматично.

Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Використовуйте контрастні кольори

Контрастний колір привертає увагу користувача. Ідеальний колір — той, який негайно змушує відвідувача помітити кнопку. Зверніть увагу, колір кнопки повинен контрастувати як з фоном сайту, так і з кольором тексту на кнопці.

Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Зробіть кнопку досить великий, але не неприродно величезною

Розмір має значення, якщо мова йде про кнопках. Чим більше кнопка, тим легше вона залучає увагу користувача. Коли ви збільшуєте кнопку, не забудьте пропорційно збільшити розмір шрифту CTA. Не перестарайтеся з розміром. Кнопка не повинна візуально поглинати контент.

Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Використовуйте слова, що створюють ефект терміновості

Зараз, сьогодні, негайно, в один клік, — ці та інші слова створюють ефект терміновості. Використовуйте їх в тексті на кнопці, щоб стимулювати кліки.

Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Пом’якшують CTA

Користувачі можуть відмовлятися від вашої пропозиції з різних причин. Наприклад, вони вважають продукт занадто дорогим, не розуміють його цінності і суті. У цьому випадку вам допоможе м’який заклик до дії. Пропонуйте користувачам демо-версії, безкоштовний період використання, більше дізнатися про продукт і т. п.

Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Правильно використовувати заголовні і малі літери

Якщо ваш CTA складається з двох слів, пишіть обидва з великої літери. Заголовні літери роблять текст спонукає. Якщо ваш CTA складається з трьох слів і більше, пишете з великої букви перше слово, а решта пишіть з маленьких. У цьому випадку текст сприймається як діалогу. Формули виглядають так: жорсткий CTA = одне або два слова + кожне слово з великої; м’який CTA = три слова і більше + з заголовної тільки перше.

Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Прорілюструйте заклики до дії

Це можна зробити за допомогою іконок, стрілок і інших елементів. Вони роблять CTA більш переконливим. Наприклад, стрілка на кнопці показує користувачеві, що після кліка він перейде на іншу сторінку.

Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Використовуйте ефекти при наведенні

Візуальна зміна кнопки при наведенні на неї курсора переконує користувача здійснити дію. Що повинно змінюватися? Це можуть бути градієнти, зміна кольору шрифту або зміна зовнішнього вигляду курсора. Наприклад, при наведенні на кнопку курсор можна поміняти з нейтральною стрілки на кисть руки в вказівному жесті.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Чому кнопки OK більше не о’кей

Розробники інтерфейсів часто використовують кнопки типу «OK», «Cancel», «Так», «Ні» і т. п. Якщо ви користуєтеся ПК, то бачите такі кнопки кожен день.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Ці кнопки ніяк не пов’язані з дією, яку здійснює користувач. Щоб ваш сигнал був більш ясним і переконливим, пов’язуйте CTA з бажаним/планованим дією користувача.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Чому конверсійні кнопки краще розташовувати в правій нижній частині сторінки

Відповісти на це питання можна після вивчення діаграми Гутенберга.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

На діаграмі видно, що сторінка поділяється на чотири частини. Стрілками позначено рух погляду відвідувача. Верхній лівий і нижній правий квадранти сторінки отримують найбільше уваги користувача. Нижній лівий квадрант отримує найменше уваги. Тому конверсионную кнопку краще помістити в правій нижній частині сторінки.

Чому в діалогових вікнах кнопка бажаного дії повинна знаходитися праворуч

У діалогових вікнах кнопки бажаного дії («Купити», «Оформити», «Так», «OK» і т. п.) працюють краще, коли розташовані праворуч. Зверніть увагу на наступну ілюстрацію:

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Якщо кнопка бажаного дії знаходиться зліва, користувач помічає її першою. Однак він не натискає її, поки не вивчить всі доступні опції. Відвідувач зауважує кнопку бажаного дії, а потім звертає увагу на кнопку альтернативного дії. Щоб він вибрав варіант «Так», його увага повинна повернутися до кнопки бажаного дії.

Коли кнопка бажаного дії знаходиться праворуч, шлях до конверсії скорочується на один крок:

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Коли кнопка бажаного дії знаходиться праворуч, увагу користувача спочатку зупиняється на другорядній опції, а потім переходить до бажаної опції.

Коли кнопка бажаного дії знаходиться ліворуч, на шляху до конверсії користувач стикається з трьома візуальними фиксациями. Коли кнопка бажаного дії знаходиться праворуч, число візуальних фіксацій скорочується до двох.

Як виділити кнопку бажаного дії

У діалогових вікнах має сенс візуально виділяти кнопку бажаного дії. У цьому випадку вона залучає й утримує увагу користувача.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Для візуального виділення конверсійної кнопки можна використовувати наступні способи:

  • Використання насиченого кольору для кнопки бажаного дії і ненасиченого для кнопки альтернативного дії.
  • Юзабіліті для чайників: якими повинні бути кнопки на сайті
  • Використання кольору фону для кнопки альтернативного дії. Зверніть увагу на діалогове вікно Skype на ілюстрації вище. Кнопка альтернативного дії «Вийти» зливається з фоном.
  • Оформлення кнопки альтернативного дії у вигляді посилання.
  • Використання ефекту прозорості, завдяки якому кнопка альтернативного дії виглядає неактивною.

Чому іконки повинні мати прозорий фон

Іконки підвищують ефективність використання інтерфейсів користувачами. Люди сприймають візуальні патерни іконок в десятки тисяч разів швидше тексту. Це справедливо, коли фігури зображені на прозорому тлі.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Коли фон іконок непрозорий, швидкість сприйняття інформації користувачем різко падає. Фон створює візуальний шум, який робить всі іконки однаковими. Замість миттєвого сканування візуальної інформації користувачеві доводиться читати та інтерпретувати зображення, що характерно для роботи з текстом.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Використання непрозорого фону для іконок можна порівняти з текстом, написаним великими літерами: це ускладнює сканування візуальних патернів і знижує швидкість сприйняття.

Як використовувати стрілки і трикрапки

Стрілки на кнопках вказують користувачеві на завершення дії після переходу. Наприклад, натиснувши на кнопку, відвідувач може оформити замовлення, вибрати продукт, підписатися на розсилання.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Стрілки в меню вказують на доступність додаткових опцій.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Крапки на кнопках і в меню вказують на доступність додаткових опцій і незакінченість дії.

Юзабіліті для чайників: якими повинні бути кнопки на сайті

Стрілки і трикрапки роблять кнопки і меню інтуїтивно зрозумілими.

Кнопки повинні бути помітними і переконливими

Для цього дизайнери повинні вибирати правильне розташування кнопок, використовувати градієнти і насичені кольори, застосовувати ефекти при наведенні, контрасти і коректні заклики до дії. Ефективність кнопок підвищується з допомогою стрілок, крапок і інших візуальних елементів. Кнопки повинні бути досить великими, однак вони не повинні візуально поглинати навколишній текст.

Адаптація матеріалів з сайту UX Movement.

Читайте також:

  • Як покращити сайт за допомогою SEO і юзабіліті: 4 міні-кейсу
  • Як підвищити коефіцієнт конверсії: покроковий план
  • 10 цікавих рішень для збільшення конверсії на комерційних сайтах