データを多用するUXデザインを戦略的に計画する方法

ビッグデータは膨らんでいます。 しかし、複雑なデータのニーズをシンプルでクリーンで便利なユーザー インターフェイスと調和させることは、今日の UX デザイナーにとって試練です。 多くの場合、デザイン (メッセージを伝えるためのツール) はコミュニケーション (生データの高地に隠されているメッセージまたは意味) の邪魔になります。

情報を剥がすと、ユーザー インターフェイスが簡素化され、クリーンアップされます。 しかし、データ駆動型のアプリケーションでは、データが少ないとダッシュボードの実用性や有用性が低下することがよくあります。

ただし、できる限りすべてのコンテキスト データを保持すると、アプリが機能しなくなります。

では、どのように適切なバランスをとっていますか？

アプリケーションがデータをどのように表示するかは、UX デザイナーの出番となる大きな役割を果たします。

この投稿では、アプリのダッシュボードや Web ページなどにビッグデータ (ギガバイト単位のデータ) を適用する場合でも、UX デザイナーがシンプルで明確なデータの視覚化を開発するために使用できるヒントとコツを共有します。

ただし、ビッグ データ アプリケーションを設計するための最適な言語については、ここでは触れません。

データを多用する UX を設計する方法は次のとおりです。

クライアントに愛される素晴らしいビッグデータ アプリケーションを設計する方法

おそらく、開始するのに最適な場所は、クライアントが誰であるかを尋ねることです。

もしかしたら、すぐに使える豪華なダッシュボードを作成し、それを時間通りにクライアントに配信して、クライアントから「X、Y、Z はどこでできるの?」と尋ねられたかもしれません。

痛い！ それは傷ついたに違いない。

1. ユーザー ペルソナを採用して、有用なデータ駆動型ダッシュボードを設計する

人工知能と機械学習が改善し続ける限り、ほとんどの組織は未分類のデータを処理するために人間の介入を必要とします。

また、最高の UX デザイナーは、データ駆動型アプリケーションを使用する人々の問題を解決するのに役立つ製品を作成します。

どうやってやっているの？

Uber および Advanced Technologies Group のシニア デザイン リーダーである Erik Klimcz 氏は、Medium でいくつかの実用的なヒントを共有しました。 彼は、UX デザイナーは最初にすべてのプロジェクトのユーザーまたはペルソナを特定し、次に定義する必要があると示唆しています。

データ駆動型アプリケーションは、組織内外の複数のペルソナによって使用される傾向があるため、それらのペルソナを特定して、情報アーキテクチャのワイヤーフレームとタスクを編成して全員のニーズを満たすことができるようにする必要があります。

そうすることで、エンド ユーザー、ターゲット ユーザー、つまりメイン クライアントにとって役立つデザインになります。

以下に図を示します。

ユーザー/ペルソナを理解することは、最終的な目標であるニーズに合わせてアプリケーションの機能をカスタマイズするのに役立ちます。

また、次のような重要な質問に答えることで、どのクライアントにどのタイプのデータ視覚化ツールを使用するかを決定できます。

• 誰がデータを扱うか (ユーザー ペルソナ)? たとえば、顧客や社内のデータ分析者向けに設計されていますか?
• これらのユーザーは、次に何をするためにデータを必要としていますか?

例えば：

ユーザーの個人的なエントリに基づいて情報を入力するタイプのインフォグラフィックをデザインできます。

この種のデータ駆動型アプリの設計は、ユーザーが情報を取得したときに、またはさらにアクションを実行するために情報を撤回する必要があるときに、情報をアップロードする必要がある、または自由にアップロードできる状況で役立ちます。

1 つの例は、CS 担当者がクライアントの名前または番号を入力して、クライアントに関する詳細情報を収集できるカスタマー サービスです。

このタイプのインタラクティブなデータ視覚化ツールは、Mahfix for You と John Paulson で実際に使用されています。 数値を入力すると、入力に基づいて情報が返されます。 かなり滑らかです！

2. スタイルよりも使いやすさ: シンプル、クリア、優雅さを保つ

あなたを夢中にさせる魅力的な UX のデザインに夢中になりがちですが、率直に言って、クライアントにとっては非現実的です。

使用できるようにするには、インターフェースが明確でなければなりません。 多作な UX デザイナー、ジョシュア・ポーターの言葉を借りれば、「明快さが一番の仕事」です。

