製品ガイド ツアーを作成する

このチュートリアルでは、デジタル アダプションの有人シナリオの一環として、製品のガイド ツアーを作成する方法を説明します。このシナリオは、ユーザーの生産性とエクスペリエンスの向上、および製品全般の最適化に重点を置いています。このチュートリアルでは特に、Wikipedia Web サイトのガイド ツアーを作成する方法を説明します。

以下の手順では、Wikipedia Web サイトのガイド ツアーを作成する方法の概要を説明します。

1. 吹き出しを表示するための別個のワークフローを作成します (show callout.xaml)。このワークフローでは、すべてのステップをループ処理して吹き出し内に表示する必要があります。ツアーのエクスペリエンスを正確なものにするために、フォーム コンポーネントに高度な論理を設定します。これにより、たとえばツアーの最初の手順を表示するときに [戻る] ボタンを無効化できます。
   
   

   

   
   
2. ユーザーが吹き出し内で実行する可能性があるアクションに対して複数のトリガー ワークフローを作成します。以下に例を示します。
   1. ユーザーが [次へ] をクリックしたとき (click next.xaml)。
   2. ユーザーが [Back] をクリックしたとき (click back.xaml)。
   3. ユーザーが [Skip] をクリックしたとき (click skip.xaml)。
   4. ユーザーが [Finish] をクリックしたとき (click finish.xaml)。

   このためには、[フォーム トリガー アクティビティ] を使用できます。

   
   

   

   
   
3. Main ワークフローに、ユーザーを歓迎し、ツアーを始める準備ができているかを尋ねるフォームを表示します。このためには、フォーム ファイルを構築し、[フォームを表示] アクティビティを使用してフォームを表示します (welcome.uiform)。
4. ツアー内で使用するすべての UI (ユーザー インターフェイス) 要素と、対応するステップを含む CSV ファイルを作成します。この情報は次のように 2 つの列で区切ります。
   1. セレクター - UI 要素の値です。UI 要素の値は UI Explorer を使用して取得できます。
      
      

      

      
      
   2. メッセージ - UI 要素の横に表示するメッセージです。
5. 手順 2 で作成した CSV ファイルを読み込み、グローバル変数に格納します。このためには、[CSV を読み込み] アクティビティと [データ マネージャー] パネルを使用してグローバル変数を作成します。
6. 完了すべき残りの手順の数を各吹き出し内に表示するために、手順の数をグローバル変数に格納します。
7. Wikipedia の Web サイトを開くときに show.callout.xaml を呼び出し、すべてのローカル トリガーを並列で実行します。これにより、ユーザーが吹き出し内で実行するアクションに基づいて、各手順に吹き出しを表示できます。
   
   

   

   
   

サンプル プロジェクト

この製品ガイド ツアーを作成する方法については、こちらのサンプル プロジェクトを使用して着想を得てください。

ビデオの例

サンプル ワークフローの設計とテストの説明については、以下のビデオをご覧ください。