web-dev-qa-db-ja.com

グラフィカルユーザーインターフェイスの設計

フィルターを作成/編集するためのGUIを設計しようとしています。フィルターは、次のいずれかのタイプになります。

  • テキスト
  • オブジェクト名
  • オブジェクトタイプ
  • オブジェクト属性

次に、可能な設計のドラフトを示します。

enter image description here

コンボボックスの現在の値Filter typeは、ウィンドウのレイアウトを決定します。 Textが現在の値である場合、画像の最初のウィンドウが表示され、IfObject nameは現在の値で、画像の2番目のウィンドウが表示されます。以下同様です...フィルタータイプ=Textがデフォルトです。つまり、メインウィンドウでAdd filterボタンを押すと、最初のウィンドウが開きます。

上記のデザインで、さまざまなフィルタータイプが表示されるときにウィンドウのサイズを変更してコンポーネントを表示/非表示にする、または4つの異なるウィンドウで作業するためのベストプラクティスは何ですか?

4つのフィルタータイプを作成/編集するためのGUIを設計するより良い方法はありますか?

2
Andy Rehn

共通の依存フォームレイアウトパターンは、親の選択が行われると選択項目を変更します。これは、ユーザーがフィルタータイプの作成後にフィルタータイプを変更できるようにする場合に特に重要です。必要なフィールドは、行われた編集に応じて変化します。

例:新しいフィルターを作成すると、NameおよびFilter typeフィールドのみが表示されます。デフォルトの状態が無効になっていて、"select filter type"と表示されている可能性があります。選択が行われると、新しいフィールドが下に表示され、適切な追加選択、FunctionおよびTypes/Valueが適切な場所に表示されます。

単一選択または複数選択の設計でより広い幅が必要な場合は、おそらく全体のモーダルを広げてフィットさせます。

ただし、ブロックモデルフィルターは興味深い課題を表しています。テーブルの列と行は事前定義されていますか、それとも新しい列と行を追加できるようにする必要がありますか?その場合、指定されたモーダルサイズの制約では、そのようなUX要素を含めるために必要なすべてのスペースが提供されない場合があります。それらが事前定義されている場合、それらが一緒にグループ化され、一般的なフィルターフォームフィールドから分離されていることを示すために、おそらく別のラベルを付けて、既存のデザインのテキスト入力として追加しないのはなぜですか?

横方向に拡張すると視覚的な視差と変化が大きくなるため、動的な横幅のモーダルは使用しないことをお勧めします。画面中央に表示される場合、追加のコンテンツで展開されると、元のフォームフィールドは左に移動し、ユーザーがフォーカスした場所の下にコンテンツが移動します(マウスが次にクリックする場所を精神的に再計算する必要があります)。アイテムを垂直に追加すると(現在クリックされている要素を正確に維持しながら)、ユーザーのフォーカスは同じ場所にあり、次の選択が変更された場所であることを周辺に気付くことができます。データを追加し続けるために、マウスは次の行にのみ移動します。追加の水平方向のコンテンツを非表示にするが、元のフォームフィールドがそのままの状態で表示されるモーダルがある場合、50〜75%の確率で中心から外れたモーダルになります。 (すべての種類のフィルターを使用していると仮定します;ありそうにありません)

1
mix3d