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

きしこの研究

日々の勉強をアウトプットする用だよ。

アプリ研究④ ~チュートリアル(導入画面)編~

今回は、アプリのチュートリアル画面についてです。

 

アプリの顔とも言える導入画面。

アニメーションや言葉遣い、デザインを効果的に使いサービスの性能をわかりやすく伝える必要があります。

 

大きく分けて4つに分かれるそうです。

 

01 |スプラッシュ

LINEやTwitterなどで使用されています。↓

f:id:kisico0418:20161129183328j:plain f:id:kisico0418:20161129183402j:plain

アプリの起動の待ち時間に表示されます。

もし待ち時間の長いアプリだとしばらくこの画面だとちょっとイライラしますね。

www.standardinc.jp

 

jp.pinterest.com

 

 

 

02 |ウォークスルー

私的によく見かけるタイプです。

スライドショーのように、サービスの画面と内容を全体で伝えることができます。

f:id:kisico0418:20161129175747j:plain  f:id:kisico0418:20161129175754j:plain

 

特徴として、

・伝える内容はサービスのコンセプト寄り

・4~6枚のスライド

・ほぼほぼページの最後にログインページが設置されている

・文字は簡潔にわかりやすく

・イメージ画像or取扱説明書的なものに分かれる。

・言葉はラフな感じ 例:ようこそ! さっそく始めよう!etc...


 

uxmilk.jp

 

 

03 |コーチマーク

表示されているUIがどのような機能・役割を持っているのかを解説している一時的な画面です。

f:id:kisico0418:20161129175749j:plain f:id:kisico0418:20161129175751j:plain

 

f:id:kisico0418:20161129175753j:plain f:id:kisico0418:20161129175752j:plain

 

特徴として

・機能の具体的な特徴を伝える時に効果的

・オーバーレイで一部を目立たせる

・バルーンメッセージでお知らせ

・順序に沿って行うので、迷うことがない

・ダウンロードしてしばらくしてから出現する時もあるので、サービスのヒントのような役割を果たす時もある。

・写真アプリでよく見る気がする

 

ただ、見てわかるでしょ!という機能にもたまについているので早く進めたい人にはイライラさせるかもしれません。

 

04 |エンブティメッセージ

まだ、表示データがない場合や画面不調の際にメッセージとして出ます。そして、次にやるべきことを表示しています。

↓以下の場合だと[歌を始める]

f:id:kisico0418:20161129192933j:plain

 

特徴として、

・前向きな言葉の方が使われやすい

(「データがありません。」よりも「アップしませんか?」など)

・どう次にアクションしたらいいかもセットで表示する必要性がある

 

参考:スマートフォンのためのUIデザイン/池田拓司

https://www.amazon.co.jp/dp/4797372303/ref=cm_sw_r_tw_dp_x_mSvpybB27Z613

hajipion.com

 

アプリにおける導入画面の考え方 - NOTE - MIFURU

 

 

まとめ

チュートリアル画面というと、02のウォークスルーのことをイメージしていました。

実際にアプリをインストールして見たり、本や導入画面のweb記事をみてみると4つに分類され、サービスの狙いにあった方法で説明をする必要があるのだと知り驚きました。(ウォークスルーといった名前があるのも知らなかった。)

「導入画面」に無意識に触れていたおかげで?ストレスなくサービスを使いこなしていたので、どこでユーザーがつまずきそれをどうサポートするか、細かく設計する必要があるのだと感じました。

サービスをより使いこなすには親切な機能ですが、あまりに親切すぎるとイライラの原因に繋がるので、どこまで手助けするか・サービスをより知ってもらうために効果的な手段の見極めが大切だと、これからのサービスをデザインしていく上で気をつけたいなと思います。