マネーフォワードAndroid版の指紋認証デザインプロセス
こんにちは。デザイナーの池内（@KD6JOE）です。マネーフォワードで自動家計簿・資産管理サービスのデザインをしています。
自動家計簿・資産管理サービス「マネーフォワード」について、改善内容やデザインの裏側を、ゆるく発信していこうと思います。
今回は先日リリースしたAndroid版の指紋認証機能についてどういう背景でデザインしたかをまとめました。
Android版のパスコード画面を指紋認証で解除可能に
マネーフォワードアプリではアプリ自体にロックをかける機能があります。マネーフォワードではプライベートな金融資産情報を扱っているので、このようなセキュリティ対策にも気を使っています。
Android版ver9.2.0より、パスコードロック画面が指紋でも解除できるようになりました（指紋認証に対応している機種のみ）。iOS版では以前から実装されていた機能ですが、今回Android版にも対応しました。実装はAndroidエンジニアの@syarihuが担当しています。
こちらが旧デザインと新デザインです。
同時にパスコード画面自体かなり古いデザインだったので一新しました。どうでしょうか？見た目もモダンになったと思います。
デザインプロセス①UIパターンを検討
それでは、このようなデザインに至ったプロセスを説明します。他のアプリを調査した結果、指紋認証のUIには大きくわけて以下の2パターンがありました。
A：指紋認証をダイアログで表示し、パスコードを入力する場合はボタンを押して別画面で入力する。
B：指紋認証とパスコード入力を同時に行える。
次に双方のPros（良い面）Cons（悪い面）を洗い出しました。
A：ゴールが1つでわかりやすい（Pros）パスコードを打つ場合面倒（Cons）
B：パスコードをすばやく打てる（Pros）ゴールが複数でわかりづらい（Cons）
どちらも一長一短ありますが、ほとんどの場合パスコードを打つのは稀なのでAの方が適していると思われます。では、なぜBの方を採用したんでしょうか？
デザインプロセス②指紋認証で何を考慮するか
指紋認証が失敗する時
考慮すべき点は、指紋認証は端末やユーザーの状態によって失敗もあることでした。手に汗をかいていたり、手が乾燥したりすると失敗も多くなります。冬は手袋をしていると指紋認証は不可能です。スマホ対応手袋ならパスコードは入力できます。
指紋認証を使う頻度
もう一つ考慮すべき点は、指紋認証を使う頻度でした。アプリの一部機能でたまに使うだけならまだしも、マネーフォワードの場合アプリを起動する度に指紋認証画面が出現します。失敗が度重なるとストレスが大きそうです。
というわけで利用頻度と、失敗した時のストレスを優先してBのパターンにしたのでした。
ちなみに設定方法はこちら
Android版マネーフォワード（ver9.2.0〜）を起動し、以下の手順でご利用ください。
ホーム左上のハンバーガーメニュー（ナビゲーションドロワー）→[設定]→[パスコードの設定をオン]→[指紋認証を利用するをオン]
※端末のシステム設定で指紋認証を有効にしていないと、この機能を利用できません。システム設定で指紋認証を有効にしてからアプリ側の設定を行ってください。
iOS版マネーフォワードでも同様の機能が使えます。iOS版マネーフォワードを起動し、以下の手順で設定ください。
[その他]→[設定]→[アプリケーション設定]→[パスコードの設定をオン]→[Touch IDを使う（iPhone Xの場合は「Face IDを使う」）をオン]
引き続き、マネーフォワードを使いやすく改善していきます。よろしくお願いします。今後デザイナー中心に持ち回りで記事をかいていくのでマガジンのフォローもお願いします！
デザイナー・エンジニア募集中
マネーフォワードでは一緒にサービスを作ってくれる方を募集しています。お気軽に話を聞きに来てください！