データドリブンのストーリーテリングと実際のデザイン

今日のブログ投稿では、データ駆動型のストーリーテリングと実際のデザインについて話したいと思います。私は、昨年 5 月に LuckyTemplates が主催し、最近終了したData Visualization 2022 Summit の講演者の 1 人でした。

受講した人々にとって十分に興味深いものを見つけたいと考えましたが、同時に、私のコースに登録しなかった人や LuckyTemplates のメンバーではない人にとって価値のあるものを作成したいと考えていました。

では、セッションで伝えたいストーリーはどうやって見つけたのでしょうか? そうですね、私は聴衆、講演者、そして主催者の視点からそれを見ていきました。このサミットについてもっと情報が得られたら本当に素晴らしいだろうと考えていました。他の発表者についてもっと知り、理解する方法を見つける必要がありました。

こうして私はこの物語を見つけました。聴衆、講演者、主催者の視点からサミットを紹介できるものを作りたいと思いました。

目次

• サミット前、サミット中、サミット後のビジネス ニーズ
  • サミット前に
  • サミット中
  • サミット終了後
• エコシステムの構築
• 当社のディメンション テーブル: ユーザー ID とスピーカー ID
• EDNA サミット用のアプリを構築する
• レイアウト階層: ナビゲーションを使いやすくする
• アプリケーションの 3 つの部分
• 設計のベストプラクティス
  • クリック数を制限する
  • ヤコブの法則とパレートの法則に従う
  • 吹き出しを使用する
  • アクティブな状態のデザインを表示する
  • ホバー状態を提供する
  • わかりやすいラベルを使用する
  • アクセシブルな色/ラベルを確保する
  • ユーザーの行動を予測する
  • ユーザビリティテストを実行する
• 結論

サミット前、サミット中、サミット後のビジネス ニーズ

あなたが講演者であれば、聴衆のフィードバックについて知りたいと考えています。あなたがイベントの主催者であれば、何人の人がサミットに来るのか、そして彼らにとってどのプレゼンテーションが最も価値があるのか​​を知りたいと思うでしょう。

フィードバックから得られる価値はたくさんあります。主催者が聴衆が何を求めているかを知れば知るほど、聴衆はサミットからより多くのものを得ることができます。私にとって、これは今日取り組んで発表するのに最適なテーマでした。

私は参加者のニーズと主催者のニーズを要約し、聴衆がサミットに必要とするさまざまな瞬間にも留意しました。

サミット前、サミット中、サミット後の3 つの異なる時点で使用されるアプリケーションやレポートがあることは、聴衆にとって非常に価値があると思いました。

サミット前に

サミットの前に、聴衆が講演者やセッションに関する情報を得ることが非常に重要です。それがいつ、誰によって提示されるのかを知る必要があります。また、講演者に関する詳細情報も知りたいと考えています。スケジュールも非常に重要です。セッションが現地時間でいつ行われるかを知りたいと考えています。

サミット中

次に、議題を準備して計画する必要があります。つまり、サミット中にすべてのセッションをチェックして、どのセッションに参加するかを確認することになります。

各セッションの直後にフィードバックを提供し、次のセッションへの推奨事項を提供する必要があります。LinkedIn または Twitter で講演者と接続することを選択することもできます。

サミット終了後

サミット終了後、サミット全体についての一般的なフィードバックを提供し、期待が満たされたかどうかを主催者に伝えます。そうでない場合は、なぜ会わなかったのかを知らせるとよいでしょう。将来のサミットのアイデアを提案することもできます。

主催者の観点から見ると、サミット後の一般的なフィードバックや将来のトピックへの推奨事項に関心があると思います。新しい講演者を特定し、サミットが参加者に与える影響を計算したいと考えています。

おそらく、チームで共有できるレポートを作成すると、レポートのデータに基づいて、終了したばかりのイベントよりも優れたイベントを開催する方法についてディスカッションできるようになります。

このニーズに応えるものをサミット中に作り出さなければなりません。必要なのは、モバイル上に何かを用意し、参加者がセッションへのリンクをすぐに見つけられるように、アクセスしやすいものを用意することです。

こうしたニーズを踏まえて、どうやってストーリーを作っていけばいいのでしょうか？ここで話しているのは、LuckyTemplates レポートや Power Apps レポートだけではありません。私たちは生態系について話しています。これらのエコシステムには、さまざまな瞬間にさまざまなニーズがありますが、関連性もあります。これが今日私が話したい物語です。

エコシステムの構築

まず、計画を立てる必要があります。私たちは何を作りたいのかを正確に知り、それを他のものに活用できるような方法で作成する必要があります。

したがって、先ほど説明したニーズに応えるためには、サミット参加者を支援し、参加者に発言権を与えるデータ エントリ ポイントとなるPower Apps アプリケーションを作成する必要があります。

当社のディメンション テーブル: ユーザー ID とスピーカー ID

このアプリケーションを基に、サミットのフィードバックデータを可視化するためのレポートを作成します。これは、LuckyTemplates レポートがアプリケーションによって作成されたデータに接続する必要があることを意味します。

ここで、デザイナーとして大きな影響を与えることができます。データが構造化され、LuckyTemplates でのレポートの作成が容易になる方法でアプリケーションを作成する必要があります。

途中から始めて、アプリによって生成されるデータについて考えます。簡単なデータ モデルを作成し、特定された特定のニーズに応えるアプリを作成する必要があります。私たちは 1 つのレポートを作成することについて話しているのではありません。私たちは完全なエコシステムについて話しています。

私は自分のアイデアを Excel ファイルに書き留め、アイデアを実践し始めました。Power Apps で使用する必要があるさまざまなタブとさまざまなテーブルを作成しました。

Before、During、Afterを使用してアプリケーションを作成するには、ユーザーの履歴が必要です。そこで、ユーザー IDのテーブルを作成し、ユーザー ID、ユーザー名、パスワード、年齢、国、LuckyTemplates エクスペリエンスのレベルから始めました。

もちろん、講演者、タイトル、トピック、曜日、時間、写真、YouTube リンク、LinkedIn アドレス、LuckyTemplates ID の情報を含む講演者 ID 用の別のテーブルも必要です。

正確な年齢はこのアプリケーションでは最も重要なことではなく、情報の機密性を保つため、人々に尋ねたくありませんでした。

代わりに、これらのセッションの参加者の年齢を把握するために、年齢範囲を尋ねました。

ユーザーIDとスピーカー ID は、後で LuckyTemplates 内で必要になるディメンションです。また、セッションに関する計画ページとフィードバックページを作成するために、ユーザー ID をスピーカー ID に関連付けるファクト テーブルも必要です。

このファイルの優れている点は、実際のデータがあることです。サミットの講演者全員を正しい順序で、適切なトピックと適切な説明で用意しました。

これは、このようなアプリケーションが LuckyTemplates でどのように見えるかのプロトタイプを示すことだけを目的としています。だからこそ、行けるところまで行きたいと思ったんです。

ここにはPlanning があります。これは LuckyTemplates のファクト テーブルであり、ここでリレーションシップを作成し、ユーザー ID とスピーカー ID に関する情報を取得できます。

次に、 Speaker Feedbackがあります。これは、ユーザー ID、スピーカー ID、セッションの評価、その人がセッションに与えるフィードバック、このセッションをライブで見ているかどうかに関係なく、ユーザーが表示している 2 番目のファクト テーブルです。彼らが見ているデータ。

これらは、大きなファクト テーブルを 1 つだけ用意することで、LuckyTemplates 内で簡単に管理できるものです。

ディメンションとファクト テーブルがあれば、LuckyTemplates のデータ モデルを想像するのは非常に簡単です。

フィードバック ページはサミットの一般的なフィードバックであり、ユーザー ID とスピーカー ID の間には関係がありません。

ここには、サミットの全体的な体験、サミットで気に入った点、改善点の提案、戻ってくるオプションなど、さまざまな情報が含まれています。

そして最後は国のタイムゾーンです。LuckyTemplates サミット ページにアクセスすると、ロサンゼルス、ニューヨーク、ロンドン、シドニー、オークランドでのセッション時間に関する情報が表示されます。

私はさらに一歩進んで、アプリケーションに接続して現地時間でのセッションの正確な時間を計算したいと考えました。

これは私が作成したかったアプリケーションの構造であり、LuckyTemplates および Power Apps レポート内で利用できます。

重複がないことも確認する必要があります。この時点では、データの品質が重要です。

データ ソースのデータ品質が低い場合は、後のビジュアライゼーションで問題が発生します。

EDNA サミット用のアプリを構築する

これがアプリケーション全体です。各ページの仕組みと動的に動作する様子を説明します。アプリに追加した興味深いデザインのヒントも紹介します。

私はウェルカムページから始めました。ご覧のとおり、LuckyTemplates と同じ構造、テーマ、色に従いました。

この仮画面は初めての体験です。このアプリケーションに接続すると、数秒間この状態になり、その後サインイン ページに変わります。

サインインするには、ユーザー名とパスワードを入力するか、アカウントを作成する必要があります。アカウントを作成してサインアップすると、この情報は Excel ファイル内のデータに追加されます。

サインアップしたら、アプリケーションのメイン部分に移動します。この部分は、すべてのセッションの講演者を含むギャラリーで構成されています。各セッションの日付、時間、時刻は現地時間で表示されます。名前とトピックも表示されます。

