Smart Walk-Thrus

更新日 3月 18, 2020 Download PDFDownload as PDF
Download PDF

概要

Smart Walk-Thrus は顧客があらゆるタスクを正常に完了できるように必要な時に画面上のガイダンスを提供することでユーザー・エクスペリエンスを簡素化します。

この記事は Smart Walk-Thrus に関するものです。 Walk-Thru のユーザーはこの記事をお読みくださいWalk-Thru および Smart Walk-Thrus の違いは何ですか?

Smart Walk-Thrus のアプリを使用することでサイトにヒントバルーンを作成してオンラインプロセスでユーザーを支援できます。 GPS で行きたいところに行けるように、Smart Walk-Thrus はインタラクティブなステップ・バイ・ステップによるガイダンスでユーザーをオンラインプロセスへと導きます。

ユースケース

Smart Walk-Thrus のいくつかのユースケースを以下に示します。

  • 機能の採用 : 顧客が新しいソフトウェアを採用するのにかかる時間を短縮し、顧客のエクスペリエンスおよびロイヤリティを高めます。
  • オンボーディングおよびトレーニング : 画面上で即座に関連するガイダンスを提供することによって、従業員のオンボーディングおよびトレーニングを迅速に行います。 Smart Walk-Thrus を使用することで、ユーザーは作業しながら学習できるため時間を無駄にすることはありません。
  • サポート : 簡単、魅力的で理解しやすいガイダンスおよびパーソナライズされたオンライン・エクスペリエンスでセルフサービス・サポートを顧客に提供します。

ユーザーのニーズに応じて、ユーザーがLauncherをクリックし、プレーヤー・メニューで検索して、タスク・リストでタスクをクリックすることでパーマリンクを開いた時に起動するようにSmart Walk-Thruを設定し、ShoutOutのアクションボタンをクリックまたは自動的に開始するように構成します。続きを読む。

Smart Walk-Thru のコンポーネント

WalkMe Editor では、Smart Walk-Thru が明確で直感的なマップに表示されます。 マップはアイコンおよび記号を使用しており、さまざまなタイプのステップおよびロジックを表します。

Smart Walk-Thrus は Steps、Flow Steps 、Popups で構成されています :

  • Steps が画面上にヒント・バルーンとして表示されることでユーザーにプロセスを指示します。 Smart Walk-Thru のマップでは、ステップ (Steps) が青いバルーンとして表示されます。 ステップは画面上の要素を指すことで主な方向を示します。例えば「このフィールドにテキストを入力する」または「このボタンをクリックする」などです。 各ステップにはトリガーもありますが、これはステップを次のステップに進めるアクションです。例えば、ユーザーが関連する要素にテキストを入力したり、ボタンをクリックしたりした時などです。
  • Flow Steps は密かに機能して Smart Walk-Thru のフローを変更します。例えば Smart Walk-Thru をさまざまなパスに分割したり、特定の条件を待ってから続行したり、エラーを処理したりできます。 フロー・ステップ (Flow Steps) は Smart Walk-Thru のマップにオレンジ色のアイコンとして表示されます。 続きを読む
  • ポップアップ (Popups) は注目テキストにユーザーの注意を引くために使用されます。 通常のステップバルーンとは異なり、ポップアップは要素に添付されずにページの中央に表示されます。 ポップアップは Smart Walk-Thru 内のどこにでも配置できます。 続きを読む

Smart Walk-Thru を作成します

    1. Smart Walk-Thru のアプリに移動します。
    2. [新規追加] ボタンをクリックします。
    3. Smart Walk-Thru に名前を付けて続行をクリックします。
    4. + アイコンにカーソルを合わせてステップをクリックすることで : ステップがページ上に視覚的に表されると共に画面上にヒント・バルーンがオーバーレイされます。
    5. ステップのキャプチャー : [ステップの追加] をクリックすると、WalkMe Editor が最小化されてキャプチャー・モードになります。 キャプチャー・モードではステップの要素を選択できます。 青いボックスで強調表示されている要素をクリックして選択します。続きを読む
    6. ステップバルーンを設定します : 要素が選択されることで、WalkMe は要素に基づいてタイトルやトリガーなどの詳細をオートコンプリートします。 これらを手動にて設定する場合は、要素キャプチャー・バルーンの下部にある詳細タブをクリックします。
      1. ステップ名 : これはバルーン内に表示されると共にユーザーに指示をします。
      2. ステップメモ : このメモは Editor に表示されると共に他の WalkMe Builder のみに表示されます (エンドユーザーには表示されません) 。
      3. トリガー : トリガー は次のステップをアクティブにするアクションです。
      4. ステップの位置 : バルーンの位置を移動します。
      5. 要素グレード : 要素グレードは要素の強度を示します。
    7. ステップの追加を続行 : 最初のステップを設定したら、次のステップをクリックしてキャプチャー・モードに戻ると追加のステップをキャプチャーします。
      • 別のページに移動するには、Editor のトグル (またはキーボードの Ctrl キー) を使用してナビゲート・モードに切り替えます。 これによって、要素としてキャプチャーせずに別のページに移動し、画面上のボタンをクリックすることができます。
      • ステップを固定したい要素が見つかった場合、トグルまたは Ctrl キーを使用してエディターをキャプチャー・モードに切り替えます。 そして、上記のように次のステップを構成します。
    8. 必要なステップをすべてキャプチャーしたら、完了をクリックしてください。
      • これによって WalkMe Editor が再び開くと、作成したすべてのステップが表示されます。
      • ステップリストには青いバルーン・アイコンとしてステップが表示されます。 バルーンにカーソルを合わせると、そのステップから Smart Walk-Thru を再生したり、スクリーンショットを表示したり、ステップを複製または削除したり、スタート・ポイントまたはピア・ステップを追加したりできます。

ステップを変更する

ステップまたはポップアップのステップを作成後に変更するには、クリックしてステップのオプションメニューを開きます。 ここでは、[インタラクション] タブでバルーンの位置、タイトル、テキスト、トリガーを変更できます。 他のタブでは、外観精度をさらに変更したり、メモを追加したりできます。

ステップのインタラクション

[インタラクション] タブではテキスト、バルーンの位置、トリガーを変更できます。

 

デザインのオプション

バルーンのデザインを変更するには 2 つの方法があります。

  1. 1 つめはデザイン・ギャラリーから既製のデザインを選択することです。
  2. 2 つめは CSS を使用してバルーンのデザインを完全に制御することです。

インタラクションタブの右上にあるデザインの変更をクリックするとことでデザイン・ギャラリーが開きます。 デザイン・ギャラリーでは特定のバルーンのデザインを選択できます。 また、Walk-Thru の設定ページからグローバル・レベルで設定することもできます。

HTML / CSS カスタマイズ・コンソールを使用することで高度なテンプレートを編集すると共に独自のテンプレートを作成します。

ヒント : ローカル CSS はグローバル・レベルで適用される CSS をオーバーライドします。

WYSIWYG Editor :

What-you-see-is-what-you-get Editor (WYSIWYG) を使用することでバルーンの外観およびコンテンツを簡単に変更すると共に結果を即座に確認できます。

WYSIWYG Editor のツール :

  • フォントサイズ
  • 太字
  • 斜体
  • 下線
  • フォントの色
  • テキストの配置
  • リンクの追加 : URL ハイパーリンクを追加します
  • 箇条書きリストの追加 : バルーンのテキスト内のアイテムのリストに箇条書きポイントを追加します
  • Smart Walk-Thru のリンクを追加 : 別の Smart Walk-Thru のリンクを起動するリンクを作成します
    • このリンクは現在の Smart Walk-Thru を停止すると共にリンクされたものを起動します。 Smart Walk-Thru にリンクするには、リンク先の Smart Walk-Thru が既に作成されていると共に Walk-Thru ID が必要になります。
  • 画像を追加 :
    • 新しい画像を追加するにはコンピューターから画像をアップロードするか、その URL を挿入します (この場合、画像を挿入する前にオンラインでホストする必要があります) 。
    • サポートしているファイルの種類には JPG、JPEG、PNG、GIF が含まれます。
    • ファイルサイズは最大で 500KB です。
    • アップロードされた画像は Amazon S3 の専用バケットでホストされます。
    • URL からの画像の幅および高さは元の画像の縦横比を維持しながら、バルーンまたは ShoutOut のサイズに自動的に調整されます。
    • 必要に応じて編集する画像をダブルクリックすることで画像の幅と高さを調整できます。
    • 画像を削除するには画像 URL の横にあるごみ箱アイコンをクリックするか、テキスト・エディターでテキストを編集中に Backspace または Delete を使用して削除します。
    • BBCode 形式 : [img]img_URL[/img]、
    • 幅および高さのある BBCode 形式 : [img=widthxheight]img_URL[/] (例 : [img=40×24]img_URL [/img]。
  • ビデオの追加 : 対応するビデオ・プラットフォームにビデオ URL を入力します
    • ビデオは iFrame を使用する MP4 形式である限り、どのプラットフォームからでも再生できます (下の表の BBCode を参照) 。 必要に応じて幅と高さを入力してください
  • iFrame を追加 : フレームにウェブページをロードします
  • ダイナミック・テキストの追加 : ユーザーの実際の名前などのダイナミック・テキストをバルーンに追加します
  • BBCode : BBcode を使用してテキストをフォーマットします。 以下の例をご覧ください :
    機能 BBCode
    テキストを中央に配置します [div style=”text-align:center”]テキスト[/div]
    取り消し線 [s]text[/s]
    テーブル [table]{rows}[/table]
    テーブル行 [tr]{cells}[/tr]
    テーブル・コンテンツ・セル 見出しセル : [th]{content}[/th]
    コンテンツ・セル [td]{content}[/td]
    電子メールへのリンク [url=mailto:name@company .com]name@company.com[/url]
  • プレビューバルーンから以下のものを編集することができます :
    • タイトル : ユーザーに対するメインの指示を編集します
    • テキスト : 必要に応じて追加の指示またはステップの詳細を含みます

位置 :

選択した要素に関連するステップ・バルーンが表示される場所を変更します (外観タブの位置をさらにカスタマイズします) 。 ピクセルの配置を上下および左右に変更することで位置をさらに変更します。

ステップ・トリガー :

Smart Walk-Thru を次のステップに進めるアクションを決定します。 トリガーはガイダンスを前進させることでインタラクティブにします。

  • クリック : ユーザーが要素をクリックすることで次のステップが再生されます
  • 次へ : ユーザーがバルーンの [次へ] ボタンをクリックすると次のステップが再生されます
    • ヒント : 他のトリガーは PC のキーボードで Ctrl (または Mac キーボードでは Command) を押して 2 番目のトリガーを選択することで [次へ] と組み合わせることができます
  • 入力 : ユーザーが選択したテキスト・フィールドにテキストを入力することで次のステップが再生されます
  • カーソル : ユーザーが要素の上にカーソルを合わせることで次のステップが再生されます
  • 遅延 : 設定された秒数の後に次のステップが自動的に再生されます
  • 更新 : ページの更新時に次のステップが再生されます
  • カスタム・トリガー : 次のステップに移動するタイミングを WalkMe に伝えるルールを作成します
    • ヒント : このトリガー・タイプを使用することでステップをトリガーできる要素を画面に追加できます。
  • ドロップダウン・メニュー・トリガー : 次のトリガーはドロップダウン・メニュー要素が選択されている場合にのみオプションとして表示されます。
    • 任意の選択 : ドロップダウン・メニューの項目が選択されると次のステップが再生されます
    • 特定の選択 : 特定のドロップダウン項目が選択されると次のステップが再生されます

Smart Walk-Thru を PDF としてエクスポートする

鳥瞰図から Smart Walk-Thru のフローを表示または Smart Walk-Thru の構築手法について従業員をトレーニングしたい場合は Smart Walk-Thru のステップ・リストを PDF としてエクスポートすることができます。

ステップ・リストをエクスポートするには以下の手順を実行します :

  1. Smart Walk-Thru または Walk-Thru のアイテムである鉛筆のアイコンにカーソルを合わせます
  2. ファイルにエクスポート選択します :

  3. 複数の言語でビルドする場合はエクスポートする言語を選択するよう求められます :

    • エクスポートをクリックすると、 PDF のコンパイルの完了を示す進行状況バーが表示されます
  4. コンパイルが完了すると、ファイルをマシンのどこに保存するかを選択するよう求められます
    • マシン上の場所を選択すると共にその場所にファイルをダウンロードします

: ファイルにエクスポートを機能させるには全般タブのスクリーンショットのキャプチャ設定をオンにする必要があります。

ファイルの構造

ファイルの各ページには、ステップがキャプチャーされたアプリのページのスクリーンショット上に Smart Walk-Thru のステップが表示されます。 各ステップは選択した要素の隣に位置しています。

ページ構造の追加機能には以下のものがあります :

  1. ステップの時系列による番号
  2. ステップのラベル
  3. ステップの作成日時
  4. スクリーンショットがキャプチャーされた URL の場所

 

 

この記事は役に立ちましたか?

関連記事