データ量の多いUXデザインを戦略的に計画する方法
公開: 2021-07-27ビッグデータは膨れ上がっています。 それでも、複雑なデータのニーズをシンプルでクリーンで便利なユーザーインターフェイスと調和させることは、今日のUXデザイナーにとっての試練です。 多くの場合、デザイン（メッセージを伝達するためのツール）はコミュニケーション（生データの高地に隠されたメッセージまたは意味）の邪魔になります。
情報を剥がすと、ユーザーインターフェイスが簡素化およびクリーンアップされます。 しかし、データ駆動型アプリケーションでは、データが少ないということは、多くの場合、実用的で有用性の低いダッシュボードを意味します。
ただし、可能なすべてのコンテキストデータを保持すると、機能しないアプリが生成されます。
では、どのようにして適切なバランスをとるのですか？
アプリケーションがデータをどのように提示するかは、UXデザイナーの出番である大きな役割を果たします。
この投稿では、アプリのダッシュボードやWebページなどにビッグデータ（ギガバイト単位で実行されるデータ）を適用する場合でも、UXデザイナーがシンプルで明確なデータ視覚化を開発するために使用できるヒントとコツを共有します。
ただし、ビッグデータアプリケーションを設計するための最適な言語は、今のところこの会話から除外します。
データ量の多いUX向けに設計する方法は次のとおりです。
- ユーザーペルソナを使用して、有用なデータ駆動型ダッシュボードを設計します
- ターゲットオーディエンスとクライアントのペルソナワークシート
- スタイルよりも使いやすさ：シンプル、明確、そして優雅さを保つ
- 素材とフラットなデザインを組み合わせる—フォームよりも機能
- 美学よりもアクセシビリティ
- 改善の余地を残す
クライアントが愛する素晴らしいビッグデータアプリケーションを設計する方法
おそらく、始めるのに最適な場所は、クライアントが誰であるかを尋ねることです。
たぶん、あなたはドロップデッドのゴージャスなダッシュボードをクランクアウトして、クライアントが「では、X、Y、Zはどこでできるのか」と尋ねるだけの時間にそれをクライアントに届けました。
痛い！ それは傷ついたに違いない。
1.ユーザーペルソナを使用して、有用なデータ駆動型ダッシュボードを設計します
人工知能と機械学習が向上し続ける限り、ほとんどの組織は、分類されていないデータを処理するために人間の介入を必要とします。
そして、最高のUXデザイナーは、データ駆動型アプリケーションを使用する人々の問題を解決するのに役立つ製品を作成します。
どうやってやっているの？
Uber and Advanced TechnologiesGroupのシニアデザインリーダーであるErikKlimczは、Mediumに関する実用的なヒントをいくつか共有しました。 彼は、UXデザイナーは、すべてのプロジェクトのユーザーまたはペルソナを最初に識別してから定義する必要があると示唆しています。
データ駆動型アプリケーションは組織内外の複数のペルソナによって使用される傾向があるため、すべてのニーズを満たすように情報アーキテクチャのワイヤフレームとタスクを整理できるように、それらのペルソナを識別する必要があります。
これにより、デザインはエンドユーザー、ターゲットオーディエンス、つまりメインクライアントにとって有用になります。
これがイラストです：
UXデザインプロジェクトのユーザーペルソナを作成する方法の基本を理解する必要がある場合、Cooperには役立つヒントがあります（ここでデザインペルソナのデータを調査および収集する方法を含む）。
ユーザー/ペルソナを理解すると、アプリケーションの機能をニーズに合わせてカスタマイズするのに役立ちます。これが最終的な目標です。
また、次のように、どのクライアントにどのタイプのデータ視覚化ツールを使用するかを決定できます。
- 誰がデータを処理しますか（ユーザーペルソナ）？ たとえば、顧客や社内のデータ分析者向けに設計されていますか？
- ユースケース：これらのユーザーは、次に行うためにデータを何が必要ですか？
例えば：
ユーザーの個人的なエントリに基づいて情報を入力するタイプのインフォグラフィックを設計できます。
この種のデータ駆動型アプリの設計は、ユーザーが情報を取得したとき、または情報を撤回してさらにアクションを実行する必要があるときに、情報をアップロードする必要がある、または自由にアップロードする必要がある状況で役立ちます。
1つの例は、CS担当者がクライアントの名前または番号を入力して、未解決の問題など、クライアントに関する詳細情報を収集できるカスタマーサービスです。
このタイプのインタラクティブなデータ視覚化ツールは、Mahfix for You vsJohnPaulsonで実際に動作しています。 それはあなたが数を入力することを可能にし、そしてそれはあなたの入力に基づいて情報を報告します。 なめらかです！
ターゲットオーディエンスとクライアント
ペルソナワークシート
この3ページのインタラクティブPDFは、視聴者を見つけ、コンテンツを監査し、ビジネスのゲームプランを作成するのに役立ちます。 レイアウトを購読してワークシートをダウンロードしてください！
ワークシートを無料でダウンロードしてください！
2.スタイルよりも使いやすさ：シンプル、明確、そして優雅さを保つ
あなたを魅了する魅力的なUXの設計に巻き込まれるのは簡単ですが、率直に言って、クライアントにとっては実用的ではありません。
使用可能にするには、インターフェースが明確である必要があります。 多作なUXデザイナーのJoshuaPorterの言葉を借りれば、「明確さは仕事の1番です」。
実際、Joshua Porterは、ユーザーインターフェイス設計の原則に関する豊富な投稿を書いています。これは、ビッグデータアプリケーションを設計するときにも当てはまります。
したがって、使いやすさを明確にするために、デザイナーはカスタムUXデザインを使用する必要がありますか、それとも折れ線グラフなどの実証済みの視覚化ツールのみを使用する必要がありますか？
それはクライアント/ユーザーのケースによって異なります。
インフォグラフィック（静的およびインタラクティブの両方）、色分けされたブロック、アニメーション、3D視覚化など、新しいカスタムデータ視覚化ツールが次々と登場します。
ただし、実際に必要なデータ表示ツールは4つだけです。
- 時間の経過とともに変化したデータなど、連続データを示す折れ線グラフ
- 要約情報を表示するためのテーブル
- 変数の分布を示し、量的データを間隔でプロットするためのヒストグラム
- 離散データの表示、変数の比較、およびカテゴリデータのプロットのための棒グラフ
それでも、使いやすさだけでなく、魅力的なデータ処理インターフェイスを作成することもできます。
これを行う1つの方法は次のとおりです。
さらに良いことに、データ量の多いインターフェイスの設計は、より簡単な方法で行うことができます。
テキストとグラフを組み合わせることは、データ駆動型UXの設計時に明確さを向上させるための最良の方法の1つです。 ユーザーはビジュアルを消費し、テキストを読んでわかりやすくすることができます。 ただし、このアプローチは、すべての状況で機能するとは限りません。特に、分類されていない大量のデータの場合はそうです。
3.素材とフラットなデザインを組み合わせる—フォームよりも機能
このデザインコンセプトは、一般的な信念に反して、鈍い2次元のデザインではなく、使いやすさとミニマリズムに関するものです。 しかし、フラットなデザインは退屈でも退屈でもありません。 明るい色、すっきりとしたエッジ、オープンスペースを活用できます。
モバイルアプリケーション、Webサイト、およびデスクトップブラウザには、フラットでマテリアルデザインを使用することを特にお勧めします。 デザインはミニマリストであり、（以前のデザインのように）大量の余分なデータを蓄えないため、読み込みが速く、エンゲージメントを高めるように設計されている場合、訪問者がページをより長く表示し続けるのに役立ちます。
これは、検索エンジンアルゴリズムがインターウェブ上で絶えずスキャンしている、モバイルフレンドリーで高速読み込み、およびバウンス率の低下（SEOとランキングのメリット）の恩恵を受ける可能性のあるデータ駆動型ウェブサイトまたはモバイルサイトに最適です。
4.美学に対するアクセシビリティ
それは、重いコンテキストデータを流動的で魅力的なものにするだけではありません（それは大いに役立ちますが）。 また、エンドユーザーが次のことを簡単に行えるようにするデータプレゼンテーションを設計する必要があります。
- どのデータが最も重要であるかを明確に把握する
- 提示されたデータの論理的な流れを理解する
- データの意味を理解する
- 次のステップを理解する
これらの要素のそれぞれを分解してみませんか？
ユーザーは、どのデータが最も重要であるかを知っている必要があります
重要なUX設計の原則の1つは、情報の階層（この場合は視覚的な階層）を観察して実装することです。
つまり、適切なメトリックを優先する設計です。
最も重要なデータを最初に整理、整理、優先順位付けし、後で追加のデータを追加する必要があります。 もちろん、優先順位はアプリケーションのユーザーによって異なります（上記で定義したペルソナから）。
これを行うと、ダッシュボードが整理されるだけでなく、ユーザーが自分にとって重要なことに集中できるようになり、わかりやすく、圧倒されることもなくなります。
ユーザーはデータの論理的な流れを理解できる必要があります
「シンプルさは、ユーザーがデータを特定の結果に結び付けるのを支援する上で主要な役割を果たします。 」
前のポイントで説明したのと同様に、データ全体の概要グリッドから始めます。
直感的なドロップダウンメニューを追加できます。このメニューをクリックすると、下にスライドして追加情報が表示され、特定のタスクまたはアクションアイテムが表示されます。 人々はこれを愛し、すでに人気を集めています。
フローを支援する2つの方法があります。
追加情報を非表示にする
クリック可能なリンクまたはロールオーバーを使用して、より多くの情報を表示できます。 また、スライドして表示するデータやズームインして表示するなどの機能は、追加情報を含めたり、重要なデータポイントを強調表示したりするための優れた方法です。 すべてシンプルで自然なジェスチャーを使用しています。
これにより、ユーザーは自分の仕事にとって重要であると認識しているリンクまたはロールオーバーをクリックして、重要性が低いと見なしているリンクまたはロールオーバーを残すことができます。
繰り返しになりますが、適切なUXデザインのペルソナ調査を行うことで、どのユーザーにとって何がいつ最も重要かを特定するのにどのように役立つかがわかります。
ホバーアニメーションを使用する
ホバーアニメーション効果を使用して、（一見）鈍いデータにさらに熱狂、エンゲージメント、および有用性を追加できます。
ホバーアニメーションは、データ駆動型アプリケーションの整理とクリーンアップを支援しながら、特定のタスクまたはアイテムに関する追加情報を提供するために特に実用的です。
それでも、アニメーションを使用して、有用で魅力的なデータ量の多いアプリケーションを提供する方法は他にもあります。
クリック可能なリンク、スライド、またはロールオーバーの背後に情報を隠すことについてのことは、あなたが物事のバックエンド側で最も多くの仕事をするということです。 したがって、最初からこれを念頭に置いてアーキテクチャワイヤフレームを設計する必要があることに注意してください。
ユーザーはデータの意味を理解できる必要があります
ダッシュボードでデータを整理して優先順位を付けたら、次のステップはデータを別々のページに分割することです。 情報を分類できる場合は、データバンドルごとに異なるページ/画面を割り当てるようにしてください。
これは、小規模および複雑なデータ量の多いアプリケーション設計プロジェクトの両方に適合しますが、時間がかかり、バックエンドでより多くの作業が必要になる可能性があります。
上記の「圧倒的な」テーマに沿って、これを行うことで、クライアント/ユーザーが圧倒されないように感じるだけでなく、次のページに進む前に1つのページの数値をより正確に把握し、データを一歩ずつ理解することができます。時間。
たとえば、ミッションコントロールUIは、クライアントが1つのページですべてのデータを取得するのに役立つ場合がありますが、特に画面サイズが異なる場合は、時間の経過とともに圧倒される可能性があります。
多くの場合、クライアントはこのタイプのダッシュボードを要求しますが、あなたはもっとよく知っている必要があります。
ミッションコントロールUIは洗練されているように見えるかもしれませんが、前に説明した1ページずつのアプローチほどスムーズで使いやすいものではありません。 前者は、展示されているデータの山に隠された意味を簡単に伝えるのに邪魔になるかもしれません。 そして、それは役に立ちません。
ユーザーは次のステップを理解できる必要があります
上記の手順を実行すると、ユーザーは生データのパターンを識別して関連付けることが容易になります。これは、データ量の多いアプリケーション向けに設計する際に目指すもう1つの重要なメリットです。 使用するデータ視覚化ツールがユーザーがビッグデータを理解するのに役立つ場合、それはあなたが素晴らしい仕事をしたことを知っているときです。
5.改善の余地を残す
最後になりましたが、デザインをアジャイルにしたいと思うでしょう。
時間が経ち、ユーザーがデザインを操作すると、フィードバックによって、アクションを実行し、全体を修正または再デザインするように促されます。 データを処理するための完璧な設計を作成する方法は1つではありません。そのため、設計をアジャイルに保つことで、継続的な改善や最初からの確実なパッチを作成できます。
重要なポイント
UXデザインの目的は、明確で実用的な方法でメッセージを伝えることです。 これは、データ量の多いアプリケーションを設計する場合に特に重要です。 この場合、優れた設計のビジネスは、アナリスト、マネージャー、またはエンドユーザーが情報に基づいた決定を下せるようにすることです。
また、ユーザーは生データを解釈して使用し、データとその表示方法を十分に理解していない場合、意思決定を通知することはできません。
データ量の多いUXプロジェクトの設計は、見た目ほど苛立たしいものであってはなりません。 上記のヒントとコツは、データ量の多いインターフェイスを設計する方法を理解するのに役立ちます。 覚えとけ：
- ユーザーペルソナを使用して、有用なデータ駆動型ダッシュボードを設計します
- ターゲットオーディエンスとクライアントのペルソナワークシート
- スタイルよりも使いやすさ：シンプル、明確、そして優雅さを保つ
- 素材とフラットなデザインを組み合わせる—フォームよりも機能
- 美学よりもアクセシビリティ
- 改善の余地を残す
すばらしいデータ視覚化UIを設計するために従うべき、共有したいヒントはありますか？
以下のコメントセクションであなたに。
ウェブデザインレポートのビジネス
今年は、1,000人の主要なフリーランサー、代理店、クリエイティブに、ウェブサイトを構築し、クライアントサービスを構築し、期限内に（全額！）支払いを受けるための最良の方法について質問しました。 そこから、数値を計算し、洞察を掘り下げ、美しいレポートをパッケージ化して、推測をやめ、ビジネスの拡大を開始できるようにしました。
今月から、Webデザインビジネスをまったく新しいレベルに引き上げましょう。 あなたのような他のデザインビジネスから洞察を得て、あなたのサービスに対して競争力のある課金を始めましょう！