ゆうちょ銀行 ログイン画面のUI的な問題点
ども、僕です
今回はウェブサイトのUI設計についてです
僕はユーザが使いやすいUIの設計には割とこだわりがあるんですが、他のサービスを見ていてちょっと気になることがあります
今回はそんな中でも、ゆうちょ銀行を例として取り上げてみたいと思います
なぜなら、ゆうちょ銀行のログイン画面はUI設計にちょっと問題があるからです
ゆうちょ銀行のログイン画面

ゆうちょ銀行のトップページからログイン画面を開くと出てくるのがこちら
日頃からゆうちょ銀行を利用してる人には、おなじみのログイン画面かと思います
問題点「ログイン時の導線の悪さ」

ゆうちょ銀行は、ウェブから口座の残高などを確認できる「ゆうちょダイレクト」というサービスがあります
そのゆうちょダイレクトにログインするためには、画像のような導線で、
①お客様番号を入力し、②次へボタンを押下する必要があります
しかし問題なのは、お客様番号の入力欄のすぐ下にあるのは「申し込みボタン」だということです
「ゆうちょダイレクトのお申し込み(無料)」と書かれたボタンは、ゆうちょ銀行には口座があるけどゆうちょダイレクトに申し込んでない人のためのボタンです
つまり、すでにゆうちょダイレクトに申し込んでる人には無縁なボタンなんです
そのボタンがお客様番号の入力欄のすぐ下にあるために、ログインする際にボタンの押し間違えが発生してしまいます

ユーザがフォーム入力で移動する導線としては、「下へ」「右へ」と移動するのが自然です
ですから、本来であれば「次へ」ボタンがお客様番号入力欄の直後にないといけません
「ゆうちょダイレクトのお申し込み」ボタンを押す人は、そもそもログインでき無い人ですから、お客様番号を入力する必要がありません
なので、お客様番号を入力してから申し込みボタンを押すという可能性はゼロです
「そんなこと書いてある文字・説明をよく見れば分かるだろ?」
と、この画面を設計したSEの人には言われるかもしれませんが、ユーザは書いてある文字・説明なんていちいち見てません
初めての人なら多少は読むかもしれませんが、何回もログインを繰り返していくうちに見なくなっていきます
正しいUI設計

この場合の正しいUI設計は、上記画像のように番号入力欄の上に「申し込みボタン」があることです
こうなっていれば、お客様番号を入力してから申し込みボタンを押す人はほとんどいなくなります
ゆうちょ銀行みたいな銀行は、特にお年寄りもよく利用すると思いますから、こういう細かいところで本当にユーザの使い勝手を考えた設計は重要だと考えられます
銀行・証券などのウェブ画面は多くの制約や要件の中で設計がなされているのだとは思いますが、もう一度ユーザ目線に立ち返ってUI設計をしてほしいと思います
ディスカッション
コメント一覧
まだ、コメントがありません
よくLoadingされてるDocs
新たにPostされたDocs
: ウェブサービス
メルカリやラクマの商品がいつ出品されたのかを調べる裏技
メルカリやラクマなどで商品を探してると、ときどき、 「この商品はいつ出品されたも ...: 仕事環境
15年前のエアコンに洗浄スプレーしたら想像以上にキレイになった
うちのエアコンは新品で購入してからすでに15年が経過しています にもかかわらず、 ...: Laravel
一定時間で消えるフラッシュメッセージを簡単に実装[Laravel8]
以前、手軽にフラッシュメッセージが実装できるnotieを紹介しました 今回は、そ ...: Laravel
ランダムな文字列やユニークなIDをLaravelで生成
random use Illuminate\Support\Str; // 引数 ...: スマホ
4,837円あげるって言うからOCNモバイルOneにLinksmateから乗り換えたんですよ
これまでは僕はスマホの通信会社に、MVNOのLinksmateを使ってきました ...HashMap
created_by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
Utilities