web-dev-qa-db-ja.com

ネストしたテーブルのスキャン可能性を向上させる方法は?

テーブル内にイベントのリストがあります。テーブルの行には、それらを区別するゼブラストライプがあります。問題は、テキストがスキャンできない大きなブロックのように見え、次のように見えることです enter image description here

各セルには異なるタイプのコンテンツがあるので、それらを区別する方法を探していました。1つのアイデアは、テーブル内のテーブルのように圧倒的に見えるより多くのゼブラストライプでした: enter image description here

またはセル上でマウスをホバーしたときのみですが、ボタンまたはクリック可能な領域に似ているため、混乱を招く可能性があります: enter image description here

助言がありますか?

7
Eran Bar

ここに私からのいくつかの提案があります:

  • 各行にゼブラストリップを使用すると、各セクションで同じように表示されます。
  • ステップ#列を削除します-ゼブラストリップ間の仕切りと同じものを使用します。
  • コンテンツを読みやすい行の高さとガターの適切な左揃えで適切に配置します。

これがサンプルです:

enter image description here

3
DPS

テーブルがいいとき

テーブルはあなたが持っているときの解決策への行き方です

  • 事物のリスト(行)
  • それは簡単にソートできるはずです
  • のような属性(列)を共有している
    • 比較的短い
    • 重要性が不明
    • ユーザーによって設定される場合があります
    • どのユーザーが詳細な分析を行うか

言い換えれば、スプレッドシートでうまく機能するものの束。

答えはテーブルだけではありません

ここに表示するデータ(それが代表的な例であると想定)は、表形式のプレゼンテーションにはあまり適していません。 「すべてにグリッドを使用する」アプローチは、ごく最近までエンタープライズソフトウェアによく見られる悪い習慣でした。この間違いを元に戻すために必要な努力は多くの製品チームにとって困難ですが、あなたの例は、なぜそれが起こらなければならないかについての良いケーススタディです。

ユーザーのニーズを理解する

ユーザーがこのビューに来たときに何を達成しようとしているのかを自問してください。彼らは何をしようとしているのか?そこには多くの情報が表示されており、私が見たものに基づいて推測することすらできません。

データを視覚的に説明する

ユーザーにとって重要なデータの階層を見つけ、それを伝達するソリューションを設計します。現在、最も重要なのは「ステップ番号」です。その後はすべて単なるノイズです。

一般的に言えば、テーブルでは視覚的な階層を作成するためのスペースがほとんどありません。データとは何か、データのどの部分が最も重要であるかについてかなり良い考えがある場合、2つの優れた一般的な解決策があります。

  • 設計されたリスト
  • カード

次に例をいくつか示します。

この設計されたリストには、スキャンに重要な高度に構造化されたデータと、さらなる調査に重要なフリーフォームデータがあります。テーブルのようですが、不必要な制約はありません。

Timeline-style log list

今やユビキタスなカードUIは、さらに異なるデータセットを構造化します。これは、重要なテーマを共有するが、仕様が大きく異なる、または多くの忙しいサブ要素を含むアイテムのセットに構造を与える必要がある場合に役立ちます。カードは親アイテムを統合し、同じように複雑な隣人からのスペースを与えます。

Google Now card UI

2
plainclothes

セル内のコンテンツに、より一貫した階層を適用します。以下の例を見てください。

フォントサイズと色を統一します。

この記事をチェックしてください。

コンテンツを効果的に通信する(または「名誉を与える」)ための最も重要な手法の1つは、活版印刷の階層の使用です。文字体裁階層は、データ内で重要な順序を確立するタイプを編成するためのシステムであり、読者が探しているものを簡単に見つけてコンテンツをナビゲートできるようにします。

出典: 文字体裁の階層について

左は今の姿です。右側は私の提案です。あなたの細胞の最も重要な情報は何ですか?それが目立つことを確認してください。実際のデータ(黒、大)、データラベル(青、小)、説明テキスト(灰色、小)を区別します。

enter image description here

シマウマのアイデアはいいと思います。最初の例のようにしてください。

0
Nick Groeneveld

ゼブラストライプは基本的に強調された境界線であると考えると、セルレベルに境界線を追加するだけではどうですか。 enter image description here

0