🕴️

新しいエディターが登場。より早く・より有効にツアーを作れるようになりました。

新しい編集画面(以後「エディター」と呼称)を紹介します。

💡
サマリー

Onboardingに新しいエディターが登場。

インストール：https://chromewebstore.google.com/detail/onboarding-editor/fofjhnfenkjmplmcmeokgnbjkgllodjp

  • 自社サイト上でのツアーやポップアップの編集が可能に。作業速度と快適さがUP。
  • ツアーの流れが一目瞭然に。俯瞰したメンテナンスがやりやすく。
  • ターゲット設定と自動表示条件の一覧性が向上。ひと目で理解しやすく。

新しいエディターが登場

image

これまで、ツアーやポップアップの作成と編集はOnboardingの管理画面の中でのみ行える機能でした。

これにより、少し面倒くさい体験をご経験の方もいらっしゃるのではないでしょうか？

例えば次のような体験です。

  • 作ったツアーやポップアップをどこに・どのように表示するか考えるため対象のWEBページとOnboardingの管理画面とを往復する
  • 表示位置の適切さを確認するために何度もプレビューして、10ステップ目まで自分の手で移動する…。
従来のエディターで“ステップ6”の表示を確認するユーザーの動き（再現）

そこで今回、WEBページ上で動くエディターを開発。これにより、実際のWEBページ上でツアーやポップアップを作成・編集できるようになりました。

ページ上にステップを追加する様子（クリックで再生）

完全に新しい編集体験

各項目のユースフルネスが向上

従来のエディターを触るユーザーの多くには、ある共通点がありました。

それは「えーっと、ステップ分岐ってどこで設定するんだっけ」等と言いながらOnboardingの管理画面内をぐるぐると探し回る動きです。

これは、操作したい項目名をぼんやりと思い出してからオプションを開き、上から眺めてその時々に必要なものを見つけるという総当たりを毎回やっていることに原因があると思われました。

💡
従来のエディターの総当たり的な体験
  1. 操作したい項目名をぼんやりと思い出す
  2. オプション（全ての操作対象が表示されている操作盤）を開く
  3. 上から順に眺めて項目名を見つける

（これを毎回行う）

新しい編集体験。対象を掴んで編集する形式（クリックで再生）

そこでまずは、操作盤に全ての項目を格納することをやめました。

新しいエディターでは、操作したい対象を選択するとその対象の項目を編集できます。

これにより編集の学習コストと習熟速度、そして作業速度が大きく改善しました。

新エディター(実験時)
目的物の発見までの速度(平均)
9.38秒
〃 (中央値)
5.5秒

新しいエディターでは直感的にやりたいことが出来るようになり、操作すべき項目名を思い出せなくても（あるいは知らなくても）有効に作業できます。

自社サイト上の操作でコンテンツ作成

ツアーやポップアップを追加する作業はこれまでと違い、御社のプロダクトのWEBページ上で行うことが出来ます。

ページ上の操作でステップを配置（クリックで再生）

ツアーの流れが一目瞭然に

従来のエディターでは、作成した施策を見る際に非常に多くのクリックが行われていました。

該当するのは、例えば次のようなケースです。

  • 編集したいステップを見つける時
  • 流れを確認するため
  • 設計にミスが無いかチェックする時
  • 各ステップの内容を確認する時

この探索行動の多さはツアーやチュートリアルの設計を俯瞰で見ることをほぼ不可能にします。

また面倒さから、作った施策はメンテナンスされず放置される傾向もありました。

特定のステップを見つけるためにステップを”ザッピング”する様子（再現）

そこで、そういったメンテナンスの難しさを解消するために、ステップの一覧もリストではなく俯瞰しやすいパネルへと変更、再設計。

パネルでは各ステップのサムネイルも表示されているため、それぞれのステップを1つ1つ開かずとも、その内容や形状から当たりをつけたりチェックすることが可能になっています。

“ツリー”と呼ばれるパネル(画面下側)。作成したツアーの流れの全体像が見える。
“ツリー”と呼ばれるパネル(画面下側)。作成したツアーの流れの全体像が見える。

ターゲット設定へアクセスしやすく

ツアーやポップアップには表示条件を設定出来ますが、従来のエディターではその設定場所がやや奥まった場所にあり、確認作業を面倒にしていました。

新しいエディターでは、この設定欄を下部パネル内に移設。この一覧性によりほぼ一見しただけで表示条件を確認できるようになりました。

表示条件を設定する様子（クリックで再生）

追加の案内

さらに細部について

より細かな箇所・挙動にも大胆な変更が加えられていますので、それらについての解説を特設しました。以下からご覧ください。

新エディターの起動方法新エディターでの分岐作成手順エディターを終了する方法ターゲット設定と自動表示条件の設定方法

まだまだな部分

今回リリースした新しいエディターは画期的な体験を提供します。しかしながら、既存機能の全てを一気に移設したわけではなく、新エディターでは使えない機能もあります。

ヒントの作成はまだ出来ません

ヒントの作成・編集は、新しいエディターでは利用できません。現在鋭意開発中ですので、いましばらくお待ちください。

その他暫定的対応

また、新エディターの体験は以下の点については現時点では暫定的な対応となっており、今後より良い形へとアップデート予定です。

  • 新エディター内で施策を新規作成することはできません。新規作成は従来通り管理画面からのみ可能です。
  • 施策を公開する際は、一度従来のエディターにリダイレクトされ、その中で公開ボタンを押す必要があります。
  • 次の操作は、現時点では従来のエディターからのみ行えます。
    • 表示スタイル設定
    • アクション対象要素の指定
    • ステップ開始時の移動先URLの指定
    • ツアーのタイトル変更
    • ポップアップのタイトル変更
    • プレビューURLの変更

FAQ

従来のエディターはどうなるの？

長期的には、新しいエディターに完全に移行し、従来のエディターは廃止へ向かいます。

ただし今すぐに従来のエディターをフォローしなくなるということはありません。移行に際しては、十分な通知・告知を行なってまいります。

従来のエディターで作った施策はどうなるの？

従来のエディターで作った施策も、新しいエディターで編集することが可能です。

ただし現時点ではヒントを新しいエディターで編集することは出来ません(対応予定)。

Credit

  • Dev
    • FrontEnd：Taiki Bun, Taiga Ebihara, Takehiko Sora, Masaya Omori
    • BackEnd：Tomohiro Suzuki, Takehiko Sora, Yuta Endo, Masaya Omori
    • QA：Keizo Uchida
  • Design
    • UI Design：Yuki Yoshinaga, Takehiko Sora, Masaya Omori, Kaito Katayama
    • UX Research：Yuki Yoshinaga