Продолжаю серию статей по улучшению интерфейсных элементов. В этом раз пришла очередь поговорить о чекбоксах. Теперь можно получать уведомления о новых статьях прямо на почту.
Хорошие и настоящие чекбоксы есть в Gmail
Примером использования чекбоксов может служить любой современный интерфейс почты. Отметив несколько писем их можно, например, все удалить.
Посмотрим на основные проблемы, которые я наблюдаю при использовании чекбоксов и что с этими проблемами можно сделать.
Часто чекбокс используют для выбора между двумя разными опциями. Например, такой чекбокс я видел в одном интернет-магазине.
Пример использования чекбокса для бинарного состояния
Такой чекбокс ничего не объясняет. Тут не понятно будет ли доставка почтой или мне придется ехать за своей покупкой. Гораздо логичней в этом случае будет использовать радиобаттон для выбора нужной опции. Переделываем.
Теперь стало все стало гораздо понятней
Довольно часто чекбоксы использую для показа включения и выключения опции. Что я считаю не очень правильным.
Чекбокс, включающий опцию.
Чекбоксы — это не кнопки. Это элементы предназначенные для групповых операций. Нажатие на чекбокс не должно приводить к какому либо действию. Для визуального определения включенных и невключенных опций из списка прекрасно подойдет цветовая индикация.
В приведенном выше примере следовало бы выбрать несколько опций и нажать кнопку «Применить». Такой вариант жизнеспособен, но не очень удобен. Что же делать? Я предлагаю такое решение:
Включение опции в одном из клиентских проектов
Здесь прекрасно видно состояние опции (включена или нет). Сразу видно переключение и решена еще одна проблема о которой мы поговорим дальше. Подобный переключатель пришел из интерфейса Айфона и является достойным аналогом простого чекбокса.
Согласно закону Фиттса, чем меньше элемент, тем труднее его использовать. Эту проблему можно наблюдать не только в чекбоксах. Это одна из главных проблем многих контролов.
В маленькую галочку не удобно целится и попадать. Даже если сделать всю область вместе с текстом кликабельной, то пользователи буду продолжать целиться именно в галочку.
1. Превратить чекбокс в кнопку. Тем самым показав кликабельную область.
Чекбокс-кнопка на сайте Ostrovok.ru
2. Превратить чекбокс в метку. Увеличив этим область клика.
Чекбокс-метка на одном из клиентских проектов
3. Превратить чекбокс в переключатель. Об этом я писал выше.
Для удобства работы с большим количеством чекбоксов в интерфейсе должны присутствовать опции «Выбрать все чекбоксы» и «Снять все чекбоксы». В противном случае работа с таким интерфейсом стает очень нудной и долгой. Представьте, что вам нужно выбрать хотя бы 10 пунктов из 12 имеющихся в списке. Это гораздо проще сделать выбрав все и сняв ненужные опции.
Чекбоксы изначально создавались как инструменты группового выбора. И использовать их для чего-то еще в изначальном виде не стоит. Однако после некоторого тюнинга и соблюдения простых рекомендаций их можно превратить в удобный инструмент для вашего пользователя.
Если вам понравилась статья и интересны дальнейшие темы, то следите за моим твиттером, подписывайтесь на RSS или рассылку новых постов по почте.
Хорошей среды! Пришло время нового выпуска дайджеста. (далее…)
Хорошего понедельника! Давно не было свежего выпуска дайждеста, а материала накопилось порядочно 😍 (далее…)
Это рекламная статья. Многие считают, что WordPress — одна из наиболее популярных open-source систем для…
Хорошего понедельника! Надеюсь все отлично отдохнули, потому как я собрал для вас новую порцию интересных…
Хорошего понедельника! Приветствуем второй выпуск дайджеста. Для тех, кто не в теме, дайджест просеивает тонны…
Хорошего понедельника! Как я писал в паблике, я решил немного изменить формат выхода новостей. Поэтому всё…
Посмотреть комментарии
https://blog.shaihalov.ru/root%20/blog.shaihalov.ru%20/public_html/wp-content/uploads/2013/12/good.png
Использование кнопок-переключателей вместо чекбоксов это сомнительное решение, на мой взгляд. Особенно так, как здесь изображено. Отключенное состояние очень похоже на состояние disabled у чекбоксов. То состояние, когда кликать по чекбоксу бесполезно. Но как тогда иначе показать отключенный чекбокс? Есть вариант с надписями на самом переключателе(на серой или розовой области). Есть вариант с подписью рядом текущего состояния текстом. Но все они кажутся мне дизайнерскими костылями. Посему, именно для включения опций, я считаю, нужны чекбоксы.
На счёт бинарных состояний и меток полностью согласен =)
Спасибо, что починили комментарии через соц. сети =)
Добрый день, я недавно стал увлекаться программированием и поэтому мне статья очень понравилась и дала некие мысли для размышления! Да, чекбоксы нужная функция! Их роль вроде так незаметна, но она так весома!Мне кажется самое неудобное-это превратить чекбокс в метку!Но это конечно моё мнение! А вот для бинарных состояний чекбокс очень даже удобен!
Чекбоксы в основном нужны в различных анкетах, опросниках или тестах. Полностью согласна с автором статьи, использовать их по делу и без дела нужно далеко не везде. Иногда лучше заменить их чем-то другим для большей наглядности.
Очень понравились варианты чекбокс-кнопки и чекбокс-метки. Использую это в своих будущих проектах.
Занимаясь программирование в api я впервые столкнулся с данным понятием, как чекбокс. В основном там они использовались, как элемент индикации состояний.
Например, включен или выключен флаг расширенного вывода результата или записи в файл. Очень удобная вещь я вам скажу, просто считываешь их состояние и принимаешь, те или иные решения в коде программы по оператору if.
Так же надо их использовать и в интерьере/интерфейсе программы, точно по их предназначению и не более.
А почему же у вас в комментариях используется чекбокс в стандартном виде? :)
http://dl1.joxi.net/drive/0001/0971/103371/150311/f0524998c4.png
Потому что я — сапожник, без сапог =) Придумать придумал, но воплощать мысли просто нет времени.
Уместно ли использовать чекбокс для подписания онлайн-договора (как в банке галочка)?
Да, это довольно популярное решение. Однако лучше сделать так, чтобы соглашение подписывалось автоматически. При этом написать что-то типа «Пользуясь нашим сервисом вы соглашаетесь с условиями договора».