Главная | Все статьи | Код

Не используйте чек-боксы

Время чтения статьи ~4 минуты
Не используйте чек-боксы главное изображение

Не используйте чек-боксы в пользовательских интерфейсах. Используйте переключатели (radio buttons). У чек-боксов есть одно преимущество: они занимают меньше пространства. Но у них есть и серьезный недостаток: часто неясно, что значит неотмеченный чекбокс.

Вот несколько примеров. Первый — из формы настроек WillMaker от Quicken (сервиса для планирования наследственного фонда в США):

img

[ ] Отсортировать список контактов по фамилии
Quicken WillMaker отобразит контакты в списке, отсортированные по фамилии)

Понятно, что если чекбокс отмечен, список контактов будет отсортирован по фамилии. Но как он будет отсортирован, если чекбокс будет пустым? Очевидно, они обнаружили, что у пользователей возникли проблемы с этой позицией, потому что встроили в список справочный текст, но объяснение просто перефразировало предложение у чек-бокса. Лучше переделать, используя переключатели:

При отображении списка контактов:

  • Упорядочить по имени
  • Упорядочить по фамилии.

Обратите внимание, что я заменил «сортировку» на «порядок», что звучит менее формально. Также заметьте, что я понятия не имею, какой будет сортировка, если чек-боксы не будут отмечены, поэтому я предположил, что по имени.

Второй пример из MediaWiki, приложения, которое управляет Википедией. При настройке вам показывают такой выбор для форматирования неработающих ссылок:

img

[x] Форматировать неработающие ссылки *так** (альтернатива: так?)*

Они осознают, что состояние с неотмеченным чек-боксом — нечёткое, поэтому объяснили его в тексте самого чек-бокса. Доходчивей было бы использовать переключатели:

Или совсем однозначно:

image-20181004150610062

(Я думаю, что первый вариант предпочтительней).

Третий пример — TortoiseSVN, отличная программа для Windows для управления Subversion. В окне настроек у них есть такой чек-бокс:

img

[ ] Отображать оверлеи только в explorer

Предположительно, если этот чек-бокс не отмечен, у всех файлов будут показываться оверлеи (маленькие иконки, отображающие состояние файла), но если вы отметите чек-бокс, они будут отображаться только в Explorer. Мне потребовалось гуглить фразу «показывать оверлеи только в Explorer», чтобы понять, что «везде» означает диалоговые окна «открыть» и «сохранить». Мы можем не вынуждать пользователя искать разъяснение, а использовать переключатели:

image-20181004150520847

Отображать оверлеи:

  • В Explorer и диалоговых окнах Open/Save
  • Только в Explorer.

Последний пример со страницы настроек Zimbra — почтового open-source пакета:

img

У этого чек-бокса нет контекста, он тут сам по себе. Довольно сложно догадаться, что может означать отметка в этом чек-боксе. В их справке говорится: «Чтобы поисковый текст всегда отображался в поле «Поиск», отметьте чек-бокс «всегда показывать строку поиска». Когда отметка установлена, поле поиска показывает поисковый запрос, в котором выведен список элементов, отображаемых в Content Pane». Это объясняет, что происходит, когда вы отмечаете чек-бокс, но что меняется, когда он не отмечен — снова загадка. Что показывается в текстовом поле «Поиск»? Ничего? Я пробовал делать поиск при неотмеченном чек-боксе и поисковый текст всё так же оставался в текстовом поле. Поэтому я не могу предложить редизайн для варианта с переключателями.

Google, похоже, избавился от чек-боксов. На странице настроек Gmail они убрали чек-боксы вообще:

img

Другие поставили бы чек-бокс с текстом «Использовать UTF-8 для исходящих сообщений». Google применил переключатели даже там, где было бы достаточно чек-бокса:

img

Я думаю, что переключатель лучше не только для системности, но и для явности и понятности. Вот ещё более простой пример из Google Календаря:

img

Этот пример — пограничный случай чек-бокса. Я бы предпочел более доходчивую формулировку:

События, которые вы отклонили:

  • В любом случае показывать в календаре.
  • Скрыть.

Так когда допустимы чек-боксы? Я пробежался по диалоговым окнам настроек нескольких крупных приложений и не нашёл никаких полезных применений. В каждом случае, для меня была лёгкая неопределенность относительно того, что будет происходить, когда чек-боксы не отмечены. Всё становится лучше, когда используются переключатели. Возможно, чек-боксы полезны в таблицах, например, в этом примере с календарём Google:

img

Новые приглашения: Изменённые приглашения: Отменённые приглашения: Ответы на приглашения: Ежедневный список дел: Отправлять каждый день в 5:00 утра текущего часового пояса

Ещё один полезный интерфейс для чек-боксов, который я упустил, когда писал статью, это вероятность выбора нескольких вариантов (или ни одного). Пример:

Какие языки программирования вы знаете?

image-20181004150409813

Аватар пользователя Natalia Bass
Natalia Bass 25 октября 2018
1
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 2 мая
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 2 мая
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 2 мая
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 2 мая
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 2 мая
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 2 мая
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время