Вибір селекторів ніколи не був приємним. Ми детально розглянемо дизайн різних елементів управління
Читайте також: Radio buttons, checkboxes та інші види селекторів
Слово "тумблер" (toggle) є відсиланням до перемикача з короткою ручкою, який чергується між двома станами при кожній його активації. Ви стикаєтеся з ним щоразу, коли "вмикаєте" світло.
Що стосується "радіокнопок" (Radio Buttons), то це слово походить від автомобільних радіоприймачів, які зазвичай мають набір кнопок під циферблатом. Він може механічно зберігати попередні налаштування станцій, тому користувач швидше перемикається між ними. Натискання однієї з цих кнопок призведе до того, що вона залишиться внизу, поки не буде натиснута інша.
Checkboxes (прапорці) - використовуються, коли є один або кілька незалежних варіантів, і користувачі можуть обирати будь-яку кількість варіантів, зокрема жодного, один або кілька.
Радіо buttons (Радіокнопки) - використовуються, коли існує список із двох або більше взаємовиключних варіантів, і користувачі повинні вибрати тільки один із них.
Toggle switches (Тумблери або перемикачі) - використовуються, коли є два взаємовиключні варіанти, і завжди мають значення за замовчуванням. Вибір перемикача набуває чинності негайно.
Choice chips - це компактна альтернатива радіокнопкам. Вони містять щонайменше два варіанти, але користувач може вибрати тільки один.
Multi-select chips - це компактна альтернатива прапорцям. Дозволяють користувачам обирати кілька варіантів і здебільшого використовуються на мобільних пристроях для фільтрації.
Елементи управління вибором уже давно використовуються в інтерфейсах, тому в нас сформувалися конкретні очікування щодо того, як вони мають поводитися. Ось проста шпаргалка, якої ви можете дотримуватися, щоб вибрати відповідний тип для конкретної ситуації.
Натхненням послужила стаття NNG "Checkboxes vs. Radio Buttons"
Стани
Прапорці (checkboxes) і радіокнопки (radio buttons) можуть бути вибрані або не вибрані, а перемикачі (toggles) можуть бути увімкнені або вимкнені. Усі вони мають увімкнений, вимкнений, сфокусований і натиснутий стани та стан наведення курсора. Знаю, здається, що це багато, але для надійної взаємодії потрібно створити всі ці стани.
Не забувайте про невизначений стан
Це стан для прапорця, з яким користувач не взаємодіяв. Його стан ще не повністю визначено, звідси й назва. Він створений для сценарію, коли є батьківський прапорець із кількома дочірніми елементами, частина з яких обрана, а частина - ні.
Припиніть неправильно використовувати перемикачі
Не створюйте ієрархічні структури з перемикачами (toggles). Це візуально відволікає і може створити хибне враження, що всі дочірні варіанти ввімкнені / вимкнені.
Коли вибір негайно набуває чинності, використовуйте перемикачі
Перемикач є цифровим вимикачем. Будь-який ефект, викликаний ним, має негайно набути чинності. Якщо це не так, краще замінити перемикач на прапорець.
Незвичайний стиль може збити користувачів з пантелику
Будь-яке відхилення від того, що вважається стандартом платформи, для якої ви проєктуєте, додасть додаткове когнітивне навантаження на користувачів. Я часто бачу круглі прапорці, які можна легко сплутати з радіокнопками.
Розташування варіантів у вертикальному списку допоможе користувачам легко сканувати їх
Вирівняні за лівим краєм елементи керування і мітки працюватимуть найкраще, оскільки вони розташовані близько один до одного. Це сприяє найшвидшому часу завершення взаємодії, і користувач робить менше помилок. Вирівняні за правим краєм елементи керування мають певні переваги для мобільних пристроїв, оскільки мітки і кнопки не можуть бути розташовані занадто далеко одна від одної. Наявність кнопки поруч із правим краєм робить її більш доступною, якщо тримати пристрій однією рукою. Крім того, ми не закриваємо мітки пальцем під час вибору.
Використовуйте chips, якщо вертикальний простір є проблемою
Ви маєте не допустити ситуацію, коли важко побачити, який елемент керування обрано (не забудьте додати порожній простір між кнопками та мітками). Подумайте про використання чіпів, щоб чітко візуально відокремити варіанти вибору.
Якщо можливо, використовуйте радіокнопки замість списків, що розкриваються
Постійно відображайте всі варіанти, щоб користувачі могли легко їх порівнювати, це знижує когнітивне навантаження і допомагає зробити форми більш прозорими.
Використовуйте розкривні списки для численних або схожих варіантів
Якщо кількість варіантів більша за 6-7, вам слід розглянути можливість їхнього включення до розкривного списку, оскільки користувачі в будь-якому разі не зможуть запам'ятати всі варіанти. Те ж саме застосовуватиметься до передбачуваних, аналогічних або інкрементних варіантів. Наприклад, збільшення - 10%, 20%, 30%.
Краще мати обрану радіокнопку за замовчуванням
Користувачі не можуть скасувати вибір і встановити радіокнопку назад у початковий стан після її вибору. Якщо користувачам може знадобитися утриматися від вибору, ви повинні додати радіокнопку "None". Структуруйте список варіантів у логічному порядку.
Пишіть зрозумілі мітки, уникайте заперечень
Уникайте ситуацій, коли користувачам потрібно поставити галочку, щоб щось не відбулося.
Виділіть вибрані параметри, щоб привернути увагу користувачів
Візуально відокремте вибрані варіанти від решти, що особливо важливо при виборі рядків у таблицях даних.
Підтримка групового вибору та очищення
Вибір або очищення декількох елементів одночасно має бути легким для користувачів.
Для надійної взаємодії зробіть клікабельні області досить великими
Включіть обидві кнопки і мітки у велику область натискання. Згідно із Законом Фіттса розмір мішені відіграє важливу роль. Прапорці та радіокнопки, як правило, крихітні і їх складно клацнути або натиснути, особливо на мобільному телефоні.
Переклад статті uxdesign.cc
Топ коментарі (1)
Дякую!