Как называется переключатель на сайте

Переключатели

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

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей

Атрибут	Описание
checked	Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name	Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value	Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5 IE Cr Op Sa Fx

       
Какое у вас состояние разума?
 
 Не дзен
 
 Дзен
 
 Полный дзен
  

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.

Разбор кейса: проектируем идеальные переключатели (часть 1)

Проблема разработки эффективной кнопки-переключателя (тогла), которая четко показывает выбранный вариант, — вопрос, который давно остается открытым в сообществе UI/UX-дизайнеров.

В первой части статьи Эдуард Курич анализирует характеристики переключателей, которые предотвращают ошибки, путаницу и разочарование пользователей.

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

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

Проблема разработки эффективных переключателей, которые четко показывают выбранный вариант, — вопрос, который давно остается открытым среди UI/UX-дизайнеров. В этой статье мы рассказываем об исследовании, которое провели, чтобы найти ответы на следующие вопросы:

• Как выглядит хороший, понятный и читабельный переключатель?
• Какие визуальные характеристики тоглов предотвращают ошибки, путаницу и разочарование пользователей?

Сначала мы немного поговорим о самих кнопках-переключателях, о том, когда их использовать и какие принципы при этом следует учитывать.

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

Если вы не можете точно определить, позволяет ли ваш билет вернуться домой, не волнуйтесь, вы не одиноки! Чудесный UI-элемент, который вы видите выше, называется тоглом (или переключателем).

Что такое тоглы?

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

• Как видите, выключатель может находиться в двух состояниях: включен или выключен, третьего не дано. Аналогично, цифровой тогл — это элемент управления с двумя (а иногда и более) взаимоисключающими состояниями, одно из которых всегда установлено как значение по умолчанию.

• Результат взаимодействия с выключателем можно увидеть сразу: лампочка загорится или погаснет. Точно так же правильно спроектированный тогл должен производить видимые изменения в системе — вы должны получать прямую обратную связь без необходимости нажимать еще одну кнопку (“Сохранить” или “Отправить”).

Когда использовать кнопку-переключатель?

Если вы заботитесь о своих пользователях, придерживайтесь этих базовых принципов:

• Используйте тоглы только тогда, когда они производят немедленный эффект, без “Сохранить” или “Отправить”.
• Применяйте их, когда параметр имеет значение по умолчанию.

В других случаях лучшим вариантом будет чекбокс или группа радиокнопок.

Тумблер или кнопка-переключатель?

Существует два способа использования подобных элементов. Для бинарных опций (в основном вкл/выкл, как говорилось выше) можно использовать тумблер (toggle switch). Все элементарно. Вы просто активируете или деактивируете функцию.

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

Наша цель — сделать кнопки переключения достаточно понятными и визуально обозначить разницу между выбранными и невыбранными опциями. В то же время кнопки должны быть достаточно похожи, чтобы пользователи воспринимали их как две (или более) части одного целого. Главная трудность — сделать очевидным, какая из кнопок в данный момент активна.

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

Таким образом, при взаимодействии с кнопками-переключателями пользователям приходится полагаться на другие визуальные подсказки. А это, в случае неправильной реализации, может принести больше вреда, чем пользы. Одно можно сказать наверняка: нужно выделить активное в данный момент состояние, а не альтернативные опции. Это подводит нас к основной теме статьи. Многие UI- и UX-дизайнеры задаются вопросом: Как спроектировать идеальный тогл?

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

Разбор кейса: Основанный на данных подход к проектированию понятных и эффективных кнопок-переключателей

Достаточный опыт и несколько юзабилити-тестирований позволят вам убедиться, удачным получился дизайн тогла или нет. Но что, если бы вы могли сразу сказать, что сработает, а что нет, основываясь на всесторонних исследованиях и объективных данных?

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

Визуальные подсказки

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

Ход исследования дизайна тоглов

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

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

Отдельные визуальные подсказки

Чтобы начать с основ, мы сосредоточились на отдельных визуальных подсказках, касающихся каждого из возможных компонентов кнопки: подписи, фона, обводки и иконок. Руководствуясь предположениями о том, как эти компоненты влияют на восприятие активной/неактивной кнопки, мы сформулировали несколько вопросов для исследования.

Чтобы проверить наши предположения, мы создали ряд кнопок-переключателей, представляющих тот или иной вопрос. Мы хотели, чтобы на каждой из них была только одна визуальная подсказка, формирующая восприятие активного / неактивного состояния кнопки. Поэтому единственным различием наших тоглов должны были стать визуальные подсказки.

