web-dev-qa-db-ja.com

ロック機能を備えたトグルボタン(オン/オフを表す)を最もよく表す方法

locked状態になることができるToggleButtonコントロールを設計しています。この状態では、ユーザーの操作でコントロールをさらに切り替えることができません。一般的に、MicrosoftのUXGuideでレイアウトされたルールの自然なスキームでは、ボタンがいくぶん自然に見えるようにしたいのですが、コントロールがロックされているという事実を示すために、何らかのカスタムグラフィックやユニークなコンセプトを使用するという考えは気にしません。

私が使用できるボタンの外観に関する限り:

  • IPhoneスタイル ON/OFFトグルボタン
  • アクティブにすると点灯する電源ボタンなどのカスタムグラフィックアイコンを備えたトグルボタン。
  • 昔ながらのチェックボックス。

チェックボックスを使用する場合、無効状態を使用してコントロールがロックされていることを表すことができますが、通常はグレー表示されたスタイルでコントロールの設定が無効になっているため、コントロールの設定が有効でないように見えます。 。他の2つのオプションについて、私が考えることができる唯一の合理的なことは、ロックされているときにトグルボタンの上または近くにあるタイプの南京錠スタイルアイコンを過度に配置することです。

誰かが私を正しい方向に導くことができれば、それは非常にありがたいです。

プロポーザル#1:以下は、私が思いついた概念で、iPhoneのトグルに多少似ていると思いますが、 私のWiiコンソールの電源ボタン 。また、ロックされた状態のときに南京錠のアイコンのみを表示するという、Hishamの提案を取り入れました。この概念は、オン/オフの状態を表すトグルボタンに固有のものですが、そのためには非常に適切だと思います。

mockup of Wii inspired toggle button

Proposal#2:これは上記の例の別の例ですが、オン/オフのテキストの代わりにユビキタス電源アイコンを使用しています。さらに、コントロールがオンになっているが、これ以上トグルできないことを示すために、南京錠の代わりに灰色のテキストを使用しました。電源のオン/オフに応じて、電源シンボルの円と交差する線の位置が変わる場合があることに注意してください。ただし、今のところ、この例を掘り下げることはできません。

power button representation

UPDATE:コンテキストがすべてである場合があるため、開発中のトグルコントロールがどのように使用されるかを示すために、大まかで具体的なモックアップを作成しました。一般に、ここで開発したいくつかの概念を他のより一般的なユーザーインターフェイスに適用できるようにしたいのですが、ハードウェアスタイルのボタンの2分の2をリードしているものについて、少なくともさらに詳しく説明する必要があると考えました。長期的には、ハードウェアの外観をエミュレートするかどうかに関係なく、重要な点は、このトグルコントロールが多くの場所で繰り返され、同じ目的を果たすため、場合によっては、Iなどの特殊なトグルコントロールが使用されることです。それ以外の場合はおそらくより伝統的なUIで、ON状態とOFF状態の2つのラジオボタンを使用し、ラベルを使用して、これらのコントロールをロック状態にするときに説明または無効にすることができます。 。

hardware controls mockup

この例から、南京錠のアイコンをオン/オフのトグルボタンに配置すると、コントロール全体がロックされているとユーザーに誤解させる可能性があるため、南京錠のメタファーからも離れている理由がわかります。ロック/無効状態は、エフェクトコントロールのオン/オフを切り替える機能に影響するだけです。

いくつかの関連リンク:

11
jpierson

確かにパーティーに遅れましたが、ここに私の2cの価値があります...

次の4つの状態があるようです。

  1. オン;ユーザーはそれをオフにすることができます。
  2. オフ;ユーザーはそれをオンにすることができます。
  3. ロックオン
  4. ロックオフ。

コントロールにボタンを表示する(無効になっている場合でも)場合は、ユーザーが値を変更できる可能性があることをユーザーに示唆しています。多くのアプリケーションでは、無効になっているボタンは有効にすることができますアクション、たとえば、フィールドが変更された場合にのみ有効になる「保存」ボタン。

したがって、状態がユーザーの制御下にある場合にのみボタンを表示することをお勧めします。

状態がロックされている場合、ボタンをまったく表示せず、現在の状態を表示します。

ここにモックアップがあります:

Mockup of States

ここでは、元の考え方に沿って南京錠を示しましたが、ボタンがないために状態を変更できないことがはっきりしているため、それらは冗長である可能性があります。

6
Bevan

オーバーレイではなく、南京錠のアイコンを表示する方法をお勧めします。代わりに、コントロールの横に配置します。 iPhoneスタイルのON/OFFトグルボタンとチェックボックスの場合、右または左に移動できます。

南京錠アイコンを表示してロック状態を示すだけにする必要がある場合、つまりユーザーがアイコンをクリックしてロックを解除できない場合は、コントロールがロックされていないときはアイコンをまったく表示しないことをお勧めします。

3
Hisham

私はロブ・アレンの主張に同意します。あなたの課題は、通常は2つの選択肢に関連付けられているメタファーを使用して、4つの状態の選択肢フィールドを再作成することです。ラジオボタンタイプのメタファー(相互排他性が強化されている)は、n番目の状態選択フィールドをサポートするため、ユーザーにとってより快適です。

しかし、ボタンがあなたが固執したいものである場合、おそらくロックされた状態のもう少し過激な視覚的表現が必要ですか?おそらく、南京錠のアイコンを赤いボタンの境界線とペアにしますか?このように、ON(LED付き)とON LOCKED(LEDと赤い枠+南京錠付き)の状態は、2つの状態を強く示唆するのに十分なほど異なります。オフ状態の同上。

もちろん、色を状態の表現として使用する場合の唯一の潜在的な問題は、色覚異常のユーザーが視覚的な手掛かりを見逃して、南京錠アイコンの値を増幅する可能性があることです...

3
Jason Lunsford

あなたは現在持っています  4ボタンの状態は、1つのグループでは論理的にペアになっていて、オン、オフであり、他のグループではロック(オン)とロック(オフ)です。プッシュボタンのメタファーとラベリングを使用すると、オフとオンの2つの状態のみがヒントになります。つまり、ロックされた状態が将来私を待っている可能性があることを私はまったく知りません。ユーザーがそれにつまずくと、彼らはそれを覚えているかもしれませんが、新しいユーザーはロックされた状態を期待しません。また、ユーザーがこのコントロールをロック状態で最初に遭遇した場合(電源アイコンまたはオン/オフラベルが表示される前)、ユーザーはコントロールの目的を取得できない可能性があります。

プッシュボタンスタイルのコントロール(2つの自然な状態)をマッピングする代わりに、意味のある位置にスライド式スイッチ、ノブ、またはラベル付きのダイヤルなど、複数の状態を助長する別のメタファーを使用できます。

編集

あなたのコメントへの回答として、あなたの2つの状態セットは相互に排他的であるため、基になるメタファーとしてチェックボックスを使用することには同意しません。つまり、オフとオン、またはオフ(ロック)とオン(ロック)を同時に解除することはできません。あなたの根底にあるメタファーは、代わりに、ラジオボタンリストのペア、またはロックされた状態のラジオボタンとチェックボックスであると思います。

これらすべてを1つのボタンで表現し、それでも、注文が高すぎるような、使いやすく発見可能なサウンドにすること。

編集2

「私の口にお金を置く」ファイルから:

素早く汚れたモックアップ制御...

enter image description here

2
Rob Allen

私はこの質問が古いことを知っていますが、答えがないのを見ました。オン/オフの場合は単純なスイッチボタンを使用し、ロック状態の場合はボタンを無効にする必要があると思います。

enter image description here

その他の例: マテリアルデザイン-選択コントロール。

2
Madalina Taina

トグルスイッチを使用して、ロック状態でそれを灰色にします。

どうして?

  • コマンドと状態の問題は発生しません。再生/一時停止ボタン付きのメディアプレーヤーがあるとします。その上に再生アイコンを表示すると、それはコマンドなのか状態なのか?これは、2つの状態のトグルボタンでよくある問題です。

  • それは明らかに状態を表示します。コマンドと状態は重なる位置にあるため、前の問題に悩まされることはありません。

  • それはモバイルでうまく動作します。 AndroidおよびiOSにはそれらがたくさんあります。デスクトップ用のWindows 8でさえ、それらの独自のバージョンがあります。

  • 灰色であることは、ほとんど障害者の慣習です。そして、あなたは視覚慣性の設計原理を尊重します。私は色に頼るべきではないと主張することができます。そうです。そのため、スライダーにキー/南京錠/スラッシュの鍵穴アイコンを配置してください。

0
sergiol