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

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

Как radio buttons вошли в обиход?

Radio buttons были названы в честь физических кнопок, используемых на старых автомобильных радиоприемниках для смены станций — когда нажата одна кнопка, остальные отжаты, так что только нажатая остается «активной». Программная radio button была смоделирована по образу и подобию физических.

Нажать можно только одну кнопку за раз. Источник: Tumblr
Нажать можно только одну кнопку за раз. Источник: Tumblr

Лучшие советы по использованию radio buttons

Используйте radio buttons только для настроек

Используйте radio buttons для замены настроек, а не как кнопки действий для выполнения команд. Также измененные настройки не должны вступать в силу, пока пользователь не нажмет командную кнопку (обозначенной как «Продолжить» или «Сохранить», например). Если пользователь кликает кнопки Назад или Отмена, изменения, сделанные с помощью radio buttons на странице должны быть изменены, и восстановлены исходные настройки.

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

Кнопочный ввод позволяет сделать выбор в одно касание
Кнопочный ввод позволяет сделать выбор в одно касание. Источник: LukeW
Логический порядок опций

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

Опции должны быть исчерпывающими и четко отличающимися друг от друга

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

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

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

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

1-XFTe3mIh5qe-b_SuKRnB2g

Старайтесь располагать ваши списки вертикально

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

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

Плохо: горизонтальные radio buttons
Плохо: горизонтальные radio buttons.

Используйте теги с надписями как область касания или клика

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

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

Используйте radio buttons вместо дроп-даунов.

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

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

выбор пола с помощью radio buttons
Слева: Пол в выпадающем списке. Справа: выбор пола с помощью radio buttons

Избегайте вложений

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

Использование вложенных опций добавляет ненужных сложностей
Использование вложенных опций добавляет ненужных сложностей

Используйте анимацию и визуальный отклик

Хорошо прорисованные анимации добавляют удобства интерфейсу. Элементы интерфейса, такие как radio buttons, должны выглядеть осязаемыми, даже если они находятся за слоем стекла. Визуальные подсказки немедленно подтверждают выбор и вносят ясность в действия пользователя с помощью видимой реакции.

Используйте анимацию
Используйте анимацию

Может, лучше использовать чекбокс?

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

Чекбокс. Источник: Material Design
Чекбокс. Источник: Material Design
Вы должны помнить следующее, если оба варианта возможны:

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

Выберите ориентацию для документа (Ландшафтная или портретная)
Выберите ориентацию для документа (Ландшафтная или портретная)
Помощник. Вы должны использовать radio buttons на страницах помощника, чтобы внести ясность в альтернативы, даже если чекбокс тоже приемлем. Дизайны с кликнутой по умолчанию radio buttons дают пользователю твердое предложение выбора. Выбор по умолчанию поможет пользователю сделать наилучший выбор, увеличив их уверенность в процессе выбора.
Dropbox
Если опция настоятельно рекомендуется, добавьте к надписи «(recommended)». Источник: Dropbox
Простые ответы Да и Нет. Использование чекбокса имеет смысл, когда у вас есть один простой вопрос, и пользователю нужно ответить «да» или «нет».
1-3ETGOUNaY9mHoR_WNWQdFQ
Простой вопрос можно задать в форме чекбокса

Заключение

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

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

Спасибо!