web-dev-qa-db-ja.com

ブールフラグの理想的な制御設計?

したがって、元々チェックボックスベースのインターフェースを「きれいにする」方法を見つけるように命じられ、その過程で3つのデザインをモックアップしました(以下を参照)。上から下に、トグル、チェックボックス、およびスイッチのデザインがあり、MicrosoftのUXガイドラインから完全に盗まれました。

Mockup designs

私が渡された最初のデザインは、オフ状態がアクティブ状態と同じ青色であったことを除いて、一番上のトグルスイッチでした。これは混乱を招くとみなされたため、修正するための最初の提案は、代わりに「オン」状態を緑に、「オフ」状態を赤にすることでした。それは機能しますが、アプリケーション内の他の非常に特定のクラスのアクション用に予約されている色を使用する方法など、他の多くのユーザビリティの問題が伴うため、可能であればそれを避けたいと思います。ここの灰色は赤/緑のトグルスイッチを回避するための妥協ですが、色は

実際には、このようなトグルを使用するインスタンスは、実際にはチェックボックスまたは選択ボックスである必要がありますが、これらは十分に「きれい」ではないため、これらのオプションは無視されています。だから私は基本的にここで(良い)アイデアを使い果たしています-誰かが私に代替案を指摘できますか?

10
moberemk

チェックボックスは無効ではありません

要は、チェックボックスはこの目的に完全に適しています。あなたの例では、それは巧妙に処理されていませんが、それは全体のポイントを取得します。優れたUIデザイナーは、チェックボックスを「きれいにする」だけでなく、それらを操作する際の摩擦を減らすのに役立ちます。

トグルも悪くない

トグルを正しくするには、考え方を少し変える必要があります。これは、実際には、物理​​からモバイル、デスクトップの状況です。正直なところ、多くの人がデスクトップコンピューターよりも(少なくとも思慮深い方法で)電話を操作します。彼らは、すべてのモバイルOSにあるこれらのトグルに慣れ始めています。

トグルは、3つの異なる方法で実装できます。

  1. 純粋にインジケータとして、テキストが隣接しています(Microsoftの仕様のように)。これは良いトグルというよりは悪いチェックボックスのようなものだと思います。
  2. 明示的な値を持つブールインジケーター。ここには、ラベルとトグルがあり、トグルの一種のスライドボタンとして、はい/いいえまたはオン/オフがあります。
  3. セグメント化されたボタン。ユーザーが知っておくべきことはすべてトグルにあり、必要な値をクリックするだけです。

利点トグル?

上記のソリューション2と3には、実際にはチェックボックスに勝る1つの利点があります。トグルは負の値を明示的に示し、解釈は必要ありません。チェックボックスが付いていると、それが暗示されますが、あなたと私にはその暗示が見えるかもしれません。

この利点に対応する他の従来のコントロールは、各設定のラジオボタンで、はい/いいえを示します。これは一般的には行われておらず、あまり「きれい」に見えませんが、その価値は明らかです。

これらはすべて完全に有効だと思います。 正しいものを見つけるための私の次のポイントを参照してください。

enter image description here

ユーザーを尊重する

代表的なユーザー(内部クライアントではない;-)でいくつかのオプションを試して、彼らが何を応答するかを確認します。結局、それが唯一の正しい答えです。

その他の例については、Googleに「 boolean switch ui 」について尋ねてください。

9
plainclothes

ここにトグルがあります これは、オプションとわずかに異なります。

enter image description here

違いは、表示されるテキストは現在の状態のみであることです。これは心の対話を次のように変えます:

ああ、トグル。 「はい」と「いいえ」が表示されますが、「はい」が少し鮮やかに色付けされているように見えるので、「はい」と表示されていると結論付けます。

これに:

ああ、トグル。 「はい」と表示されます。はいする必要があります。

1
Sentient

カラーコードを覚えてから覚えるのはかなり混乱します...安全スイッチや安全カバーなどの物理分析を使用しないでください。 。カバーダウンは「ロック」を意味し、本当にロックされていますLOL ... enter image description here

0

チェックボックスは、親しみやすさ/使いやすさの点でかなり優れています。チェックボックスを使用して、見た目を可能な限り美しくします。 1つのオプションは、チェック状態のときにアイテム全体に色を付けることでチェックボックスの状態を強調することです。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

0
obelia

興味深い質問です。他のユーザーの一部として、チェックボックスはあなたの目的に適していると思います。 「ロック/ロック解除」オプションの場合、2つの状態ロック(1つはロック、もう1つはロック解除)でイメージを使用しようとします。

0
storm87