Radio Buttons довольно стандартный элемент форм, но многие его нестандартно используют и должны быть какие-то правила, так сказать не писаные законы о том, как именно использовать radio buttons. Radio Buttons используются, когда есть список, состоящий из двух и более вариантов, которые являются взаимоисключающими и пользователь должен выбрать только один вариант. Другими словами, кликнув на один radio buttons, будут отменены все остальные. Примером такого списка является ниже приведенная анимация, на которой пользователь кликает поочередно на кнопки, при этом отменяется предыдущие значение, выбранное им.





Radio Buttons, далее переключатели, велики при правильном использовании. В этой статье я рассмотрю обзор практических рекомендаций, которые были подготовленные для юзабилити-тестирований.

Почему Radio Buttons получили такое название ?

Оказывается, я даже и не догадывался, в старых автомобилях были кнопки (как на аргане, штуки такие, чтобы трубы открывать, не важно), как показано на картинке ниже, которые при нажатии отщелкивали все остальные, и человек мог выбрать только одну волну и одну радиостанцию соответственно, не могу даже и догадываться, что именно означали кнопки, возможно диапазон, а потом ручки, которые расположены слева и справа, водили уже полоску по диапазону, для более детальной настройки волны. Именно с этих радиоприемников и было взято название Radio Buttons. На Википедии написано более детально об этом, возьму небольшой отрывок:

Элемент был назван по аналогии с кнопками, которые использовались в автомобильных радиоприёмниках для выбора предварительно настроенной радиостанции. Аналогичное решение в СССР широко применялось в телевизорах. Иногда их называют радиальными кнопками за их круглую форму, что неверно (к тому же, они могут быть и не круглыми, как например в библиотеке motif). Название возникло в начале 1980-х, когда такие кнопки были широко распространены. На русском языке по отношению к таким кнопкам принято пользоваться термином «кнопка с зависимой фиксацией», однако по отношению к компьютерным интерфейсам этот термин не прижился.

А как вообще использовать Radio Buttons?

Используйте переключатели, чтобы изменять настройки, например чтобы включить или выключить что-то и т.п. Кроме того, изменения не вступят в силу, пока пользователь не нажмет кнопку (с надписью «применить» или «сохранить», например). В случае, если пользователь нажимает кнопку назад или Отмена, то любые изменения переключателей на странице должны будут вернуться к исходным настройкам.

Четко и понятно. Простота превыше всего

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

Всегда предлагаем выбор по умолчанию

В одном из 10 золотых правил дизайна пользовательского интерфейса говорится, что пользователи иметь возможность отменять(переделывать) свои действия. Это означает, что пользователям дозволено устанавливать элемент управления пользовательского интерфейса и вернуть к своему исходному состоянию. В случае с переключателями, это означает, что переключатели должны иметь уже один выбранный вариант.

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

Вертикальный список

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

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

Размер переключателя

По своей природе переключатели маленькие, и, по ним не всегда просто попасть, а самое главное точно в тот пункт, который нам нужен. Можно сделать большую активную область, чтобы и при клике на текст кнопки, radio button тоже срабатывал.



Использование анимации придаст вашему интерфейсу большей привлекательности

Заключение

Когда вы создаете radio buttons, очень важно следовать стандартам дизайна, потому что это повышает способность пользователя предугадывать, что случится после выбора той или иной опции, и как с ними работать. В то же время, неследование стандартам делает интерфейс нестабильным — как будто что-то может произойти без предупреждения.

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