プロダクトマネージャーの道具箱

読者です 読者をやめる 読者になる 読者になる

小さなごちそう

プロダクトマネジメントや日々の徒然について

ユーザーをイライラさせないIn-App Walkthrough(アプリ初回起動時の説明スライド)の作り方

Appデザイン

スマートフォン・アプリを初めて起動したときの説明スライド(In-App Walkthrough)の必要性は、いつも悩むところだ。

不要派の主張はだいたい以下の通りだ。

  • ユーザーは早くをアプリ操作したい
  • どうせ読まれない
  • AppStore上の説明パネルで事足りる

要は「作成コストがかかる割には効果がないのでは」ということだろう。いちユーザーとしては僕も確かにそう思う。ただ、提供側が期待するほどユーザーの理解力は高くない。実際にユーザーテストをしてみると、一通りアプリを操作したもらった後でも、作り手の意図が思った以上に伝っていないことがわかる。

操作画面では思った以上に伝わらない、アプリの価値

操作UIだけで「なぜこのアプリが必要か」「どんな問題をどのように解決しようとしているのか」というアプリのバリュー・プロポジションを十分に伝えるのは非常に難しい。

ユーザビリティを考慮してログイン後の操作画面は下記のようにすることが多いと思う。

  • 説明書きはできるだけ排除してシンプルなUIにする。
  • 独自の用語は避けて、一般的な用語を用いる。
  • 応用的な機能は可視性をあえて下げて、基本機能だけを前面に出す。

結果として平凡なアプリに見えたり、個々の機能の必要性や利用シーンが理解されなくなったりする。

そう考えると、アプリへの期待感が高いうちに、多少のストレスを感じさせてしまっても説明スライドを見てもらえると、結果的にはアプリの価値を理解しやすくなりユーザーの課題解決につながるのではないか。

ストレスのないIn-App Walkthroughを作るには

では、ユーザーにとってストレスの少ない、思わず見てしまうようなIn-App Walkthroughをどう作るのか。IFTTTの例が参考になる。


出典:https://github.com/IFTTT/JazzHands

 画像と文字から構成される単なるスライドではなく、アニメーションとトランジションを効果的に使ってユーザーの目を惹きつけている。

GitHubで同様のIn-App Walkthroughを作るためのライブラリが公開されている。

下記のサイトでも、BoxMailboxなどアニメーションやインタラクティブな効果をIn-App Walkthroughに採用したアプリの例が紹介されている。

最後にIn-App Walkthroughの実例が見られるサイトをいくつか紹介しておく。アニメーションを採用しているものはなさそうだが、メッセージや構成が参考になる。(一つ目のサイトはモックアップを実際に操作できる)