UX-дизайн кнопки: поради щодо створення, типи і стану

Нік Бабич розробник, UX/UI фахівець написав замітку в блозі UX Planet про UX-дизайн кнопки: поради щодо створення, типи і стану. Наша команда виконала переклад цієї статті

image

Кнопки – це самий звичайний, «повсякденний» елемент дизайну взаємодії. Саме тому на них потрібно звернути особливу увагу, адже кнопки є найважливішим елементом, що забезпечує безперешкодне взаємодія в мережі і додатках. Ми обговоримо типи і стану кнопок — цю інформацію потрібно знати, щоб створювати ефективні кнопки і вдосконалювати досвід користувача.

Поради щодо створення кнопок

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

image

Дуже ретельно продумайте розмір зони дотику і внутрішнього поля. Розмір кнопок також допомагає користувачеві зрозуміти, що це за елемент. Кожна платформа дає свої рекомендації щодо мінімального розміру зони дотику. Результати дослідження, проведеного MIT Touch Lab, показали, що середній розмір для дотику подушечками пальців становить 10-14 мм, а для кінчиків пальців — від 8 до 10 мм, при цьому найбільш оптимальний мінімальний розмір зони дотику буде 10Х10 див.

image

Розташування і порядок

Додайте кнопки там, де користувачі без праці їх знайдуть або там, де вони очікують їх побачити. Подивіться, як в керівництві по розробці iOS радять розміщувати кнопки.

image

Не забувайте про порядок розміщення і стан кнопок. Порядок, в якому йдуть кнопки, особливо якщо є парні кнопки (наприклад, «попередній» і «наступний»), дуже важливий. Переконайтеся, що основний акцент в дизайні зроблений на основному або найважливішому дії користувача.

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

image

Написи

Написи на кнопках повинні означати дію, яке виконує кнопка. Чітко опишіть, що відбудеться при її натисканні.

Точно такі ж кнопки, як і вгорі, але без відповідного напису. Відчуваєте різницю?

image

Заклик до дії (CTA)

Найважливіші кнопки (особливо, якщо вони закликають до дії) повинні виглядати як найважливіші кнопки.

image

Форма кнопки

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

image

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

image

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

Типи кнопок і поведінка

1. Об'ємна кнопка

image

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

Застосування

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

Поведінка

Об'ємні кнопки піднімають і заповнюються кольором при натисканні.

image

Приклад

Об'ємні кнопки виділяються на тлі плоских. Приклад наведено для Android.

image

2. Плоскі кнопки

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

image

Застосування

У діалогових вікнах (щоб дотримати єдність дії кнопки і контенту)

image

На панелі інструментів

image

Розташування знизу, щоб користувач швидше їх знайшов

image

Поведінка

image

Приклад

Плоска кнопка в діалоговому вікні програми на Android.

image

3. Перемикач

Кнопка-перемикач дозволяє користувачеві перемикатися між двома або більше) станами.

image

Застосування

Майже всі перемикачі застосовуються в якості кнопок Вкл\Викл.

Кнопки-перемикачі також можна використовувати для групи пов'язаних між собою елементів. Але компонування макету має явно вказувати, що ці кнопки є частиною всієї групи елементів. Є й інші вимоги:

· У групі повинно бути не менше трьох кнопок

· На кнопках повинен бути текст, іконка або і те, і інше.

image

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

image

Дуже важливо вибрати правильну іконку для кнопки. Я розповідав про це у статті «Іконки як фактор вдалого досвіду».

Приклад

В Apple iOS перемикачі використані в розділі «Налаштування».

image

4. Контурні кнопки

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

image

Застосування

Мабуть, не варто використовувати контурні кнопки для заклику до дії. Ось, подивіться на Bootstrap. Контурна кнопка «Завантажити» нічим не відрізняється від головного логотипу, що може заплутати користувачів.

image

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

Кнопка, закликає до позитивного дії, більш контрастна і користувач чітко бачить дію.

image

Поведінка

image

Приклад

На сайті AirBnB є контурні кнопки для дії «Стати господарем».

5. Плаваюча кнопка з випадаючим меню

Плаваюча кнопка з випадаючим меню — один з елементів матеріального дизайну Google. Це кругла матеріальна кнопка, яка підводиться і дає ефект чорнильного плями при натисканні.

Застосування

Плаваючі кнопки з випадаючим меню застосовуються для виклику функціональних клавіш.

Поведінка

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

image

Вибір типу кнопки.

Вибір стилю кнопки залежить від її важливості, кількості контейнерів на екрані, і від розмітки екрану.

image

image

Функція: Досить важлива і унікальна кнопка, щоб зробити її плаваючою?

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

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

Стану кнопок

Тут піде мова не про те, як користувач бачить початкову кнопку, а про тих випадках, коли при наведенні вказівника на неї нічого не змінюється. Користувач не відразу зрозуміє кнопка це чи ні? Тепер доведеться клікнути, що б це з'ясувати…

Такий об'єкт як кнопка має кілька станів, і надання візуального відгуку з метою відобразити поточний стан кнопки повинно бути пріоритетним завданням.

Нормальний стан

Головне правило цього стану – кнопка повинна виглядати як кнопка в нормальному стані. Windows 8 це показовий приклад невдалого дизайну кнопки. Користувачеві складно зрозуміти клікабельні чи ні об'єкти в меню налаштувань.

image

Стан у фокусі

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

Натиснутий стан

Анимируя різні елементи свого дизайну, ви можете внести свіжу ноту, проявити трохи творчості і порадувати користувача.

image

Неактивний стан

Є два варіанти – сховати кнопку, або відобразити її в неактивному стані.

Переваги прихованої кнопки:

  • · Ясність. Відображається тільки те, що необхідно для поточної задачі.
  • · Збереження простору. Це дозволить вам змінювати управління, використовуючи один простір для різних цілей. Що дуже зручно, якщо присутній дуже багато елементів управління. Gmail застосовує цей спосіб.
image

image

Переваги використання неактивного стану:

  • Показати можливість дії. Навіть якщо кнопка не використовується, користувач знає, що дія можливо. Можна навіть зробити підказку і пояснити критерії використання.
Контроль розміщення. Користувач розуміє, де в інтерфейсі розміщено управління і кнопки.

image

Висновок

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

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

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.