さらに詳しく知りたい場合は、セッションをクリックすると、タイトル、時間、日付、セッションの概要などの詳細情報が表示されます。これが興味深いと思われた場合は、「保存」をクリックしてこのセッションを後で使用するために保存できます。

When you go to the Planning page, you can see all the sessions that you have saved.

You can remove the session from here, or give a feedback. You can choose to give rating or write feedback. When you click on Submit, this information will be written on the data source, which in our case is our Excel file.

As you can see, the overall experience for the user is very nice. It creates value to the user, and at the same time, it also provides value to the organizers who will use this data inside LuckyTemplates.

It also generates general feedback for the summit. Here’s the page where you can tell your overall experience, favorite part, suggestions, et cetera.

Layout Hierarchy: Making Your Navigation Easy To Use

Creating applications on mobile is different than the ones that you create inside a LuckyTemplates report. It is different because you are not using them in the same way.

The layout inside the application is different because when using a computer or tablet, people have the tendency to scan the page from top left to right, and then follow a sort of Z pattern or H pattern. The first thing they will see is the top left and the last part is the bottom right.

It’s not the same for a phone application, as you can see from this image below. The green part is where the thumb will have an easy flow, the orange part has a bit of stretch, while the red part is the most difficult to reach.

You will create the layout of the application based on this. What is good about the application is that you have a lot of examples and based on those examples, you can create something similar.

Three Parts Of The Application

So basically you have three parts in the application. The primary part is the gallery that you can scroll with your thumb and select the information.

The secondary part is the tabs. These are the buttons you use to navigate throughout the application.

The tertiary part – which you will interact with the least – is the title of the summit, profile account, or search functionality.

When creating a phone application, there are some design best practices that can also be used in both LuckyTemplates and Power Apps. Once you have a good level of understanding in LuckyTemplates and Power Apps, you’ll find that good UX and UI are more important when you work on a small screen.

Design Best Practices

Limit the number of clicks

You need to limit the number of steps or the number of clicks on LuckyTemplates. Limit the number of information that you request, or ask for only the information that you need at the moment, when you need it.

You need to use the information that is already available so you can leverage the answers that the users gave you.

Last but not least, when you create applications (we are talking about data entry here), you need to check the information that was written.

Auto complete when it’s possible and make sure that the user doesn’t do extra clicks, so ensure that the information they entered is correct.

Follow Jakob’s Law and Pareto Law

Jakob’s Law says that users will prefer your app to work the same way that their other apps are working. Below is an example of the applications that are most used in the world: WhatsApp, Messenger, and Contacts.

We have a similar experience in the applications that I created. We have the gallery in the middle, the buttons on the bottom, and the search functionality or contacts on top.

パレートの法則では、結果の 80% は原因の 20% から生じると述べています。ユーザーにとって最も価値のある機能に力を注ぐ必要があるという意味で、UX と UI にも同じ原則が当てはまります。

アプリケーション内のすべての機能を作成する必要はありませんが、作成する必要がある機能は十分に実装され、十分にテストされている必要があります。

結局のところ、アプリケーションにあまり多くのオプションを追加することは望ましくありません。複雑になると使用されなくなるからです。

吹き出しを使用する

コールアウトを使用して、次に何をすべきかをユーザーに示します。たとえば、何かを購入したい場合、注意を引くために購入ボタンが別の色で表示されます。これは、実行する必要がある次のステップを示す指標です。

アクティブな状態のデザインを表示する

ナビゲーションに関しては、ユーザーが特定のページのどこにいるかを示す必要があります。アプリ内のどこにいるのかが分からなければ、ユーザー エクスペリエンスは良くありません。

ホバー状態を提供する

これはボタンに使用されます。ボタンの上にマウスを置くと、そのボタンがアクティブであることがわかります。ホバー効果は、クリック可能なものを確認し、何をクリックするかをユーザーに明確に知らせます。

わかりやすいラベルを使用する

ラベルを使用すると、デザインがよりアクセスしやすくなり、情報が具体的でユー​​ザーにとって実用的なものになります。使用する言葉は、ユーザーが何をしてほしいのかを理解できるように、ユーザーにとって明確である必要があります。

アクセシブルな色/ラベルを確保する

サイズ、コントラスト、部分の点でアクセスしやすい色とラベルを使用する必要があります。

ユーザーの行動を予測する

アプリでは、ユーザーの行動を予測する必要があります。すべてのクリックとユーザーのあらゆる質問を予測する必要があります。

ユーザビリティテストを実行する

実装したものをテストし、時間をかけて必要なすべてのテストを行う必要があります。場合によっては、アプリケーションを知らない他のユーザーを巻き込んで、アプリケーションがどのように使用されているかを調査することが必要になることがあります。

