【Polaris和訳】Foundations/Designing onboarding flow
この記事について
この記事は、Polaris/Foundations/Designing onboarding flowsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
onboarding flows の設計
優れた設計のオンボーディングフローは、製品や機能へのエンゲージメントを高めます。フローは効率的で、明確に定義されたゴールとベネフィットを持つタスクをマーチャントに徐々に紹介していきます。
このガイドは、より良いオンボーディングフローを作成するのに役立ちます。
良い第一印象を与える
良い第一印象を与えると、次のことにつながります。
- やる気を起こさせるプロンプトと価値提案の約束を実現すること
- その製品や機能で何ができるのかを、空の状態で実現すること
- なるべく早く道を切り開く
（HolidayMailは、これらのガイドラインのために作成された架空のアプリです。）
効率的な順序を作成する
オンボーディングの成功率を高めるために、タスクを論理的に配列します。マーチャントがオンボーディングを開始したタイミングと完了したタイミングを明確にします。
できるだけ少ないステップでマーチャントを導入することを目指しましょう。まず、すべてのステップのリストを作成し、各タスクの成功を定義します。必要に応じて、オンボーディングをストーリーや旅のように扱ってください。
- 始まり（商人は製品または機能を発見します）
- ミドル（マーチャントはフロー内のタスクについて学習し、完了します）
- 終了（マーチャントは製品または機能を正常に使用できます）
HolidayMail アプリについては、オンボーディングのアプリ設定部分の手順を書き留めました。旅のこの段階で、マーチャントはメールアカウントを接続し、既存の顧客リストと請求情報をインポートする必要があります。
このセットアップフローの成功は、マーチャントが次の場合に発生します。
- メールアカウントを接続する
- 顧客リストとコードスニペットをインポートする
- お支払い情報を入力してください
可能な場合は、手順を組み合わせるか削除します
オンボーディングフローのさまざまなパスをマッピングしたら、フロー全体のステップまたはタスクを組み合わせたり、削除したりする方法を見つけます。
ステップを組み合わせたり削除したりするときは、自問してみてください。このステップは、商人が今より成功するのに役立ちますか？もしそうなら、それを含めても大丈夫です。オンボーディングは、基礎知識を教えることでもあることを忘れないでください。
自動化できるタスクがあるかどうかを確認します。たとえば、フォームフィールドは自動入力できるため、販売者は既存の情報を手動で入力する必要がありません。自動化によってオンボーディングの摩擦を減らすことで、マーチャントがより長いフローを完了する可能性が高まります。
HolidayMail アプリについては、自動化されたパス、部分的に自動化されたパス、および完全に手動のパスをリストしました。
自動パス（2 ステップ）：
- マーチャントは既存のメールアカウントを HolidayMail に接続します
- HolidayMail は、既存の請求先アカウント、顧客リスト、およびコードスニペットを自動的に検出してインポートします
部分的に自動化されたパス（4 ステップ）：
- マーチャントが既存のメールアカウントに接続します
- HolidayMail は自動的にコードスニペットを挿入し、既存の請求先アカウントをインポートします
- マーチャントは顧客リストを手動でアップロードします
- HolidayMail は、顧客リストのインポートを確認するためにテストメールを送信します
手動オンボーディングパス（7 ステップ）：
- マーチャントは、HolidayMail で使用する新しいメールアカウントを作成します
- マーチャントはメールアカウントを HolidayMail に接続します
- マーチャントは手動でコードスニペットを挿入します
- マーチャントは HolidayMail で新しい請求先アカウントを設定します
- マーチャントは顧客リストを手動でアップロードします
- マーチャントは、電子メールの顧客リストのエラーを修正します
- HolidayMail は、顧客リストのインポートを確認するためにテストメールを送信します
外部タスクについて明確にする
マーチャントがオンボーディングフローを完了するために Shopify を離れる必要がある場合、タイミングを制御することは困難です。たとえば、HolidayMail アプリでは、マーチャントは顧客リストファイルを取得するためにアプリを離れる必要がある場合があります。
Shopify を離れるときは、マーチャントに明確に伝えてください。明確な指示を提供し、ドロップオフを最小限に抑えるために、販売者ができるだけ早く戻るように促します。マーチャントがフローに戻ったとき、特にオンボーディングが 1 回の連続セッションで完了する可能性が低い場合は、重要なメッセージを強化または繰り返すことを検討してください。
オンボーディングは信頼の行使です
商人の時間は貴重です。彼らは自分たちの時間を未知の何かに投資することを選んでいます。加盟店がオンボーディングの旅でサポートされていると感じて、ガイド付きで自信を持ってもらうことができます。
透明性を保つことで信頼を築く
個人情報を収集する理由を説明してください。
価値を伝えることで信頼を築く
フロー全体を通じて、製品または機能の主要な利点に焦点を当てます。彼らの当面の仕事に関係のない情報で商人を圧倒しないでください。オンボーディングが解き放つメリットを言い換えたり、焦点を当てたりすることで、フロー全体に励ましを提供します。
この HolidayMail アプリのオンボーディングの例では、フローのすべてのステップで重要なメッセージが明確に再記述され、簡略化されています。
情報をより詳細に紹介することから始めますが、マーチャントに押し付けることは避けてください。
良い例
「HolidayMail アプリでは、年間を通じて、さまざまな祝日を祝うお客様にメールを送信することができます。」
悪い例
「ホリデーメールアプリを使えば、世界中のどこに住んでいても、1 年を通してさまざまな祝日を祝うお客様にアプローチできます。」
短く、優しく注意を促す。
良い例
「自動化された HolidayMail キャンペーンにより、より多様な顧客層にアプローチできます。」
悪い例
「HolidayMail は、世界各地の祝祭日を祝うお客様へのアプローチを容易にします。」
中心となるベネフィットを簡潔に最終的に補強する。
良い例
「HolidayMail で世界の隅々まで商品をアピールしましょう。」
悪い例
「HolidayMail アプリを使って新しい祝日を見つけることで、世界中のお客様に商品をアピールすることができます。」
文脈に沿った教育で信頼を維持
マーチャントは、新しい経験を提示されたときに初心者モードになります。オンボーディング・フローは、最初の学習をサポートし、状況に応じたレッスンを提供する必要があります。知識とスキルを徐々に高めていくことを目指します。自信を持たせ、マーチャントがあきらめないようにするために、できるだけ親しみやすくしましょう。
教育コンテンツは、次のようにします。
- 情報を提供しつつ、圧倒しない。
- 成功してもしなくても、すべてのステップでフィードバックを取り入れ、マーチャントが自分の行動の効果を知ることができるようにする。
- わかりやすい言葉を使う。
- 中心となるベネフィットについて、フロー全体で一貫した用語を使用する。紛らわしい用語や馴染みのない用語はツールチップで明確にしましょう。
- 常に次のステップを提示する。"next, first, then "などのステップ用語を使用してください。
- 新しいタスクを完了する必要がある理由を説明する。
- 重要なコンセプトを強化し、繰り返す。詳細な説明から始めて、フローの次のステップでは徐々に簡略化する。
オンボーディングフローでマーチャントを誘導する際には、必ず次のステップを提示します。
なぜ新しいタスクを完了する必要があるのかを説明する。
良い例
- メールアカウントを HolidayMail に接続することで、顧客リストが自動的に取り込まれ、アプリからすぐにキャンペーンを開始することができるようになります。
- 顧客リストは HolidayMail が自動的に取り込みます。
悪い例
- 何が起こるのかを説明せずにコールトゥアクションを提供してはいけません。
- アカウントの接続
定義のためのツールチップを使用
ツールチップを使って、商品や機能を使う前には知らなかったような、新しい、技術的な、または業界特有の専門用語をマーチャントに教えてあげましょう。プロからのアドバイス：Shopify では、業界特有の用語が世界的に理解されておらず、より平易な言葉で表現されている場合は、デフォルトでは使用しません。
良い例
悪い例
- ツールチップを使用しないでください。
- マーチャントアクション
- 説明用コンテンツ
- 詳細な説明
- 個人情報の必要性に関する説明
ファイナルインプレッションのプラン
製品や機能（特にアプリ）の中には、開発者によって非推奨とされたり、廃止されたりするものがあります。また、マーチャントがアプリをアンインストールしたり、製品や機能の使用をやめたりする場合もあります。オフボーディングを導入することで、最終的に良い印象を与えることができます。
良いオフボーディング体験
- アカウントや請求書のページなど、論理的で見つけやすい場所に購読中止のコールトゥアクションを設置する
- 解約を明確に確認すること
- プランのダウングレードやサブスクリプションの一時停止など、キャンセルするための選択肢を提示すること
- 解約またはダウングレードした場合に、どのような情報が失われるかを加盟店に知らせること
- フィードバックのリクエストを迅速かつスムーズに行う（関連性がある場合のみフィードバックをリクエストする）
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion