UIの学習のために生まれたUI

UIには本来のサービスが成り立つ上で必要な機能に基づいた必須UIの他に、その必要機能についてユーザーに学んでもらうための学習用UIというものが存在します。本来であればサービスに必要なのは必須UIのみだったはずですが、リリース後やリリース前の段階においてユーザビリティテストを行なった結果があまり良くないのであれば改善をすることになります。しかし、UIのどこに課題があるのかの分析と改善には時間がかかり、実装などでも工数が発生することも考えると、より少ない手間で解決する方法が望まれます。今回は、このようなユーザビリティ上の課題を解決するために生まれた学習用UIのパターンをご紹介します。

使い方を学習するためのUIパターン

もし新規のユーザーがサービスのコア機能の使い方がわからなければ、サービス自体を利用してくれないかもしれません。また、既存ユーザーであっても新しい機能の追加時や、アップデートによってUIがガラッと変わったのであれば、今までのように利用できないこともあります。このような状況の時に使い方を学習するためのUIが必要になりますが、代表的なものとして下記の3パターンがあります。

• ウォークスルー
• コーチマーク
• チュートリアル

ウォークスルー

語源としては演劇などからきている言葉で、元は立ち稽古や、通し稽古という意味がありますが、ユーザビリティやシステム開発の現場でも使われている用語です。
UIのパターンとしてはストーリー、または一連の使用の流れに沿って情報を伝えるという意味で用いられます。一部、上下フリックの場合もありますが、多くは左右フリック、またはWebサービスなどの場合にはボタンなどで画面を切り替えて操作するUIです。このウォークスルーでは使い方以外に、サービスの内容を伝えるという用途で使われることもあります。
例としてMoltoというメール管理のアプリケーションでは、メインの機能の使い方を4枚のウォークスルーで紹介しています。
ウォークスルーを使用するメリットとしては、事前に機能をどのようにして使うことができるかを知ることができますが、最初に一気に説明するだけなので、ユーザーが実際にその画面に辿り着くまでに忘れてしまうというデメリットも存在します。多くの情報を伝えたい気持ちはありますが、すぐに使用する可能性が高いメインの機能のみに止めましょう。また、ユーザーによっては説明されるよりも実際に使いたいというケースもあるため、必要にスキップボタンを設置したり、必ずしも見る必要はないということを伝えるために、ポップオーバーなどと組み合わせたウォークスルーも検討できます。

コーチマーク

名前の通り、コーチ（指導）するマークを実際のUI上に配置するというパターンです。画面全体にオーバーレイ、または部分的にボタンなどを指し、場所と意味を伝えるという特徴があります。
Ultra Visualという写真撮影アプリケーションでは、撮影画面上の主な機能の位置を矢印で示し、どのようなことができるのかということをユーザーに伝えています。コーチーマークはマーク（矢印）のみではなく、必ずどのようなことができるのかをコーチ（指導）するためのテキストも必要になります。ウォークスルーと同様に全ての機能について説明するのではなく、メインの機能のみに絞って情報を伝えることが必要です。
メリットとしては実際に表示している画面上にオーバーレイされる形で表示されるため、機能の意味と同時にユーザーは機能の位置情報も記憶することができます。また、画像を上に表示するだけであるため、比較的実装コストが低く、導入が簡単な方法でもあります。ユーザーの操作を一時中断させてしまうことでストレスに繋がるというデメリットもありますが、操作を中断させるオーバーレイを画面全体ではなく、部分的に表示されるタイプのコーチマークも最近は増えてきています。

TwitterやPaperのアプリケーションでは、ジェスチャのコーチマークのポイントを画面上に表示させると同時に、説明用のテキストを部分的に表示しています。このタイプであれば、ユーザーは表示されているジェスチャを必ずする必要は無く、他に実行したい操作があればそちらを優先することができます。

チュートリアル

特定の決まったパターンのUIは存在しませんが、使い方を学習するインタラクションという意味でチュートリアルのパターンを紹介します。画面内の機能の使い方を説明するという視点ではコーチマークと似ていますが、チュートリアルはより段階的にタスクをユーザーに示し、提示されたタスクを完了させることで次のチュートリアルに進むことになります。主にゲームなどの独自UIが使われているサービスに多く、実際にユーザーに行なってもらうことで一連のフローの体験を元に学習してもらうことができます。
例えばパズドラのアプリケーションでは実際のパズルの動かし方や、動かし方の違いによってどのような効果があるなどを、一連のチュートリアルとして紹介しています。完了するまではユーザーの行動は制限することになりますが、ユーザーに簡単な操作だと思わせることができれば成功で、その後は自分自身で使うことができるでしょう。
メリットとしては、一連の流れを実際に体験しながら説明することになるため、読んだだけのウォークスルーやコーチマークよりも印象に残りやすくなります。チュートリアルも他のUIと同じく、ユーザーの行動を制限してしまうことになりますが、行動制限や完了までにかかる時間のストレスを、ゲームなどでは報酬を与えることでうまく軽減しています。学習用のUIとしては最も高い効果を期待できますが、実装コストやチュートリアル自体の設計にも時間がかかるため、採用するかどうかには検討が必要でしょう。

以上、学習用UIとして3つのパターンに分けて紹介してみました。もし自社のサービスでユーザーがうまく操作できていない、気づいていないという機能があるのであれば、この学習用UIを検討してみてはいかがでしょうか。そのためにはユーザビリティテストなどを行い、ユーザーが共通してつまづくポイントと、なぜそのUIが使いにくいかの原因を明確にすることから始めましょう。しかし、ただ学習用UIを追加して放置するのは一時的解決にすぎません。長期的な視点ではユーザーが問題としている箇所は改善を行ない、学習用のUIがなくとも使えるUIにする努力は忘れないようにしましょう。