web-dev-qa-db-ja.com

ポップオーバーvsモーダルvsドッキングツール

CMSとwysiwygを構想するとき、編集ツールを表示するためにどのオプションを選択するかわかりません。私はデザイナーというよりは開発者なので、リアルタイムの変更を加えたいので、可能な限りモーダルを避けた方がいいです。変更を確認する方が便利ですが、最適な場合もあります。 （画像マネージャー/ chooser）。

下または上にあるポップオーバーでツールを表示する場合、コンテンツのサイズが大きすぎない限り問題はありません。また、そのポップオーバーにドロップダウンがあると本当に不便です。

最後に、最後のオプションは本当に魅力的です。これは、chrome/firefox devtoolsと非常によく似ています（素早い醜い demo ）。

ユーザーにとってソリューションは明確であると思いますか？その 'コンソール'（より良い用語を探している）は、画像などのモーダルをトリガーする可能性があります。ボタンだけ、または簡単なテキスト入力、非常に軽いポップオーバー、最終的には「ドロップダウンテキスト検索入力」がまだあります。 Googleのドキュメントと https://www.froala.com/wysiwyg-editor がヒントになります。

シナリオ例：

    1. ユーザーのマウスダウン/ホバーテーブル、2。いくつかのボタンが表示され、テーブルのクイック編集（行+/-、マージ）、およびコンソールをトリガーするボタン3.ユーザーがコンソールで編集して変更を確認し、最終的に元に戻ります。
    1. ユーザーがリンクをマウスダウンする、2。リンクを参照する小さなポップオーバー、編集、削除、3。新しいポップオーバーまたはコンソールをトリガーする編集メニュー...

一貫性を保ち、要素について同様のシナリオを作成することをお勧めします

edit（コメントへの返信）：

  • これは基本的なサイトページを含む一般的なCMSであり、ブログセクションを設けることも目的です。
  • コンテンツはテキスト、ドラッグ/ドロップで再編成された「コンポーネント」に含まれる画像になります
  • 現時点ではモバイルサポートは重要ではありません
modal-windowstoolbarcmspopover
5
caub

あなたが説明しているのはカスタムテキストエディターですか、それとも私は間違っていますか？

この場合は、一般的なパターンを確認できる多くの例（Microsoft Word、google docs、libre office、電子メールプログラム）を見つける必要があります。通常、テキストを編集するためのコントロールが一番上にあり、ユーザーはこのパターンに非常に精通しています。また、「ツールバー」は「コンソール」よりも良い名前のようです。

選択した要素の編集が本当に必要な場合は、オーバーレイにするか、画面の左側または右側を使用することをお勧めします。 Microsoft Visioは、要素を編集するときにこれを行います。 Screenshot Visio

コンテナ内のスライドを選択するか、オーバーレイを選択するかは、前述のようにユースケースに大きく依存します。人々が正しい設定で実験する必要があるリアルタイム編集が必要な場合は、モーダルを使用しないでください。画像の変更/追加などの場合、これはまったく問題ないようです。

0
JanettB

あなたの問題は本当に明確に定義されていないので、'それは依存する'以外の何かに答えるのは難しいです。私たちはあなたの説明から根本的なニーズを把握していません。

比較している相互作用手法は、同じ問題を解決するためのものではありません。 万能ではありません。

あなたが比較しているものを見てみましょう

  • ポップオーバー：スペースを取らずにコンテキスト情報またはアクションを提供しますが、最初は非表示です。迅速かつコンテキスト編集で使用するのが適切です。複雑なポップオーバーを持つことは、ユーザーが持っている概念モデルから外れている可能性があります（これがおそらくあなたが言った理由です：dropdowns in that popover feels really awkward）。記号を追加することで、それらをより見つけやすくすることができます（破線の下線付きテキストなど）

  • Modals：ユーザーフローを妨害し、コンテキストを失います。これは、ユーザーが特定のことに焦点を当てる必要がある場合に適しています。おそらく、結果をもたらす可能性のあるアイテムの編集などに使用したいと思うでしょう。

  • ドッキングツール：すべてのコントロールはページ内にあり、コンテキスト内にあり、表示されています。各アクションの頻度に応じて、icoのみ、またはlabelのみ、またはicoとlabelとして表すことができます。それは多くのスペースを取り、詰まった側面を与える可能性があります。ドックにあるコントロールが多いほど、適切なコントロールを見つけることが難しくなります。必ず12オプションを下回るようにしてください。

私が従うプロセス

エンドユーザーに適したものを設計するために私が従うプロセスは次のとおりです。

  1. 可能なすべてのアクションをリストする
  2. それらが使用されているコンテキストを理解する
  3. それぞれに最適な相互作用を関連付けるものを設計する
  4. テストして繰り返す
1
asiegf