Radio buttons, checkboxes та інші види селекторів

Обери мене! Обери мене! Ні, обери мене! У сьогоднішній статті ми розглянемо селектори і чим вони відрізняються. На відміну від більшості інших моїх статей, основна увага буде приділена двом компонентам (радіокнопкам (radio buttons) і прапорцям (checkboxes), а також їхньому порівнянню з парою інших селекторів.

Читайте також: Поради щодо дизайну селекторів (checkboxes, radio buttons, switches і тд.)

1. Що таке селектори

Селектор (selector) - це поле введення, в якому користувач повинен вибрати один (або кілька) параметрів, на відміну від текстового поля, в якому користувач має повну свободу дій. Селектори, як зачіски Lady Gaga, бувають різних форм і стилів. Списки, що випадають, прапорці, перемикачі, повзунки тощо. - це різні типи селекторів, але вони не схожі один на одного. Основна функціональна відмінність між цими типами селекторів полягає в тому, скільки варіантів користувач може вибрати: один або кілька.

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

2. Анатомія прапорців і радіокнопок

Хоча, у цій статті ми розглянемо різні типи селекторів, ми зосередимося на радіокнопках (radio buttons) і прапорцях (checkboxes). Нижче їхня анатомія.

Анатомія радіокнопок і прапорців

Примітка: Іноді люди кажуть "radio button"/"checkbox", коли мають на увазі мітку і селектор разом, в той час, як в інших випадках вони мають на увазі тільки селектор. Я віддаю перевагу останньому варіанту.

3. У чому різниця між радіокнопками і прапорцями

Радіокнопки і прапорці дуже схожі, за винятком кількох ключових відмінностей. Основна відмінність полягає в тому, що за допомогою радіокнопок ви можете вибрати тільки один елемент, а за допомогою прапорців - будь-яку кількість. Я збиралася скласти таблицю, щоб пояснити це, але не стала. Не тому, що а) це звучало нудно, б) Medium не дає змоги вставляти таблиці, а тому що в мене була краща ідея:

Вікторина! Ура! Давайте подивимося, хто дасть 100% правильних відповідей.

1) Скільки елементів можна вибрати в стандартному компоненті прапорців (якщо не вказано інше)?

1. 1
2. 3
3. необмежену кількість
4. 0

2) Яка форма селектора радіокнопки?

1. Квадрат
2. Коло
3. шестикутник
4. трикутник

3) Якщо ви хочете створити інтерфейс, у якому користувач зможе вибрати кілька начинок для морозива, ви повинні використовувати:

1. Радіокнопки
2. Прапорці

4) Якщо ви хочете створити інтерфейс, у якому користувач може вибрати тип банківського рахунку, який він може відкрити, ви маєте використовувати:

1. Радіокнопки
2. Прапорці

5) Якби ви хотіли створити селектор "Підписатися на розсилку", який тип ви б використовували?

1. Радіокнопка
2. Прапорець

6) Виберіть на зображенні нижче варіант із радіокнопкою.

1. A
2. B

ВІДПОВІДІ:
1): 3. Необмежена кількість

2): 2. Коло

3): 2. Прапорці

4): 1. Радіокнопки

5): 2. Прапорець

6): 1. A

Ви впоралися! (Сподіваюся).

4. Поширені стилі селекторів

Нижче представлено низку поширених стилів прапорців і радіокнопок, з якими ви можете зіткнутися в Інтернеті.

Стандартний стиль (радіокнопки / прапорці)

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

Стандартний стиль з галочками

Стандартний стиль без галочок

Стиль кнопки в тестах (радіокнопки / прапорці)

Коли користувач відповідає на запитання тесту або вікторини, ми повинні переконатися у двох речах: 1) що він може чітко бачити, які відповіді вибирає, 2) що він не заплутається, коли отримає фідбек на свою відповідь.

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

Селектори вікторини, які показують, що наявність галочки викликає плутанину

Основний стиль із зображенням (радіокнопки/прапорці)

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

Радіокнопки та прапорці із зображеннями. Зображення: (з unSplash): Гамбургер від @amir_v_ali | Чикенбургер від @amir_v_ali | Веджибургер від @swimstaralex | Сир від @swimstaralex | Помідори від @lmablankers | Латук від @producteurslocaux

Зображення в стилі сітки (одне / кілька)

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

Селектори із сіткою зображень. Зображення (з unSplash): Гамбургер від @amir_v_ali | Чикенбургер від @amir_v_ali | Веджибургер від @swimstaralex | Сир від @swimstaralex | Помідори від @lmablankers | Латук від @producteurslocaux

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

Приклад одиночного селектора в стилі сітки. Скріншот: https://www.buzzfeed.com/jessicamisener/which-sandwich-are-you

Багаторівневі прапорці

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

Багаторівневі прапорці

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

Примусовий вибір

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

Прапорці з примусовим вибором

Стиль кнопки (одиночний / множинний вибір)

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

Селектор у стилі кнопки

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

Вибір жанру Apple Music під час реєстрації. Зображення: https://www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T

Перемикач (одиночний вибір)