При проектировании переключателей для исследования мы столкнулись с проблемой: какие подписи выбрать? Конечно, нам хотелось воспроизвести реальный опыт в сети, но в то же время мы не хотели, чтобы на участников влияло значение слов. Поэтому выбирать подписи нужно было тщательно.

Первая идея состояла в том, чтобы использовать «Вариант А / Вариант Б«, но поскольку буквы А и Б подразумевают алфавитный порядок, это означало бы риск подсознательного влияния на выбор участника. Аналогичным образом, применение слов со значением, например, «Кошка/Собака«, могло бы означать, что свою роль сыграют индивидуальные предпочтения — здесь может сработать подсознание любителя кошек или собак и т.д.

Чтобы смысл подписи не влиял на выбор, мы решили маркировать кнопки бессмысленными словами без каких-либо четких ассоциаций: «Racted» и «Blison«. В этом случае на восприятие пользователями активного / неактивного состояния кнопки могут влиять только визуальные характеристики. Даже если бы человек не смог определить состояние тогла, ему бы пришлось выбирать ответы случайным образом, а не по умолчанию использовать другой когнитивный шаблон.

Без лишних слов, вот список визуальных подсказок и наших вопросов, связанных с ними.

1. Подпись

Используя подпись в качестве визуальной подсказки, мы тестируем ее ключевые свойства, такие как толщина, размер текста и цвет.

Вопрос 1: Полужирный текст

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

Вопрос 2: Размер текста

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

Вопрос 3: Контраст подписей инвертированных цветов

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

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

Однако мы допускаем, что активными чаще будут считаться кнопки с более темным цветом текста (черный и синий). Темные цвета могут быть восприняты, как акцентные, но, как уже упоминалось ранее, в основном мы ожидаем непоследовательности.

Следует отметить, что для людей с нарушениями цветового зрения контраст и цвета, в целом, являются недостаточными подсказками. Не стоит забывать, что, по данным NHS (Национальной службы здравоохранения), около 8 % мужчин страдают дальтонизмом, а значит, они не могут полагаться на цветовые подсказки и нуждаются в чем-то большем, чем просто цвет, чтобы идентифицировать активные / неактивные кнопки.

Вопрос 4: Культурное восприятие красных / зеленых подписей

Несмотря на то, что этот пункт вызывает те же опасения, что и вопрос выше, поскольку красный и зеленый являются контрастными цветами, существует культурно обусловленный консенсус относительно этой конкретной пары. В западных странах зеленый цвет ассоциируется с «включенным» (или активным/открытым) состоянием, а красный — с «выключенным» (неактивным/закрытым). Мы ожидаем, что это проявится и в тестировании.

Вопрос 5: Цветные vs черные/белые подписи

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

Вопрос 6: Основные цвета vs нейтральные цвета (оттенки серого)

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

Вопрос 7: Различная насыщенность одного и того же цвета

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

2. Заливка

Когда мы говорим о заливке или фоне переключателя, речь идет о цветовых комбинациях. Мы предполагаем, что многие из принципов, которые были рассмотрены выше, применимы и здесь.

Вопрос 8: Контраст фона инвертированных цветов

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

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

Вопрос 9: Культурное восприятие красного / зеленого фона

Поскольку сочетание красного и зеленого — это частный случай контрастных цветов (в силу нашего западного культурного восприятия этой пары, а не инверсии), мы предполагаем, что зеленая кнопка будет восприниматься как активная.

Вопрос 10: Различная насыщенность одного и того же цвета

Как мы уже говорили выше, насыщенность цвета определяет визуальный вес. Мы предполагаем, что более насыщенный цвет будет восприниматься как признак активности. Если цвета нейтральные, например, оттенки серого, мы ожидаем, что более высокое значение (value в цветовой модели HSV) будет работать как подсказка.

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

Вопрос 11: Насыщенные цвета и оттенки серого

Мы ожидаем, что поскольку кнопка с насыщенным (желтым) фоном, имеет больший визуальный вес, она будет восприниматься как активная, а кнопка с серым фоном рядом — как неактивная.

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

Вопрос 12: Инвертированный дизайн кнопок

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

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

3. Обводка

Эта категория вопросов посвящена наличию/отсутствию обводки, а также ее расположению. Хотя обводки / контуры могут различаться по нескольким параметрам, таким как цвет или толщина, последние во многом перекликаются с теми визуальными подсказками, которые мы уже рассмотрели в пунктах «Подпись» и «Заливка». Поэтому мы выделили эту категорию, чтобы определить влияние обводок в целом, а также проанализировать некоторые специфичные для них подсказки.

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