以上がアプリ設計におけるベスト プラクティスです。次に、アプリケーションに移動して、これらのベスト プラクティスが実際に動作していることを確認してみましょう。

今はアプリケーションを起動しているので、「Start」を押すだけです。最初のページの実行には数秒しかかかりません。これは2秒間のタイマーをオンにしているためです。

タイマーが 2 秒に達すると、別の画面に移動し、トランジションが作成されます。

サインインページが表示されています。

このアプリケーションに接続するためのユーザー名とパスワードを入力します。この時点で、バックグラウンドのアプリケーションはユーザー ID の情報を保持します。

この情報は既存のユーザー ID テーブルからすでに取得されていますが、新しいユーザーを追加するとどうなるでしょうか? ログイン ページに戻ってアカウントを作成して確認してみましょう。

ユーザー名として「Alex B」 、パスワードとして「test123」と入力してサインアップします。ユーザーIDが自動で作成されたことがわかります。

データ入力に関しては、あらゆる問題に注意を払う必要があります。これらの問題を予測し、これを回避するためのソリューションを作成するかどうかは、アプリ作成者の責任です。

アプリケーションに戻ると、すべてのセッション講演者のリストがあり、時間が現地時間で計算されていることがわかります。

Sam McKay のセッションに参加したいとします。リンクをクリックすると、彼の写真のすぐ下に「クリックしてビデオを開く」リンクがあることがわかります。

ユーザーがこのリンクをクリックすると、ファイルに挿入した YouTube ビデオにリダイレクトされます。

しかし、Mudassir Ali のプロフィールにアクセスすると、 [クリックしてビデオを開く]ボタンを操作できません。これは、表示可能な情報のみを表示する例です。

この場合、ムダシル アリのセッションのビデオがないため、クリックしてビデオを開くリンクは表示されません。

Sam McKay のセッションに参加したいと考えて、[保存]ボタンをクリックするとします。保存すると、ページに「保存しない」ボタンがあり、講演者の Sam McKay が強調表示されていることがわかります。

これは、ユーザーが Sam のセッションを選択したことを知りたいため、コンテキストを提供するためです。このセッションがライブ中であり、削除するオプションがあることがすぐにわかります。削除したい場合は、ここから削除できます。保存を取り消すために余分なクリックをする必要はありません。

もう 1 つの機能は、LinkedIn ボタンを介してスピーカーに接続する機能です。下のこのボタンをクリックすると、Sam McKay の LinkedIn アカウントに移動します。

リストからいくつかのセッションが保存されたので、「計画」に進みます。

Planningに進むと、舞台裏ですべての情報が一時コレクションに収集され、データ ソースに書き込まれます。

Excel ファイルに戻って [計画] タブに移動すると、これらすべての SpeakerID が表示されます。これは、すべてが期待どおりに機能していることを意味します。

Gustaw Dudek のセッションに参加できないとしましょう。この「削除」ボタンをクリックできます。私の Excel ファイルを見ると、Gustaw Dudek の情報が消えていることがわかります。

先ほども言いましたが、ナビゲーションに現在地が表示されている状態が良いです。下部のアイコンからよくわかるように、現在は計画ページにいます。

セッションに参加し、6 つ星中 4 つ星と評価したとします。この情報は事前に保存されるため、気が変わった場合は、後でその情報に戻って評価を変更できます。

プレゼンテーションをライブで見た後、フィードバックを提供し、絵文字も追加して、[送信]をクリックします。

Excel ファイルでスピーカー フィードバックを確認すると、この情報が HTML 形式でどのように表示されるかがわかります。

フィードバック ページでは、レポート デザイナーとして一部の回答を必須にすることもできますが、ここでは当てはまりません。

Excel ファイルにアクセスすると、[フィードバック] タブに書き込まれたすべての情報が表示されます。

データ ストーリーテリング: 思慮深い計画と作成プロセス

これらの手法と例を使用して LuckyTemplates レポートを作成する

結論

ボタンをホバー状態にし、クリック数を最小限に抑え、このセッション アプリに興味深い情報を入れました。できれば、さまざまなツールを使用したスト​​ーリーテリングと技術的な知識を通じて、これをさらに進めることができます。

エコシステムを作成して、さまざまな視聴者のニーズに取り組むことができます。Power Platform エコシステムから価値を引き出すには、LuckyTemplates、Power Apps、Power Automate の使用方法を知る必要があります。協力的な環境で仕事をし、非常に楽しい方法で自分のやっていることを改善することができます。

このアプリケーションは存在しないことに注意してください。それは私の頭の中にしか存在せず、単なるプロトタイプです。しかし、おそらく将来的には、LuckyTemplatesにこのタイプのアプリケーションが使用できるようになるかもしれません。

頑張ってください、
アレックス・バディウ