実際、Joshua Porter は、ユーザー インターフェイス設計の原則に関する有益な記事を書いています。これは、ビッグ データ アプリケーションの設計にも当てはまります。

ユーザビリティを明確にするために、デザイナーはカスタム UX デザインを使用するべきか、それとも折れ線グラフなどの実証済みの視覚化ツールのみを使用するべきか?

それは、クライアント/ユーザーのケースによって異なります。

インフォグラフィックス (静的およびインタラクティブ)、色分けされたブロック、アニメーション、3D ビジュアライゼーションなど、新しいカスタム データ ビジュアライゼーション ツールが続々と登場しています。

ただし、実際に必要なデータ プレゼンテーション ツールは 4 つだけです。

• 何かが時間の経過とともにどのように変化したかなど、連続的なデータを示すための折れ線グラフ
• 要約情報を表示するための表
• 変数の分布を示し、定量的データを間隔でプロットするためのヒストグラム
• 離散データの表示、変数の比較、およびカテゴリ データのプロットのための棒グラフ

それでも、使いやすさだけでなく、魅力的なデータ処理インターフェースを作成することもできます。

これを行う1つの方法は次のとおりです。

さらに良いことに、データの多いインターフェイスの設計は、より簡単な方向に進む可能性があります。

テキストとグラフを組み合わせることは、データ駆動型の UX をデザインする際に明確さを改善するための最良の方法の 1 つです。 ユーザーはビジュアルを消費し、テキストを読んで明確にすることができます。 しかし、このアプローチはすべての状況でうまくいくとは限りません。特に、膨大な量の分類されていないデータの場合はそうです。

3. 素材とフラットなデザインを組み合わせる — 形よりも機能

このデザイン コンセプトは、一般的な考えに反して、退屈な 2 次元のデザインではなく、使いやすさとミニマリズムに関するものです。 しかし、フラットなデザインは退屈でも退屈でもありません。 明るい色、すっきりとしたエッジ、オープン スペースを利用できます。

フラットおよびマテリアル デザインの使用は、モバイル アプリケーション、Web サイト、およびデスクトップ ブラウザーに特に推奨されます。 デザインはミニマリストであり、(以前のデザインのように) 大量の余分なデータをため込んでいないため、読み込みが速く、エンゲージメントを高めるように設計されている場合、訪問者がページをより長く表示し続けるのに役立ちます.

これは、検索エンジンのアルゴリズムがインターウェブ上で常にスキャンしている、モバイル フレンドリーで読み込みが速く、直帰率が低い (SEO とランキングの利点) というメリットがあるデータ駆動型の Web サイトやモバイル サイトに最適です。

4. 美学よりアクセシビリティ

重くて文脈に応じたデータを流動的で魅力的なものにするだけではありません (ただし、それは大いに役立ちます)。 また、エンド ユーザーが次のことを簡単に行えるようにデータ プレゼンテーションを設計することも必要です。

• どのデータが最も重要かを明確に理解する
• 提示されたデータの論理的な流れを理解する
• データの意味を理解する
• 次に取るべきステップを理解する

これらの要素をそれぞれ分解してみましょう。

ユーザーは、どのデータが最も重要かを知る必要があります

重要な UX デザインの原則の 1 つは、情報の階層 (この場合は視覚的な階層) を観察して実装することです。

つまり、適切な指標を優先する設計です。

最初に最も重要なデータを整理、配置、および優先順位付けし、後で追加のデータを補足します。 もちろん、優先順位はアプリケーションのユーザーによって異なります (上で定義したペルソナから)。

これを行うと、ダッシュボードが整理されるだけでなく、ユーザーが自分にとって重要なことに集中しやすくなり、圧倒されにくくなります。

ユーザーは、データの論理的な流れを理解できる必要があります

シンプルさは、ユーザーがデータを特定の結果に結びつけるのに役立つ重要な役割を果たします。

前のポイントで説明したことと同様に、データ全体の概要グリッドから始めたいと考えています。

直感的なドロップダウン メニューを追加できます。ユーザーがクリックすると、下にスライドして追加情報が表示され、特定のタスクまたはアクション アイテムが表示されます。 人々はこれが大好きで、すでに人気を集めています。

フローを支援する 2 つの方法を次に示します。

