Life in Motion：モバイルデータの視覚化をアニメーション化するためのガイド

最近では、大量のデータの収集と生成を推進するテクノロジーにより、日常の意思決定に役立つ情報を比較的簡単に入手できます。 モバイルアプリは、心拍数やその他の生体認証データを利用して、健康と運動の目標を追跡します。 それらは、投資、個人的な支出、および予算に関するリアルタイムのデータを提供します。 彼らは、両親が新生児の摂食と睡眠のパターンを評価するのを助けることさえできます。

利用可能な膨大な量のデータを把握するには、デザイナーのニコラス・フェルトンが自分の個人データから作成した年次報告書を探すだけです。 あなたの指先で非常に多くの情報を持っているので、難しい部分はそれを理解することです。

これはアニメーションが役立つところです。 データをアニメーション化すると、特にモバイルデバイスの小さな画面で、データがより理解しやすく、魅力的で、便利になります。 アニメーションを使用すると、数字を消化しやすくなり、見落とされていた傾向、パターン、物語が明らかになります。 これらのビジュアルとのリアルタイムの双方向性は、エンゲージメントを促進し、ユーザーがデータをより深く探索できるようにします。

同時に、過度のアニメーションや誤ったアニメーションは、その目的を損ない、洞察を明らかにするのではなく、曖昧にする可能性があります。 モバイルデータの視覚化をアニメーション化する場合、設計者はモーションデザインの原則を使用し、一般的な落とし穴を回避する必要があります。

モバイルデータの視覚化をアニメーション化する利点

アニメーションは、データの視覚化に対する単なる装飾ではありません。 モーションには無数の利点があり、特定の結果を達成することを目的として適用する必要があります。

ユーザーが傾向や変化を認識できるようにすることは、データの視覚化でモーションを使用することの重要な利点です。 後期学者のハンス・ロスリングは、生涯と収入のデータをプロットして、数十年にわたる数十か国の健康と富の変化を示すアニメーションで知られています。 これは、時間の経過に伴う傾向を明らかにし、グローバルな開発に関する一般的な認識を打ち消す魅力的なアニメーションです。

調査によると、静的なグラフをアニメーション化すると、グラフィカルな認識が向上し、視聴者の関心が高まる可能性があります。 たとえば、チャートを一度に表示する代わりに、要素はさまざまな速度で入力して、多くの情報で視聴者を圧倒しないようにすることができます。 モーションは、「要素の視覚的な階層、軸の方向、データの表示方法を表示または強化するのに役立ちます」と、ロンドンを拠点とするToptalネットワークのUI/UXデザイナーであるTetianaDonska氏は述べています。

アニメーションは、デザイナーがモバイルデバイスの画面を効率的に使用するのにも役立ちます。 「データ視覚化の動きは、さまざまな状態間の遷移の認識を作成するのに役立ち、ユーザーエクスペリエンスを乱雑にすることなくより多くの情報を提供します」とDonska氏は言います。 ユーザーはタップ、ドラッグ、スクロール、ズームなどのジェスチャを通じてデータを探索できるため、リアルタイムの双方向性により、クリーンなインターフェイスをさらに維持できます。 たとえば、ユーザーは軸に沿って指をスライドさせてさまざまな値を表示したり、タップして数値を表示したりできます。

アニメーション化されたデータの視覚化にリアルタイムの更新を組み込むことで、ユーザーの関心をさらに高めることができます。 ナイジェリアを拠点とするToptalUI/UXデザイナーのOlajideAkinpelu氏は、目の前でデータが更新されるのを見ると、人間の認識に役立つと言います。 静的データを更新するユーザーは、変更を検出するのが難しくなります。 リアルタイムの動きは、他の方法では見逃す可能性のある洞察を特定するのに役立ちます。

もちろん、ユーザーの気を散らすことなくトランジションやモーションを自然に見せることは、口で言うほど簡単ではありません。

モバイル向けのアニメーションとデータの視覚化技術

データの視覚化は、従来のチャートやグラフで表される複雑なデータセットに限定されません。 ソーシャルアプリでユーザーの感情を集計する「いいね」ボタンでさえ、データを視覚化する方法です。

複雑さに関係なく、データの視覚化をアニメーション化するときに、共通の原則と手法のセットが機能します。 この記事で焦点を当てる4つの手法、つまり価値の変化。 イージング、オフセット、および遅延。 子育て; ズーム—UX環境での動きに、現実世界での動きの自然さを吹き込み、ユーザーの生来の期待と連続性と物語の感覚に適合させることを目指します。 結局のところ、目標は、ユーザーが抽象的なデータを理解できるようにすることであり、単にユーザーを引き付けたり喜ばせたりすることではありません。

価値の変化

アニメーションで値の変化を表示する場合、静的な数値を表示する代わりに、数値カウンターがティックアップするか、バーが上昇してから最終的な数値に到達します。 これは、進歩や成長、またはその欠如を伝えるための強力な方法になり得ます。 また、データが変更される可能性があることを意味し、場合によっては、値をアニメーション化することで対話性が示されます。

価値の変化の視覚化は、フィットネス、教育、金融アプリなど、モバイル環境全体に普及しています。 たとえば、語学学習アプリでは、テストの最終スコアに到達するまで、バーが段階的に上昇する場合があります。 価値観の変化は進歩を示し、ユーザーに達成感を与え、学習パスを継続するように促します。

グラフの線に値の変更を適用することは、時間の経過に伴う変化を示すもう1つの方法です。 たとえば、さまざまな国の国内総生産（GDP）を示す棒グラフでは、動きによって国民経済の相互の軌跡が明らかになります。 このようなビジュアルは、棒グラフレースと呼ばれます。

イージング、オフセット、および遅延

物理的な世界では、オブジェクトは時速0マイルから時速20マイルまで瞬時に移動することはできません。 ただし、デジタルの世界では、加速や減速なしで動きを作り出すことができます。 しかし、それはあなたがすべきだという意味ではありません。 人間の目には、このような動きは不自然に見えます。そのため、グラフィック要素に自然な出入り速度を与えることが有益です。これはイージングと呼ばれます。

さまざまなUI要素の導入を相殺し、それらの速度を遅らせることで、個別の変数が表示されていることをユーザーにさらに通知でき、それらの間の階層を確立するのに役立ちます。 たとえば、株取引アプリでは、ユーザーの株の値が最初に表示され、次に一般的なインデックスの値が表示される場合があります。 オフセットと遅延により、ユーザーは、一度に表示される場合よりも、数値とグラフを理解しやすくなります。

子育て

子育ては、UIコンポーネント間の関係を作成します。 親要素のプロパティ（位置、スケール、色など）が変更されると、子要素のプロパティも変更されます。 たとえば、折れ線グラフで、線上の点が親である場合、ユーザーがその点をドラッグすると、値（子オブジェクト）の変化を確認できます。

子育ては、双方向性を高め、階層を作成するための効果的な方法です。

ズーミング

ズームを使用すると、ユーザーはデータの鳥瞰図からより詳細なビューに簡単に移動できます。 これは、通常デスクトップで表示される可能性のある大規模なデータセットを提示する場合に役立つ手法です。 たとえば、株式追跡アプリは、特定の株式の価格の週次ビューをロードし、ユーザーがズームインまたはズームアウトして日次または年次データを表示できるようにします。

データ視覚化の最も一般的な形式の1つはマップです。これは、フィットネス、自転車シェア、ライドヘイリングアプリで広く使用されています。 モバイル画面の範囲が単一のビジュアルで表示できるものを大幅に削減するため、ズームはこのコンテキストでは重要なツールです。

避けるべきモーションデザインの落とし穴

現代のデータ視覚化に関する本を文字通り書いたとされているEdwardTufteは、「何よりも、データを表示する」という単純な格言を持っていました。

情報の伝達に焦点を合わせます。 色、形、動きなどの属性は、データの理解を深めるためにのみ使用する必要があります。 無関係な視覚要素、またはタフテが言及した「チャートジャンク」は、この目的を損ないます。

画面ユーザーが気を散らす傾向があるモバイルでは、データ視覚化の可動部分が多すぎると圧倒される可能性があります。

「モバイルを使用すると、焦点を合わせる必要のある小さなフォームファクタがすでにあります」と、2019年にToptalのネットワークに参加したベテランデザイナーのDarrellEstabrook氏は言います。

Estabrook氏は、次のように付け加えています。「すべてのデータの視覚化について、ユーザーが次の決定を下せるように、ユーザーにどのような情報を提供しているかを尋ねる必要があります。 その[情報]を彼らに提供するためにあなたは何をする必要がありますか？」

次の落とし穴を回避することで、焦点を絞った効果的なモバイルデータの視覚化を設計できます。

あまり価値のないリソースを大量に消費するビジュアル

ビジュアルでのモーションのレンダリングは、バックエンドでリソースを大量に消費する可能性があり、フロントエンドでのパフォーマンスとユーザーエクスペリエンスに悪影響を与える可能性があります。 大規模なデータセットまたは大規模なコーディングを必要とするデータは、このリスクを高めます。 そのようなビジュアルの構築にリソースを投入する前に、設計チームとクライアントは、望ましい結果を明確にする必要があります。そして、それは努力する価値があるでしょう。

派手なまたは余分なアニメーション

アニメーションデータの視覚化は、アプリケーションの目的をサポートする必要があります。 言語学習アプリはモーションを使用してユーザーの進捗状況を強調する場合がありますが、投資アプリは実用的なデータを微妙に強調する場合があります。 ただし、アプリの性質に関係なく、ほとんどの場合、デザイナーは紙吹雪や花火の落下などの派手なアニメーションを避ける必要があります。 ゲーミフィケーションのリスクがあり、アプリとの不健康なエンゲージメントにつながる可能性があるだけでなく、データが実際に伝える内容を不明瞭にしたり誇張したりする可能性があります。

過度にインタラクティブなビジュアル

データの操作にはある程度の精度が必要であり、ユーザーはジェスチャーを正常に実行するためにスマートフォン画面の適切な部分（7〜10 mmが一般的にベストプラクティスと見なされます）を必要とします。 双方向性が多すぎると、面倒でイライラする可能性があります。 一度に1つのアクションに優先順位を付けることは有益です。

一貫性のないスタイル

データの視覚化は、アプリケーションの全体的なスタイルと機能と一致する必要があります。これは、Appleがヒューマンインターフェイスガイドラインで美的整合性と呼んでいるものです。

ナイジェリアを拠点とするUX/UIデザイナーのAkinpeluによると、「使用するトランジションの種類、アニメーションの種類、色のブレンド」でスタイルの一貫性を維持することで、ユーザーはデータセットをナビゲートできます。

急増するデータに対応する

データは、仕事や学校から健康や金融に至るまで、私たちの生活の固定具になっています。 ますます洗練されたスマートフォンと5G接続の普及により、データの量とそれを適用する可能性も確実に増大します。

アニメーションは、人々がこのすべての情報を理解するのに役立つ重要なツールになる可能性があります。 モーションを使用すると、ユーザーは主要な指標、傾向、関係を簡単に理解できます。 ただし、他のUX機能と同様に、アニメーションは使いすぎたり誤用されたりする可能性があり、最終的にはデータの理解が難しくなる可能性があります。 モーションデザインの原則と手法を使用することで、デザイナーは魅力的で洞察に満ちたアニメーションのモバイルデータ視覚化を作成できます。

ToptalDesignブログでさらに読む

• 説得力と動き：モーションデザインの原則へのガイド
• モーションデザイン業界の拡大する影響
• これらのモバイルアプリ設計のベストプラクティスでユーザーを喜ばせる