トグルボタンは、現在の状態またはそれが変化する状態を表示する必要がありますか？
2つの状態を切り替えるボタンについて簡単な質問があります。 （再生/一時停止、またはシャッフル/通常の再生を考えてください。）タイトルにあるように、トグルは現在の状態または遷移先の状態を示す必要がありますか？
Play/Pauseコンベンションには慣れていると思います。ただし、現在の状態ではなく遷移状態を表示すると、シャッフル/レギュラープレイはより混乱する可能性があります。たとえば、Xbox 360の組み込みの音楽プレーヤーは、このように動作します。シャッフルモードの場合は、直接再生のアイコンが表示され、逆も同様です。常に混乱します（シャッフルモードまたはストレート再生のどちらかです）。
私はそれをこのように見ています：再生/一時停止は、再生の開始や再生の一時停止のようなアクションに似ています。はい、裏では状態遷移ですが、ユーザーにはアクションがあります。一方、シャッフル/ストレートプレイはオプションであり、現在の状態を表示することをお勧めします（オプションが有効または無効であることを示すアイコンと変更ボタンが1つしかない場合もあります）。考え？
Face 2.0について（v3はあるが、まだ入手できていません）Cooper and Reimann（2003、pp。341-2）はこれを扱います「フリップフロップボタン：避けるべき選択イディオム」という見出しの下の件名。抜粋のみを提示するので、この本を参照することを強くお勧めします。
フリップフロップボタンコントロールは非常に効率的です。 1つのコントロールで2つの相互に排他的なオプションを制御することにより、スペースを節約します。フリップフロップコントロールの問題は、ユーザーに現在の状態を通知するという、すべてのコントロールの2つ目の義務を果たせないことです。状態がオフのときにボタンに「オン」と表示されている場合は、設定が不明です。しかし、状態がオフのときにオフになっている場合、オンボタンはどこにありますか？それらを使用しないでください。ボタンやメニューにはありません！
著者（および私はこれらを主題の権威として考える）は2つの可能な解決策を提示します：ボタンのアクションを動詞句としてスペルアウトする必要があります （例：縦向きモードに切り替え、それによって節約されたスペースの一部が犠牲になります）または他の手法を使用します全体（たとえば、2つのラジオボタン）。
短い答え：
かなり遅い回答ですが、ここでこれまで指摘された人がいないことに驚いています。トグルスイッチが現在の状態を表示する可能性がありますand状態ボタンを押すのではなく、ボタンを押すだけでoutsideボタンを変更します。
長い答え：
ドタンコーエンが指摘するように：
問題は、英語では「オン」と「オフ」の両方が副詞と形容詞であるということです。
体外にテキストが表示されているボタンは、この事実を利用して利点があります。読む...
たとえば、青色で[〜＃〜] on [〜＃〜]と表示されている状態に注目しましょう。
スイッチが現在オンかどうか、またはスライダーを移動/クリック/タップするとオンになるかどうかわかりますか？テキストは明白ですか？ここで「オン」は状態（形容詞）またはアクション（動詞）ですか？はっきりしない。これを決めるのに役立つ色はありますか？おそらく、そうではないかもしれませんが、iOSユーザーはこのデザインの状態に慣れている可能性がありますが、iOS以外のユーザーがこれをどのように解釈するかはわかりません。意味を確認するには、iOSスイッチと同じデザインのこの実際のトリップスイッチを見てください。トリップスイッチが現在オンになっているかどうかを確認できますか？
以下のスイッチはiOS設計の線に沿っていますが、はるかに悪いです...
...スライド/クリックハンドルの半分が何であるかさえ明確ではありません！
イェンスグラムの引用からの質問...
状態がオフのときにボタンに「オン」と表示されている場合、設定が不明です。ただし、状態がオフのときにオフになっている場合、オンボタンはどこにありますか？
...ボタンはONでもOFFでもないため、ここでは発生しません。また、「オン」と「オフ」という単語のコンテキストに混乱はありません。それらは（通常のデザインでは）クリックしても何も起こらないため、非常に明確に状態（形容詞）です。
このデザインに変更を加えると、ボタンの反対側のテキストをクリック/タップできるようになることに注意してください。その場合、スイッチハンドルに近いWordが状態で、他のWordはアクションであり、スイッチが切り替えられると役割が逆になります。
それでも、ユーザーのスイッチに対する見方は変わりません。ユーザーがスイッチの現在の状態について混乱することは決してありません。実際、現在の状態を強調表示することにより、デザインをさらに使いやすくすることができます。
ボタンの色は現在の状態（点灯=オン、実際のように）を示し、オプションテキストの下の「オン/オフ」という言葉は現在の状態をユーザーに安心させるものです。
あなたが決めることは何でも-Twitterがすることをしないでください。
問題は、英語では「オン」と「オフ」はどちらも副詞と形容詞です。したがって、どちらか動詞または形容詞である置換語を見つけて、ボタン：
Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped
非常に遅い編集：私の同僚が設計したこの素晴らしいスイッチを参照してください。これは、「オン/オフ」の用語を維持することに成功しながらも、明確にしています。
妥当な妥協案は、ボタンがオフの状態のときはボタンを強調表示せず（おそらく中間色の背景色にする）、オンの状態のときにボタンを強調表示する（背景色を変更する）ことです。
たとえば、Spotify（ウェブ）アプリのスクリーンショットを見て、シャッフルがオンまたはオフになっていると思いますか？
あなたの質問では、それはほぼ正しいと思います。
トグルがアクション（再生/一時停止）の場合は、発生することを示す必要があります。したがって、一時停止中は「再生」が表示され、再生中は「一時停止」が表示されます。
トグルがオプション-Shuffle/Linear-の場合、現在の状態が表示されます。
1つのボタンがアクションであり、もう1つのボタンがオプションであることをユーザーにどのように示すか、よくわかりません...
ChrisFが言ったように、それはケースに依存すると私は言うでしょうアクションボタンと状態ボタンの間の区別を持つことが重要です。
ボタンにテキストが含まれている場合は、テキストを変更して、ボタンをクリックすると何かが起こることを示すことができます（例：「シャッフル再生をオンにする」）。ただし、あなたの場合はアイコンのみなので、状態によって有効/無効に見えるシャッフルアイコンだけでいきます。無効になっている場合は、それがストレートプレイであることをユーザーに明確にする必要があります。点灯させるか、押し下げた状態でボタンを表示することができます。
ホバーにツールチップを追加して、さらに明確にすることを検討してください。
両方のオプションが表示され、グループ化され、アクティブなオプションが明確に強調表示される、アクション/状態の組み合わせボタンであるiOS（および他の場所）で使用されている手法について言及がないことに驚いています。
示すべきひどいアスキーアート：
[ ON | off ]
私は「それらを使用しないでください」の手前で停止します。
オンとオフの状態がはっきりしている場合は、トグルボタンを使用できることをお勧めします。これは、たとえば、灰色のボタンが並んでいて、クリックすると色が変わる場合に発生する可能性があります。
これが再生/一時停止が多くの場合に機能する理由です。再生ボタンは、有効化/無効化という2つの状態の切り替えではありません。オンにすると（私は遊んでいます！）明るい緑色に変わり、灰色になり、||オフのとき（私はプレイしていません！）.
他のボタンも同じように機能するため、一貫性がアフォーダンスに追加されます。それはおそらく、ボタンを押し込んだ（オン状態）または押し下げた（オフ状態）ボタンを持っているテープデッキまたはVCRに関する私たちの歴史的な認識にも基づいていると思います。 。
ただし、これらが単に「アクティブ」になっておらず、トグルを醜いチェックボックスに置き換えることができなかった場合は、すでに述べたすべての理由から、デフォルトでは「使用しない」に設定します。
[〜＃〜]加算[〜＃〜]
今日、Evernoteにはかなり効果的なトグルがあることに気づきました。彼らはマウスオーバーのアプローチをとりました、それは実際にはかなりうまくいきました。これはオン/オフスタイルコントロールの別のケースであることに注意してください。
追加の追加
今日、この興味深いスイッチを見つけて、このUXに関するQ＆Aを思い出しました。状態がすぐに明らかになることに注意してください。触れると切り替わるという事実は、テクスチャの「ハンドル」（つまりアフォーダンス）によっても明らかになります。その上げられたノブをつかむと、切り替わることを知っています。反対側に向かって、今言っていることの反対を言います。飛行機のトイレのようなものです。
だから彼らはうまくやることができます。
ここにはすでに18の回答があるため、パーティーに遅れる可能性がありますが、そのような状況ではチェックボックスを使用することは理にかなっています。いくつかの例：
選択すると：
これは Facebookの「いいね」が使用する の「薄暗い/明るい」アプローチに似ていますが、より良い可視性のためのチェックボックスと組み合わされています。いずれにせよ、重要なポイントは、ユーザーに複数の単語を決定させる代わりに、1つの単語（または単語のセット）のみを使用することです。
また、負のプレフィックスを使用しないようにしてください（ "Not"、 "Non-"、 "Un- "、"Dis- "、"Im- "、"Mis- "、"In- "、"Il- "、"Ir- "）そうでなければ、ユーザーは自分が持っていたときに彼の心の中で「二重否定」をしなければならないでしょう unチェックボックスをオンにしました：
トグルボタンを使用して、次の状態の単純なトグルボタン（一度に状態が表示されるボタン）を使用してコレクションに要素を「追加」および「削除」しました。
追加（ボタンがクリックされなかった場合）
REMOVE（ボタンが以前にクリックされ、アイテムがコレクションの一部になった場合）
しかし、これは常に初心者ユーザー（50歳以上）の場合と同じように私をつまみ、最初は何が起こったのか理解できず、なぜアイテムがコレクションの一部であることを知る前でもボタンが「削除」を要求するのかわかりませんでした。この場合の不足しているビットは、「アイテムが正常に追加されました」という通知メッセージでした。画面の上部に表示されるJavaScriptベースのステータスメッセージを使用しています（ http://Twitter.github.com/bootstrap/javascript.html#alerts を使用）。相互作用の要素、私は一部のユーザーの問題の一部のみを解決しました。
別の問題
ボタンをクリックするたびに、ボタンの「スタンス」または「左右を反転」します。 「私は追加ボタンです」と表示されたり、同じボタン（他の追加ボタンの同じ列にある）に「削除ボタンです」と表示されたりすることがあります。色を変えることは役立ちますが、これらは依然として1つのボタンが占める2つの反対の役割です。 NOT SO正しい。
私の解決策：
このマイナーでよく議論されている問題に対する私の解決策は、トグルボタンをそのようなものに置き換えることです。
クリック後にクリックされないときに「追加」というキャプションがあるボタン、ボタンはそれ自体を「正常に追加されました」というメッセージで置き換え、ラベル「X」が付いた小さな24x24ボタンを表示し、常に「追加」である最後の動作をキャンセルできるようにします。 。したがって、「削除」ボタンはクリックせず、以前の「操作の追加」のみを「キャンセル」します。また、ページに個別の「正常に追加されました」という通知を表示する必要はありません。このアプローチの欠点は、「Successfully Added」ラベルと「Button to Cancel」を配置するためにより多くのスペースが必要になることですが、これは私の意見ではそれほど混乱しないアプローチの1つです。
多くの場合、そのようなボタンを回避することは有用または可能です。
例えば。シャッフル/通常のプレイの場合：「シャッフル」ラベルの横にあるチェックボックスを使用するだけで、混乱することはありません...
また、再生/シャッフルボタンの場合は、ボタンのラベルを変更する必要がない場合もあります。 「押された」ボタンを使用して「再生中」を示し、「上」ボタンを使用して「再生されていない」ことを示すことができます。または、もちろん、UIの別の場所にインジケーターを配置することもできます（それが私のステレオシステムが行っていることです...）。
ある会社が特定のウィジェットを使い始めたからというわけではなく、突然、すべてのウィジェットがすべてのウィジェットに使用されるべきです...
Facebookでは、いいねボタンがトグルボタンの良い例です。
FacebookのAndroidアプリでは、ボタンに[いいね！]が表示され、オフにすると灰色になり、オンにすると青に強調表示されます。以下のスクリーンショットを参照してください。
基本的に、私はそれらに同意しますポジティブを強調し、ユーザーの頭をいじらないでください（最小限の変更）。
色覚異常の方に良い方法かどうかはわかりません。おそらく彼らはもっと大胆な指摘をするべきだったのでしょう。
Facebookのweb-appでは、パターンが異なります。ボタンのテキストが変化して、アクション-クリック時に何が起こるかを示します。これは紛らわしいです。しかし、これには意味があり、スペースが広く、ユーザーが投稿を気に入っていることを示す別の指標があります。
たとえば、現在のiOSトグルのデザインに影響を与えた次のビデオ（1991年から！）を視聴することをお勧めします。 https://www.youtube.com/watch?v=wFWbdxicvK
そして対応する論文： http://dl.acm.org/citation.cfm?id=143079
比較したトグルは次のとおりです： 
そして優先的に結果： 
ラベル付きのボタン（トグルボタン）は、ご指摘のとおり、わかりにくい場合やあいまいな場合があります。代わりに、
ステータスとアクションを表示のように：
オンライン Go offline
つまり、現在のステータスを明確に示すクリックできないラベルと、ステータスを変更するアクションを実行するクリック可能なボタンがあります。
[オフラインにする]ボタンをクリックすると、ラベルが[オフライン]に変わり、ボタンが[オンラインにする]に変わります。
現在のステータスとアクションの両方を同時に表示することは、完全に明確にする唯一の方法です。ラジオボタンはこれを行いますが、ラベルとボタンのソリューションは、2つの間の明確な視覚的区別を提供するため、より優れています。また、ラジオボタンよりも当然コンパクトです。
代替案については、トグルボタンが問題になる可能性があることは同意していると思います。チェックボックスでさえ混乱するかもしれません：
オンライン
チェックボックスがオフになっているため、アプリケーションはオフラインです。しかし、これは特に明確ではありません。一見すると「オンライン」という言葉が最初に見えるので、間違った結論が出やすい。
問題は、あなたが見ることができるすべてが単一のラベルであるということです。ラベルがステータスとコマンドのどちらを示すかを決める前に、少し考えなければなりません。この問題はチェックボックスとボタンに共通しており、形容詞（または動詞など）を一貫して使用することで状況が改善される可能性がありますが、問題は解消されません。
再生/一時停止の例では、マウスオーバーで現在の状態を通常と反対に表示します（それが適切な場合、つまりタッチスクリーンでない場合）。そのアイテムには2つの自然状態があり、統一動詞はありません。一方、オン/オフは電源に簡略化でき、オン状態は点灯し、オフ状態は点灯します。
私は常に現在の状態で行くと思います。再生/一時停止のイディオムは、ルールではなく例外だと思います。再生/一時停止はこのようになっていると思いますが、これはおそらく古いカセットテープデッキの時代からの持ち越しです。 CDプレーヤーで再生/一時停止を組み合わせたとき、それがいかにクールで革新的だったかを思い出しました。
とにかく、現在の状態が "選択されている"ことを明確にする1つの方法は、ボタンをglowにするか、青色に魔法のような輪郭を描くことです。
通常、マジックブルーは、一部の状態が「オン」であることを意味します
したがって、上記のボタンは実際にはiTunesのトライステートボタンです。これには3つの状態があります。リピートオフ、すべてリピート、リピート1です。ここで何が起こっているかは、ボタンの表面からは明らかです。繰り返し1はonです。
別の例として、1つのボタンで切り替えられる3つの異なるカメラ設定があります。正投影1アップ、正投影4アップ、遠近法です。単一のボタンがこれらの3状態を循環し、現在の状態ボタンの表面。
複数の状態の単一のボタンは、慣れればそれで混乱しません。 グループ相互に排他的な設定であり、煩雑多くの異なるボタンを備えたUIを保存するため、これらは素晴らしいです。ある意味では、コンパクトラジオボタンのようなものです。
私が考えることができる他のオプションは次のとおりです：
- 表示現在の状態、およびポップアップメニューで状態を変更（オプションが2つしかない場合でも）
これの例は、Mac osがBlueToothまたはAirportの状態をどのように表示するかです-各アクションが何をするかについての完全な文章を含むポップアウトさえあります：
現在の状態（灰色のフェードオフ）が表示され、次の状態がポップアップメニューに完全な文で表示されます。
再生/一時停止のようなトグルボタンのラベルは変更されません。ボタン自体は、それが押されたことを視覚的に示す必要があります（「再生」ラベルを残します）。これにより、すべての混乱がなくなります。
@KatoのEvernoteからの回答画像はそれを明確に示しています。トグル（「自動保存」）によって制御されるものを伝えるラベルと、状態インジケーターとしても機能するトグル（O | I）があります。
一部のトグルの問題は、状態の伝達とアクションの伝達の2つの異なる目的で同じビットを使用しようとすることです。
たとえば、私の家のライトには、匿名のトグルと、ライト自体である明るいインディカーがあります（電球が故障した場合、通常、トグルがオンまたはオフの位置にあるかどうかはわかりません）。 。
劇|ポーズの配置には、音楽自体の音である明確なインジケーターもあります。トグルは1つの機能（コントロール）を果たし、音楽はもう1つの機能（通信状態）を果たします。
シャッフルとリニアのトグルは状態を制御しますが、通信しません。あなたはCDケースをつかんで、テーマが終わるのを待って、後に始まるものがリストの次のものであるかどうかを確認する必要があります（そして確かに繰り返す）。しかし、それをシャッフルと考える場合|バイナリオプションをシャッフルしない場合は、それが制御する動作の後にラベルを付け（動詞として「シャッフル」）、それを照らすことで状態を伝えることができます。
私が見ているように、どのような場合でも、状態を伝える必要があります。
私の友人は、彼の車のロックリモコンに夢中です。状態が印刷されており、アクションなのかフィードバックなのかわかりません。
あいまいさを減らすために、次のことをお勧めします。
状態ではなく、トグルボタンのテキストとしてアクションを使用します。
ボタンが強調表示されていないことを確認してください。
マウスオーバー/フォーカスのアクションを強調表示して、何が起こるかを強調します。
現在の状態を強調表示して、ボタンの横に配置します。
例えば...
（他の例： "オンにする" + "オフ"、 "オフにする" + "オン"）
またはslidersおよび
サムコントロールに表示される現在の状態を強調表示します。
空の領域内に状態を遷移させるアクションを配置します（強調表示しないでください）
例えば...
（つまみのコントロールがつまみのコントロールのようであり、ボタンのようではないことを想像してください）
- 閉じられた重複する質問 への私の回答から、いくつかの改善を加えました。