web-dev-qa-db-ja.com

マルチレベルの選択に依存する入力

私は複雑なゲノム研究ソフトウェア(はい、科学者も人間であり、人間のUXに値する)に取り組んでおり、検索を合理化しています。 Selection Dependent Inputsを使用して対処することを目的としている、これに触発された段階的な開示すばらしい記事 http://www.lukew.com/ff/entry.asp?764

ただし、選択に依存する入力のためのマルチレベルの分岐ロジックがあり、ユーザーに段階的に表示するのが最善だと思います(つまり、すべての可能なサブオプションをユーザーの顔に一度に投げたくない)。

私たちの設計を実証するために、残念ながら実際のユースケースを公開することはできません。たとえば、例として、天文研究ソフトウェア(免責事項:天文学についてはほとんど考えていません)を実行していると仮定します。ゲノム研究ソフトウェアで私たちがしていることへの道)。

プログレッシブな開示と選択に依存する入力を念頭に置いて、次の設計を思いつきました。

Multi-level selection dependent inputs

この検索の複雑な部分に集中しましょう-Search in:。ここでは、実際には3つのレベルの選択依存入力があります。

  1. レベル1:面積単位の選択-全宇宙から単一の惑星まで
  2. レベル2:Galaxiesおよび既知のGalaxy Setsのサブチョイス(たとえば、100個の銀河を含むことができます)
  3. レベル3:Galaxiesが選択されている場合、Include radius ...を使用して、指定された銀河の検索を拡大/縮小できます。 近似に制限...

ユーザーがレベル1からレベル3にドリルダウンする間、指定されたレベルでの選択の活力は低下しますが、選択の表示方法を視覚的に変更しています。つまりレベル3では、頻繁に使用されないため、追加のレベル3の選択肢が画面の右側に移動します(ほとんどの場合、galaxy/galaxyセットで十分です)。レベル3の選択肢のリンクの1つをクリックすると、次のようになります。 Level 3 input added これで、ユーザーは拡大して、天の川だけでなく、近くの領域(たとえば、厳密には銀河に属していない外部のいくつかの太陽系)の惑星を探すことができます。

複雑な検索を設計して、ユーザーが検索の複雑な分岐やそれらのサブブランチのさまざまな追加のフィルタリングオプションに圧倒されないようにするための適切な戦略でしょうか?

2
Maxim Zavadskiy

ワイヤーフレームではダミーテキストではなくサンプル値を表示する方が適切ですが、ここでは、選択肢に含まれる値/データとユーザーの期待に応じて2つの提案を行います-

1)アコーディオンスタイルメニューのオプション1-2-3をグループ化します。 this のようなもの。

2)あるいは、オプションがこれらの選択に対して非常に制限されている場合(3つ4つなど)、ネストされたソートのドロップダウンを考えることができます。添付の画像を参照してください。

enter image description here

重要なのは、あまりにも多くのことが行われているインターフェースでユーザーを圧倒しないようにして、すべて(関連するかどうかに関係なく)を前もって表示しようとしたことです。先ほど@utthamが提案したように、ユーザーに最も関連性のあるパスをたどって、その選択を一連のタグで補足することを考えることができます。これは、ユーザーが行った一連の選択の指標として機能します。 (参照)。

UPDATE(2017年4月5日、コメントとより多くのコンテキストに基づく)

添付の簡単な設計提案を見つけてください。元の質問でProgressive Disclosureを既に引用しているように、これは同じ原則に沿ったものです。一般的なユーザーは、すべての選択肢をレイアウトする必要はありません。高度な検索モジュールでは、通常、微調整/詳細検索は十分に受け入れられます。また、ユーザーが理解しやすく入力できるように質問を設計する際に、革新的でユーザーフレンドリーになるようにすることもできます。テクノロジーを使用すると、ユーザーが何を入力するかを理解するためにシステムを十分にインテリジェントにすることができます。たとえば、デザインでわかるように、ユーザーが指定した入力を理解し、それを銀河または銀河セットの名前にマッピングするだけで、銀河と銀河セットの選択を回避できます。お役に立てば幸いです。

enter image description here

UPDATE(2017年4月6日、コメントとより多くのコンテキストに基づく)

このコメントはどんどん大きくなっていきます!;)

まあ、あなたのコメントに基づいて-私はソリューションを少し変更しました、そしてこれは更新された提案です。ユーザーは、必ずしもそのセクションを選択したり、オプションを表示したりせずにアコーディオンを使用できます。スマートな検証と適切なツールチップを使用して、必要な値を入力するようにユーザーをガイドできます。セクションに追加の選択肢がない場合(たとえば、ソーラーシステムの場合)、セクションは必ずしも拡張されません。 UIは単なる示唆に富み、優れたUIは確かにさらに多くのことを助けることができます。

enter image description here

1
Amit Jain

すべては問題ありませんが、ステージ3では、次のような即興を行うことができます。 tagsを個別に表示するのではなく、直接入力フィールドに指定すると、オートコンプリートが行われます。お気に入り

このページの複数選択機能を参照してください

https://harvesthq.github.io/chosen/

また、カスタムタグを入力して追加するための準備が必要です。

0
uttham