次のプロジェクトが、複雑でレスポンシブなデータテーブルをデザインしなければならないとわかったとき、あなたは「恐怖」を感じますか？ 😨
あなただけではありません、この問題を解決しようと考えてブーツで震える素晴らしいデザイナーを何人も見てきました。 しかし、恐れる必要はありません! 最近、私はこのデザインの挑戦に立ち向かい、そして今、ユーザーが好むデザインを考え出すのに役立ったいくつかのヒントを共有するためにここに来ました。
Table Design How to make their responsive はもとより、そのオプションにはさまざまなバリエーションが存在します。 すべてのデザイン ソリューションと同様に、最適なデザインは、読者がデータをどのように使用するかに依存します。
- この表形式の情報は、デスクトップ、タブレット、およびモバイル デバイスの組み合わせで同じように使用されます。
- 特定の重要な情報が常に見えるようにしておく。
ユーザーからのこれらの洞察を基に、テキストが多いデータ テーブルのデザイン システムを開発する際に取り組んだ主な事項を以下に示します。 読者が複数の列でデータを比較する比較表なのか、それともデータ セットが互いに独立しているコンテンツ テーブルなのか。
私のテーブルは比較表というより内容表のようなものです。 早い段階でこれを特定することで、狭い画面サイズではどのような情報が近くに残っている必要があるのかを理解することができました。
Mobile first
私が最初にデザインしたのは、狭い画面のバージョンでした。 ユーザーにとって、モバイルで表を見ることは重要なので、意図的にワイドスクリーン版より先に検討したのです。 デスクトップ用に美しい表をデザインして、それをモバイルで読みやすくするのに苦労するよりも、水平方向のスペースが十分にあるときにデザインを拡大する方がずっと簡単だと思ったからです。 また、タッチ ターゲットのサイズを最初から念頭に置き、情報を表示するためにホバーなどのアクションに依存しないようにしました。
狭いビューでは、コンテンツをよりリストのように扱うことにして、重要な情報が高い視認性とスキャン可能性を維持するようにしました。 たとえば、列のヘッダーが太字で背景がグレーの場合、幅の狭い表示でも同じスタイルを使用します。 これは、読者が新しいセル配分を再マップするのに役立ちます。
Typography is your friend
多くの制約があると、タイポグラフィの原則を忘れがちですが、読みやすさを最適化することを意識することは、特に私のように表に多くのテキストがあるプロジェクトでは、読者に大きな助けとなるでしょう。
Typography exists to honor content.
Typography は、コンテンツを尊重するために存在するのです。 ~ ロバート・ブリングハースト
スキャン
読みの流れをシンプルかつ明確にすることで、素早くスキャンしやすくする。 私は、読者が直線的にテキストをスキャンできるように、各カラムのテキストを同じエッジからぶら下げることにした。
Line length
狭いスペースにたくさんの列を押し込んでテキストの行長を妥協しないようにしないと、読む速度が遅くなる。
Labels
ラベルをどこに配置するか考えて、過剰なスペースを占めないように、しかし情報の文脈を提供できるようにしましょう。
私はラベルをリストの各セル内容の上に置き、横ではなく、より場所を取らないようにしました。 そうすることで、情報をより簡単に読み取ることができるようになりました。 固定ラベルと可変コンテンツの違いを識別しやすいように、ラベルを異なるスタイルにしました。