Все, що вам потрібно знати про дизайн кнопок, один з основних інтерактивних будівельних блоків інтерфейсу
Щоб спроектувати правильну взаємодію, нам потрібно поглянути на історію та походження фізичних кнопок - прямого попередника компонента інтерфейсу, який сьогодні широко використовується у всіх цифрових продуктах. Кнопки приголомшливі. Дотик пальця приводить у рух прилад, автомобіль або систему, навіть якщо користувач не розуміє механізми або алгоритми, що лежать в основі їхньої роботи. У своїй книжці "Power Button" Рейчел Плотнік простежує витоки сучасної культури використання кнопок і описує, як натискання кнопок стало засобом цифрового управління, що обіцяє легкість, компактність і надійність.
"Ви натискаєте кнопку, а ми робимо все інше", - так, за допомогою помітного і чіткого слогана, Kodak звернулися до потенційних покупців своїх фотоапаратів.
Це зачаровує користувачів навіть сьогодні. Миттєве задоволення від того, що все відбувається завдяки простому дотику. Попри те, що тонни нових побутових приладів та інших пристроїв переходять на сенсорне керування, фізичні кнопки не скоро зникнуть, а сформовані ними поведінкові звички впливають на інтуїтивно зрозумілий і простий у використанні дизайн кнопок.
Кнопки vs Посилання
Кнопки повідомляють про дії, які користувачі можуть виконувати. Вони зазвичай розміщуються в інтерфейсі в таких місцях, як: діалогові вікна, форми, панелі інструментів тощо. Різниця між кнопками та посиланнями має значення:
- Посилання використовуються під час переходу в інше місце, наприклад: сторінка "переглянути все", сторінка профілю тощо.
- Кнопки використовуються під час виконання дії, наприклад: "відправити", "об'єднати", "створити новий", "завантажити" тощо.
Стан кнопки повідомляє її статус користувачеві
Створення правильних взаємодій і стилів для ваших кнопок є однією з найважливіших частин процесу. Кожен стан повинен мати чіткі аффорданси, які відрізняють його від інших станів і навколишнього макета, але не повинні радикально змінювати компонент або створювати багато візуального шуму.
Normal - повідомляє, що компонент інтерактивний і ввімкнений.
Focus - повідомляє, що користувач виділив елемент, використовуючи клавіатуру або інший метод введення.
Hover - повідомляє, коли користувач навів курсор на інтерактивний елемент.
Active - Активний або натиснутий стан повідомляє про те, що користувач натиснув на кнопку.
Progress/Loading - використовується, коли дія не виконується негайно і повідомляє, що компонент перебуває в процесі завершення дії.
Disabled - повідомляє, що компонент наразі не є інтерактивним, але його можна ввімкнути в майбутньому.
Кнопки бувають різних кольорів, форм і розмірів
Найпоширенішими є прямокутні кнопки із заокругленими кутами, які легко ідентифікувати і які мають гарний вигляд поруч із полем введення. Вибір правильного стилю для кнопки залежатиме від мети, платформи та рекомендацій. Ось деякі з найпопулярніших варіацій стилю:
Стилі повідомляють про важливість дії
Стилі здебільшого використовують для відмінності важливіших дій від менш важливих. Створіть ієрархію дій, яка спрямовуватиме користувача там, де є безліч варіантів. Зазвичай у вас може бути одна помітна кнопка (цей стиль часто називають "основним"), кілька середніх "другорядних" і слабо помітних "третинних" дій.
Іноді немає кнопки "за замовчуванням"
Як правило, ви хочете зробити кнопкою "за замовчуванням" (використовувати основні стилі) кнопку, яку найчастіше вибирають, і перевести її в сфокусований стан. Це допоможе більшості користувачів швидше виконувати свої завдання і направить їх у правильному напрямку.
Виняток становлять випадки, коли всі варіанти однаково важливі або дія особливо небезпечна. У таких випадках ви хочете, щоб користувачі явно вибирали кнопку, а не випадково.
Не змушуйте мене думати
"Не змушуй мене думати" - це назва книги юзабіліті-інженера Стіва Круга. Один із багатьох моментів, яких він торкається, - наскільки важливо зробити інтерфейс зрозумілим для користувачів, а не створювати головоломки чи лабіринти. Спираючись на багаторічний досвід використання різних пристроїв та інших продуктів, ми сформували певне очікування, який вигляд мають кнопки та як вони функціонують. Значне відхилення від того, що вважається "стандартним", спричинить затримку і замішання у користувачів.
Уникайте використання одного і того ж кольору для інтерактивних і не інтерактивних елементів. Якщо інтерактивні та не інтерактивні елементи мають один і той самий колір, людям буде важко зрозуміти, де натискати.
Узгодженість підвищує швидкість і точність
"Узгодженість - це один із найпотужніших принципів юзабіліті: коли речі завжди поводяться однаково, користувачам не потрібно турбуватися про те, що станеться"
- Якоб Нільсен
Узгодженість підвищує швидкість і точність, допомагає уникнути помилок. Створіть передбачуваність, яка допоможе користувачам відчувати контроль і здатність досягти своїх цілей у вашому продукті. При створенні первинного, вторинного і третинного стилів постарайтеся знайти низку загальних елементів, таких як колір, форма тощо. Постарайтеся не тільки бути послідовними всередині своєї дизайн-системи, а й враховуйте платформу, для якої проектуєте.
Зробіть кнопки досить великими для надійної взаємодії
Натискання кнопки має бути простим завданням, і, якщо користувач не може успішно натиснути на кнопку або помилково натисне на сусідній елемент, це призведе до негативного досвіду і втрати часу.
Для більшості платформ розгляньте можливість створення сенсорних цілей щонайменше 48 x 48 dp. Сенсорна ціль такого розміру дає фізичний розмір близько 9 мм, незалежно від розміру екрана. Рекомендований цільовий розмір для сенсорних елементів становить не менше 7-10 мм.
Для кнопок з іконками переконайтеся, що ціль торкання виходить за межі візуальних меж елемента. Це стосується не тільки мобільних пристроїв або планшетів, а й таких пристроїв введення, як комп'ютерна миша.
Проектуйте для доступності
Цю рекомендацію слід застосовувати для будь-якого компонента. Розмір цільової області був одним із факторів, що впливають на доступність. До інших факторів належать розмір шрифту, колір і контраст. Існує безліч інструментів, які допоможуть вам легко перевірити, як працюють ваші компоненти.
Дизайнери повинні тісно співпрацювати з командами розробників, щоб переконатися, що кнопки працюють із програмами читання з екрана. Роль кнопки повинна використовуватися для клікабельних елементів, які запускають відповідь при активації користувачем. Додавання role="button" призведе до того, що елемент відобразиться для програми читання з екрана, як елемент керування кнопками.
Жести стають досить широко поширеними
Жести дають змогу користувачам взаємодіяти з додатком за допомогою дотику. Використання дотику як альтернативного способу виконання завдання може заощадити час і дати тактильний контроль. Хоча деякі жести, такі як свайп для запуску контекстних дій, подвійний тап, щоб поставити лайк або тривале натискання, з кожним днем все ширше використовуються, вони все ще не дуже помітні для звичайного користувача. Я б запропонував використовувати їх як альтернативний спосіб виконання дії для більш просунутих користувачів.
Гарна мітка кнопки запрошує користувачів діяти
Те, що говорять ваші кнопки, так само важливо, як і те, який вони мають вигляд. Використання неправильної мітки може заплутати користувачів, призвести до втрати часу і, можливо, до великих помилок.
Хороша мітка кнопки запрошує користувачів діяти. Найкраще використовувати дієслова і позначити кнопку тим, що вона насправді робить. Начебто кнопка запитує користувача: "Ви хочете (додати в кошик)?" або "Хочете (підтвердити замовлення)?".
Уникайте використання "Так", "Ні" або занадто загальних міток, таких як "Надіслати".
Ok/Cancel або Cancel/Ok? Обидва варіанти хороші
Обидва варіанти - ідентичні, і дизайнери можуть годинами сперечатися про свої переваги.
Розміщуючи на першому місці дію OK, ви підтримуєте природний порядок читання. Це може допомогти заощадити час, якщо ми знаємо, що, найімовірніше, саме це і вибере користувач. Windows ставить ОК на перше місце.
Розміщуючи кнопку OK наприкінці, ви покращуєте юзерфлоу. Хтось може посперечатися, що OK, як кнопка "Наступний", перемістить користувача вперед. Якщо поставите OK наприкінці, ви допоможете користувачам оцінити всі варіанти, перш ніж діяти, і допоможете уникнути помилок і поспішних рішень. Apple ставить ОК на останнє місце
Будь-який із варіантів має аргументи на свою користь, і жоден із цих варіантів не призведе до катастрофічних наслідків для юзабіліті. Я здебільшого ставлю ОК у списку дій на останнє місце. Наприклад, у діалоговому вікні (можливо, тому що я переважно використовую Mac).
Вимкнені кнопки - відстій
Усі бували в такій ситуації. Ви застрявали на екрані на кілька секунд або хвилин, намагаючись з'ясувати, чому ваш прогрес заблоковано вимкненою кнопкою і що вам потрібно зробити, щоб оживити її. Вимкнені елементи керування використовуються, щоб вказати, що компонент наразі не є інтерактивним, але його можна буде ввімкнути в майбутньому. Відключені кнопки використовуються тому, що видалення кнопки з її вихідного місця розташування та її розкриття в більш пізньому контексті може заплутати користувачів.
Я пропоную, за можливості, уникати відключених кнопок. Краще, щоб вони завжди були увімкненими, і, якщо користувачі не надали необхідну інформацію, просто виділіть порожні поля або покажіть повідомлення.
Про які компоненти ви хотіли б дізнатися в наступній статті? Дайте знати в коментарях.
7 основних правил проектування кнопок
Дизайн і проектування найкращих кнопок
Переклад статті uxdesign.cc
Топ коментарі (0)