Чекбоксы: песнь квадрата и галочки

Сегодня расскажу про такой компонент, как чекбокс. Квадратик с галочкой, которую вы проставляете, соглашаясь с очередной офертой или прочей мутотенью.

Чекбокс — элемент интерфейса, который позволяет пользователю управлять состоянием или выбором опций.

Когда используют

1. Когда нужно выбрать какие-то варианты из списка.
   
   Пример: фильтры в различных интернет магазинах, когда вы выбираете из списка брендов один или несколько, проставляя галки в квадратах. Далее жмете на кнопку «Показать» и вам вываливаается результат.
2. Когда нужно включить/выключить какое-то отдельное состояние.
   
   Пример: поставил галку в квадрате — согласен с условиями оферты, не согласен — можешь ее снять.
   

Рекомендации

• Чекбокс должен представлять собой пустой квадрат с контуром и галочкой внутри при выбранном состоянии. Не придумывайте новый дизайн элемента, пользователь приучен к такой визуализации.
• Используйте чекбоксы для выбора состояния или опций, а не как активную кнопку. С помощью чекбоксов пользователь «настраивает» для себя выбор, а подтверждает его отдельной кнопкой.
  
• Если используете список чекбоксов, то опции, доступные для выбора, не должны исключать друг друга. То есть если я поставил галку на одном пункте, а другие мне все так же доступны. На то он и список, чтобы набирать себе разное.
  
• Чекбоксы в списке желательно объединять в смысловые группы под заголовком, чтобы пользователю было проще считывать инфу. Снова пример с выбором брендов в интернет-магазине. Заголовок — «Бренд», под ним список чекбоксов по брендам: Adidas, Nike, Asics.
  
• Для чекбоксов с отдельным состоянием (НЕ списки) используйте тексты/подписи в позитивном и повелительном наклонении, чтобы человек сразу понимал с чем соглашается. Вот так хорошо: «Я согласен с условиями...». Вот так плохо: «Не отправляйте мне рекламу на почту».
  
• Сделайте кликабельными тексты, которыми подписаны чекбоксы. Квадраты с галочками маленькие и в них сложно попадать пользователю, а значит зарубаются конверсии. Надо так: кликнул мимо квадратика на текст, и галочка проставилась, Америка!
  

Итого

Чекбокс оказался не таким простым, как казалось. Признаюсь, когда готовил материал, немного был удивлен столькими находкам и рекомендациям. Надеюсь и вам они пригодятся. Источник мяса для поста (переведено и озвучено).

Источник

Читайте также:

Как прокачать продукт с помощью прототипа: три убойные техники

Что посмотреть на праздниках: юнит-экономика, точки роста бизнеса и управление продуктом на пальцах

Что такое продуктовая магия и почему с ней надо быть осторожным

Два наблюдения продакта по итогам просмотра фильма Дудя