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

image

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

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



Прапорці



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

image

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

Перемикачі



Перемикач – це елемент управління, який включає і вимикає.

image

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

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

image

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

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



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

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

image

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

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

image

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

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

image

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

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

image

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


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

image

Не ясно, включено – це поточний стан, або пропоноване дію.

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

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

image

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


Написи прапорців повинні містити позитивне підтвердження

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

image

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

Зробіть напис прапорця цільовою областю



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

image

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

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

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

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

image

Для включення/вимикання сервісів і компонентів апаратного забезпечення, таких як WiFi, використовуйте перемикачі.

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



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

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

image

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

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

image

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

Висновок

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

0 коментарів

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