Как улучшить любой интерфейс: чекбоксы

Продолжаю серию статей по улучшению интерфейсных элементов. В этом раз пришла очередь поговорить о чекбоксах. Теперь можно получать уведомления о новых статьях прямо на почту.

Как улучшить чекбоксы

 Чекбоксы

checkbox2 Чекбоксы (checkboxes) — изначально создавались как элементы группового выбора. Т.е. предназначались для обозначения какой-то группы из элементов для последующих групповых действий с ними.

Чекбоксы в Gmail

Хорошие и настоящие чекбоксы есть в Gmail

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

Проблемы и решения при использовании чекбоксов

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

Использование чекбоксов для бинарных состояний

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

Пример использования чекбокса для бинарного состояния

Пример использования чекбокса для бинарного состояния

Такой чекбокс ничего не объясняет. Тут не понятно будет ли доставка почтой или мне придется ехать за своей покупкой. Гораздо логичней в этом случае будет использовать радиобаттон для выбора нужной опции. Переделываем.

Меняем не радиобаттоны

Теперь стало все стало гораздо понятней

Использование чекбоксов для включения опций

Довольно часто чекбоксы использую для показа включения и выключения опции. Что я считаю не очень правильным.

Чекбокс, включающий опцию.

Чекбокс, включающий опцию.

Чекбоксы — это не кнопки. Это элементы предназначенные для групповых операций. Нажатие на чекбокс не должно приводить к какому либо действию. Для визуального определения включенных и невключенных опций из списка прекрасно подойдет цветовая индикация.

В приведенном выше примере следовало бы выбрать несколько опций и нажать кнопку «Применить». Такой вариант жизнеспособен, но не очень удобен. Что же делать? Я предлагаю такое решение:

Замена чекбокса включающего опцию

Включение опции в одном из клиентских проектов

Здесь прекрасно видно состояние опции (включена или нет). Сразу видно переключение и решена еще одна проблема о которой мы поговорим дальше. Подобный переключатель пришел из интерфейса Айфона и является достойным аналогом простого чекбокса.

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

Согласно закону Фиттса, чем меньше элемент, тем труднее его использовать. Эту проблему можно наблюдать не только в чекбоксах. Это одна из главных проблем многих контролов.

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

Какие есть выходы и приемы?

1. Превратить чекбокс в кнопку. Тем самым показав кликабельную область.

Превратить чекбокс в кнопку

Чекбокс-кнопка на сайте Ostrovok.ru

2. Превратить чекбокс в метку. Увеличив этим область клика.

 Превратить чекбокс в метку

Чекбокс-метка на одном из клиентских проектов

3. Превратить чекбокс в переключатель. Об этом я писал выше.

«Выбрать все» и «убрать все»

Для удобства работы с большим количеством чекбоксов в интерфейсе должны присутствовать опции «Выбрать все чекбоксы» и «Снять все чекбоксы». В противном случае работа с таким интерфейсом стает очень нудной и долгой. Представьте, что вам нужно выбрать хотя бы 10 пунктов из 12 имеющихся в списке. Это гораздо проще сделать выбрав все и сняв ненужные опции.

Выводы

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

В предыдущих и следующих сериях

Если вам понравилась статья и интересны дальнейшие темы, то следите за моим твиттером, подписывайтесь на RSS или рассылку новых постов по почте.



Подписка по РСС
Мой твитер

10 комментариев

  1. Андрей Гурылёв

    blog.shaihalov.ru/root%20...2013/12/good.png

    Использование кнопок-переключателей вместо чекбоксов это сомнительное решение, на мой взгляд. Особенно так, как здесь изображено. Отключенное состояние очень похоже на состояние disabled у чекбоксов. То состояние, когда кликать по чекбоксу бесполезно. Но как тогда иначе показать отключенный чекбокс? Есть вариант с надписями на самом переключателе(на серой или розовой области). Есть вариант с подписью рядом текущего состояния текстом. Но все они кажутся мне дизайнерскими костылями. Посему, именно для включения опций, я считаю, нужны чекбоксы.

    На счёт бинарных состояний и меток полностью согласен =)

    Спасибо, что починили комментарии через соц. сети =)

  2. Олег

    Добрый день, я недавно стал увлекаться программированием и поэтому мне статья очень понравилась и дала некие мысли для размышления! Да, чекбоксы нужная функция! Их роль вроде так незаметна, но она так весома!Мне кажется самое неудобное-это превратить чекбокс в метку!Но это конечно моё мнение! А вот для бинарных состояний чекбокс очень даже удобен!

  3. Рита

    Чекбоксы в основном нужны в различных анкетах, опросниках или тестах. Полностью согласна с автором статьи, использовать их по делу и без дела нужно далеко не везде. Иногда лучше заменить их чем-то другим для большей наглядности.

    Очень понравились варианты чекбокс-кнопки и чекбокс-метки. Использую это в своих будущих проектах.

  4. Павел

    Занимаясь программирование в api я впервые столкнулся с данным понятием, как чекбокс. В основном там они использовались, как элемент индикации состояний.

    Например, включен или выключен флаг расширенного вывода результата или записи в файл. Очень удобная вещь я вам скажу, просто считываешь их состояние и принимаешь, те или иные решения в коде программы по оператору if.

    Так же надо их использовать и в интерьере/интерфейсе программы, точно по их предназначению и не более.

  5. […] Чекбоксы. Или как научить пользователя ставить в маленькую галочку. […]

  6. […] маленькая область для клика.  Можно использовать те же приемы что и для чекбоксов: превратить радиобаттон в кнопку, добавить […]

  7. Евгений

    А почему же у вас в комментариях используется чекбокс в стандартном виде? 🙂

    dl1.joxi.net/drive/0001/0...1/f0524998c4.png

    • Максим Шайхалов

      Потому что я — сапожник, без сапог =) Придумать придумал, но воплощать мысли просто нет времени.

  8. Евгений

    Уместно ли использовать чекбокс для подписания онлайн-договора (как в банке галочка)?

    • Максим Шайхалов

      Да, это довольно популярное решение. Однако лучше сделать так, чтобы соглашение подписывалось автоматически. При этом написать что-то типа «Пользуясь нашим сервисом вы соглашаетесь с условиями договора».

Оставить коментарий

Суперрассылка!

Введите почту и будьте в курсе