web-dev-qa-db-ja.com

レポートWebアプリ-大きなデータテーブルを設計する方法

私は主に大量のデータを報告することに焦点を当てたレガシーWebアプリケーションに取り組んでいます。つまり、20列以上のテーブルが財務データを報告しています。主な問題は、ユーザーの操作とデータ自体に依存するテーブルレイアウトの不整合です。たとえば、特定の列の幅は、セル内の数値/単語の大きさ、またはユーザーがその列をソートすることにしたかどうかに応じて変化します-ヘッダーの昇順または降順の矢印は列の幅全体を混乱させます。ユーザーは、ナビゲーションがアクションごとに異なる場所にある「ジャンプ」テーブルで終わります。

その上、それは国際的なアプリであり、翻訳はさまざまな言語で列のタイトル幅を混乱させます。

私たちは非常に小さな最小解像度を必要としていますが、ほとんどのテーブルはすべてに適合するために約1200〜1400px幅です。

使いやすさを損なわない方法でビジネスWebアプリケーションを効率的かつより重要に設計する方法に関するガイドラインはありますか?

8
eagerMoose

同様のケースで私がやったことは、fixedレイアウトのテーブルを使用して(ジャンプしないようにする)、オーバーフローする情報はすべて非表示にすることです。次に、title-タグ内に完全なコンテンツを配置しました。

それがあなたに当てはまるかどうかはわかりませんが、かなり小さい列がたくさんあり、何らかの説明を含む列のセットが限られていました(レイアウトが簡単に拡大して混乱する可能性があるため)。だから私は固定テーブルレイアウトを使用しました。

利点は、ユーザーが今でも簡単に概要を確認でき、必要に応じて完全な情報にアクセスできることです(要素の上にマウスを置くだけで、タイトルのコンテンツが表示されます)。

[編集:列の制限はオプションではないことを理解する]

わかりました、列を制限することは不可能です。その場合、私が現在抱えている唯一の問題は、ソートされたasc/descアイコンの外観と、列ヘッダーのさまざまな翻訳にあるようです。

1つ目は比較的簡単に解決できます。CSSを使用して、列ヘッダーがsorted_ascsorted_desc、またはnot_sortedであるかどうかにかかわらずクラスを追加し、それぞれにアイコン(並べ替えられていないケースが存在しないか、グレー表示されているかなど)。

2番目:省略形を使用するオプションですか?金融の世界では、それらは世界的に有効な略語であると想像できますか。そのようなものはオプションでしょうか?私はあなたが翻訳を十分に制御しておらず、それらがすべて同じ長さであることを確認していると想定しています。それ以外の場合、列ヘッダーのフォントサイズは本当に小さいですか?

列ヘッダーのテキストがそれほど重要ではないと想定すると、それをオーバーフローさせることができますか?

2
nathanvda