テーブル内にイベントのリストがあります。テーブルの行には、それらを区別するゼブラストライプがあります。問題は、テキストがスキャンできない大きなブロックのように見え、次のように見えることです
各セルには異なるタイプのコンテンツがあるので、それらを区別する方法を探していました。1つのアイデアは、テーブル内のテーブルのように圧倒的に見えるより多くのゼブラストライプでした:
またはセル上でマウスをホバーしたときのみですが、ボタンまたはクリック可能な領域に似ているため、混乱を招く可能性があります:
助言がありますか?
テーブルはあなたが持っているときの解決策への行き方です
言い換えれば、スプレッドシートでうまく機能するものの束。
ここに表示するデータ(それが代表的な例であると想定)は、表形式のプレゼンテーションにはあまり適していません。 「すべてにグリッドを使用する」アプローチは、ごく最近までエンタープライズソフトウェアによく見られる悪い習慣でした。この間違いを元に戻すために必要な努力は多くの製品チームにとって困難ですが、あなたの例は、なぜそれが起こらなければならないかについての良いケーススタディです。
ユーザーがこのビューに来たときに何を達成しようとしているのかを自問してください。彼らは何をしようとしているのか?そこには多くの情報が表示されており、私が見たものに基づいて推測することすらできません。
ユーザーにとって重要なデータの階層を見つけ、それを伝達するソリューションを設計します。現在、最も重要なのは「ステップ番号」です。その後はすべて単なるノイズです。
一般的に言えば、テーブルでは視覚的な階層を作成するためのスペースがほとんどありません。データとは何か、データのどの部分が最も重要であるかについてかなり良い考えがある場合、2つの優れた一般的な解決策があります。
次に例をいくつか示します。
この設計されたリストには、スキャンに重要な高度に構造化されたデータと、さらなる調査に重要なフリーフォームデータがあります。テーブルのようですが、不必要な制約はありません。
今やユビキタスなカードUIは、さらに異なるデータセットを構造化します。これは、重要なテーマを共有するが、仕様が大きく異なる、または多くの忙しいサブ要素を含むアイテムのセットに構造を与える必要がある場合に役立ちます。カードは親アイテムを統合し、同じように複雑な隣人からのスペースを与えます。
セル内のコンテンツに、より一貫した階層を適用します。以下の例を見てください。
フォントサイズと色を統一します。
この記事をチェックしてください。
コンテンツを効果的に通信する(または「名誉を与える」)ための最も重要な手法の1つは、活版印刷の階層の使用です。文字体裁階層は、データ内で重要な順序を確立するタイプを編成するためのシステムであり、読者が探しているものを簡単に見つけてコンテンツをナビゲートできるようにします。
出典: 文字体裁の階層について
左は今の姿です。右側は私の提案です。あなたの細胞の最も重要な情報は何ですか?それが目立つことを確認してください。実際のデータ(黒、大)、データラベル(青、小)、説明テキスト(灰色、小)を区別します。
シマウマのアイデアはいいと思います。最初の例のようにしてください。