LuckyTemplates ナビゲーション ボタン

多くの場合、アイコンはLuckyTemplates レポートを作成するときにLuckyTemplates ナビゲーション ボタンと一緒に使用されます。ホーム アイコンが表示されている場合は、それをクリックするとランディング ページに戻ります。

情報アイコンは、特定のグラフまたはページに関する詳細なコンテキストを提供します。LinkedIn または Twitter のアイコンからデザイナーのアカウントに移動します。

識別しやすいアイコンを使用したいと考えていますが、それだけでは十分ではないため、常にユーザーに追加のコンテキストを提供する必要があります。

データストーリーの観点から見ると、ユーザーエクスペリエンスをコントロールする必要があります。

デザイナーとして、私たちはユーザーに何を表示するか、いつユーザーに表示するか、質問を予測し、明確なインタラクションとナビゲーションを提供し、追加のコンテキストを提供する責任があります。

変化を推進する、推奨事項を提供するなど、レポートには常に目的を持たなければなりません。特定のインタラクションを備えたアイコンや LuckyTemplates ナビゲーション ボタンを使用し、ユーザーがそれを見たり理解しなかったりすると、ストーリーは失われます。

エンド ユーザーには、特定の結論につながる分析の部分は表示されません。繰り返しになりますが、コンテキストは非常に重要です。単に画面に追加するためだけにアイコンを追加することは望ましくありません。

特定の目的で使用する必要があり、その目的がエンド ユーザーにとって明確でない場合は、必ずコンテキストを追加してください。

ホーム アイコンをボタンとして使用する場合は、そのアイコンをクリックしてランディング ページに戻るようにユーザーに伝えます。情報ボタンの場合は、カーソルを合わせるとダッシュボードの説明情報が表示されるようにユーザーに指示します。

Twitter または LinkedIn のアイコン ボタンを使用している場合は、この説明も追加します。ユーザーとの対話が必要な領域にはコンテキストを提供する必要があることに留意してください。

目次

• ナビゲーション ボタンを備えた LuckyTemplates レポート
• LuckyTemplates レポートでのツールチップの使用
• Web サイトに誘導された LuckyTemplates ナビゲーション ボタン
• KPI の横にアイコンを追加する
• バンドを KPI として追加する
• 結論

ナビゲーション ボタンを備えた LuckyTemplates レポート

それでは、LuckyTemplates の内部にジャンプして、実際の例をいくつか見てみましょう。

このレポートでは、ナビゲーション ボタンの近くにアイコンを配置しました。アイテムのスタイルとボタン間の近さの類似性の原則に従って、それらを関連付けました。

ページ上の位置、ネガティブ スペース、最初の項目の輪郭の色が注目を集めており、これらが LuckyTemplates ナビゲーション ボタンであることを示しています。

ボタンの内部または近くには、識別子として機能するラベルはありません。したがって、追加のコンテキストを配置すると、どのページに誘導されるかをユーザーが知るのに役立ちます。

LuckyTemplates レポートでのツールチップの使用

ボタンの上にマウスを置いたときにツールヒントに表示される情報は、レポートを作成するときに便利な機能です。

この機能を使用しない場合は、このオプションを忘れずに無効にしてください。これは、サービスで公開するときにレポートに洗練されていない外観を与えるためです。

ツールチップのアクティブ化と非アクティブ化を維持することがいかに簡単かを説明するために、ページに空のボタンを追加してみましょう。

「アクション」ボタンの下の「ツールチップなし」オプションはデフォルトではアクティブになっていません。

つまり、このボタンの上にマウスを置くと、「このレポートの前のページに移動するには、CTRL キーを押しながらここをクリックしてください」というメッセージが表示されますが、これは好ましくありません。

したがって、それを消すにはアクティブ化する必要があります。私のヒントは、ツールチップを使用している場合は有効にしておくということです。そうでない場合は、無効にしてください。

Web サイトに誘導された LuckyTemplates ナビゲーション ボタン

アイコンを使用するもう 1 つの方法は、ユーザーを特定のサイト ページに誘導することです。たとえば、会社のロゴをクリックすると、Web サイトに直接アクセスできます。

このレポートには、JIRA ロゴがあり、ツールチップがアクティブになったこの非表示のボタンもあります。見栄えを良くするために、無効にしてみましょう。

