スマートウォークスルー
概要
スマートウォークスルーは顧客があらゆるタスクを正常に完了できるように必要な時に画面上のガイダンスを提供することでユーザーエクスペリエンスを簡素化します。
スマートウォークスルーの機能では、サイト上でヒントバルーンを作成し、ユーザーに様々なオンラインプロセスを案内できます。 GPSで行きたいところに行けるように、スマートウォークスルーはインタラクティブなステップ・バイ・ステップによるガイダンスでユーザーをオンラインプロセスへと導きます。
ユースケース
スマートウォークスルーのいくつかのユースケースを以下に示します。
- 機能の採用 : 顧客が新しいソフトウェアを採用するのにかかる時間を短縮し、顧客のエクスペリエンスおよびロイヤリティを高めます。
- オンボーディングおよびトレーニング : 画面上で即座に関連するガイダンスを提供することによって、従業員のオンボーディングおよびトレーニングを迅速に行います。 スマートウォークスルーを使用することで、ユーザーは作業しながら学習できるため時間を無駄にすることはありません。
- サポート : 簡単、魅力的で理解しやすいガイダンスおよびパーソナライズされたオンラインエクスペリエンスでセルフサービスサポートを顧客に提供します。
ユーザーのニーズに応じて、ユーザーがランチャーをクリックしたり、プレーヤーメニューで検索してタスクリストでタスクをクリックしたり、パーマリンクを開いたり、シャウトアウトのアクションボタンをクリックしたり、スマートウォークスルーが自動的に開始されるように構成することにより、スマートウォークスルーを設定します。
スマートウォークスルーのコンポーネント
WalkMeエディタでは、スマートウォークスルーが明確で直感的なマップに表示されます。 マップはアイコンおよび記号を使用しており、さまざまなタイプのステップおよびロジックを表します。
スマートウォークスルーは Steps、Flow Steps、Popupsで構成されています :
- ステップが画面上にヒントバルーンとして表示されることでユーザーにプロセスを指示します。 スマートウォークスルーのマップでは、ステップが青いバルーンとして表示されます。 ステップは画面上の要素を指さして指示を行います。例えば「このフィールドにテキストを入力してください」または「このボタンをクリックしてください」などです。 各ステップにはトリガーもありますが、これはステップを次のステップに進めるアクションです。例えば、ユーザーが関連する要素にテキストを入力したり、ボタンをクリックしたりした時などです。
- フローステップは密かに機能してスマートウォークスルーのフローを変更します。例えばスマートウォークスルーをさまざまなパスにスプリットしたり、特定の条件を待ってから続行したり、エラーを処理したりできます。 フローステップはスマートウォークスルーのマップにオレンジ色のアイコンとして表示されます。 続きを読む
- Popups（ポップアップ ）は重要なテキストにユーザーの注意を引くために使用されます。 通常のステップバルーンとは異なり、ポップアップはエレメントに付随されずページの中央に表示されます。 ポップアップはスマートウォークスルー内のどこにでも配置できます。 続きを読む
エディタ内のスマートウォークスルーのマップ
スマートウォークスルーを作成します
-
- スマートウォークスルーのアプリに移動します。
- [新規追加]ボタンをクリックします。
- スマートウォークスルーに名前を付け、既存のセグメントまたはメニューに追加するかどうかを選択し、[Continue（続行する）]をクリックします。
- + アイコンにカーソルを合わせてステップをクリックすることで : ステップがページ上に視覚的に表されると共に画面上にヒントバルーンがオーバーレイされます。
- ステップのキャプチャー：［ステップの追加］をクリックすると、WalkMeエディタが最小化されてキャプチャーモードになります。 キャプチャーモードではステップの要素を選択できます。 青いボックスで強調表示されている要素をクリックして選択します。続きを読む。
- ステップバルーンを設定します : 要素が選択されることで、WalkMeは要素に基づいてタイトルやトリガーなどの詳細をオートコンプリートします。 これらを手動にて設定する場合は、要素キャプチャーバルーンの下部にある詳細タブをクリックします。
- ステップ名 : これはバルーン内に表示されると共にユーザーに指示をします。
- ステップメモ : このメモはエディタに表示され、他のWalkMeビルダーのみが閲覧できます（エンドユーザーは閲覧できません）。
- トリガー : トリガー は次のステップをアクティブにするアクションです。
- ステップの位置 : バルーンの位置を移動します。
- 要素グレード : 要素グレードは要素の強度を示します。
- ステップの追加を続行 : 最初のステップを設定したら、次のステップをクリックしてキャプチャーモードに戻ると追加のステップをキャプチャーします。
- 別のページに移動するには、Editorのトグル（またはキーボードのCtrlキー） を使用してナビゲートモードに切り替えます。 これによって、要素としてキャプチャーせずに別のページに移動し、画面上のボタンをクリックすることができます。
- ステップを固定したい要素が見つかった場合、トグルまたは Ctrl キーを使用してエディターをキャプチャーモードに切り替えます。 そして、上記のように次のステップを構成します。
- 必要なステップをすべてキャプチャーしたら、完了をクリックしてください。
- これによってWalkMeエディタが再び開くと、作成したすべてのステップが表示されます。
- ステップリストには青いバルーンアイコンとしてステップが表示されます。 バルーンにカーソルを合わせると、そのステップからスマートウォークスルーを再生したり、スクリーンショットを表示したり、ステップを複製または削除したり、スタートポイントまたはピアステップを追加したりできます。
ステップを変更する
ステップまたはポップアップステップを作成後に変更するには、クリックしてステップのオプションメニューを開きます。 ここでは、[インタラクション]タブでバルーンの位置、タイトル、テキスト、トリガーを変更できます。 他のタブでは、外観、精度をさらに変更したり、メモを追加したりできます。
ステップのインタラクション
[インタラクション]タブではテキスト、バルーンの位置、トリガーを変更できます。
[ページ上で編集]ボタンを使用して、ページ上で直接編集することができます。
デザインのオプション
バルーンのデザインを変更するには2つの方法があります。
- 1つめはデザインギャラリーから既製のデザインを選択することです。
- 2つめはCSSを使用してバルーンのデザインを完全に制御することです。
インタラクションタブの右上にあるデザインの変更をクリックするとことでデザインギャラリーが開きます。 デザインギャラリーでは特定のバルーンのデザインを選択できます。 また、Walk-Thruの設定ページからグローバルレベルで設定することもできます。
HTML/CSSカスタマイズコンソールを使用することで高度なテンプレートを編集すると共に独自のテンプレートを作成します。
WYSIWYGエディタ :
What-you-see-is-what-you-getエディタ（WYSIWYG）を使用することでバルーンの外観およびコンテンツを簡単に変更すると共に結果を即座に確認できます。
WYSIWYGエディタのツール :
- フォントサイズ
- 太字
- 斜体
- 下線
- フォントの色
- テキストの配置
- リンクの追加 : URLハイパーリンクを追加します
- 箇条書きリストの追加 : バルーンのテキスト内のアイテムのリストに箇条書きポイントを追加します
- スマートウォークスルーのリンクを追加 : 別のスマートウォークスルーのリンクを起動するリンクを作成します
- このリンクは現在のスマートウォークスルーを停止すると共にリンクされたものを起動します。 スマートウォークスルーにリンクするには、リンク先のスマートウォークスルーが既に作成されていると共にウォークスルーIDが必要になります。
- 画像を追加 :
- 新しい画像を追加するにはコンピューターから画像をアップロードするか、そのURLを挿入します （この場合、画像を挿入する前にオンラインでホストする必要があります） 。
- サポートしているファイルの種類には JPG、JPEG、PNG、GIF が含まれます。
- ファイルサイズは最大で500KBです。
- アップロードされた画像はAmazon S3の専用バケットでホストされます。
- URL からの画像の幅および高さは元の画像の縦横比を維持しながら、バルーンまたはシャウトアウトのサイズに自動的に調整されます。
- 必要に応じて編集する画像をダブルクリックすることで画像の幅と高さを調整できます。
- リサイズしてもアスペクト比が変わらないように、[Lock Aspect Ratio（アスペクト比のロック）]を使ってアスペクト比を固定できます。
- 画像を削除するには画像URLの横にあるごみ箱アイコンをクリックするか、テキストエディターでテキストを編集中にBackspaceまたはDeleteを使用して削除します。
- BBCode形式 : [img]img_URL[/img]、
- 幅および高さのある BBCode 形式 : [img=widthxheight]img_URL [/]（例 : [img=40×24]img_UR[/img]L 。
- ビデオの追加 : 対応するビデオプラットフォームにビデオURLを入力します
- ビデオはiFrameを使用するMP4形式である限り、どのプラットフォームからでも再生できます（下の表のBBCodeを参照） 。 必要に応じて幅と高さを入力してください
- iFrame を追加 : フレームにウェブページをロードします
- ダイナミックテキストの追加 : ユーザーの実際の名前などのダイナミックテキストをバルーンに追加します
- BBCode : BBcodeを使用してテキストをフォーマットします。 以下の例をご覧ください :
機能 BBCode テキストを中央に配置します [div style=”text-align:center”]text[/div] 取り消し線 [s]text[/s] テーブル [table]{rows}[/table] テーブル行 [tr]{cells}[/tr] テーブル・コンテンツ・セル 見出しセル： [th]{content}[/th] コンテンツセル [td]{content}[/td] 電子メールへのリンク [url=mailto:name@company .com][email protected][/url] - プレビューバルーンから以下のものを編集することができます :
- タイトル : ユーザーに対するメインの指示を編集します
- テキスト : 必要に応じて追加の指示またはステップの詳細を含みます
位置 :
選択した要素に関連するステップバルーンが表示される場所を変更します （外観タブの位置をさらにカスタマイズします） 。 ピクセルの配置を上下および左右に変更することで位置をさらに変更します。
テキストに整列
この機能を有効にすると、スマートウォークスルーバルーンは、要素内のテキストが両側に整列されていなくても、要素内のテキストの中心を指します。
「テキストに整列」が有効になっていない場合（デフォルト）、バルーンは選択した要素の中央に位置合わせされます：
「テキストに整列」を有効にすると、バルーンは要素内のテキストの中心に整列します
ステップトリガー :
スマートウォークスルーを次のステップに進めるアクションを決定します。 トリガーはガイダンスを前進させることでインタラクティブにします。
- クリック : ユーザーが要素をクリックすることで次のステップが再生されます
- 次へ : ユーザーがバルーンの[次へ]ボタンをクリックすると次のステップが再生されます
- ヒント : 他のトリガーはPCのキーボードでCtrl（または Mac キーボードではCommand）を押して2番目のトリガーを選択することで[次へ]と組み合わせることができます
- 入力 : ユーザーが選択したテキストフィールドにテキストを入力することで次のステップが再生されます
- カーソル : ユーザーが要素の上にカーソルを合わせることで次のステップが再生されます
- 遅延 : 設定された秒数の後に次のステップが自動的に再生されます
- 更新 : ページの更新時に次のステップが再生されます
- カスタムトリガー: 次のステップに移動するタイミングをWalkMeに伝えるルールを作成します
- ヒント : このトリガータイプを使用することでステップをトリガーできる要素を画面に追加できます。
- ドロップダウンメニュー・トリガー : 次のトリガーはドロップダウンメニュー要素が選択されている場合にのみオプションとして表示されます。
- 任意の選択 : ドロップダウンメニューの項目が選択されると次のステップが再生されます
- 特定の選択 : 特定のドロップダウン項目が選択されると次のステップが再生されます
スマートウォークスルーをPDFとしてエクスポートする
鳥瞰図からスマートウォークスルーのフローを表示またはスマートウォークスルーの構築手法について従業員をトレーニングしたい場合はスマートウォークスルーのステップリストをPDFとしてエクスポートすることができます。
ステップリストをエクスポートするには以下の手順を実行します :
- スマートウォークスルーまたはウォークスルーアイテムのメニューアイコンにカーソルを合わせます。
- ファイルにエクスポートを選択します :
- 複数の言語でビルドする場合はエクスポートする言語を選択するよう求められます :
- エクスポートをクリックすると、PDFのコンパイルの完了を示す進行状況バーが表示されます
- コンパイルが完了すると、ファイルをマシンのどこに保存するかを選択するよう求められます
- マシン上の場所を選択すると共にその場所にファイルをダウンロードします
ファイルの構造
ファイルの各ページには、ステップがキャプチャーされたアプリのページのスクリーンショット上にスマートウォークスルーのステップが表示されます。 各ステップは選択した要素の隣に位置しています。
ページ構造の追加機能には以下のものがあります :
- ステップの時系列による番号
- ステップのラベル
- ステップの作成日時
- スクリーンショットがキャプチャーされたURLの場所
