こんにちは、こまたつです。
先週リリースされたAndroid版Misocaにて請求書などの詳細を表示する画面のリニューアルを行いました。
あたらしい詳細画面で表示する内容は元の画面とほとんど変わりありませんが、より見やすく項目を整理しました。
今回はこのリニューアルの過程でどのように検討・決定してきたかを少しだけご紹介したいと思います。
抱えていた課題
昨年6月にアプリをリリースしてから、様々なアップデートや軽減税率への対応を経て請求書などの詳細情報を表示する画面（以下、詳細画面とします）は複雑度を増していました。
詳細画面はアプリのなかでも中心となる存在で、郵送・メール送信などの発行処理のほか、プレビューや複製などの多数の操作が行えます。
また軽減税率によって税率別の合計欄などが追加され、表示したい項目が非常に多く情報の優先度づけも困難を極めていました。
初期のバージョンは絶妙なバランスの上でなりたっており、ジェンガのように積み重なったアップデートで抜き差しならない状況になっていました。
これは新たな機能追加がしにくいだけでなく、はじめて使うユーザーがアプリを使いはじめるのを困難にしてしまっていると考えました。
どうあるべきか
Android版Misocaでは取引にまだあまり慣れていない層をメインターゲットに据えています。
ユーザーのITリテラシーは必ずしも高くはなく、なかには各項目の合計を電卓で検算したいという方もいます。
請求業務そのものも「やらなければいけないこと」であり、低いモチベーションでも間違いなく請求できる必要があります。
煩雑な画面はひと目でその学習コストの高さが伝わりモチベーションを削いでしまうので、よりシンプルな画面にする必要があると考えました。
問題提起と検討
新たな機能追加のタイミングで、現行バージョンが既に限界であることと議論の元とすべく改善案を提案しました。
これは使い方によって表示を切り替えられるようにした案です。
ここからどのような画面であるべきか、デザイナーと一緒に今あるものは抜きにして理想の姿を探しはじめます。
これは数日後にデザイナーのみずのが出した検討案です。
この時点でほぼ原型ができています。
ほとんど同じタイミングでまるやまも検討案を作ってくれました。
どちらも値を右側に置くことでレシートに近い表現になっているのがわかります。
この配置によって大事な金額部分が目で追って確認しやすくなっています。
また現実世界に既に存在するものに似せることで、ユーザーの学習コストが抑えられます。
他にも取引先を確認しやすいように導線を追加したり、たくさんの工夫が詰め込まれています。
これらのいいとこ取りをしてベースの案ができたので、ここから表示のバリエーションも含めた検討にはいります。
変換先文書
これは変換先文書一覧という、複製機能で作成した文書一覧へのリンク位置を検討している様子です。
表示している文書との関連性や、他の導線との兼ね合い、表示の意味などで議論が白熱しました。
しかし調べてみると利用頻度が非常に低くく、白熱する議論に対してユーザーに与えられる価値が釣り合ってなさそうな事がわかりました。
このリストを代替できる機能もあるため、総合的に考えたうえで削除しようという判断になりました。*1
回収保証
これは回収保証という、売掛金の回収ができなくなった場合に損害を補填してくれるサービスのステータス表示です。
今までは最下部に表示されていましたが、合計欄が下にきたので最上部へ移動しました。
利用登録が済んでいる場合にしか表示されない*2うえ、健全な取引のためにぜひ使ってほしいサービスなので最上部に来ても違和感なく、満場一致でした。
最終的にどうなったか
日付などの項目が右側に揃っているので、視線移動が抑えられ迷いにくい配置になりました。
件名が強調され、情報の階層がわかりやすくなっています。
操作の必要な処理のうち利用頻度の高いものを下側に集めたので、多くのユースケースでスマホを持ち直さなくても片手で素早く目的が達成できます。
郵送などを行うステップ数がひとつ多くなっていますが、これは慎重に行うべき操作なのであまりネガティブな意見は出ませんでした。
これからのはなし
Android版Misocaではユーザーが本業に集中出来るよう、それ以外の部分をかんたんに手早く済ませられる状態を目指しています。
まだまだ足りない部分が多いですが、ペースを上げて開発に取り組んでいますので引き続きよろしくおねがいします。
開発を手伝ってくれるメンバーもまだまだ募集しております。
ぜひ一度御覧ください。
