SmartTips:スタートガイド

更新日 7月 7, 2020 Download PDFDownload as PDF
Download PDF

概要

SmartTipsは、ページにある特定のアイテムについての追加情報を提供するために、画面上にガイダンスを提供します。

SmartTipsは、サイトでユーザーがしばしばミスをするプロセスやフォームに対処する際に特に役立ちます。

SmartTipsの詳細については、SmartTipsの概要ページをご覧ください。

個々の SmartTips はセット内に作成されます。これは通常、同じフォームまたはページに表示される SmartTips のグループになります。 この記事ではSmartTipsセットの作成プロセスについて順を追って説明します。

SmartTipsセットを作成する

  1. WalkMeエディターで、オレンジ色のプラス記号をクリックして、SmartTipsセットを選択します。
  2. セットが表示される場所に基づいて、SmartTipsセットに名前を付けます。 (このタイトルはユーザーには表示されません。したがって、自分にとってセットを識別しやすい名前を選択してください。)
  3. SmartTipセットを表示する場所を選択します。
    1. SmartTipsセットがすべてのページに表示される場合(ヘッダー、フッター、ナビゲーションペインなどに表示される場合)、複数ページにセットを表示するオプションを選択します。
      • ほとんどのSmartTipセットは、特定のページにのみ表示されます。
      • 特定のページにSmartTipsを表示するように選択すると、パフォーマンスも最適化されます。
    2. 特定のページにSmartTipsを追加するには:
      1. Display Set only on a specific page (特定のページのみにセットを表示)]オプションを選択します。
      2. [Create rule to identify page(ページを識別するルールを作成する)]ボタンをクリックします。
      3. SmartTipsセットがいつ表示されるかを指定する条件を定義します。 (通常は、ページのURLに基づきます。ただし、プラットフォームによっては異なる結果が必要となる場合もあります。 このRule Engineの使用方法についての追加の情報は、Rule Engineのベストプラクティスガイドをご覧ください。)
  4. SmartTipsセットを作成したら、次に個々のSmartTipを作成します。 SmartTipsセットのオレンジ色のプラス記号をクリックして、新しいSmartTipを追加します。
  5. SmartTipを添付するエレメントを選択します。
  6. ブラウザーのミニエディターポップアップを使用して、SmartTipの初期設定を定義します。
    1. SmartTipにタイトルを追加します。 これによって、後日SmartTipを簡単に見つけて編集できるようにします。
    2. ガイダンスSmartTipsは、ページにある特定エレメントに関する追加情報を提供します。 これは、最も一般的なSmartTipタイプです。
    3. 検証SmartTipsは、テキストフィールドで使用して、ユーザーがフォームを正しく入力できるようにすることができます。 検証SmartTipsの詳細については、検証SmartTipsのサポート記事をご覧ください。
    4. ガイダンスメッセージフィールドに、ユーザーに表示されるメッセージを入力します。
    5. このメッセージがいつ表示されるかを選択します。
      • SmartTipガイダンスは、ユーザーがSmartTipアイコンにカーソルを合わせると表示されるように設定することができます。 このオプションを選択した場合、方向矢印を使用して、アイコンの位置を指定します。
      • ユーザーがエレメントにカーソルを合わせると、SmartTipが表示されるようにも指定できます。
    6. 上記の変更を行ったら、[Done(完了)]をクリックします。 (複数のSmartTipsを作成している場合、代わりに[Next SmartTip(次のSmartTip)]を選択できます。)
  7. これでSmartTipsセットが作成されました。 ステップ4~6を繰り返し、このセットにSmartTipsを追加し続けることができます。 各SmartTipをさらにカスタマイズするには、以下のSmartTipsのカスタマイズプロセスをご覧ください。 (SmartTipがページで表示または非表示になるエレメントに添付されている場合、エレメント動作の設定をカスタマイズするステップが必要です。)

SmartTipsのカスタマイズ

  1. カスタマイズするSmartTipsセットを開き、タイトルをクリックして特定のSmartTipを開きます。
  2. インタラクションページで、最初にブラウザーでSmartTipsを作成したときに作成されたSmartTipの設定を調整できます。
    • ガイダンスSmartTipに検証を追加するには、[Add Validation(検証の追加)]ボタンをクリックします。 検証SmartTipの設定方法についての詳細は、検証SmartTipsガイドをご覧ください。
    • また、ユーザーがSmartTipsアイコンやエレメントにカーソルを合わせた際に、SmartTipsメッセージを表示するかどうかを指定することもできます。
  3. [Selected Element(選択したエレメント)]オプションをクリックして、SmartTipの動作を調整します。 SmartTipが、ページを読み込んだ結果として表示や非表示になるエレメントに添付されている場合、これらの設定を調整する必要があります。 (これはポップアップウィンドウやモードとして表示されるSmartTipsにしばしば必要になります。)
  4. このSmartTipのブラウザーでの外観と位置を調整するには、[Customize on Screen!(画面上カスタマイズ)]ボタンを使用します。

検証SmartTips

検証SmartTipsでは、テキストフィールドのユーザーの入力をチェックして、提供された情報がフィールドの要件を満たしていることを確認できます。 検証SmartTipは、フィールドを赤で強調表示し、入力された情報が無効な場合にはエラーを表示します。 検証SmartTipsはテキストフィールドに配置する必要があります。

  1. 検証SmartTipを作成するには、SmartTipを既存のSmartTipセットに追加したり、新しいSmartTipsセットを作成したりすることができます。
    注:SmartTipオプションのインタラクションタブにある[Add Validation(検証の追加)ボタンをクリックして、既存のガイダンスSmartTipに検証を追加することができます。
  2. 該当するSmartTipsセットで、オレンジ色のプラス記号をクリックします。
  3. [Validation(検証)]ラジオボタンをクリックして、このSmartTipを検証SmartTipにします。
  4. 検証メッセージがいつ表示されるかを選択し、[Done(完了)]をクリックします。 すると、エディターでSmartTipオプションページが開きます。
  5. 検証ルールの利用可能なオプションから選択します(該当するものがない場合、Rule Engingを使用して、有効なエントリを定義できます)。
    1. 必須フィールド
    2. 数値フィールドの検証
    3. 日付形式の検証
    4. 時刻形式の検証
    5. 米国電話番号形式の検証
    6. メールアドレス形式の検証
    7. ウェブアドレス形式の検証
  6. 入力されたテキストが無効な場合に表示するエラーメッセージを入力します。
  7. 必要に応じて、サクセスインジケーションボックスにチェックを入れると、入力されたテキストが有効になった時点でテキストフィールドが緑で強調表示されます。 入力された情報が正しい場合に表示される、サクセスメッセージを含めることもできます。

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

関連記事

< 戻る