Перемикач (toggle) найчастіше використовується для налаштувань і дає змогу користувачеві обирати між варіантами так / ні.

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

Приклад перемикача

5. Стани

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

За замовчуванням / активно (Default/active)

Це початковий стан селекторів. Цей стан вказує користувачеві, що він може натискати на пункти в запитаннях.

Приклад радіокнопок і прапорців у їхньому стандартному / активному стані

Неактивно (Inactive)

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

Приклад радіокнопок і прапорців у їхньому неактивному стані

Наведення курсора (Hover)

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

Приклад радіокнопок і прапорців у стані наведення курсору

Порада для нубів: у сенсорних пристроїв немає стану наведення курсору

Фокус / виділення (Focus/highlighted)

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

Приклад радіокнопок і прапорців у їхньому стані фокусу / виділення

Натиснуто (Pressed)

Це стан, коли користувач утримує свою мишу / палець, і елемент вказує користувачеві, що на нього натискають.

Приклад радіокнопок і прапорців у їхньому натиснутому стані

Обрано (Selected)

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

Приклад радіокнопок і прапорців у їхньому вибраному стані

Помилка зворотного зв'язку (Fail feedback)

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

Приклад радіокнопок і прапорців у стані помилки

6. Правила для тексту мітки

Існує тільки одне жорстке правило для міток селектора: бути послідовним.

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

Приклад міток елементів

7. Коли ви повинні їх використовувати

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

Коли використовувати радіокнопки

У мене є чотири правила, коли використовувати радіокнопки. Ось вони:

1. Коли ви хочете, щоб користувач вибрав тільки один елемент
   Якщо ви хочете, щоб користувач вибрав більше одного елемента, краще використовувати прапорці.

2. Якщо у вас менше шести варіантів відповіді
   Залежно від ваших правил дизайну, якщо є понад п'ять або шість елементів, використовуйте розкривний список. Так, так, я знаю, що вони незграбні, але вони економлять багато простору вашого дизайну.

Порівняння списку, що розкривається, і радіокнопок

При цьому, якщо простір не є проблемою, можливо, варто використовувати радіокнопки - особливо, якщо ви проектуєте для мобільних пристроїв. Я бачила, що це ідеально підходить для служб доставки їжі.

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

1. Ви хочете примусити вибрати один варіант відповіді

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

1. Якщо у запитання є тільки два варіанти: так / ні

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

Порівняння радіокнопок і перемикача

Доповнення до статті після її публікації:

5. Якщо хочете, щоб користувачі натискали "Зберегти" для застосування обраного варіанту

Якщо ви перебуваєте на сторінці налаштувань або в місці, де ви хочете, щоб користувач міг експериментувати з параметрами, перш ніж він натисне велику зелену кнопку "Зберегти"- краще використовувати радіокнопки (або прапорці). Однак, якщо ви хочете, щоб ваші налаштування були застосовані негайно (увімкнення / вимкнення Wi-Fi), краще використовуйте перемикач.

Цей варіант запропонував Thomas Veit_, дякую йому:)

_6. Якщо мітки варіанта відповіді короткі, розгляньте можливість використання перемикача з множинним вибором.

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

Приклад перемикача з множинним вибором

Цей варіант запропонував Thomas Weitz, спасибі йому.

Коли використовувати прапорці

У мене є два правила, коли використовувати прапорці, і ось вони:

1. Якщо ви хочете, щоб користувач міг вибрати кілька варіантів або взагалі не вибирати

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

1. Один елемент.

Тест: чому пункт "Я прочитав умови" завжди у вигляді прапорця, а не радіокнопки? Адже є сенс використовувати радіокнопку, оскільки це найкращий тип селектора для запитань "так / ні"?

Відповідь: тому що ви можете скасувати його вибір. На відміну від радіокнопок лише з одним елементом, де ви не можете скасувати його. Якщо ви натиснете на нього, він буде обраний НАЗАВЖДИ.

8. Перевірка доступності

Ви зробили це! Ви завершили проектування своїх селекторів, і настав час відправити їх команді розробників. Але зачекайте! Ви перевірили їхню доступність?

1. Чи відповідає ваш селектор стандартам колірного контрасту WCAG AAA? Замість цього деякі дизайнери використовують стандарти ААА. Моя улюблена програма перевірки контрастності - WebAIM.
2. Варіанти відповіді / елементи більше, ніж 44px для сенсорних екранів? (Іноді використовують 36px.)
3. Відстань між кожним варіантом відповіді / елементом більше 8px?
4. Чи завжди видно мітку / запитання?
5. Чи є у відповідних полях корисний текст зворотного зв'язку? (Наприклад, "Будь ласка, заповніть це питання").

Детальніше: https://webaim.org/techniques/forms/controls

9. Думки на закінчення

Після цієї статті я збираюся відійти від теми патернів інтерфейсу форм і перейти до інших типів патернів інтерфейсу. АЛЕ, якщо ви хочете, щоб я розглянула інші типи полів форми, повідомте про це в коментарях.

Бережіть себе, бо зараз світ зовсім збожеволів.

---

Переклад статті uxdesign.cc