つみきのアプリエンジニア、鈴木慎吾です。

アプリを開発する際は、なるべく説明のいらない簡潔なUIにするように心がけていますが、はじめてアプリを起動するユーザーに向けたアプリ紹介や、複雑な操作をするUIについてはチュートリアルが必要になることがあります。 今回は複数のアプリを例にチュートリアルのパターンを考えてみたいと思います。

ダイアログでチュートリアルを表示

Sumallyではタイムライン画面やおすすめ画面を初めて表示した際に、ダイアログで画面の説明が表示します。

また、Evernoteではダイアログを表示して、ユーザーにプッシュ通知を有効にするように促します。

ダイアログは実装が簡単で気軽に利用できる一方で、ユーザーにとっては毎回OKボタンを押す必要があるために煩わしさを与える可能性があります。ダイアログを利用する場合は本当にユーザーに確認させる必要があるかを検討した上で、できるだけ簡潔なメッセージにするのがよいと思います。

画面の一部にチュートリアルを表示

Twitterでホーム画面を初めて表示すると、画面上部にチュートリアルが表示され、ユーザーが友だちをフォローするように促します。通知画面を表示すると画面の説明が表示されます。

反転した配色のため目立ちますが、ダイアログのように画面全体を覆うことはないので、ユーザーの操作を妨げません。

Evernoteでは画面上部にさりげなくチュートリアルを表示します。イラストと簡潔な見出しが好印象です。

コンテンツが空の場合は画像とメッセージでアクションを促す

つみきの自社サービスFilmarksでは、ユーザーの投稿がなかったり、メンバー登録をしていないために、表示するコンテンツが存在しない場合に、ユーザーのアクションを促すメッセージと画像を表示します。

表示すべきコンテンツが存在しないページでは、積極的にチュートリアルを表示するのがよいと思います。

ツールチップでボタンの機能や複雑な操作を説明

Vineの各ボタンや、グノシーのチャンネルボタンは、シンプルで洗練されていますが、初めて利用する人には何をするためのボタンか分からないかもしれません。そのため、初回起動時にツールチップでボタンの機能を説明しています。

iQONでは写真を配置するために、拡大・移動・回転・削除など複雑な操作が必要なため、ツールチップを複数ステップにわけて表示しています。

ツールチップを利用すれば画面上のすべてのボタンを説明することも可能ですが、ユーザーに煩わしさを与えないように、使用は必要最小限にするのがよいと思います。

ツアーでアプリの概要を説明

多くのアプリでは、起動直後の画面で登録・ログインボタンを表示すると共に、画像とテキストでアプリの概要を紹介しています。左右にスワイプすることで、複数のページを切り替えて表示できるようにしているのが一般的です。LINEの場合は大きく簡潔な見出しによって、アプリの機能がひと目で分かります。

Hyperlapseでは、アプリを利用して実際に撮影された動画が掲載されています。ワクワクするような動画を観ると今すぐアプリを使ってみたくなります。

Layoutではアプリの操作感を動画で説明します。動画を使用すると文章での説明がほとんどなくても、アプリの機能が理解できます。

つみきの自社アプリRIZMでは初回起動時にユーザーの音楽ライブラリを解析します。解析中の待ち時間を利用して、プログレスバーとともにツアーを表示します。

ツアーでは画面を大きく使用できるため、画像が大きく使用できます。動画、アニメーションの使用を検討してみても良いかもしれません。動画を使用すると、文章での説明を省略することができます。

アニメーションを使った操作説明

スワイプでのページ切り替えなど、ジェスチャーでの操作はアニメーションを使用したチュートリアルが適しています。 SmartNewsではタッチポイントが左右にアニメーションしてスワイプでのページ切り替えを示唆します。 グノシーではアニメーションと共に実際にページが切り替わるため、より直感的です。

つみきの制作事例、おかっパメラではスワイプや画像拡大などの機能をアニメーションで説明します。

ジェスチャーのような複雑な操作は、文章での説明が難しいため、アニメーションでのチュートリアルが適していると思います。

いかがでしたのでしょうか？このようにチュートリアルといっても、使いたいシーンや説明の対象によって様々なパターンがあり、目的によって使い分ける必要があります。

次回はiPhone & Andoridアプリのエラー表示のUIについて考えてみたいと思います。