Кнопки – це, безумовно, одні з найбільш важливих елементів на веб-сайтах. Тому тестуванню як функціональності, так і зовнішнього вигляду кнопок приділяється багато уваги. Дизайн кнопок важливий так як вони допомагають користувачам орієнтуватися у системі, так і тому, що зовнішній вигляд кнопки може схиляти користувачів до отримання бажаного результату.
У даній статті розглянемо деякі особливості кнопок як елементів графічного інтерфейсу користувача та приклади тестування окремих кнопок.
Під час розробки продукту потрібно завжди враховувати людей з обмеженими можливостями. Щоб переконатися, що обрані кольори доступні кожному, можна скористатися онлайн перевіркою контрастності, наприклад на ресурсі: https://accessible-colors.com/
Крім того, варто не забувати про «мову кольорів». Колір кнопки позначає певні операції, наприклад:
Вище наведено приблизний перелік кольорів та їхнього застосування. Інколи для визначення того, який колір краще використати, застосовують A/B тестування.
Закруглені кути виглядають сучасно. Повністю закруглені кути почали використовувати для мобільних пристроїв, а потім тенденція поширилась на веб-інтерфейси. Круглі кути передають відчуття простоти, оптимізму та відкритості. Ймовірно, це пояснює, чому багато систем дизайну адаптувалися до заокруглених кутів та широко використовували їх у значках, кнопках та ілюстраціях.
Однак такі елементи найкраще використовувати коли в інтерфейсі є багато вільного простору.
Тінь на кнопці створює відчуття, ніби вона знаходиться поза сторінкою, та природним чином привертає до неї увагу. Тіні також можна використовувати для позначення різних станів.
Стиль підпису залежить від шрифту та того, наскільки легко його читати. Тому під час тестування потрібно в першу чергу звертати увагу на читабельність тексту.
Розмір кнопки відіграє велику роль у доступності інтерфейсу. Завжди потрібно перевіряти чи збільшення масштабу сторінки або розміру шрифту не призведе до «обрізання» тексту по межах відповідного елементу.
Існує 2 види горизонтального вирівнювання:
Стан кнопок та реакція на натискання/наведення
Стани кнопок повідомляють користувачеві, чи може він натиснути, натискає чи успішно натиснув кнопку. Потрібно пам'ятати, що кнопка може мати перекриваючі стани. Наприклад, кнопка може бути «активною» та мати стан «наведення (hover-state)» одночасно.
Активний стан – це коли кнопку можна натиснути/тапнути. Хоча це може здатися трохи очевидним, важливо зазначити, що кнопка буде неактивною, якщо користувач не виконав необхідні дії. Наприклад, якщо користувач не ввів своє ім’я та адресу електронної пошти, він не зможе надіслати свої дані.
На десктопних пристроях кнопка повинна мати різні стани, щоб користувач знав, що на неї можна натиснути. Також анімація може спонукати користувачів натиснути на елемент. Зазвичай стан «наведення курсора вимкнено (hover off)» протилежний стану «наведення курсора на (hover over)», але не обов’язково. Буває і проміжний варіант – курсор наводили на кнопку раніше.
Деякі користувачі використовують клавіатуру для навігації сайтом. Тому потрібно, щоб кнопка мала стан «фокусу», тобто, щоб кнопка показувала «можна натиснути, але ще не натиснули».
Іншим прикладом стану фокусу є натискання в поле введення для розуміння того, що текст буде введено саме в це поле, а не інше.
Станом фокусу за замовчуванням є блакитне підсвічування. Більшість дизайнерів використовують однакові візуальні підказки для станів наведення та фокусування.
Натиснутий стан – це стан, коли курсор або палець користувача «утримує» кнопку. Коли користувач «відпускає» палець або курсор над кнопкою, кнопка реєструється як «натиснута».
У кнопок має бути стан «натиснуто», щоб вказати користувачеві, що дію виконано.
Більшість кнопок містять дієслова, які вказують, що кнопка буде робити, наприклад «Зберегти», «Опублікувати», «Редагувати». Хоча «Назад» і «Далі» не є дієсловами, у контексті інтерфейсу вони працюють однаково. Інколи використовується структура «дієслово» + «іменник» – це робить дію більш наказовою, наприклад «Зберегти публікацію», «Наступний крок» тощо.
Регістр може бути:
Тобто, загалом при перевірці підписів кнопок потрібно перевіряти послідовність:
Однотипні кнопки повинні мати однотипні назви. Наприклад дієслово у верхньому регістрі, або дієслово + іменник у нижньому регістрі.
Оскільки курсор на робочому столі менший за палець на сенсорному екрані, кнопки можуть бути меншого розміру. В даному випадку потрібно перевіряти ієрархію елементів та навігацію на сайті:
Розмір кропок повинен бути зручним для натискання пальцем. Дослідження показало, що середні розміри подушечок пальців становлять 10-14 мм, а кінчиків пальців – 8-10 мм. Це робить 10 мм x 10 мм гарним мінімальним розміром торкання.
Основним питанням є зліва чи справа має розміщуватись основна кнопка?
Варіант A показує основну кнопку зліва. Якщо користувач має побачити основну дію, яку можна виконати першою, то потрібно розмістити її першою.
Варіант B показує основну кнопку праворуч. Аргумент тут полягає в тому, що користувач має знати інші варіанти (опції для вибору) перед тим як прийняти рішення. Пункти, розміщені праворуч, також означають продовження.
Отже, який дизайн кнопок можна вважати хорошим?
Чіткий: текст і кольори кнопки мають бути чіткими, різкими та легкими для розуміння. Тенденції веб-дизайну за останні кілька років схилилися до дизайну плоских кнопок. Складні чи об'ємні кнопки можуть відволікати користувачів.
Стислий: мінімальний текст на кнопках – ідеальний варіант: одне, максимум два слова.
Точний: куди веде кнопка? Що вона робить? На незрозумілі кнопки не натискають.
Вище було розглянуто особливості кнопок як елементів інтерфейсу. Зараз наведемо приклади тестування конкретних кнопок.
Кнопка «Надіслати»:
Кнопка «Скинути»:
Кнопка відміни:
Кнопка перемикання (toggler):
Радіокнопка:
Кнопка «Назад»:
У статті ми розглянули основні особливості дизайну кнопок та основні тестові випадки для кнопок заклику до дії.