Вопрос 13: Обводка активной кнопки

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

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

Вопрос 14: Неактивная кнопка сливается с фоном

Это комбинация двух видов визуальных подсказок — фона и обводки. Мы попытались сделать подсказку из вопроса 11 выше выразительнее, наглядно показав, что кнопка серого цвета сливается с фоном, в то время как цветная активная кнопка отделена от него.

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

Вопрос 15: Выпуклая / вдавленная кнопка

Сделать элемент выпуклым — популярный способ выделить что-то на сайте. Однако если мы хотим спроектировать тогл таким образом, чтобы он напоминал физические кнопки, все должно быть наоборот: активной является нажатая (вдавленная) кнопка.

Поэтому, чтобы проверить, соответствует ли это ментальным моделям пользователей, мы предположили, что они воспримут вдавленную кнопку как «включенную», а выпуклую, то есть не нажатую, как «выключенную». Ощущение “нажатия” должно быть еще сильнее, если добавить тень.

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

4. Иконки

Иконки — еще один способ выделить активную кнопку. Могут ли они перевесить все остальные сигналы? Чтобы подтвердить эффективность иконок, в этом разделе мы исключили все другие визуальные подсказки, оставив только их.

Вопрос 16: Галочка

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

Вопрос 17: Радиокнопка

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

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

Тестируем эффективность отдельных визуальных подсказок

Чтобы проверить наши предположения, мы провели количественное онлайн-исследование. Нам нужно было подкрепить полученные выводы достаточным количеством объективных данных.

Мы провели 2 теста: в первом — показывали участникам переключатели в течение 5 секунд, во втором — в течение 20 секунд (инструмент UXtweak), после чего они должны были сделать выбор и ответить на вопросы. Мы хотели проверить, будет ли разница в результатах, если предоставить участникам больше времени на обдумывание.

Мы спроектировали две версии каждого тогла, где активной была либо левая кнопка (Racted), либо правая (Blison). Затем мы случайным образом разделили их на две группы. Одной половине участников досталась группа А, а второй — группа Б. Мы сделали это для того, чтобы свести на нет влияние местоположения визуальных подсказок — слева или справа.

Пятисекундный тест

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

«Какая опция была включена?»

Ответ давался с помощью группы радиокнопок, доступные варианты, Racted и Blison, размещались слева и справа соответственно для удобства идентификации.

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

Например, рассмотрим один из альтернативных вариантов: «Какая кнопка была нажата?». Обычно в дизайне активная кнопка визуально более выразительна, каким-либо образом выделена.

Психология восприятия двухмерных изображений, а именно принцип воздушной перспективы, гласит, что мы воспринимаем менее насыщенные и размытые объекты как более удаленные от нас, чем те, которые мы видим четче. И если бы мы спросили, какая кнопка нажата, что в физическом мире означает “дальше от нас”, мы могли бы получить прямо противоположные ответы.

Второй вопрос был нацелен на проверку уровня уверенности в том, что та или иная опция в данный момент активна:

«Насколько вы уверены в своем ответе?»

Участникам предлагали выбрать нужный вариант по 5-балльной шкале Лайкерта, начиная с «Совсем не уверен» и заканчивая «Абсолютно уверен». Это дало нам дополнительную информацию об эффективности визуальных подсказок.

Чтобы убедиться, что участники правильно поняли инструкции, в первом разминочном задании (которое в дальнейшем не анализировалось) мы задавали участникам еще один вопрос: «Какую опцию вы выбрали? Ту, которая была. «, после чего следовали два варианта ответа: «Включена» и «Выключена». Этот вопрос заставлял участников задуматься о том, что они должны были делать, и позволял убедиться, что они будут выполнять задания именно так, как должны.

Двадцатисекундный тест

Как и в пятисекундном тесте, задача участников состояла в том, чтобы смотреть на тоглы в течение ограниченного времени, но на этот раз 20 секунд. Мы решили провести и этот вариант исследования, чтобы проверить, улучшаются ли показатели при увеличении времени наблюдения.

Единственным отличием был временной промежуток.

Анкета участника исследования

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

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

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

После завершения теста мы дали участникам возможность оставить нам сообщение в специальном поле.

Участники

Всего мы стремились собрать 100 ответов, чтобы составить общую картину. Эти данные позволили бы нам впоследствии должным образом интерпретировать результаты.

Мы привлекли людей в возрасте от 16 до 75 лет из англоязычных стран (Канада, США, Великобритания и Австралия), поскольку наше исследование было разработано на английском языке.

Результаты

