Кнопки в дизайні інтерфейсів: еволюція стилю і кращі методи



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

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

Еволюція стилю
Тривимірна кнопка
З ранніх днів кнопки операційних систем ґрунтувалися на емуляції рельєфу і тіні, щоб відрізняти їх від навколишніх елементів. Це дизайнерське рішення було засновано на простому принципі – використання кромки, градієнти і тіні виділяє елемент з фону, і його стає легко розпізнати як елемент, що підтримує натискання.



Діалогове вікно Windows 95 використовувало товсті тіні і підсвічування для створення тривимірного ефекту, допомагав користувачам визначати візуальну ієрархію і розпізнавати інтерактивні елементи.



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



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





Але якщо все плоске, як зрозуміти, де кнопки?

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

Майже плоский дизайн та «плаваючі» кнопки
Майже плоский дизайн – це розвиток ультра-плоского. Він майже весь плоский, але використовують ледь помітні тіні, підсвічування і шари, щоб повернути деяку глибину дизайну. Мова Material Design від Google – приклад майже плоского дизайну з правильно розставленими пріоритетами, і він вводить новий тип кнопок – плаваючі активні кнопки. Вони знаходяться на шарі, розташованому поверх основного інтерфейсу, і привертають увагу до тих або головним дій.

Додаток Maps від Google – приклад правильного застосування ПАК. В основному користувачі отримують від карт маршрут, тому є сенс у тому, що ПАК саме цим і займається.



Ще один приклад використання ПАК у UI – це Evernote. Незважаючи на майже плоский дизайн, додаток використовує ледь видимі тіні в плашці навігації і плаваючу кнопку.



Кнопка-привид
У 2014 році одним з найвпливовіших трендів в дизайні були кнопки-примари. Це прозорі порожні кнопки простої форми, прямокутної або квадратної. Їх також називали «порожніми», «голими» або «порожніми». Їх часто обводять дуже тонкою лінією, а всередині їх міститься лише текст.



Їх корені ростуть революції плоского дизайну, а популярними вони стали з виходом iOS 7. Багато кнопки цього дизайну – примарні. Прості прямокутні форми укупі з гарним шрифтом добре виглядають з плоским дизайном.



Найчастіше ці кнопки містять заклик до дії. Сайт Specular пропонує хороший приклад використання таких кнопок.



Найпростіші кращі методи для створення кнопок
Перед тим, як почати працювати над власними кнопками, потрібно подумати про те, як дизайн запрошує користувача до роботи з ним. Як користувачі розуміють, що елемент є кнопкою? Вам, швидше за все, потрібно:
• Щоб кнопки виглядали, як кнопки (Форма).
• Щоб користувачеві було простіше з ними працювати (Розмір та відступ).
• Підписати кнопки (Ярлики).
• Використовувати колірний контраст для призову до дії (Колір).

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

Форма
Найефективніше зробити кнопки прямокутними, можливо, з округленими кутами, залежно від стилю сайту або програми. Прямокутні кнопки з'явилися в цифровому світі давно, і користувачі з ними знайомі.

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



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



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

Розмір. Коли зазвичай для роботи з інтерфейсом використовується сенсорний екран, можна покластися на дослідження від MIT Touch Lab, щоб вибрати правильний розмір кнопок. У дослідженні виявили, що в середньому подушечки пальців мають розмір від 10 до 14 мм, а кінчики – від 8 до 10. У зв'язку з цим 10х10 – хороший мінімальний розмір цілі.



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



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

Відступи. Відстань між кнопками розділяє елементи управління і дає їм можливість «дихати».



Ярлики
Необхідно вибирати правильні назви для кнопок. Слова вибираються за принципом найменшого подиву: якщо назву кнопки викликає подив, його слід поміняти. Просте правило – називайте кнопки словами, що позначають їх дії. Додайте просте пояснення того, що станеться після натискання, або відобразіть її дію за допомогою активних дієслів.

У прикладі можна побачити діалогове вікно, що з'являється, коли користувач завантажує файл в Dropbox через веб-додаток. Повідомлення пропонує одну кнопку з написом «Офігенно!». І ця назва може заплутати користувачів, тому що абсолютно незрозуміло, до чого призведе натискання на неї.



Колір
Вибираючи палітру, пам'ятайте про те, як кольори допомагають користувачам орієнтуватися і розбиратися в діях:
  • Використовуйте колір і контраст, щоб допомогти користувачеві побачити і зрозуміти вміст додаток, взаємодіяти з потрібними елементами, зрозуміти сенс дій. У прикладі ми використовуємо червоний колір кнопки, що викликає потенційно деструктивну дію.
  • Зробіть найважливішу кнопку найважливішою по виду. Наприклад, Amazon використовує контрастну жовту кнопку, залучаючи користувача до потрібного дії.


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

Всім спасибі!
Джерело: Хабрахабр

0 коментарів

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