マネーフォワード MEのナビゲーションを5年かけて改善したよ！
自動家計簿・資産管理アプリ『マネーフォワード ME』のデザイナー池内です。私はマネーフォワード入社して以来、約5年かけてマネーフォワード MEアプリのナビゲーションを改善してきました。その改善プロセスをご紹介します。
ナビゲーションとは
ナビゲーションとは、超簡単にいうと「目的地までの道筋やその道筋の案内」のことです。
たとえば、リアルなナビゲーションだと、下記画像のように、案内版や道などがナビゲーションになります。
ではアプリやWebサービスでのナビゲーションはどういうものかというと、具体的なアプリのコンポーネントだと、「タブバー（ボトムナビゲーション）」「ナビゲーションンバー（アップバー）」「ナビゲーションドロワー」「ボタン」などです。
たとえば、マネーフォワード MEアプリではメインのナビゲーションとして「タブバー（ボトムナビゲーション）」を使っています。
リアルのナビゲーション同様、アプリやWebサービスでもナビゲーションが悪いと、ユーザーさんは道に迷ってしまいます。
Before / After
プロセスの前に、先にこの5年でマネーフォワード MEのナビゲーションがどう変わったのか紹介します。
iOS版
大きく変わったのはタブバーで、「入出金」「資産」タブを追加しています。
また、タブバーにあった「入力」は、FAB（Floating Action Button）として、ホーム画面などに移動しています。FABはiOSを利用の方にはなじみの薄いコンポーネントなので、慎重にABテストして、使い心地やKPIに影響がないことを確認してから、全ユーザーに展開しました。
Android版
Android版の大きな変更点は、ナビゲーションドロワーを廃止し、ボトムナビゲーションを追加したことです。
その他にも大小様々なナビゲーションの変更がありました。その5年間に及ぶ、ナビゲーションの変更の軌跡が下の画像です。当時の開発体制の都合などで、Android先行で変更していました。
以前のナビゲーションの問題点
以前のナビゲーションでは、画面遷移が複雑に入り組んでいて、見たい情報・使いたい機能がどこにあるかわからないという状況でした。
プロダクト開発の初期フェーズでは、どんどん機能追加して、プロダクト・マーケット・フィットを目指さなければ行けないため、これは仕方ないことではあります。
ただ、中長期的にはこの問題を解決しないといけません。新たに機能を追加しても、誰もその機能を見つけられなくなってしまいます。
大きな問題の1つは、目的の情報や機能が、どの分類に入っているか予測できないことが要因でした。
また、ナビゲーションに使うコンポーネント自体が不適切だったことも問題でした。
調査
ナビゲーションの改善にあたり、以下の流れでマネーフォワード MEユーザー複数人に、カードソートのワークショップをしてもらいました。
このワークショップを行うことで、ユーザーにとって適切な各情報・機能の分類や、その分類の適切なラベリングがわかりました。
再設計
先程の調査結果をもとに、大きな情報・機能レベルで分類とラベリングを再設計しました。
その設計を元にプロトタイプを作成しました。
このプロトタイプを元に、実際のアプリに少しずつ実装していきました。
残る課題
これまでの改善でトップ階層のナビゲーションはかなり改善できましたが、下層でのナビゲーションや、コンポーネントレベルの問題はまだまだ残っています。
これからも、マネーフォワード MEに新機能の追加がどんどんされていくと思います。それと並行して、さらなるナビゲーションの改善も行っていければと思います。
※このnoteは、ミクシィさんとマネーフォワードが共同で行ったイベント、「ミクシィとマネーフォワードがデザインを本気で語ったら＃2 デザインプロセス」の登壇内容を元に執筆しました。
【マネーフォワード MEへのお問い合わせ窓口】
マネーフォワード MEへのご意見・ご要望はマネーフォワード MEのお問い合わせ窓口よりお送りください。参考にさせていただきます。
【マネーフォワードではデザイナー募集中】
マネーフォワード Home事業のデザイン部が気になる方、デザイナーとラフに話してみたい人は、こちらからご連絡ください！