ガイド、バッジ、確認、自動化のガイドテンプレートから選択します。最初の3つのオプションの主な違いは、そのアクティベーション方法です。自動化の詳細については、ガイドデザイナー:Adoptスタジオ(Adopt Studio)およびガイドのボタンアクションを参照してください。
- ガイドタイプは、自動的にアクティブ化、リソースセンター経由でのアクティブ化、またはその両方でアクティブ化できます。
- バッジタイプは、ページ上に配置するアイコン経由でアクティブ化されます。
- 確認タイプは、ユーザーが続行する前に確認が必要であると指定したボタンをユーザーが選択したときにアクティブ化されます。
すべてのガイドタイプはマルチステップにすることができ、ツールチップとライトボックスを組み合わせて設定することもできます。ツールチップはページ上の指定された要素の横に配置され、ライトボックスはページ上の特定の位置に(中央揃えなどで)オーバーレイされます。
ガイドのオプション
ガイドは、自動的に、あるいはリソースセンターを通じて、またはその両方を組み合わせてユーザーに表示できます。アクティベーションオプションが選択されていない場合、デフォルトで自動アクティベーションが適用されます。自動アクティベーションを無効にして、ガイドがまったく表示されないようにすることもできます。
自動アクティベーションをオンまたはオフにするには:
- 左側のナビゲーションで、[ガイド(Guide)]に移動します。
- リストからガイドを検索して開きます。
- アクティベーションカードの右上の[編集(Edit)]を選択します。
- 必要に応じて、自動アクティベーションをオンまたはオフにします。
- [保存]を選択します。
既存のガイドをリソースセンターに追加するには:
- 左側のナビゲーションで、リソースセンターに移動します。
- リストから[リソースセンター(Resource Center)]を開きます。
- ない場合は、[ガイドリストモジュール(Guide List Module)]を追加します。
- [ガイドリストモジュール]にカーソルを合わせ、[モジュール詳細を表示(View Module Details)]を選択します。
- コンテンツカードの右上の[編集]を選択します。
- ドロップダウンメニューから、目的のガイドを選択します。
- [保存]を選択します。
バッジのオプション
ページに配置したバッジをユーザーが操作すると、インラインサポートが有効になります。バッジはガイドの一種で、常時表示するとUIが煩雑になるような、フィーチャーに関する補足説明を提供するために使用されます。バッジのガイドタイプをページに追加する方法については、ガイドデザイナー:Adoptスタジオ(Adopt Studio)の記事のガイドの作成の手順に従ってください。
[ステップ設定(Step Settings)]には、バッジに関する多くのオプションがあります。この設定には、バッジの作成中または編集中にバッジコンテナの下にある歯車アイコンを選択してアクセスできます。オプションは、[プロパティ(Properties)]、[場所(Location)]、[バッジ(Badge)]、[高度な設定(Advanced)]に分けられています。
最初の2つのタブのオプションは、バッジのガイドタイプを選択したかどうかには影響されません。タブの詳細については、ガイドデザイナー:Adoptスタジオ(Adopt Studio)のステップ設定をご覧ください。
[ステップ設定]の[バッジ]タブでは、以下の項目を編集できます。
- バッジのカスタマイズオプション:バッジアイコン、位置、オフセット、色、Zインデックス、ARIAラベルを変更できます。
- ガイドの動作:バッジアイコンのクリック時にのみガイドを表示するか、ユーザーがバッジアイコンにカーソルを合わせたときにも表示するかを選択します。
- バッジの動作:バッジを常に画面上に表示するか、ユーザーがバッジにカーソルを合わせたときにのみ表示するかを選択します。
標準のアイコンから選択するだけでなく、バッジ用のカスタム画像をアップロードするオプションもあります。バッジを作成または編集する場合は、以下のように行います。
- ガイドコンテナの下にある歯車アイコンを選択して、[ステップ設定]を開きます。
- ウィンドウの左側にある[バッジ]タブを開きます。
- [バッジアイコン(Badge Icon)]ドロップダウンメニューを開き、リストの一番下にある[カスタム画像(Custom Image)]を選択します。
- 上部に表示される灰色のボックスに画像をアップロードします。アップロードするアイコンは、意図するバッジのサイズである必要があります。標準的なアイコンサイズは14×14ピクセルです。
- [ステップ設定]の右下にある[完了(Done)]を選択します。
ツールチップと同様、バッジにも[高度な設定]に[要素包含判定ルールを有効化(Enable Element Contains Rule)]オプションがあります。これにより、 バッジが紐付けられている要素の内容に基づいて、条件に応じたバッチを表示できます。
確認オプション
確認ガイドは、ガイド作成者が指定したボタンをユーザーが選択することでアクティブ化されます。Pendoは選択内容を使用し、代わりにAdoptスタジオ(Adopt Studio)で編集できる確認ガイドをユーザーに提示します。これにより、エンドユーザーが意図せずに破壊的な処理や時間のかかる処理を選択してしまうことを防ぐことができます。
確認タイプのガイドをページに追加する方法については、ガイドデザイナー:Adoptスタジオ(Adopt Studio)の記事のガイドの作成の手順に従ってください。
確認ガイドには、少なくとも「キャンセル」「進む」の2つの選択肢が必ず含まれています。これらのボタンを削除したり編集したりすることはできませんが、以下のボタンを追加することは可能です。
- 次のステップ(Next step)。ユーザーが先に進むことを選択した後に、情報やガイダンスを提供し続ける場合にのみ推奨します。ユーザーが操作を続ける前に情報を提供する場合は、[ガイドの起動(Launch Guide)]を選択してください。
- ガイドを閉じる(Dismiss Guide)。処理をキャンセルするための追加オプションを提供する場合に使用します。
- URLのリンク(URL link)。ユーザーが先に進むかキャンセルするかを決定する前に、他のソースにリダイレクトさせる場合にのみお勧めします。
- ガイドを起動(Launch Guide)。ユーザーが先に進むかキャンセルするかを決定する前に、追加のコンテキストやガイダンスを提供する場合にお勧めします。このオプションを選択するには、すでにガイドが作成されている必要があります。
- 前のステップ(Previous Step)。複数ステップの確認ガイドを作成している場合のみ利用可能です。
- ステップに進む(Go to Step)。ユーザーが先に進むことを選択した後に、特定の情報やガイダンスを表示できるようにする場合にのみお勧めします。ユーザーが先に進む前に情報を提供する場合は、代わりに[ガイドを起動(Launch Guide)]を選択してください。
エンドユーザーが先に進むと、Pendoは選択したボタンにクリックイベントを送信します。
要素にはツールチップとバッジのルールが含まれています
要素包含判定ルールを使用して、ターゲット要素の内容に基づいて条件付きでツールチップやバッジを表示します。要素には、テキストまたは数値が含まれます。
ツールチップとバッジについては、「ガイドデザイナー:Adoptスタジオ(Adopt Studio)」を参照してください。ガイドの作成手順を確認できます。
初めてツールチップを作成した場合や、UIにバッジを配置した場合は、次の手順を行います。
- 歯車のアイコンを選択して[ステップ設定(Step Settings)]を開きます。
- 左側の[高度な設定]タブを開き、[要素包含判定ルールを有効化]オプションをオンに切り替えます。
- 最初のドロップダウンメニューから、コンテンツの種類([テキスト(Text)]または[数字(Number)])を選択します。
- 2番目のドロップダウンメニューから値オプションを選択します。
- 値を入力します。
- [完了]を選択します。
[テキスト]をコンテンツタイプに選択すると、[次を含む(Contains)]、[次を含まない(Does Not Contain)]、「次と完全一致する(Exactly Matches)]、[次と一致しない(Does Not Match)]を利用できます。[数字]をコンテンツタイプに選択すると、[次の値と等しい(Equals)]、[次の値と等しくない(Not Equal To)]、[次の値より大きい(Is Greater Than)]、[次の値より小さい(Is Less Than)]を利用できます。
1つのガイドに設定できる要素包含判定ルールは、1つのみです。
ライトボックスのガイドの紐付けと持続性
ガイドの持続性(Guide Persistence)を使用して、要素が表示されたときにガイドをアクティブにし、要素が消えてもガイドが持続するようにします。
ライトボックスをガイドの最初のステップとして使用する場合、時間制限のあるアラートやモーダルなど、画面に表示される特定の要素にそのガイドを固定できます。ガイドの最初のステップとしてライトボックスを作成したら:
- 歯車のアイコンを選択して[ステップ設定(Step Settings)]を開きます。
- 左側の[高度な設定]タブを開き、[ガイドの持続性]オプションをオンに切り替えます。
- [選択する(Make selection)]ボタン、または既存の選択範囲を変更する場合は[選択し直す(Re-select)]ボタンを選択してください。
- ガイドを紐付けるUI要素を選択します。
- [完了]を選択します。
[ステップの設定(Step Setting)]の詳細については、「ガイドデザイナー:Adoptスタジオ(Adopt Studio)」の記事の「エディタモード(Editor Mode)」を参照してください。