Должна ли кнопка переключения показывать текущее состояние или состояние, в которое оно изменится?

В О Face 2.0 (есть v3, но у меня нет ) Купер и Рейман (2003, с. 341-2) рассматривают этот вопрос под заголовком «Флип-флоп-кнопки: выбор, который следует избегать». Я настоятельно рекомендую проконсультироваться с этой книгой, поскольку я приведу только выдержку:

  

Элементы управления триггера очень эффективны. Они экономят пространство, контролируя два взаимоисключающих параметра с помощью одного элемента управления. Проблема с флип-флоп-контролем заключается в том, что они не выполняют вторую обязанность каждого элемента управления - информировать пользователя о своем текущем состоянии. Если кнопка говорит ВКЛ, когда состояние выключено, неясно, какова настройка. Если он выключен, когда состояние выключено, то где кнопка ON? Не используйте их. Не на кнопках и нет в меню!

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

Короткий ответ :

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

Длинный ответ :

Как указывает dotancohen:

  

Проблема в том, что на английском языке «on» и «off» являются наречиями и прилагательными.

Кнопки, которые имеют текст вне своего тела, используют этот факт в своих интересах! Читайте дальше ...

Давайте сосредоточимся на синем состоянии и, например, говорим ВКЛ .

Можете ли вы сказать, включен ли переключатель в данный момент, или если он будет продолжаться, если вы переместите /щелкните /коснитесь слайдера? Является ли текст очевидным? Является ли «ВКЛ» здесь состояние (прилагательное) или действие (глагол)? Не понятно. Является ли цвет любого использования, чтобы помочь вам решить это? Вероятно, но не обязательно - пользователи iOS могут быть приучены к состояниям этого дизайна, но не знают, как это могут интерпретировать пользователи, не являющиеся iOS. Чтобы понять, что я имею в виду, возьмите этот переключатель отключения жизни, который имеет тот же дизайн, что и переключатель iOS. Можете ли вы точно сказать, включен ли выключатель отключения?

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

... даже не понятно, какая половина ползунка /клика!

Вопрос из цитаты jensgram ...

  

Если кнопка говорит ВКЛ, когда состояние выключено, непонятно, что такое настройка. Если он выключен, когда состояние выключено, где находится кнопка ON?

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

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

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

Цвет кнопки указывает текущее состояние (горит = ВКЛ, как в реальной жизни), а слова «Вкл. /Выкл» под текстом опции успокаивают пользователя текущего состояния.

Что бы вы ни решили - пожалуйста, не делайте то, что делает твиттер.

Проблема заключается в том, что на английском языке «on» и «off» являются наречиями и прилагательными. Поэтому найдите заменяющие слова или глаголы или прилагательные, чтобы наметить кнопки:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

â €

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

Я думаю, что у вас все в порядке с вашим вопросом.

Если переключатель - это действие - Воспроизведение /Пауза - тогда он должен показать, что произойдет. Поэтому, пока он приостановлен, будет отображаться Play, а затем во время воспроизведения шоу Pause.

Если переключатель является опцией - Shuffle /Linear - тогда он должен показывать текущее состояние.

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

Я с удивлением вижу, что не упоминается техника, используемая в iOS (и в другом месте), комбинированная кнопка действия /состояния, где обе опции видны, сгруппированы, а активная четко выделена.

Ужасное искусство ascii для демонстрации:

[ ON | off ]

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

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

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

Я бы остановился просто «не использую их».

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

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

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

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

Сложение

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

ДОПОЛНИТЕЛЬНОЕ ДОПОЛНЕНИЕ

Я нашел этот интересный переключатель сегодня и был напомнен об этом UX Q & A. Обратите внимание, как состояние сразу становится очевидным, и тот факт, что он переключается, когда вы касаетесь его, также становится очевидным благодаря текстурированному «ручку» (т.е. доступность). Я просто знаю, что когда я возьму эту поднятую ручку, он переключится на противоположную сторону и сказать противоположность тому, что она говорит сейчас; это похоже на санаторий.

Таким образом, они могут быть выполнены хорошо.

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

Например, глядя на этот снимок экрана приложения Spotify (web), вы считаете, что shuffle включен или выключен?

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

использует «как» Facebook, но сочетается с флажком для лучшей видимости. В любом случае ключевым моментом является использовать только одно слово (или набор слов) вместо того, чтобы пытаться заставить пользователя выбирать между несколькими словами.

