Customizing SmartTips

このセクションでは、SmartTip のデザインをカスタマイズする方法について説明します。

エディタで、既存のスマートヒントを開きます。

デザインの編集をクリックして、スマートヒントで利用可能なすべてのオプションを開きます。

デザインの編集をクリックすると、3 つの色の付いたボックスが表示されます。これらは、ユーザーがアイコンにカーソルを合わせるとポップアップ表示されるメッセージボックスを参照します。

テキスト: テキストフォントの色を変更します。デフォルトは黒に設定されています。

背景: テキストの背景の色を変更します。図に示すように、デフォルトは白に設定されています。

罫線: メッセージボックスのトリミングを変更します。デフォルトは青色に設定されています。

GIF の例で変更がどのように機能するかを確認します。16 進コード ff5f42 を使用して枠線の色を変更しています。

詳細については、ビデオを視聴してください。なお、動画は音声に対応していない。

次に、変更アイコンをクリックしてアイコンを変更します。

スマートヒントアイコンの編集時には、以下の 2 つのセクションから選択できます。

形状: "?" 以外のイメージを選択できます。、「i」アイコンなどの「!アイコンなど

色: 形状を選択すると、色とサイズの選択が表示されます。

このガイドでは、以下の編集を行います。

1. スタイル終了
2. 色で、灰色の中サイズのオプションを選択します。
3. 完了をクリックします。

詳細については、ビデオを視聴してください。なお、動画は音声に対応していない。

これは、今回の変更の結果です。これらのカスタマイズは制限されていますが、構築スキルを進めるにつれて、SmartTip をサイトの一部のように実際に見た目と操作性にするより多くのテクニックについて取り上げます。

デフォルトでは、SmartTips セット条件はページのロード時に評価され、添付された要素が表示されている場合にのみ、ユーザの画面で再生されます。これは、WalkMe で画面上の要素が常にチェックされないようにすることで、パフォーマンスとユーザエクスペリエンスを最適化するために行われます。

ただし、要素がページと同時にロードされない場合や、ページの要素が表示されなくなり、再表示される場合があります。

これらのタイプの要素のいずれかにスマートヒントが添付されている場合は、以下の 1 つまたは複数の設定をオンに切り替える必要がある場合があります。これらの機能を切り替えるには［選択した要素］タブを確認します

以下の 3 つのエレメント動作オプションがあります。

• ページロード時に表示: ページロード時に表示
• ページのロード後に表示され、表示されたままになる: この設定では、選択した要素がページに表示されなくなり、ホバーメニューなどで再度表示される場合でも、SmartTip が表示されます。
• ユーザアクションの結果として表示および表示されなくなります。WalkMe では、常にエレメントが検索されます。これはポップアップメニューに最適です*。

* ポップアップメニューまたはモーダルは、メインページの上部に表示され、ユーザアクションの結果として表示/非表示になるウィンドウです。

以下に例を示します。

• サイトにアクセスして［ログイン］オプションをクリックすると、認証情報を入力するウィンドウが表示されます。
• ファイルを削除しようとすると、ウィンドウが表示され、削除するかどうかの確認を求められる場合があります。

エレメント動作タブとその設定についてすべて把握しています。スマートヒントでは、特にホバーメニューまたはポップアップモジュールの内部に構築する場合に、これらの設定が使用されることがよくあります。

1. スマートヒントは、画面ガイダンスに関するものであり、Web ページまたはアプリケーションをより深く理解して操作するために使用できる情報をユーザに提供します。
2. スマートヒントの主なタイプの 2 つは、ガイダンスと検証です。
3. SmartTips のルックアンドフィールをカスタマイズしたり、要素の動作設定を使用して期待どおりに再生したりすることができます。