追加情報を非表示

クリック可能なリンクまたはロールオーバーを使用して、詳細情報を表示できます。 また、スライドして表示するデータやズームインして表示するなどの機能は、追加情報を含めたり、重要なデータ ポイントを強調したりするのに最適な方法です。 すべてシンプルで自然なジェスチャーを使用しています。

これにより、ユーザーは自分の仕事にとって重要であると認識したリンクまたはロールオーバーをクリックし、重要度が低いと思われるリンクまたはロールオーバーを残すことができます。

ここでも、適切な UX デザイン ペルソナ調査を行うことで、どのユーザーにとっていつ最も重要なのかを特定するのにどのように役立つかがわかります。

ホバー アニメーションを使用する

ホバー アニメーション効果を使用して、(一見) 退屈なデータに、より魅力的で、魅力的で、有用性を加えることができます。

ホバー アニメーションは、データ駆動型アプリケーションの整理とクリーンアップを支援しながら、特定のタスクまたはアイテムに関する追加情報を提供するために特に実用的です。

それでも、アニメーションを使用して有用で魅力的なデータの多いアプリケーションを提供する方法は他にもあります。

クリック可能なリンク、スライド、またはロールオーバーの背後に情報を隠すということは、バックエンド側で最も多くの作業を行うということです。 そのため、最初からこれを念頭に置いてアーキテクチャ ワイヤフレームを設計する必要があることを覚えておいてください。

ユーザーはデータの意味を理解できる必要があります

ダッシュボードでデータを整理して優先順位を付けたら、次のステップはデータを個別のページに分割することです。 情報を分類できる場合は、データ バンドルごとに異なるページ/画面を割り当ててください。

これは、小規模で複雑なデータの多いアプリケーション設計プロジェクトの両方に適合しますが、時間がかかり、バックエンドでより多くの作業が必要になる可能性があります.

上記の「圧倒的」というテーマに沿って、これを行うことで、クライアント/ユーザーが圧倒されるのを軽減するだけでなく、次のページに進む前に 1 つのページの数字をよりよく理解し、データを 1 歩ずつ理解する可能性が高くなります。時間。

たとえば、ミッション コントロール UI は、クライアントがすべてのデータを 1 ページに収めるのに役立つかもしれませんが、時間が経つにつれて圧倒される可能性があります。

多くの場合、クライアントはこのタイプのダッシュボードを要求しますが、よく知っておく必要があります。

ミッション コントロールの UI は洗練されているように見えるかもしれませんが、前述の 1 ページずつのアプローチほどスムーズで使いやすいものではありません。 前者は、表示されるデータの山に隠されている意味を伝えるのを簡単に妨げてしまう可能性があります。 そして、それは役に立ちません。

ユーザーは、次に取るべきステップを理解できる必要があります

上記の手順に従うことで、ユーザーが生データのパターンを識別して関連付けることが容易になります。 使用するデータ ビジュアライゼーション ツールがユーザーがビッグ データを理解するのに役立つとき、それはあなたが素晴らしい仕事をしたことを知っているときです。

5. 改善の余地を残す

最後になりましたが、設計をアジャイルにする必要があります。

時が経ち、ユーザーがあなたのデザインと対話するにつれて、彼らのフィードバックはあなたに行動を促し、全体を修正または再設計するように促します。 データを処理するための完璧な設計を作成する方法は 1 つではありません。そのため、設計の機敏性を維持することで、継続的な改善を行ったり、安定したパッチから開始したりすることができます。

重要ポイント

UXデザインの目的は、明確で実用的な方法でメッセージを伝えることです。 これは、データ量の多いアプリケーションを設計する場合に特に重要です。 この場合、優れた設計のビジネスは、アナリスト、マネージャー、またはエンド ユーザーが十分な情報に基づいた決定を下せるようにすることです。

また、ユーザーは生データを解釈して使用し、それがどのように提示されているかをよく理解していなければ、判断を下すことができません。

データを多用する UX プロジェクトの設計は、見た目ほど腹立たしいものであってはなりません。 上記のヒントとコツは、データ量の多いインターフェイスを設計する方法を理解するのに役立ちます。

優れたデータ ビジュアライゼーション UI を設計するためのヒントはありますか?共有したいと思いますか?

以下のコメントセクションでお知らせください。