メインのダッシュボードにユーザーが表示および分析できるデータのテーブルを表示するWebベースのプラットフォームを構築しています。このツールの成長に伴い、列が追加され、画面解像度が低くなると水平方向のスペースが不足しているように見えます(データの折り返しが発生しています)。ユーザーがすべての列を一度に表示することは重要です。したがって、列の非表示は、横スクロールと同じように(ボスの要求に従って、とにかく横スクロールが邪魔になるため)問題とは言えません。多くの列を持つテーブルの賢いUIを誰かが知っているのかと思っていました。
[〜#〜]編集[〜#〜]
以下は、テーブルのレイアウトのスクリーンキャプチャです。残念ながら、セキュリティ上の理由から、列のタイトルをぼかす必要がありました。この例には、実際にはデータが含まれていない行がありますが、使用中は、それぞれの列のタイトルよりも広くなる多くのデータが含まれます。一部の回答に対しては、特定の決定を行うためにデータを分析するためにすべての列が必要であるため、ユーザーがすべての列を確認することが不可欠です。最初の3つの列を除いて、すべてのデータは数値です。フィードバックをお寄せいただきありがとうございます。
わかりましたので、この画像をアップロードしても実際にはうまくいきません... 1680x1050の解像度(22インチ)で画面の全幅を占有し、データが列に入力されると、テキストを含む左の列が縮小します少しダウン。
編集2みんなの素晴らしいアイデアに感謝したいと思います。私は1つの回答しか選択できませんが、あなたのアイデアの多くは非常に有用であることが証明されており、最終的に最終製品になる可能性があります。再度、感謝します!
最初の3列の後のデータはすべて数値なので、各列の幅が4文字になるように四捨五入できます。
Full Length Shorter Tiny
------------ ------- ----
$143,573.39 $143.6k 144k
112.54% 112.5% 113
198,220,329 198.2m 198m
使用可能なスペースの量に基づいて、表示するバージョンを決定する場合があります。より大きなモニターを持っている幸運な人たちは、まだすべてを手に入れるでしょう。プレゼンテーションは、小型のモニターでは優雅に低下します
もちろん、セルの内容が省略されている場合は、ツールチップに完全な値を表示する必要があります。
更新:コメントで@Oskarは、大きさが異なる数値を表示すると視覚的に比較することがより困難になると指摘しました。したがって、相対値を比較することが精度よりも重要である場合のバリエーションを以下に示します。
Revenue
($millions)
------------
143.6
93.2
0.3
< 0.1
(この例のヘッダーはデータよりも幅広ですが、他の人が指摘したように、ヘッダーを45度の角度で傾けることで解決できます。)
レコードごとに複数の行を表示してみることができます。例:
また、各行を要約ビューにして、ユーザーが完全なレコードを表示できるように、次のように拡張することもできます。
上の写真では、ユーザーはメアリージェーンの完全な情報に興味があるので、名前の横にある三角形をクリックして完全なレコードを表示します。
また、「列の非表示はやや問題外である」というあなたの前提に同意しません。実際にthatの情報が多い場合、ユーザーはsomethingを非表示にする必要があります。最初は、デフォルトですべてを表示したい場合があります。しかし、ユーザーがいくつかの列を非表示にする方法があるはずです。
列が行を超えている場合は、行を列として配置することができます
これは、顧客/製品マネージャーがメイン画面ですべてを必要とする場合とすべてを必要とする場合によく似ています必要メイン画面。
私見、ダッシュボード画面は、ユーザーにすべての概要を提供する必要があります...しかし、その一部の詳細を取得するには(たとえば、今週の売り上げは275%増加)ユーザーはデータを「ドリルダウン」して、売り上げの発生元に関する情報の表を表示する必要があります。
「メイン」ビューを過度に複雑にして多数の情報を表示しようとすると、ユーザーが大量のデータで失われるため、最終的に失敗します。以下の例は、Googleで見つけたランダムなものですが、画面Aでは、どこから始めればよいかを決定することはほとんどできません。コンテンツが概要に整理されている画面Bと比較してください。
圧倒的なデータの例:
シンプルでダイジェストしやすいデータの例:
テーブルは、大量のデータを表示するのに適した方法です。ただし、5列を超えると、テーブルがすぐに読みにくくなります。あなたが言うようにデータがリアルタイムで変化している場合、ユーザーが15の異なる列を同時に見なければならない場合、ユーザーは時間内に決定を下すことができません。
Googleは、大量のデータを見るときに最も重要な考慮事項が並べ替えであることをよく知っています。ユーザーとの関連性で並べ替える必要があります。すべてのデータは重要かもしれませんが、一部のデータは他よりも重要です。どの部分が最も重要でどの部分が重要ではないかを特定する必要があります。これはビジネスの目標に大きく依存します。
一部の列は他の列よりも重要です。
非常に一般的なmistakeは、並べ替えるときに、アルファベット順、日付、数値など、役に立たない任意の順序で並べ替えることです。静的で一貫性のある順序付けは、値を検索する必要がある場合に役立ちますが、コンピュータに検索を実行させる必要があります。代わりに、ほとんどの場合、関連性で並べ替えにします。
これらのいくつかはあなたのケースに当てはまる場合と当てはまらない場合があります:
ユーザーのこれらの目標を特定し、それに応じてデータと列の加重並べ替えを行う必要があります。ユーザーにとって最も重要な目標を特定していない場合、実際には設計していません。最も重要なデータを特定したら、それほど重要ではないデータの一部を非表示にするか、それらを省略したり、アイコンに抽象化したりできます。アイコンは吸収しやすく、ユーザーは「緑の円」と「赤十字」を10分の1秒費やすことができれば、8221と1463を3秒で読みたくありません。
興味深い値を強調表示します。ユーザーは、特定のフィールドに特定の値を持つトランザクションのみに関心がある場合があります。そして、ユーザーは自分の好みに対して高すぎたり低すぎたりするトランザクションには触れないことを知っているかもしれません。それらをフィルタリングして、ユーザーがそれらを表示する必要がないようにすることもできます。ユーザーが列を使用しないと言った場合、列全体を非表示にすることもできます。
ユーザーが実際に参照する必要があるデータは何ですか?
それに対して正解を得ることができれば。 の代わりに「依存する」。
私はこの問題に遭遇し続けており、Googleを利用するたびに、私はJasonのすばらしい質問に戻ってしまいます。
そして、素晴らしい答えはたくさんありますが、私は皆、周りを取り巻いているように見えるメタトピックのにおいがしますが、開梱する価値があると思います。
このような状況に直面したとき、私は一歩下がって、システム内のユーザーの意図の多様性に十分に感謝していることを確認することは有用だと思います。私は私が何を意味するのかを説明するために簡単な図を描きました:
ここで私は2つのことを考えています:
例えば:
毎朝、セールスマネージャーがセールスパイプラインを値とクローズ日で確認していることがわかっている場合は、そのためのダッシュボードを設計して、毎朝「手元にある」ようにする必要があります。これはdefinedおよびpervasiveのユースケースと呼んでいます。
投資アナリストがポートフォリオの株式を注ぎ込んでいるのを見ると、彼らは常にさまざまな標準的な手法を使用してポジションを評価していることがわかりますが、特定の瞬間に彼らが評価を行っている方法を正確に特定することはできません。これは、外部の刺激(トレーディングフロアの同僚からの電話、またはフィナンシャルタイムズのストーリーなど)に応答する場合に特に当てはまります。これはundefinedと呼ぶかもしれませんが、まだpervasiveです。
おそらく私たちは、部門の責任者が彼らのコストと予算を管理する責任があることを知っています。しかし、managingが正確に何を伴うかを理解していますか?そして、これは時間の経過とともに変化する可能性があります。たとえば、年の初めに、会社は市場シェアと収益の最適化に焦点を当てることができ、第4四半期までに全員がコスト削減に焦点を当てることができます。これは、非常に異なる種類のレビューとアクションにつながる可能性があります。このシナリオでは、undefinedおよびephemeralと呼ぶ場合があります。
など..私はあなたが画像を取得すると思います。
焦点を合わせる場所の決定
右上の象限は明らかにデザイナーとして最適な場所です。ユーザーが本当に必要としているものを特定し、最善のエクスペリエンスを設計することに力を注ぎます。エクスペリエンスに付加価値をもたらさない、アプリケーション内のすべての残骸を排除できます。うまくできれば賞を獲得できます;-)
残念ながら、世界は汚い場所です。たぶん、私たちのユーザーはチャートの至る所にいるでしょう。そして、それは分ごとに変わる可能性があります。
私たちの通常の対応、そして分野(プログラマー、デザイナー、起業家)に関係なく、あなたが聞く最高のアドバイスは、単に焦点を合わせています。極値で:1つのことを実行し、それをうまく実行します。
スタートアップ企業やMVPで作業している場合、これは簡単で自己選択的です(「これは、Xを実行したいユーザーのためにのみ作成します」)。
他のすべての人にとって、代わりに、ユーザーが最初にどの象限を希望し、その中で作業する必要があるかを理解し、それをレンズとして使用して私たちの努力に集中する必要があることをお勧めします。ユーザーがクアドラントDで作業しているが、クアドラントAソリューションにそれらを強制しようとしている場合..それはきれいではなく、ユーザーはとにかく常に最終的に勝つでしょう。
本当のジェイソンはおそらく長く続いたでしょうが、私たちの多くは私たちがジェイソンである私たちの日々を過ごしています。彼の説明から、ジェイソンのユーザーはすべて象限Cについていることが最初の前提/命題であるようです-私たちが提供するデータセットで簡単に定義できないことをすることは常に非常に忙しいです。
つまり、クラシック ナレッジワーカー です。私たちはこれらの人々のためにシステムを構築するのに特に苦労しています。なぜなら、彼らは私たちの貧しいコンピューターが手がかりにしていない多くのことを知っており、それに対応しているからです。
控えめなスプレッドシートが依然として財務部門などの場所で最高を支配しているのは当然のことです。 ERPシステムがすべてのトランザクション処理で完了すると、残りの作業のほとんどは右上の四分円の外側に四角くなり、スプレッドシートはデータを操作するための究極の空白のキャンバスです。 。
では、何ができるでしょうか?私は2つの並行戦略を提案します
おそらく、ほとんどの作業は疑似スプレッドシートビューで行う必要があります。しかし、すべてではないかもしれません。定義された普及した使用法の兆候を拾うと、そのために特別に構築できます(別のビュー、ダッシュボードページ、またはパンチアウト)。
四分円Aの宝石を四分円Cの混乱の中で見つける方法は?
どのようにして原石を見つけますか?
しかし、このようなシステムでは、クアドラントAソリューションを設計できるきちんとしたユースケースのセットまですべてを最終的に削減できると考えるのは、しばしば Taylorist pipe-dream です。
完全で明確な最終目標に向けて構築できない場合でも、ユーザーのジャーニーの改善に集中することで、大きな飛躍を遂げることができるでしょうか?
アクセスとアフォーダンスに焦点を当てる
したがって、ユーザーが何をしようとしているのか正確にはわかりませんが、ユーザーがデータにアクセスして操作する能力を向上させることができます。例えば:
マイクロツーリングに焦点を当てる
私たちはあなたが達成しようとしていることの全体像を知りませんが、パズルの一部を提供することができます。例えば:
データに値を追加することに焦点を当てます
人々がどのようにデータを Information-Knowledge-Wisdom に変換しているかは正確にはわかりませんが、データに追加できる値を継続的に改善する機会を探す必要があります。
例えば今日は生の生産数をお伝えしますが、明日は昨日/先週/先月からの変化に加えて変化をお伝えします。
したがって、人々はおそらく知識と知恵を引き出すことにまだ支配しているでしょうが、おそらくデータだけでなく情報を提示することでより上手くなれるでしょう。
あなたが答えを選んだことは知っていますが、私は非常に重要だと思うもの、つまりデータと情報の両方を取り上げたかったのです。私は最近これについて多くのことを考えてきたので、それは私の頭の前にあります。
データを表示しています。それは生のものであり、すべて非常に重要に思われますが、実際にはほとんどの人はデータを見る必要はありません。彼らが本当に必要としているのは、データに基づいて生成された情報です。コメントの1つで、ユーザーが「行にカーソルを合わせるとグラフを表示する」ことができるとおっしゃっていましたが、私はそれは逆だと思います。生データはオンデマンドで利用できる必要がありますが、デフォルトのビューではデータを分析し、結果の情報を表示する必要があります。
これはグラフが正しい選択だと言っているわけではありませんが、すべてのデータの主要な調査結果を代替表示する方が賢明な方法かもしれません。これは概念的には開発が難しくなりますが、最終製品は単に物事を検索する場所というよりは、便利なツールになります。ユーザーに尋ねる質問は、「この画面を見ているときに何が知りたいですか?」です。
画面を2つの部分に分割します。上半分には現在選択されているアイテムの詳細が表示され、下半分にはグリッドが表示され、利用可能なアイテムのページリストが表示されます。
タブコントロールは、ネストされた詳細/コレクションと呼ばれる詳細/コレクションビューを表示するために使用されます。これらは、外部キーの関係によって形成されます。
これが多少役立つことを願っています。
何かを刺激する可能性があると考えることができる1つの例は MLB.comの順位付けページ です。これは列が多すぎる表ですが、カスタマイズインターフェイスは即座に直感的です(私には-目的ではありません)技術者向け)。もちろん、列の最大数に対するMLBAMの恣意的な制限はおそらく望んでいないでしょう。
列の非表示に関するUIの最大の問題は、通常、非表示の列を元に戻すことです。たとえば、最近修正しない限り、たとえば、Excelで「再表示」を見つけるのは非常に困難です。
マスター/ディテールパターンをまだ提案していないことに少し驚いています。
一部の自社製品でもまったく同じ問題があります。1つの画面に収まらないほど多くの列がありますが、すべての情報がいくつかのユースケースに関連しています。
実際、私たちはあなた(上司)が除外したことを行うことに決めました:使用可能なケースの90%をカバーするために、デフォルトの表示列数を注意深く選択された属性5-5に削減しました。ただし、選択した行については、画面の右側のプロパティペインにすべての属性を表示します。ユーザーは、テーブルのできるだけ多くの行の最も重要な属性と、プロパティペインで選択した行のできるだけ多くの属性を確認できます。
ユーザーは、Windowsエクスプローラーの場合と同様に、他の列が私たちが選択した列よりも重要であると判断した場合や、プロパティペインを閉じて水平スクロールに頼った場合でも、テーブルから列を追加/削除することができます。彼女が本当に望んでいるもの。
プロパティペインの導入には、いくつかの気の利いた利点があります。
ラベルがドイツ語であることを許してください、しかしそれは全体の考えを得るはずです:
確かにハードウェアですが、商品のマルチモニタセットアップをお勧めします。幅広のテーブルやスプレッドシートで作業する場合、1つの24インチと比較して2つの19インチは劇的です。
さらに、重要な列(さらに分析を実行する必要があること、および場合によってはさらにアクションが必要であることをユーザーに示す列)をファジー化/正規化します。それらのあいまいな値でグループ化します。
もう1つのトリックは、「固定された」列を組み込んで、ユーザーが左または右にスクロールすると、固定された列がスクロール方向に基づいて画面の反対側に移動するようにすることです。
これについて上司と話し合う必要があると思います。すべての列とすべての行を表示すると、画面が乱雑になり、使用できなくなります。まるで乗用車の駐車場にトラックを駐車するように要求するようなものです。トラックや駐車場としてはうまくいきません。
自分自身とクライアントに尋ねるべきことは、ユーザーがすべてのデータを評価するために実行するステップです。最初にどの決定に基づいて決定し、次に何をチェックする必要があるか。それから、ユーザーがアプリケーションをどのように使用するかを理解し始めることができます。データを合理化して、管理しやすいレポートに表示できることがわかったら、.
私があなたの例で見るものから、全体的なデータを1つのビューで捉えることはできません。これは、ユーザーが2つの比較スペース間を行き来する必要があることを意味します。データが誤って読み取られるため、これは誤った決定をもたらす可能性があります。あなたが働いているビジネスのエラーは多額の費用がかかる可能性があります。より明確な画像を描くことでこれらのエラーを回避する必要があることをおそらく理解するだろうとクライアントに伝えることによって。
オプション:データ行を比較する場合、概要で最小限のデータを提案し、比較するカップルを選択すると、すべてのデータが適切に比較されたレポート(グラフ、数値、またはその他の視覚的補助)が作成されます。
代替オプション:上司のところに行って、彼のやり方でやるが、代わりのデザインをテーブルに置くと言います。時が来て、怒っているユーザーの大群が彼の目の前にいるとき、あなたは彼に別のデザインを作成したことを思い出させます。テクノロジーの政治は私のお気に入りではありません。しかし、それは時々必要なだけです!
おそらく、低い値の列(つまり、範囲[0..100]の値)をサブ列にグループ化できます。
の代わりに:
| Description | Count | Mean | Sum | Foo | Bar |
| Lorem ipsum | 1 | 2 | 3 | $ 1.00 | +0.2% |
提示:
| Description | Totals | Foo | Bar |
| | C / M / S | | |
| Lorem ipsum | 1 : 2 : 3 | $ 1.00 | +0.2% |
ここで、「:」はサブ列区切り文字で、C/M/Sは「カウント/平均/合計」(またはそこに表示されるすべてのデータ)を意味します。
データの絶対値が重要でない場合は、パーセンテージを積み上げ棒アイコンに変換できます。
列が別の列の割合である場合は、ターゲット列の背景を進行状況バーとして使用できます。実際、さまざまなデータドメインに応じて、セルの背景はセルに含まれる値を示し、通貨の接頭辞や余分なフォーマットを削除できます。
これが許可されているかどうかはわかりませんが、テーブルを使用しないのはどうですか?アイテムのリストを表示します。これは映画リストの例です。
* Movie title 1 *
Cast: actor a, actor b
Year: 2000 Runtime: 100 min Rating: 75%
* Movie title 2 *
...
ここにいくつかのアイデアがあります:
本当の質問はこれです:ユーザーが実際にどのデータを見る必要があるのですか?すべての行がデータのすべての列に入力されますか?鉱山はそうではありませんが、「スパース」マトリックスの種類のディスプレイとはかけ離れています。
1)魚眼ビュー
魚眼ビューについて考えたことはありますか?良いjavascriptソリューションを見つけるのは難しいですが、Javaアプレットを見つけるのは簡単です。
2)ホバーのヒント
簡潔な数値データを(範囲に基づいてさまざまな精度で)表示し、ホバー時に列のタイトルを表示しますか?関心のあるセルを強調表示し、ユーザーがそれらにカーソルを合わせて、それらがどの列であるかを確認する必要がある場合があります。
3)グループ化
同様の列が設定されたアイテムをグループにグループ化し、同様のアイテムでいくつかのテーブルを作成して、各テーブルから未設定の列を除外します。実際にそれらをグループ化する方法を先験的に知る必要はありません...各行にどの列が入力されるかを示すビットマップまたはハッシュを作成してから、行を共通の列セットにソート/クラスター化できます。別のアルゴリズムは、入力された列の数で単純にソートすることです。私はこれが非常にうまく機能することを発見し、グループ化を簡単に特定するのに役立ち、軽微な不整合をかなりうまく公開しています。
原則として、ユーザーのあらゆる欲望に気まぐれであってはなりません。大量のデータを適切かつ効率的に要約する方法で彼らのニーズを再考することは、専門家としてのあなたの仕事です。コンピュータは一連のデータを収集することに優れており、人間はそのデータを解釈することに長けています。できる限り、フォーマットされていない、要約されていないテーブルを画面にダンプします。
Googleでの検索を検討してください。ほとんどの検索では、通常、何百万ものヒットが返されます。しかし、最初のページを超えてナビゲートすることはありますか?ほとんどの人がそうである場合は、ほとんどありません。最初のページで回答が見つからない場合はどうしますか?最初のページにターゲットが表示されるまで、質問を言い換えて結果を絞り込みます。
アプリについて考えながら、Google検索の演習を行います。まれに、フィルター処理されていない適切なレコードのダンプをリストするだけです。
別の例-iPhoneの連絡先または音楽トラックを検討してください。右側の文字スクローラーをすぐにタップして、アルファベット順のセクションにジャンプしなかったとしたら、私は非常に驚きます。レコードの完全で完全なリストは、何よりもキャンディー(電話のスクロール機能を自慢する)のためのものです。
これで、これらすべてを水平方向に表示するデータ(列数)にも適用できます。そのデータを要約する創造的で直感的な方法を理解します。これを釘付けにすることの追加の利点は、これらがアプリを快適に使用できるようにすることです。これらの思慮深い調整と磨きを十分に加えると、アプリは「楽しく」使用することができます。
少なくともあなたは問題について考えています。これは、ほとんどの開発者が行くよりも遠いです。幸運を!
この質問は非常に古いにもかかわらず、私はここに私の2セントを投入しなければなりません。
ユーザーが意思決定を行うために必要なすべてのデータがある場合、明らかに、そのデータに基づいた意思決定プロセスがあります。生データに基づいてこれらの決定を行う責任をユーザーに負わせるのではなく、おそらくユーザーがより役立つ方法でその生データを処理する方法を理解することに代わりにおそらく焦点を当てるべきです。
たとえば、列A、B、C、D、Eがあり、BとCがD未満でEより大きいときにAを更新する必要がある場合、ユーザーにこれらの列をすべて表示する代わりに、その条件が現在真であるかどうかを表示する単一の列。
ユーザーをデータで圧倒する代わりに、そのデータを使用するビジネスロジックのレイヤーを確立する必要があります。 GUIの複雑さを大幅に簡素化するだけでなく、ユーザーは、生活を楽にするためにあなたに信じられないほど感謝するでしょう。人間よりコンピュータの方が簡単なタスクを常に特定し、それらのタスクの責任をコンピュータに任せる必要があります。
ユーザーがすべての列を表示する必要がある理由、または上司がすべての列を表示する必要があると考える理由がわからないので、いくつかの列ソリューションを削除します。こちらが私のものです。ユーザーが必要な列の設定を選択、注文、保存する方法を用意します。 5列のみを表示したいユーザーがかなりいると思います。本当の問題は、彼ら全員が同じものを見たくないということです。最終的には、列が非常に多くなり、水平スクロールバーが表示されます。私の推測では、これらの「スプレッドシート中毒」は気にしないでしょう。彼らは自宅にいるように感じます。
最初に頭に浮かぶのは、サイズ変更可能な列です。すべての列が表示され、データは表形式でなければならないというので、列名は45度の角度にすることができるため、簡単に識別でき、占有するスペースも少なくなります。
表示する列を制御し、インテリジェントなデフォルトを使用するという点で動的にします。これの良い例は、Googleの External Keyword Tool です。ここでは、列を自由に追加/削除/ソートできます。動的な列を使用すると、ケーキを持ち、上司がそれを食べることができます。
グラフに関してアーウィンに同意します。スパークラインが適切な場合があります。
ここに、エドワード・タフテのサイトでのこの種の簡潔な議論があります:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00002r&topic_id=1
25列以上の問題が発生しました。すべてのテキストデータなので、数字はありません。基本的にそれは多くの分野への道との巨大な在庫です。
現在、上下の矢印キーは行を選択しますが、左と右のキーは列を非表示または非表示にしないため、テーブル全体が左に移動します。
本当に素晴らしい検索と相まって、このソリューションは悪くありません。
もちろん、デフォルトのビューは完全にユーザーがカスタマイズできます。
実際、テーブルに表示されるデータが多すぎるという問題にも直面しました。ユーザーは、水平スクロールではなく、直接より多くの列を表示する必要があります。
私が知っている可能な解決策と私たちが私たちのデザインでも試したこと:
誰かがもっと特別な解決策やアイデアを持っていますか?