開発チームがアプリケーションのレイアウトやコンテンツを変更した際に、ガイドが壊れてしまったことはありませんか？ウォークスルーの完了率を上げるにはどうすればよいか、考えたことはありますか？この記事では、プロフェッショナルサービスのカスタムエンゲージメントに基づいて、効果的なダッシュボードのウォークスルーを作成する方法について説明します。
要件
Pendoの管理者アカウント権限または次のいずれか。
- ガイド作成のユーザー権限
- ガイド公開のユーザー権限
事前作業
まず、問題を分析してみましょう。既存のウォークスルーでは何がうまくいっていないのかを分析し、次のことが分かりました。
要素セレクターの一意性や「粘着性」が不十分だった。
- あるステップでは、ダッシュボードのツールチップが指しているタブが間違っていることがわかりました。
-
フィーチャータグが、ウェブサイトに組み込まれた基礎的な識別子と関連付けられていました。たとえば、以下のCSS IDです。
-
#dashboard-tab-nav-item-5
-
-
タブの順番が変わった場合、たとえば以下にあるタブが
-
#dashboard-tab-nav-item-3
-
-
以下の場所になると
-
#dashboard-tab-nav-item-5
-
- ツールチップが壊れてしまいます。フィーチャータグは、テキストが変更されているため、アプリ内の誤った要素を指すことになります。
また、ガイドの特定のステップで利用率が大きく低下していることもわかりました。ガイドを完了した人や、ガイドを先まで進めている人はほとんどいませんでした。
- ステップの進み具合が一貫していない。
- ［次へ］をクリックさせるステップもあれば、ガイドのテキストでのみ示される要素をクリックするように求めるステップもありました。
- そのため、ユーザーがガイドから外れてクリックしたり、誤ってクリックしたりすると、ガイドから「脱落」してしまいます。
- たとえば、このガイドの一部のステップでは、ユーザーが緑のボタンをクリックするようにしています。
- カラットフォントの太字のテキストがあるのに、ユーザーにもう一度緑のボタンをクリックさせる場合もあり、要素をクリックしても何も起こりません。
解決方法
- 「より粘着性の高い」セレクターを使用します
-
フィーチャータグのセレクターを次のように更新しました。
-
#dashboard-tiles-tab-nav-item-3
-
- ガイドは想定通りに動作します。しかし、より記述的なCSS IDやHTMLのデータ属性があれば、さらに柔軟性が増すでしょう。
-
たとえば、以下のようなクラスやIDです。
-
#nav-item-standards-mastery
-
- これは、アタッチされている要素のタイプ（ナビゲーションリストアイテム）と、要素の位置（ナビゲーションバー）を示す、堅牢なCSS IDです。このIDは、ページが時間の経過に伴って変化しても、特定のダッシュボードタブ［標準マスター（Standards Mastery）］で機能します。
- もう一つの方法は、「ステップを少なくする」ことです。
- データによると、訪問者のほとんどはウォークスルーのステップ6までたどり着けていません。
- ステップ5～6までを上限とし、ステップ3までを理想的な目標とします。
- 動作と想定を一貫させるようにします。
- ユーザーにアプリ内でクリックしてもらい、操作方法に慣れてもらいましょう。ツールチップを使用している場合、［次へ］ボタンはなくても構いません。Pendoガイドに搭載されている「要素をクリックして（または要素にカーソルを合わせて）先に進む」機能を活用します。
- ボタンを使用する場合は、ナビゲーション方法に一貫性を持たせます。
- 「一目瞭然」で簡単な操作を目指します。最初に表示されたガイドが操作しやすければ、ユーザーは他のガイドも試すでしょう。
- ウォークスルーのステップ1は、極力シンプルに。
タグ付けのための参考資料
ガイドを使って目標を達成しませんか？
プロフェッショナルサービスチーム（services@pendo.io）にご相談ください。