web-dev-qa-db-ja.com

モードの変更にはどちらのオプションが適していますか? 2つの部分からなるトグルスイッチ、または押すと状態が変化する1つのボタン?

.

ウェブサイトを視覚的に編集できるツールには、どのオプションが適していますか?

  1. 2つの部分からなるトグルスイッチ。
  2. 状態を変更するボタン(およびモードを変更するとボタンのラベルが変更され、モードを元に戻すことができます)。

デザインモードでは、デザインを行うことができ、別のページをデザインするには、ブラウジングモードを使用して別のページに移動できます。

11
Shivam

私は研究に自信はありませんが、確かに1つはあるに違いありません。

単一の制御状態を切り替えるよりも、場所によって目的の動作を参照する方が簡単です。

これは、ユーザーが左と右をデザインとブラウジングに関連付ける可能性が高くなり、将来的にはボタンを読むことすらしないことを意味します。

このタスクは「デザインモードを切り替えたい」または「ブラウズモードを切り替えたい」であり、「他のモードを切り替えたい」ではない

それが理由です:

ケース1のワークフロー:

  1. 左クリックでデザイン、右クリックで閲覧

ケース2のワークフロー:

  1. アクティブなボタンの状態を読んで考える
  2. クリックするかどうかを決定します。

この概念のいくつかの証明:

  1. 車のリモートキーにある2つの別々の「開く」/「閉じる」ボタン
  2. オン/オフボタン: トグルボタンは、現在の状態またはそれが変化する状態を表示する必要がありますか?
  3. Visual Studioは編集/デザインに2つのタブを使用します
5
ADOConnection

オプション1はより簡潔で、「this OR that」のより直接的な視覚的翻訳です。他のコントロールのように「モード」ラベルを追加した場合、よりわかりやすくなり、長い形式のオプション。

興味深いのは、2番目のオプションが色とサイズでより目立つようになっていることです。ここの目標は何ですか?それが新機能/メジャーモードであり、他のボタンが二次的なものである場合でも、1のような処理を行うことができますが、色/サイズ/スタイルを使用して、より目立たせることができます。

確かに、ユーザーがモードオプションを見逃している場合は、より目立つ扱いが適切です。私はまだ非常に冗長なコントロールに疑問を呈します。以下のInvisionApp(プロトタイピングツール)のモードセレクター処理を参照してください。選択したモードを視覚的に際立たせます。他のすべてのコントロールは、落ち着いた色で表示されます。説明テキストで画面の領域を占有するのではなく、ユーザーのオリエンテーションのホバーで明らかにされます。

enter image description here

enter image description here

2
mahalie