Як робити UI кнопки правильно: вони мають виглядати, як кнопки

Один із дуже вагомих елементів будь-якого дизайну – кнопки. Вони передбачають головну дію користувача і тому дуже цікаві для бізнес-логіки вашого продукту. Як їх робити правильно? Давайте розберемося!

Зображення: Gal Shir

Кнопки повинні виглядати, як кнопки

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

Але як користувачі розуміють, чи є певний елемент інтерактивним чи ні? Вони використовують попередній досвід та візуальні ознаки для з’ясування значення об’єкта інтерфейсу. Ось чому так важливо використовувати відповідні візуальні ознаки (такі як розмір, форма, колір, тінь тощо), щоб елемент виглядав як . Візуальні ознаки мають важливе інформаційне значення – вони допомагають створювати доступні інтерфейси.

На жаль, у багатьох інтерфейсах ознаки інтерактивності слабкі й вимагають зусиль для взаємодії; у результаті вони ефективно знижують видимість. 

Якщо відсутні чіткі можливості взаємодії і користувачі мучаються з визначенням, що можна “тицьнути”, а що ні, неважливо, наскільки класно виглядає дизайн. Якщо його важко використовувати, користувачі швидко в ньому розчаруються.

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

Не думайте, що у вашому інтерфейсі все очевидне для ваших користувачів

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

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

Використовуйте знайомі дизайни для своїх кнопок

Нижче наведено кілька прикладів кнопок, які знайомі більшості користувачів:

  • Заповнена кнопка з квадратними кутами
  • Заповнена кнопка з закругленими кутами
  • Заповнена кнопка з тінями
  • Кнопка-привид

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

Не забувайте про пробіли

Важливі не тільки візуальні властивості кнопки. Кількість пробілів біля кнопки спрощує (чи ускладнює), розуміння користувачів, чи це інтерактивний елемент. У прикладі нижче деякі користувачі можуть сплутати кнопку-привид з інформаційним полем.

Кнопка повинна виділятися очевидними і зрозумілими відступами від інших елементів.

За матеріалами: uxplanet.org

Вам також буде ДУЖЕ корисно почитати:

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь