UX-дизайн: позначки і перемикачі у формах

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

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

Позначки

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

Прапорці забезпечуються написами

Перемикачі

Перемикач - це елемент керування, який щось включає і вимикає.

Перемикачі дозволяють зробити вибір між двома прямо протилежними варіантами.

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

Освітлення є найбільш поширеною областю застосування перемикачів

Практичні рекомендації щодо використання прапорців та перемикачів

Використовуйте стандартний вигляд

Прапорець - це просто маленький квадратик з галочкою або хрестиком.

Два положення прапорця: позначено або не позначено

Перемикач повинен виглядати як звичайний тумблер з двома положеннями.

Два положення перемикача: увімкнено або вимкнено

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

Перемикач iOS7/8

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

Складно зрозуміти, яку радіокнопку слід натиснути, щоб вибрати четвертий варіант

Поточне розташування перемикача

Під час проектування перемикачів слід уникати невизначеності, пов'язаної з поточним станом. Як приклад візьмемо перемикач з iOS 6 і подивимося на нього у включеному стані - фарбування синім кольором і відображається слово ON (включено).

Не зрозуміло, включено - це поточний стан, або пропонована дія

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

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

Колір шрифту позначає поточне положення

У тексті написів прапорців використовуйте позитивне підтвердження, щоб користувач точно знав, що станеться, якщо він поставить позначку. Уникайте фраз типу «Більше не надсилайте мені е-мейл повідомлення», які б означали, що користувачеві необхідно поставити позначку, щоб щось не відбувалося.

Прапорці повинні мати написи з позитивними командами, а не з негативними «Не...»

Натисніть кнопку «Цільова область»

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

Дозвольте користувачеві робити вибір натисканням не тільки прапорця, але і лейблу

Позначте цей пункт, щоб змінити параметри, але не кнопки керування

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

У прикладі нижче положення перемикача дозволяє сказати однозначно: бездротовий зв'язок увімкнено. У випадку з прапорцем користувачеві доводиться гадати - WiFi включений, або для його включення необхідно поставити галочку.

Щоб увімкнути або вимкнути сервіси та компоненти апаратного забезпечення, такі як WiFi, скористайтеся перемикачами

Взаємодія прапорця відрізняється від взаємодії перемикача

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

Доброю практикою взаємодії користувача є миттєва зміна керованого параметра за допомогою перемикача - не після натискання кнопки «Зберегти» або переходу до попередньої сторінки. Саме цього ми очікуємо від цього елемента управління в реальному житті - ми клацаємо перемикачем, і світло вмикається.

Включення Wi-Fi до iOS

Використовуйте позначки, якщо для введення зміни в силу від користувача очікуються додаткові дії

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

Ув'язнення

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