レスポンシブダッシュボードでフィルタリングするためのタブを実装する最良の方法は何ですか？

Question

工場環境で機械のパフォーマンスを追跡するWebアプリケーションを開発しています。の形式でお客様の設定に階層構造があります。

Factory 1
  - Production Line 1
     - Machine 1
     - Machine 2
     - Machine 3
  - Production Line 2 
     ...
Factory 2
     ...
(etc.)

だから基本的に-3つのレベル。 1〜5の工場、1〜10の生産ライン、場合によっては数百台の機械。

工場と生産ライン（一度に選択できるのは一度に1つのみ）でフィルタリングする必要があるだけで、少なくとも2つの他の変数で「ソート」する必要があります。これを達成するために、ダッシュボードのある形式のタブを使用することを検討しています-簡単なモックアップです。

ただし、このダッシュボードは応答性が高く、比較的長い名前のモバイル画面の5つ以上のタブが見苦しく表示されることが重要です。いくつかの調査の後、モバイルデバイスの最も適切なソリューションは、次のモックアップのようなものであり、特定の画面幅でタブがドロップダウンに変わると思います。

画面サイズに関係なく、ユーザーがどの工場とどの生産ラインを見ているか、他に利用できる選択肢があるかどうかをユーザーがすぐにわかるようにしたいと思います。

私が上で概説したことは、この問題に対する比較的標準的で許容可能な解決策ですか？上記のアプリケーションにより適した、応答性の高いタブ付き/フィルターソリューションを設計または使用した人はいますか？

Answer 1

私はモバイルアプリのドロップダウンメニューの熱狂的なファンではありません。

•利用可能なオプションがすべて表示されない

•変更するには、少なくとも2回のクリック/タップが必要です

私は産業用Webアプリにも取り組んでおり、ユーザーがダッシュボードを「レポートツール」として使用し、各生産ラインを次々に確認することを学びました。特定の工場の特定の生産ラインにある特定の機械に直接行くことはほとんどありません。

同じ場合は、ページネーションのような次の行/工場へのリンクを追加する必要があります。名前をクリックすると、通常のドロップダウンメニューと同じように、使用可能なオプションのリストが表示されます

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 2

あなたの解決策はうまくいくはずです。表示するフィルターが多くない場合は、タブフィルターを備えたアプリにも遭遇しました。いくつかの例を以下に示します。最初の例には、タブフィルターと、生産ラインで機能するサブ/スクロール可能なカテゴリがあります。 2番目のスクリーンショットには、タブフィルターとドロップダウンの両方があり、提案されているものと似ています。