ユーザーがストレスなく完走できるチュートリアルの工夫5選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

新しいアプリを作るとき、オンボーディングやチュートリアルは一つの大きな関門です。シンプル過ぎてはアプリの機能がわかりませんし、逆に複雑すぎてはそのままアプリを閉じられてしまう可能性もあります。苦労して作ったものですから、正しい方法で使って欲しいですよね。

ユーザー目線ではどうでしょうか? あなたは新しい商品を買った時に説明書やマニュアルに目を通しますか? 早くその商品を試したくて、説明書やマニュアルをすっ飛ばして実物を触りにいく人も多いかと思います(欧米では"RTFM(Read The Fxxkin' Manual)"という「とりあえずマニュアル読め」言葉があるくらい、マニュアルは読まないものと言われています)。

アプリやサービスも一緒です。初回起動のユーザーは何らかの期待を胸にアプリを開いてくれているはずです。その期待を維持したまま、あるいはそれを増幅してあげた上で、サービスを利用開始してもらうのが、良いUXと言えます。

この記事ではアプリのチュートリアル事例を共有しつつ、良いUXを提供するために工夫できそうな点をご紹介します。

1. 基本操作をアニメーションで直感的に伝える

InstagramのLayoutではユーザーが実際に行う基本動作のみに焦点をあて、アニメーションで表現しています。ユーザーは直感的に操作を知り、アウトプットまでのステップも学ぶことが出来ます。直感的に、カンタンに操作できると知ったユーザーはより期待を高め、アプリを開始できるでしょう。

2. シームレスなページングでフリックを促す

IFTTTでは典型的なページングチュートリアルを採用していますが、ただ下部のドットを追ってページングするかとおもいきや、前ページの要素がフリック中に移動し、そのまま次ページの要素となっていきます。自分のフリックと連動したアニメーションはただのページングのアクションに自己帰属感を与え、次めくったらどうなるのだろう? という好奇心を生みます。

3. タンジブルなアニメーションを入れる

Jellynewsのタンジブルな(=実体感や手触り感のある)アニメーション効果は、ユーザーのアクションと組み合わせてあげることで、フリックする気持ちよさや楽しさを演出できます。説明する事柄が多い場合などには、ユーザーの気を紛らわすことができる有効な策かもしれません。

4. 成果物を見せる

Hyperlapseではこのアプリで作ることの出来るタイムラプス動画を真っ先に見せることで、ユーザーの創作欲求を刺激するオンボーディングとなっています。使い方がシンプルなものは、アプリの使い方よりも、ユーザーが得られる対価にフォーカスしたほうがいいかもしれません。

5. 要点を極力絞る

Timelineはニュースを時系列で追えるニュースアプリですが、余計なセールストークは一切なく、独自の機能のみを端的に紹介するのみにとどめています。競合が多く、ユーザーにとって主機能が明白なアプリはほかと何が違うのかをアピールするくらいで十分でしょう。

まとめ

今回は初回起動時に焦点をあてましたが、この場合、ユーザーはたくさんのアプリの中からあなたのアプリが自分にとって有用なのか品定め状態であることも忘れてはいけません。

アプリのジャンルによって、より説明が必要なものだったり、逆にほとんど説明が必要がないものだったり、ケースバイケースかと思います。どのジャンルにしても、長い冗長なチュートリアルは好まれないのは明白ですが、どうしても説明が必要な場合、上記のような工夫や、ユーザーがその情報を望む状態やテンションにしてあげることが大切です。


イベント