Переходите к части 2, чтобы узнать, к каким выводам мы пришли, и как сделать ваши тоглы понятными с первого взгляда.

Руководство по тумблерам-переключателям (Toggle switches)

Тумблеры (Toggle switches) – это цифровые переключатели вкл. / выкл. Они предлагают пользователям выбирать между двумя взаимоисключающими параметрами и всегда имеют значение по умолчанию. Переключатели должны обеспечивать немедленные результаты, предоставляя пользователям возможность контролировать свои предпочтения по мере необходимости. Каждое утро я просыпаюсь, наливаю воду в чайник и поворачиваю выключатель. Как только вода закипит, я выключу чайник и налью кипяток в чашку. Переключатель на моем чайнике – пример тумблера. Если вы посмотрите внимательнее, вы заметите, что тумблеры-переключатели повсюду вокруг нас. Потому что у многих вещей есть два простых состояния: они либо включены, либо выключены. От переключателей света, до включения мобильной точки доступа на странице настроек нашего любимого мобильного приложения, мы каждый день взаимодействуем с тумблерами.

Тумблер – это цифровой переключатель включения / выключения.

Тумблеры лучше всего использовать для изменения состояния системных функций и предпочтений. Тумблер может заменить две радиокнопки (radio buttons) или один флажок (checkbox), чтобы позволить пользователям выбирать между двумя противоположными состояниями. Иногда бывает трудно решить, какой элемент интерфейса использовать – radio buttons, флажки или тумблеры. Когда вы решаете какой вариант будет соответствовать вашему случаю использования, рассмотрите количество и тип параметров, и определите есть ли какое-либо значение по умолчанию. В приведенной ниже таблице приведены вопросы и ответы по этим часто используемым элементам интерфейса. Радиокнопки Флажки Отдельный флажок Тумблер-переключатели Сколько параметров доступно? Несколько Несколько 1 1 Сколько вариантов может выбрать пользователь? 1 0 – все 2 (вкл./выкл.) 2 (вкл./выкл.) Это вариант по умолчанию? Да Нет Да Да Как бы вы описали варианты? Взаимо -исключающие Независимые друг от друга Взаимо -исключающие Взаимо -исключающие Когда выбор будет иметь эффект? После того, как пользователь нажмет на кнопку подтверждения изменений После того, как пользователь нажмет на кнопку подтверждения изменений После того, как пользователь нажмет на кнопку подтверждения изменений Немедленно Когда дизайнеры используют соответствующий элемент пользовательского интерфейса для определенного сценария, это помогает пользователям предсказать, что элемент интерфейса будет делать и как им управлять. Чтобы избежать неудовлетворенности пользователя и обеспечить понимание, следуйте рекомендациям по тумблерам приведённым ниже.

Предоставьте пользователю немедленный результат

Тумблеры-переключатели должны оказывать немедленный эффект и не должны требовать от пользователя нажатия кнопки «Сохранить» или «Подтвердить», чтобы применить новое состояние. Как всегда, мы должны стремиться сопоставлять систему с реальным миром. Подумайте о моем чайнике: мне не нужно поворачивать выключатель и отсоединять шнур, чтобы ощутить изменение состояния. Следовательно, пользователи ожидают такой же немедленный результат от цифрового тумблера, как и от его реального аналога (например, выключатель освещения). Немедленные результаты – это аспект тумблеров, которые предоставляют пользователям свободу и контроль обновления своих предпочтений по мере необходимости. Если немедленные результаты не достижимы или кажутся некорректными, вместо этого следует использовать альтернативу (например, радиокнопки или один флажок — см. таблицу выше). Если вы рассматриваете возможность включения тумблеров в длинные формы, где присутствуют другие виды полей формы, и пользователям необходимо нажать кнопку «Отправить», чтобы другие изменения вступили в силу, не делайте этого. Этот сценарий смущает пользователей, потому что они не уверены, сработает ли переключение тумблера немедленно. Избегайте путаницы любой ценой. Отделите элементы управления, которые дают мгновенные результаты от тех, которые требуют нажатия кнопки подтверждения. Не рекомендуется:

В приложении United Airlines для iOS ничего не происходит, когда пользователи переключают тумблер. Как пользователь узнает, работает ли переключатель или нет? Результаты не были предоставлены. В этом случае лучше было использовать один флажок.

Рекомендуется:

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

Делайте сжатые подписи

Делайте подписи к тумблерам короткими и понятными. Рассмотрим один из принципов дизайна взаимодействия Tog, который гласит: «Подписи меню и кнопок должны иметь ключевое слово(а), образуя уникальные ярлыки». Например, при разработке страницы настроек, где пользователь может обновлять настройки уведомлений: пишите Email уведомления или Текстовые уведомления, но не пишите «Хотите ли вы получать от нас уведомления по электронной почте?» Мы знаем, что пользователи читают ровно столько, сколько считают нужным, поэтому используйте для подписей ключевые слова и удалите лишние фразы. Избегайте задавать вопросы и пишите понятно. Подписи тумблера должны описывать, что элемент управления будет делать при включении. Они не должны быть нейтральными или двусмысленными. Если вы сомневаетесь, произнесите ярлык вслух и добавьте «вкл / выкл» в конце. Если это не имеет смысла, перепишите подпись. Не рекомендуется:

Подпись Include non-maternity items? Для тумблера на сайте Le Tote нейтральная и заставляет гадать добавляет она или убирает товары указанной категории.

Рекомендуется:

Подписи тумблеров-переключателей, используемые в приложении Google Календарь, являются прямыми и однозначными; они описывают состояние системы, когда переключатель включен и имеет смысл добавление слов «вкл / выкл».

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

Убедитесь, что тумблеры выглядят как ползунки и используют визуальные сигналы (т. е. движение и цвет), чтобы избежать путаницы. Прежде всего, когда пользователь изменяет состояние тумблера, переключатель должен менять позицию – как это было бы в реальном мире. Цвет – важное визуальное обозначение для переключателей, и есть две вещи, которые нужно иметь в виду: контраст и культурные различия. Когда дизайнеры используют низкоконтрастные цвета, пользователям становится трудно узнать, включен или выключен переключатель. Поэтому всегда используйте высококонтрастный цвет, чтобы сигнализировать об изменении состояния. Кроме того, не забудьте оценить общественные и культурные последствия для вашей аудитории. Например, красный цвет для положения «включено» алогичен, поскольку люди связывают его со знаками остановки или стоп-сигналами. Кроме того, дескрипторы состояния – слова On и Off рядом с переключателем могут обеспечить четкую наглядность состояния системы.

Включен или выключен этот переключатель? В Windows 10 дескриптор состояния (слово Off) используется для определения текущего состояния тумблера (выкл.). К сожалению, этот дескриптор неоднозначен: поскольку слово «Выкл» появляется справа от переключателя, а точка переключения слева, пользователи также могут интерпретировать состояние переключателя как включенное (то есть вдали от метки «Выкл.»).

При добавлении дескрипторов состояний придерживайтесь слов вкл/выкл (on/off ), чтобы соответствовать правилам реального мира, и разместите оба слова off и on слева и справа, соответственно, чтобы избежать путаницы. Если только один дескриптор присутствует рядом с переключателем, его можно использовать в качестве подписи тумблера. Если вы не знаете, как найти баланс между цветом и дескриптором состояния, проверьте, какая комбинация лучше всего подходит для ваших пользователей. Рекомендуется:

Android-приложение Daylio использует контрастный цвет (фиолетовый) и дескрипторы состояния, чтобы четко указывать состояние переключателя (выключен на скриншоте слева и включен справа).

Соблюдайте последовательность

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

Приложение iOS Chase Bank использует тумблеры и радиокнопки непоследовательно. За исключением типа элемента и количества контента эти три страницы почти идентичны. Когда я взаимодействовал с этими страницами, я ожидал, что они будут работать одинаково. Вместо этого я потратил время на то, чтобы выяснить, почему применённые мной маркетинговые настройки не сработали.

Вывод

Тумблеры помогают пользователям обновлять настройки и другие типы информации. При использовании переключателей, давайте понятные подписи, используйте стандартный визуальный дизайн и предоставляйте немедленные результаты. Имейте в виду, что тумблеры должны использоваться только тогда, когда пользователю необходимо выбрать между двумя противоположными состояниями. Когда вы рассматриваете использование переключателей на своем сайте или в приложении, оцените контекст и убедитесь, что они реализованы последовательно. Помните, что этот простой компонент пользовательского интерфейса может существенно повлиять на опыт пользователя. Перевод статьи Alita Joyce

как называется такой переключатель у разработчиков? (веб сайтов или веб приложений)

Это у айфонщиков надо спросить, у них это стандартный элемент интерфейса. Я бы сказал, что это чекбокс в виде слайдера 🙂 Подозреваю даже, что у них таким образом стилизованы обычные чекбоксы.

Остальные ответы
В принципе это элементарный checkbox, просто с графикой или swich. Собственно зачем интересуетесь?

Таки да. Это чекбокс в виде слайдера.

Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.