アプリのコーチマークの観察
ウォークスルーの観察

アプリのコーチマークの観察

よりよくユーザーに興味を持ってもらえる施策を打てないか考えた。そこで実際のアプリの画面を用いてコーチマークを使っている事例を集めて、どういうコーチマークが世の中に存在しているのか調べてみることにした。

コーチマークとは、実際の画面を使って、使い方を表示しているものである。

○DELISH KITCHENの例

ウォークスルー後にコーチマークを表示している。
ボタンだと分かりづらい、スワイプで操作するような使い方をコーチマークを用いることで説明している。

これは単純でわかりやすく必要最低限で、ユーザーの早く使いたい気持ちを邪魔しなくてすむと考えた。

画像1

○ニュースアプリ

ウォークスルー直後に、いつ通知を受け取りたいかという設定画面が来る斬新なUI。それでも早速使うというボタンが下部に用意されているので早く使いたい人間には、そちらが使えるようにしてある。

肝心のコーチマークに関しては、すべての機能を紹介するのではなく
3パターンに集約してコーチマークを設定している。

・スワイプでの切り替え
・文字サイズは配信時間の変更
・もっと見たいときに

など、ボタンの機能でひと目ではわからないものに集約してコーチマークをつけているようだ。

画像2

○吹き出し式コーチマーク(JOYSOUND)

画面全体を覆う新規機能追加と、ポップアップで新機能をお知らせしてくるなど、統一感があまりないなぁと思った。
コーチマークに関しては、吹き出し式のコーチマークで次回以降表示しないボタンが存在している。

画像3

○画面全体のスクリーンショットを使って説明するコーチマーク(N予備校)

画面全体でコーチマークを付けると、見にくいのをスクリーンショットを使って説明することでスッキリした印象になる。

例示するスクリーンショットも、実際のやり取りとできるだけ似せているところもわかりやすいと思う。また、機能の説明では主機能である「1.文字と画像を使って質問できます」と、次に大事だと思われるタグの説明を「2.タグを設定するとコメントがつきやすくなります」のように番号をつけて分けているのがわかりやすい。
特に、UIのボタンの位置を不透明度30くらいで黄色に色付けしているのが良い方法だなと思った。

画像4

○コーチマークを一つずつ表示していくタイプ(Alexaアプリ)

機能ごとに、コーチマークを一つずつ紹介していく形式だった。スキップボタンはないので、スキップしたいユーザーにとっては邪魔になるかもしれないと思った。
一つのボタンに対して、一つずつ画面を切り替える必要があるため、ちょっと煩わしいと感じるひともいるかもしれない。機能は必要になった時に紹介すればいいのではないかと思ってしまった。

画像5


参考文献


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
まりーな/エンジニア

エンジニアとして働いている成長記録やおもしろいと思ったこと色々書いていこうとおもいます 頂いたご支援は、資料や勉強のための本、次のネタのための資金にし、さらに面白いことを発信するために使います 応援おねがいします

嬉しいです
エンジニアしてますtwiiter:@marina10172013好きなもの Adobe.Ai.AE.Ps/Sketch/Blender/デジタルファブリケーション