Як поліпшити інтерфейс: поради не лише для дизайнерів. Частина 2. Чекбокси і випадні списки


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

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


Чекбокси (checkboxes

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

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

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

Проблеми та способи їх розв’язання при використанні чекбоксів

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

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

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

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

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

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

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

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

Чекбокс, що вмикає опцію

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

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

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

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

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

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

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

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

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

“Вибрати все” і “прибрати все”

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

Висновки

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


Випадні списки, або дропдауни (dropdown) – один з найбільш незручних і неефективних елементів інтерфейсу. Проте, незважаючи на це, їх продовжують застосовувати в усіх місцях інтерфейсу. “Чому?” – запитаєте Ви. Відповідь проста: “Випадні списки економлять простір і допомагають приховати великі списки”.

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

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

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

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

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

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

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

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

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

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

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

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

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

Випадний список для вибору країни ВКонтакте

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

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

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

Висновок

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

За матеріалами серії “Як поліпшити будь-який інтерфейс”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *