Toogle — переключатель на сайт
Тумблеры на сайте представляют собой цифровые переключатели, позволяющие делать выбор между двумя параметрами, которые являются взаимоисключающими. Тумблеры всегда имеют определенное значение по дефолту. Этот инструмент обеспечивает предоставление немедленного эффекта и возможность контроля предпочтений пользователей. Житейским примером тумблера является переключатель на электрочайнике. Он ограничивает нас в выборе – пользователь может либо включить его, либо выключить. Более того, переключатели являются неотъемлемой частью жизни современного человека. Мы каждый день взаимодействуем с тумблерами, которые имеют только 2 состояния (включение света в доме, включение/выключение wi-fi и т.д.).

Особенности применения тумблеров

Тумблер чаще всего применяется с целью изменения состояния предпочтений пользователя и функций системы. Он является альтернативой двумя радиокнопкам или одному флажку, предназначенному для выбора противоположных состояний. У веб-разработчиков зачастую возникают проблемы с выбором подходящего элемента интерфейса – радиокнопок или тумблеров. Для того чтобы не иметь проблем с выбором, рекомендуется обратить внимание на число и вид параметров, а также возможность использования какого-либо значения по дефолту. Стоит отметить, что эффективность использования того или иного элемента пользовательского интерфейса, предназначенного для выбора сценария, во многом зависит от дизайнеров. Они должны разработать дизайн этого элемента таким образом, чтобы у пользователей не возникло проблем с пониманием назначения тумблера.

Важность немедленного эффекта

HTML-переключатель для сайта должен гарантировать предоставление немедленного эффекта. Он не требует использования кнопки «Подтвердить». Эта особенность тумблеров исходит от все того же житейского примера с чайником. Для того чтобы чайник изменил свое состояние, пользователю не нужно дергать за шнур или открывать крышку. Чайник меняет свое состояние по умолчанию сразу же после переключения тумблера. Таким образом, главной задачей тумблеров является обеспечение незамедлительного эффекта, который предоставляет возможность контроля предпочтений пользователей. Если же выбор, поставленный перед пользователем, не может гарантировать корректность немедленных результатов, потребуется использование альтернативы. Наиболее простой пример – это радиокнопки. Если же тумблер будет использоваться в длинных формах с множеством полей, переключатель на сайт может быть оснащен кнопкой «Отправить». Но стоит понимать, что эту кнопку нужно использовать очень аккуратно. Разработчик может запутать пользователя, который не будет уверен в немедленном срабатывании тумблера. Возможность возникновения такой путаницы стоит обязательно предотвратить. В данном случае рекомендуется отделить компоненты управления, дающие моментальный эффект от элементов, требующих предварительного подтверждения.

Необходимость сжатых подписей

Для удобства применения тумблеров рекомендуется делать короткие и понятные подписи к ним. Причем эти подписи должны иметь ключевое слово и образовывать уникальные ярлыки. Рассмотрим примером разработки страницы, на которой пользователи смогут изменять настройки уведомлений. В качестве подписи к переключателям разработчик должен указать фразу «Текстовые уведомления» или «Уведомления на e-mail». При этом не стоит никогда использовать длинные формулировки (например, «Желаете ли вы получать уведомления от нашей компании на свой e-mail?»). В процессе создания подписей стоит помнить, что пользователи обращают внимание только на ключевые фразы. Следовательно, для подписей целесообразно использовать ключевые слова и исключить любые лишние фразы. К тому же вопросы пользователю должны быть максимально короткими и понятными. Подписи на переключателях должны сообщать о дальнейшем сценарии в случае включения/выключения этого элемента пользовательского интерфейса. Они должны быть четкими и не двусмысленными.

Соблюдение стандартов визуального дизайна

Переключатели должны соответствовать дизайну ползунков и использовать определенные визуальные сигналы, которые позволят избежать путаницы в процессе изменения состояния тумблера. В качестве визуальных сигналов обычно используется изменение цвета. Выбирая подходящее цветовое решение, стоит учитывать 2 важнейших фактора: контраст и возможные культурные последствия. В первом случае рекомендуется делать выбор в пользу высококонтрастных цветов, которые позволят пользователям без труда определить: тумблер включен или выключен. Если говорить о культурных последствиях, стоит помнить, что большинство пользователей ассоциирует красный цвет с состоянием «выключено». Поэтому не стоит использовать этот цвет для указания на состояние «включено». Для обеспечения более четкой наглядности положения тумблера рекомендуется использовать распространенные во всем мире дескрипторы состояния (On и Off).

Заключение

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

Подборка готовых переключателей на сайт

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

Скачать пример переключателя

See the Pen On/Off Toggle by Aaron Iker (@aaroniker) on CodePen.

Скачать пример переключателя

See the Pen Light Bulb Toggle Switch by Jon Kantner (@jkantner) on CodePen.

Скачать пример переключателя

See the Pen Bauble Toggle by Chris Gannon (@chrisgannon) on CodePen.

Скачать пример переключателя

See the Pen Day And Night Toggle by Chris Gannon (@chrisgannon) on CodePen.

Скачать пример переключателя


Теги:
1+

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *