Skip to main content

アプリケーションデザインの向上

学習の目的

この単元を完了すると、次のことができるようになります。

  • アプリケーションの外観の設計がなぜプロセスの最後なのか理解する。
  • アプリケーションの外観の要素を学習する。
  • The Motivator サンプルアプリケーションの外観の問題を確認し、そのいくつかを修正する。
  • 最終的に仕上がったアプリケーションを表示する。

第一印象こそ最後に

前に説明したように、優れた見た目のアプリケーションおよびダッシュボードの作成から始めることは簡単です。Analytics Studio は、探索の開発、洗練されたグラフの種類の選択、ダッシュボードウィジェットのサイズ変更や配置、フォントサイズや色の変更などのために、多くの便利な手段を提供します。

これまでに確認したように、優れた見た目のグラフは、適切なコンテキストで開発されない限り利用者の役に立ちません。コンテキストとは、どういうことでしょうか? それは、アプリケーションの目的と機能のアイデア、および練られた構造です。

The Motivator のそれらの点について判断しました。次は、どのように仕上げるのかについて考慮します。基礎となる要素の上のアプリケーションの外観を素敵な見た目にします。プロセスの最後に到達するまで着手しませんが、これはユーザーが最初に目にするアプリケーションの部分です。磨き上げて、手にかけたこれらの機能をすべて利用者に使用してもらえるようにしましょう。

視覚表示の作成

いよいよアプリケーションのデザインをしっかり考えるときです。自分のセンスで視覚表示を構築します。これにより、ユーザーのアプリケーションとの感情的な結びつきを高められます。ユーザーがすぐに使用したくなるように機能を美しくするために管理する要素は、次のとおりです。

  • 使用するサイズと図形: これらは機能の重要性を反映し、互いに調整されていますか? 領域を効果的に使用していますか?
  • 採用するグラフの種類: データを適切な方法で可視化していますか? 一貫性はありますか? 似たデータのグラフの種類は同様ですか (また、異なるデータの型に対しては異なるグラフの種類を使用していますか)?
  • 位置揃え、余白、および配置: 要素はきちんと使いやすく配置されていますか? それぞれの違いが明確で、異なる要素が区別できますか? 要素を隔てる余白は大きすぎませんか (または小さすぎませんか)?
  • 色: よい配色ですか? 色は適切にまとまっていますか? 目立たせるべき要素は効果的に色づけされていますか? 類似要素の配色に一貫性はありますか?
  • フォント: サイズや種類に一貫性はありますか? 同じレベルの情報は同じサイズや種類で表示されていますか?
  • ブランド: チームまたは企業のブランド要素がある場合、それに沿っていますか?

The Motivator のモチベーション向上

これらの要素を念頭に置き、モチベーションを高めるとはおそらく言えない、The Motivator のダッシュボードを考えてみましょう。明らかに適切でない外観の要素がいくつかあります (一部は以前気づいたとおり)。

  • 必要な活動の詳細度を確認できません。別のグラフの種類がおそらく必要です。
  • 個別の活動 (電話やメールなど) の棒グラフがなぜ非常に大きいのでしょうか? そこで占める面積をより効果的な手段に利用し、他の便利なメトリクス (平均またはベンチマーク、各活動種別の詳細など) の領域を確保できます。
  • 文字サイズに一貫性がない。左側のメトリクスのサイズがすべて異なります。法則性はありますか? もしくは、単純にばらついていますか? 断言はできません。
  • ダッシュボードの一部は互いに動作します。多くの数値を含む [所有者 氏名] はウィジェットの一部です。
  • 合計を示すセクションの色とサイズが合理的でありません。

アプリケーション改革ステップ 3: サイズおよび色の重要性

これらの問題の修正を開始する設計のフェーズです。前の改革ステップ完了時に、サマリーボックスの合計、期限切れおよび完了した活動が不適切なサイズと色で表示されていることに気づきました。Analytics Studio に戻って修正しましょう。

  1. ダッシュボードデザイナーで [My Motivator (私のモチベーション)] ダッシュボードを開きます。
  2. [Total Activities (活動総数)] メトリクスをセル 4 個の幅にサイズ調整します。
  3. [Overdue Activities (期限切れの活動)] メトリクスをセル 1 個分左にドラッグします。
  4. [Completed Activities (完了した活動)] メトリクスをセル 1 個分左に広げます。これでメトリクスウィジェットが同じサイズになりました。 

ダッシュボード最上部にある同じサイズのメトリクスのスクリーンショット。

ただし、色は統一されていません。

  1. [Total Activities (活動総数)] メトリクスをクリックします。
  2. 右側のウィジェットプロパティパネルの [ウィジェットスタイル] をクリックして展開します。
  3. [Background Color (背景色)] の下で現在の色をクリックして、ダークブルーを選択します。 

デフォルト色のパレットが表示されたウィジェット背景色ピッカー。

  1. ウィジェットテキストも暗い色であるため、視認性が低くなっています。簡単に修正できます。ウィジェットプロパティパネルの [Title (タイトル)] をクリックして展開します。[Title Color (タイトルの色)] を白に変更します。
  2. 次に [Number (数字)] を展開して、[Number Color (数字の色)] を白に変更します。改善されました。
  3. ステップ 5 ～ 9 を繰り返して、[Overdue Activities (期限切れの活動)] および [Completed Activities (完了した活動)] メトリクスの背景色とテキストの色を変更します。
  4. 更新したダッシュボードを保存して、プレビューを表示します。今度はこれらのメトリクスがしっかり目立っています。 

最上部のダークブルーのメトリクスを含むダッシュボードのスクリーンショット。

もう 1 つ改善できる点があります。これらのメトリクスを 1 つの要素として表示したいものの、少し関連性が低く見えます。ウィジェットをまとめて移動するために使用するコンテナウィジェットを覚えていますか? それがここで役立ちます。

  1. ダッシュボードを編集します。
  2. コンテナウィジェットを選択するには、いずれかのメトリクスの下のコンテナの端にカーソルを合わせて、カーソルが十字矢印に変化したときにクリックします。
  3. 右側のウィジェットプロパティパネルの [ウィジェットスタイル] をクリックして展開します。
  4. メトリクスと同じダークブルーに背景色を変更します。
  5. 更新したダッシュボードを保存して、プレビューを表示します。

これでメトリクスがストーリーのように表示されます。

同じ背景色を使用してコンテナ内で視覚的に統一された 3 つのメトリクスウィジェットが表示されている The Motivator ダッシュボード。

The Motivator 改革

いよいよです。アプリケーションの利用者、目的、および機能を判断しました。The Motivator がどのようにそれらの設計に合っていないかを理解しました。また、目的、構造、および外観というすべてのレベルでいくつかの修正を実施しました。

アプリケーションが設計の目標に近づいていることは明白です。ただし、それがまだまだ先であることもわかっています。一気にそこにたどり着くことはできません。少しずつ進めます。それは、この Trailhead モジュールの扱う範囲ではありません。設計の基本を紹介し、アイデアの表現に着手するためのいくつかの手法を説明しました。

Salesforce の設計チームが改革した The Motivator を見せることはできます。早速、Analytics Studio に戻り、[The Motivator 2] ダッシュボードを開きます。

The Motivator ダッシュボードの最終バージョン。

最終的な改善でどのようによくなったのか、すぐにわかります。

  • 目的の強化。すべての重要なランキング表が左側に含まれ、[Time Period (期間)] 条件、およびすべての種別の活動の詳細が含まれています。また、取引先の詳細も表示されています。
  • 構造の強化。サマリー KPI が移動し、最上部にあります。また、各チームメンバーの KPI が左上にあります。この場所は目立ち、情報が利用しやすいです。領域も適切に割り当てられています。各活動の合計を示す大きな棒グラフが表示されていた領域に、すべての活動に関する多くの詳細情報が表示されています。さらに、類似要素はまとめて、異なる要素は互いに別々に配置されています。
  • 外観の強化。美意識は大切です。ユーザーがわくわくするようなアプリケーションにしましょう。色が連動して機能しています。新しい配色により要素がわかりやすくなっています。文字サイズに一貫性があります。類似要素には同じサイズ、色、および配置が適用されています。すべてがプロフェッショナルに見えます。

すばらしいですね。少しごまかして、この最終段階のみを説明しました。しかし皆さんは、どのようにしてこの段階まで来るのかはわかっていると思います。また、このモジュールで参照したリソースを使用して、少し時間をかけて判断し、個々人で到達できると思います。

終わらないデザイナーのシステム管理者の業務

現時点ではこれでおそらく十分です。しかし、DTC のシステム管理者として、すぐに現状のままでは足りないことに気づくでしょう。ユーザーは機能強化を期待していますし、アプリケーションを使いやすくする方法は常に存在します。

たとえば、以前説明した Analytics Studio のページ機能は、コンテンツを複数のページに分割してダッシュボードを使用しやすくできます。ダッシュボード全体の動的な流れを作り、ストーリーを表現できます。The Motivator の各活動の独自のページを用意できます。また、各営業担当者の目標に対する進行状況、受注および逸注、合計収益など、役立つ詳細を追加できます。これは、活動が営業パフォーマンスにどのように貢献し、特定の種別の活動が他の種別よりも影響力が高いかを確認するために役立ちます。

ただし、今回は扱いません。設計の世界の先の予測できないジャーニーも終盤にさしかかりました。後は、以下の質問に解答し、念願のバッジを獲得しましょう。

リソース

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む