Як робити UI кнопки правильно: розміщення, розміри та пріоритет

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

Правильно розміщуйте свої кнопки

Розмір кнопки повинен відображати пріоритет цього елемента на екрані. Велика означає більш важливу дію.

Пріоритетизуйте кнопки

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

Dropbox використовує розмір та контрастність кольорів, щоб зосередити увагу користувачів на кнопці

Зробіть кнопки друзями для мобільних пристроїв

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

Ліворуч: кнопка правильного розміру. Праворуч: кнопки занадто малі. Зображення: Apple

Дослідження MIT Touch Lab виявили, що середні розміри для пучок пальців мають діапазон 10-14 мм, а кінчики пальців – 8-10 мм. Тому 10х10 мм – це гарний мінімальний розмір сенсорної кнопки.

Джерело зображення: uxmag

Зверніть увагу на порядок

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

Користувацький інтерфейс – це розмова з вашими користувачами

Наприклад, як розмістити кнопки “Назад/вперед” для пагінації? Логічно, що кнопка, яка переміщує вас уперед, має бути праворуч, а кнопка, яка рухає вас назад, повинна бути ліворуч.

Не використовуйте занадто багато кнопок

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

Надайте відгук про взаємодію

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

Чому це відбувається? Як люди, ми очікуємо якихось зворотних зв’язків після взаємодії з об’єктом. Це може бути візуальний, звуковий або тактильний зворотній зв’язок – усе, що підтверджує той факт, що взаємодія відбулася.

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

Для деяких операцій, таких як завантаження, варто не тільки визначити введення користувача, але й показати поточний стан процесу.

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

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

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

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

email рассылки

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

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

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

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