グループ_144

アプリのアップデート300本ノックから学ぶUI改善のヒント

宮﨑 晃

こんにちは、HR業界でアプリマーケティングをしている宮﨑です。

・アプリのアップデート前後のUI変化
・Push通知など気になったGrowth施策

こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。

今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。

行動 = 動機 × 実行能力 × きっかけ

ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか？というモノ。

詳しくは深津さんの記事がとってもわかりやすいのでおススメです。

アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。

それではいってみましょう！

【動機】がないと、やる気にならない

①慣れない体験にはイメージ作りを

よくわからない体験はやったみたいと思わない。どんな場面で何ができるか利用イメージをもてるようにする。

■共同財布：ウォークスルーのUI変更
アプリで便利に！とフワッとした説明から、具体的なペイン事例を紹介。グループ 160

■助太刀：Pay画面のUI変更
職人探しアプリ。給与のやり取りをするPay画面で｢〇〇する｣という行動喚起から｢〇〇できる｣という機能説明に。
グループ 127

■キッチハイク：ホームのUI変更
グルメでつながるマッチングアプリ。参加レポートなどの｢どんな体験？｣をホームの最初で見せる仕様に。
グループ 161

■ecbo cloak：利用場面を伝える施策
どんな荷物を預かれるかをプッシュ通知で具体的に紹介。
グループ 159

②慣れている体験には特別感を

慣れている行動でも、伝え方や見せ方で特別感は作れる。そこから「試してみたい」の感情が引き出せるとBEST。

■MERY：検索画面のUI変更
レコメンドに「トレンドキーワード」という名前がつき、文字がピンクに。女性メディアらしい項目に進化。
グループ 135

■サンマルクカフェ：クーポン施策
「お得な抽選クーポンが当たりました！」とプレミア感がある表現。
グループ 136

【実行能力】がないと、離脱する

③物理的な負担を減らす

なるべく少なく工数で目的達成ができるようにする。同じ工数でもCTAボタンは押しやすい位置に置きたい。

Pinterest：詳細画面のUI変更
タブバーが無くなり、画面下に｢シェア｣｢保存｣などの重要なボタンが移動。
グループ 137

■Googleマップ：写真投稿の促進
写真と位置情報が連動して一覧で並ぶので、探す面倒なく写真投稿が可能。
グループ 138

■ヤフオク：出品画面のUI変更
カメラボタンを押さなくても「写真orアルバムから選択」の選択肢が自動で出る仕様に。1手削減。
グループ 139

■aumo：検索タブの変更
｢実際のお出かけ｣に繋がりやすい現在地付近の詳しい情報がデフォルトに。
グループ 140

■Retty：口コミの見せ方
ランチとディナーにわけて確認できる仕様。一覧で仕分ける手間が無く楽。
グループ 141

④心理的な負担を減らす

実際の工数だけでなく「大変そう」と思われる画面になっていないか？不安にさせない、迷わせないことが大切。

■Studyplus：登録画面のUI変更
カテゴリーの色の選択がピッカー式になったことで最初に目に入る選択肢が16個→1個に激減。
グループ 148

■Meetup：イベント詳細のUI変更
長くてよくわからなかったCTAボタンの名称が｢参加｣にシンプル化。
グループ 149

■ジモティ：商品詳細のUI変更
｢問合せ｣ボタンが具体的な文言を選択する形になったことで、押すと何が起きるのかが直感的に。
グループ 150

【きっかけ】がないと、気づかない

⑤ユーザーの目に届く促進をする

どんなに良い機能や施策でも、ユーザーが気付かないと何も始まらない。 視界にキチンと入れてあげる。

■メルカリ：購入画面のUI変更
メルペイスマート払い以外を選択時にメルペイ訴求を出す仕様に。
グループ 151

■マイナビ転職：スカウトのUI変更
｢スカウトの希望条件｣と｢Web履歴書｣の変更ボタンを追加。カラの時に何をして欲しいかが伝わりやすい。
グループ 154

■RETRIP：検索タブのUI変更
画面TOPでポイントが貯まる外部サービスを大きく表示。「何をするとどうお得か」が明確。
グループ 153

■すかいらーく：クーポンのUI変更
画面上部のタブがスクロール式からボタン式に。隠れていたクーポンが一目で見れる仕様に。
グループ 152

⑥アプリ外で接点をもつ工夫を

アプリ以外のチャンネルでもユーザーと接点を持つことで、より個別化したコミュニケーションが可能に。

■indeed：メール機能促進
求人の最下部に｢新着求人をメールで受け取る｣ボタンを設置。
グループ 155

■ZOZOTOWN：LINE連携促進
商品詳細で300円分のポイント訴求を使ってLINE IDとの連携を促進。
グループ 157

■Twitter/Duolingo：Gmail→App導線
Googleアカウントの画像をアプリキャラに設定→メール一覧でアイコンが目立つことで開封率UPが狙えそう。グループ 158

さいごに

400を超えるアプリが毎日変わっていくのをみて「完成されたプロダクト」なんてないんだなと感じています。

今後も成長するべく月100本の投稿は続けていくので、よければTwitterもチェックしてみてください！

また、今回使った「フォッグの消費者行動モデル」についてガッツリ勉強できる本とサイトを載せておきます。

では、また来月の#アプリノックにて。

この記事が気に入ったらサポートをしてみませんか？