Як покращити інтерфейс поради не лише для дизайнерів

Чекбокси (checkboxes) спочатку створювалися як елементи групового вибору, тобто. призначалися для позначення якоїсь групи елементів для наступних групових дій з ними.

Хороші та справжні чекбокси є в Gmail

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

Проблеми та рішення при використанні чекбоксів

Розглянемо основні проблеми, які спостерігаються при використанні чекбоксів, та способи їх вирішення.

Використання чекбоксів для бінарних станів

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

Приклад використання чекбоксу для бінарного стану

Такий чекбокс нічого не пояснює, тому варто переробити його на радіокнопку.

Тепер стало все стало набагато зрозуміліше

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

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

Чекбокс, що включає опцію

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

У наведеному вище прикладі слід вибрати кілька опцій і натиснути кнопку «Застосувати». Такий варіант життєздатний, але не дуже зручний. Що ж робити? Я пропоную таке рішення:

Включення опції в одному із проектів

Тут чудово видно стан опції (включена абоні). Відразу видно перемикання, і вирішено ще одну проблему, про яку ми поговоримо далі. Подібний перемикач прийшов з інтерфейсу iOS та є гідним аналогом простого чекбоксу.

Мінімальний розмір клікабельної області

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

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

Які є виходи та прийоми?

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

«Вибрати все» та «прибрати все»

Для зручності роботи з великою кількістю чекбокси в інтерфейсі повинні бути опції «Вибрати всі чекбокси» та «Зняти всі чекбокси». В іншому випадку робота з таким інтерфейсом стає дуже нудною та довгою. Уявіть, що вам потрібно вибрати хоча б 10 пунктів із 12 наявних у списку. Це набагато простіше зробити, вибравши все та знявши непотрібні опції.

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

Списоки, що випадають, або дропдауни (dropdown) - один з найнезручніших і неефективних елементів інтерфейсу. Але, незважаючи на це, їх продовжують використовувати у всіх місцях інтерфейсу. «Чому?» — спитайте ви. Відповідь проста: списки, що випадають, економлять простір і допомагають сховативеликі списки.

Правила використання та альтернативи

Насправді, у більшості випадків список, що випадає, можна замінити на гідну альтернативу. Але якщо ви все-таки беретеся використовувати список, що випадає, то запам'ятайте кілька правил.

1. Не використовуйте списки для маленьких списків.

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

Вибір керма у розширеному пошуку.

Спробуємо змінити на радіокнопки. Стало краще, чи не так?

2. Не використовуйте списки для великих списків.

Вибір дати народження на Хабрі

При використанні великої кількості пунктів у списках, що випадають, користувачеві доводиться користуватися прокруткою і вивчати весь список повністю. Це досить гальмує заповнення форм.

Вибір дати в Бутстрапі поєднує текстове поле та datepicker

3. Використовуйте список з введенням та автозаповненням.

Справжнім корисним і застосовним випадаючим списком я вважаю такий

Список, що випадає, для вибору країни ВКонтакте

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

4. Підставляйте за промовчанням найчастіше значення.

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

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