ゆうちょ銀行　ログイン画面のUI的な問題点

システム開発

ども、僕です

今回はウェブサイトのUI設計についてです

僕はユーザが使いやすいUIの設計には割とこだわりがあるんですが、他のサービスを見ていてちょっと気になることがあります

今回はそんな中でも、ゆうちょ銀行を例として取り上げてみたいと思います

なぜなら、ゆうちょ銀行のログイン画面はUI設計にちょっと問題があるからです

ゆうちょ銀行のログイン画面

ゆうちょ銀行のトップページからログイン画面を開くと出てくるのがこちら

日頃からゆうちょ銀行を利用してる人には、おなじみのログイン画面かと思います

問題点「ログイン時の導線の悪さ」

ゆうちょ銀行は、ウェブから口座の残高などを確認できる「ゆうちょダイレクト」というサービスがあります

そのゆうちょダイレクトにログインするためには、画像のような導線で、

①お客様番号を入力し、②次へボタンを押下する必要があります

しかし問題なのは、お客様番号の入力欄のすぐ下にあるのは「申し込みボタン」だということです

「ゆうちょダイレクトのお申し込み（無料）」と書かれたボタンは、ゆうちょ銀行には口座があるけどゆうちょダイレクトに申し込んでない人のためのボタンです

つまり、すでにゆうちょダイレクトに申し込んでる人には無縁なボタンなんです

そのボタンがお客様番号の入力欄のすぐ下にあるために、ログインする際にボタンの押し間違えが発生してしまいます

ユーザがフォーム入力で移動する導線としては、「下へ」「右へ」と移動するのが自然です

ですから、本来であれば「次へ」ボタンがお客様番号入力欄の直後にないといけません

「ゆうちょダイレクトのお申し込み」ボタンを押す人は、そもそもログインでき無い人ですから、お客様番号を入力する必要がありません

なので、お客様番号を入力してから申し込みボタンを押すという可能性はゼロです

「そんなこと書いてある文字・説明をよく見れば分かるだろ？」

と、この画面を設計したSEの人には言われるかもしれませんが、ユーザは書いてある文字・説明なんていちいち見てません

初めての人なら多少は読むかもしれませんが、何回もログインを繰り返していくうちに見なくなっていきます

正しいUI設計

この場合の正しいUI設計は、上記画像のように番号入力欄の上に「申し込みボタン」があることです

こうなっていれば、お客様番号を入力してから申し込みボタンを押す人はほとんどいなくなります

ゆうちょ銀行みたいな銀行は、特にお年寄りもよく利用すると思いますから、こういう細かいところで本当にユーザの使い勝手を考えた設計は重要だと考えられます

銀行・証券などのウェブ画面は多くの制約や要件の中で設計がなされているのだとは思いますが、もう一度ユーザ目線に立ち返ってUI設計をしてほしいと思います