Кроме того, постарайтесь избежать использования отрицательных префиксов (« Not », « Non - », « Un - », « Dis - ", " Im - ", " Mis - ", " In - ", " Il - "," Ir - "), иначе пользователь должен был бы сделать« двойной отрицательный »в своем уме, когда у него был un установите флажок:

Я использую Toggle Button для добавления и удаления элементов в коллекцию с помощью простой кнопки Toggle (одна с видимым одновременно), которая имеет следующие состояния.

• ДОБАВИТЬ (если кнопка не была нажата)

• УДАЛИТЬ (если кнопка была нажата, и элемент теперь стал частью коллекции)

НО это всегда ущемляло меня как для начинающего пользователя (возраст 50+), изначально было трудно понять, что произошло, и почему кнопка просит «Удалить» еще до того, как я узнал, что этот элемент теперь является частью коллекции. Недопустимый бит в этом случае был уведомляющим сообщением, в котором говорилось бы «Item Successfully Added». Я использую сообщение о состоянии на основе Javascript, которое отображается в верхней части экрана (с помощью http: //twitter.github.com/bootstrap/javascript.html#alerts ), но поскольку он был визуально вытеснен из элемента взаимодействия, я решил только часть проблемы для некоторых пользователей.

Другая проблема

При каждом нажатии кнопки ваша кнопка «Стойка» или «Перелистывает стороны». Иногда он говорит «Я кнопка добавления», а иногда одна и та же кнопка (в том же столбце среди других кнопок добавления), в которой говорится: «Я удаляю кнопку». Изменение цвета помогает, но это все еще две противоположные роли, занятые одной кнопкой. НЕ ТАК ПРАВ.

Мое решение:

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

Кнопка с надписью «Добавить», если не нажата После нажатия кнопки Button заменяет собой сообщение «Успешно добавлено» и показывает небольшую кнопку 24x24 с надписью «X» и которая позволяет вам отменить свой последний акт, который всегда «Добавить». Таким образом, вы никогда не нажимаете кнопку «Удалить», а только «отменяете» предыдущую операцию «Добавить операцию». Также вам не нужно показывать отдельное уведомление «Успешно добавленное» на странице. Нижняя сторона этого подхода заключается в том, что вам нужно больше места для размещения ярлыка «Успешно добавлено» и «Кнопка для отмены», но это, на мой взгляд, является одним из менее запутывающих подходов.

Во многих случаях может оказаться полезным или избежать таких кнопок.

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

И в случае кнопки play /shuffle, возможно, не обязательно менять метку на кнопке. Вы можете использовать кнопку «нажатие», чтобы указать «воспроизведение», и кнопку «вверх», чтобы указать «не играть». Или вы могли бы поместить индикатор в другое место в пользовательском интерфейсе (это то, что делает моя стереосистема ...).

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

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

В приложении Android для Android от Facebook используется кнопка, и она отключена и выделена синим цветом, когда включен. Смотрите скриншоты ниже.

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

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

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

  

Онлайн Â Перейти в автономный режим

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

Если вы нажмете кнопку «Перейти в автономный режим», метка изменится на «Автономный», и кнопка изменится на «Перейти в онлайн».

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

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

  

Online

Флажок не установлен, поэтому приложение отключено. Но это не особенно понятно. Если вы посмотрите на это, первое, что вы видите, это слово «Интернет», поэтому легко сделать неверный вывод.

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

Для примера Play /Pause я бы показывал текущее состояние как обычно, а наоборот - при наведении мыши (когда это подходит, а не на сенсорных экранах). Этот предмет имеет 2 естественных состояния и не объединяет глагол. С другой стороны, включение /выключение может быть упрощено до состояния Power, когда горит горит, а состояние выключено, ну, а не.

Я бы порекомендовал посмотреть следующее видео (с 1991 года!), которое было основополагающим для нынешнего дизайна iOS-переключателя, например: https://www.youtube.com/watch?v=wFWbdxicvK0

И соответствующая бумага: http://dl.acm.org/citation.cfm?id=143079

Вот те переключатели, которые они сравнивали: И результаты в предпочтении:

Метка на кнопке переключения, например «Воспроизведение /Пауза», не должна меняться. Сама кнопка должна визуально указывать, что она нажата (оставляя надпись «Play»). Это устраняет всю путаницу.

Я бы всегда переходил с текущим состоянием . Я думаю, что идиома play /pause - это исключение , а не правило. Я думаю, что воспроизведение /пауза похоже на то, что это возможно, возможно, это перерыв со времен старых кассетных кассет. Когда воспроизведение /пауза были объединены на проигрывателях компакт-дисков, я помню, как подумал, как круто & инновационный, который был.

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

Он показывает свое текущее состояние (выцветший серый означает «выключен»), и он отображает следующие состояния через всплывающее меню с полными предложениями.

@ Образцы ответов Като из Evernote дали понять: есть метка, сообщающая то, что контролируется переключателем («Автосохранение»), и переключатель, который удваивается как индикатор состояния (O | I).
Проблема с некоторыми переключениями пытается использовать один и тот же бит для двух разных целей: передача состояния и передача действия.
Например, у моих домашних огней есть анонимный переключатель и яркий указатель, который является самым светом (когда лампа не работает, мы обычно не можем определить, находится ли переключатель в положении «включено» или «выключено»).
Игра | пауза также имеет четкий индикатор, звук самой музыки. Переключатель выполняет одну функцию (управление), музыка выполняет другую (состояние связи).
Shuffle vs. linear toggle управляет состоянием, но не сообщает об этом. Вам нужно будет захватить кейс CD, дождаться окончания темы и проверить, будет ли тот, который начинается после, следующий в списке или нет (и повторите, чтобы быть уверенным). Но если вы думаете, что это тасовка | not-shuffle binary option, то вы можете пометить его после того, как он управляет («перетасовать» как глагол) и сообщить состояние, освещая его.
Как я вижу, в любом случае вам нужно сообщить об этом государству.
Мой друг сходит с ума от пульта дистанционного управления его автомобилем. У него напечатанное состояние, и он не знает, является ли это действием или обратной связью.

Чтобы уменьшить двусмысленность, я предлагаю:

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

2. Убедитесь, что кнопка не подсвечена.

3. Выделите действие над курсором мыши /фокусом, чтобы подчеркнуть, что произойдет.

4. Выделите текущее состояние и поместите его рядом с кнопкой.

например ...

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

Он должен показывать состояние next всегда, и, чтобы избежать путаницы, он должен сказать «нажмите на ... NEXT STATE не просто NEXT STATE. Почему? потому что 99% пользователей отправляются искать" переключатели ", когда им« НУЖНО »что-то изменить. Немногие пользователи идут« видеть »« переключатели », когда они довольны текущим состоянием своего приложения.