に移動します。

ただし、ほとんどのユーザーは、このインタラクションが存在することを知りません。さらに悪いことに、ホームボタンとしての機能を期待しているかもしれません。Web サイトでロゴをクリックすると、ランディング ページに移動するのが非常に一般的です。

ユーザーの感覚を忘れないようにしましょう。ユーザーは他の Web サイトからのこの種のナビゲーションに慣れている可能性があり、最良の方法は、「Web サイトに接続または移動しましょう」というツールチップを表示することです。

KPI の横にアイコンを追加する

別の例に移りましょう。 

近接性と類似性の原則に従って、KPI の隣にアイコンを使用し、ボタン間で同様のスタイルを維持することでボタンに関連付けることもできます。また、KPI のラベルはアイコンの識別子であるため、追加のコンテキストは必要ありません。

バンドを KPI として追加する

KPI はバンドとも呼ばれます。この場合、表示されているバンドの種類が、アクティビティを追跡するための優れた情報を提供する主な指標となります。平均納期、材料、PO、未注文のトン数、およびクライアントがあります。

しかし、その数字は良いのでしょうか、それとも悪いのでしょうか？そして、悪い場合は、特定の月の数字が悪いのか、それとも悪い動きがあるのか​​? トレンドは上昇傾向ですか、それとも下降傾向ですか? なぜこれを気にする必要があるのでしょうか?

このレポートを最初から見ていると、エンドユーザーとして、デザイナーが作りたかった情報やメッセージを自分で作業し、探索し、発見する必要があることに気づきました。

最初の KPI から 3 番目の KPI にマウスを移動しても、追加情報はありません。しかし、4 番目の KPI に関しては、納品された合計 POを示す非常に興味深い情報が見つかりました。

次に、[クライアント]に移動すると、顧客ごとのマージンが表示されます。これは非常に重要です。

また、総マージンの 80% がわずか 11 種類の素材から得られていることがわかります。この情報は素晴らしいですね。

このチュートリアルでは、ユーザーが左から右、上から下に Z パターンで画面をスキャンする方法を説明しました。

私の主な 2 つの KPI は画面の下部にあります。追加情報を使用して作成される KPI はこれら 2 つだけであるため、これは設計上の選択としては不適切です。

視聴者の立場になって考えてみましょう。自分でデータを探索したい場合、なぜわざわざ LuckyTemplates 開発者にレポートの作成を依頼する必要があるのでしょうか?

このレポートを作成したのは私なので、面白いです。これは、昨年 LuckyTemplates が主催したへの私の初期の投稿の 1 つです。

私は自分の初期の作品を批判しています。レポートを改善する過程で、私たちは皆間違いを犯し、そこから学びます。

KPI の横にアイコンを追加すると、プロフェッショナルな外観が得られるので便利ですが、KPI を作成するにはそれだけでは十分ではありません。KPI を作成するとき、最初に自問しなければならないのは、「だから何?」ということです。

参照を追加したり、昨年の予測の予算と比較したり、傾向を追加して過去の予算が良好か悪かったかを示すことができます。

本当に悪い場合は、エンド ユーザーからの質問を予想してください。たとえば、KPI の 1 つがユーザーの注意を引いた場合、詳細を掘り下げる必要があります。追加のコンテキストを追加したり、ドリルダウンして、ユーザーに詳細を提供したりできます。

ユーザーは詳細情報を入手したら、それに対して何をすべきでしょうか? アクション プランの推奨事項を提示するまでに、ユーザーがそこにいる必要があります。

LuckyTemplates カスタム アイコン | PBI 視覚化テクニック
LuckyTemplates レポート開発: テーマ、会社ロゴ、アイコン、背景の作成
カスタム LuckyTemplates アイコンをレポートに追加する方法

結論

これらの例を通して、ストーリーテリングにおけるナビゲーション ボタンに関する重要な教訓を理解していただければ幸いです。

KPI に関して適切な質問をし、ナビゲーション ボタンに追加のコンテキストを配置すると、ストーリーテリングがより強力になります。

デザイナーとして、私たちはレポートを作成しているだけではないことを常に念頭に置いてください。私たちは真の影響を与えています。

ではごきげんよう、