見出し

大量の機能により複雑化したUIをシンプルにするために行っていること【マネーフォワード ME】

マネーフォワードのデザイナーの池内(@KD6JOE)です。私の携わっているマネーフォワード MEというアプリは、サービス開始から7年が経過し、たくさんの機能が追加されてきました。機能の追加はサービスの成長に貢献した一方、UIは複雑化し、新規ユーザーがとっつきにくい要因にもなっています。

この記事では、機能が増え、UIが複雑化したことでどのような問題が起こっているか、どのように対処しようとしているかをお話します。同じ問題に直面しているデザイナーやプロダクトオーナーの方に参考になればと思います。

マネーフォワード MEについて

マネーフォワード MEは、銀行口座やクレジットカード、通販サイトを連携するだけで、自動で家計簿が作れるアプリです。

すでにマネーフォワード MEをご利用の方はご存知だと思いますが、マネーフォワード MEはものすごく機能が多いです。世の人々のお金の管理の仕方はさまざまで、それに応えるためにたくさんの機能を追加してきました。

機能が多すぎることによって起こる問題

しかし、機能が多すぎることによって以下の問題が発生しました。

UI観点に絞ると、機能の多さによりボタンや画面が増え、ナビゲーションが複雑化し、認知負荷が上昇していました。機能を追加するのは一定数まではユーザーの使いやすさを向上します。しかし機能が多すぎるとナビゲーションの複雑化や、認知負荷の上昇で使いやすさは悪化してしまいます。(下図参照)

機能の数がこの図のピークをすぎた頃になると、App StoreのレビューやTwitterなどで「使いづらい」とか「難しい」などのコメントが目立ち始めます。

さらに図の右の方になると、新機能を追加してもナビゲーションが複雑過ぎて誰も使わないという状況に陥ります。サービスの成長はそこで行き詰まりです。そうなる前に対処しないといけません。

機能整理のプロセス

マネーフォワード MEではその問題点を踏まえ、少しずつ機能の整理を進めています。まだ試行錯誤中ですが、以下がおおまかなプロセスです。

1. 整理した方がいい機能のピックアップ

整理したほうがいい機能をヒューリスティックな観点でピックアップします。下記がピックアップする基準です。

可能なら全機能の行動データを分析したり、ユーザー調査を詳細に行って全機能を棚卸しすべきです。しかし機能が多すぎるゆえに分析用のイベントを仕込むところからつまづいてしまいました。そこで「やりやすいところからやっていく」方針に切り替えました。

2. 利用率・利用頻度の計測

1でピックアップした機能の利用率(全アクティブユーザー中、何%が月に利用しているか)と利用頻度(その機能を利用しているユーザーが月に何回その機能を使っているか)を計測します。すでに整理対象の機能を絞っているのでログを分析するのもそこまで手間はありません。

利用率と利用頻度を計測したら、下図のようにマッピングします。

利用率が低いかつ、利用頻度も低い機能をさらに整理の対象として検討を進めます。利用率が高いものはそれだけ多くのユーザーにニーズがあるということですし、利用頻度が高いものは利用率が低くともヘビーユーザーを引き止めることに役立っているからです。

3. 利用実態の深掘り

2で抽出した「利用率が低いかつ、利用頻度も低い機能」がなぜそのような利用実態になっているか改めて深掘りします。以下のような理由が考えられます。

・ニーズがない
・ニーズはあるがサービスのコアニーズから遠い
・ナビゲーションが深い
・ユースケースが別の機能と重複して利用率が分散している

改善の余地があるものは改善し、残すのが難しい機能は整理することを決定します。

ナビゲーションが深いから使われない機能も、結局は情報構造上浅いところに置けなかったり、コアニーズから遠いという理由があってそこに置かれているので、どうしようもないことが多いです。

4. リリース

整理する機能が確定したら、デザインや開発を行ってリリースします。リリースの前後では下記を行います。

CS(カスタマーサポート)との調整は必須です。機能を整理するとどんなに使われない機能でもお問い合わせが来ます。その対応をするのはCSのメンバーです。CSのメンバーとお互いに協力しないと機能の整理はなかなか進みません。

利用率が微妙な場合はその機能の導線を縮小したりナビゲーションを遠いところに移動して、ワンクッション置くこともあります。利用率を最小化することで、ユーザーの反応からニーズがどれほどのものか伺えるし、実際に整理したときにネガティブな反応も少なくなります。

リリース後もTwitterやAppStoreのレビューなどで反応を伺って、ユーザーのコミュニケーションのとり方なども調整していきます。

最後に

この記事はマネーフォワードで行ったデザイナー向け交流イベント「MoneyForward Design Meetup」で発表したスライドをまとめたものです。

機能の整理なんてニッチな内容がそこまで需要あるかなと思っていました。しかしイベントに参加いただいたみなさんに話を聞くと同じようなことに課題を持っている方が多かったです。この記事も誰かの参考になれば幸いです。

参考文献




この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

121

池内健一

マネーフォワードで自動家計簿・資産管理サービスのデザインをしています。Twitter:https://twitter.com/KD6JOE

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
11つ のマガジンに含まれています

コメント1件

マネーフォワードの請求書や会計のUIが非常に使いづらく、明確なバグも多くあるので、ぜひそちらの部隊でも改善のほどよろしくお願いします。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。