フォームのエラー表示のユーザビリティを考えてみる
こんばんはtaikiujiieです。
フォームのエラー表示のユーザビリティを考えていきたいと思います。
普段は意識して目にすることはないですが、いざデザインしてみようと思うとなかなかベストアンサーが分からず、難航したためこのテーマを取り上げます。
今回取り扱おうと思っているエラーについては下記のような入力の際のエラーを想定しています。
こういった入力の際のエラーの文言や配置出し方に関して、ユーザー目線で掘り下げていきたいと思います。
今回はエラー表示がよく利用される会員登録をテーマとして扱います。
良いエラー表示を考える
既に考えられている方がおりました、、、（それはそうか）
*しかも大巨匠ニールセン
https://u-site.jp/alertbox/20010624
（要約すると）
・ユーザーにミスが伝わること（すぐに気づける）
・ユーザーがミスの内容を理解できること
・ユーザーに不快な思いをさせないこと
・ユーザーに正確にミスの箇所を伝えること
・ユーザーに対して「ミスした」だからどうすればいいかを伝えていること
・ストレスを和らげる（ユーザーの手間や手戻りを減らす）
→ざっくりとこういった内容でした
同サイトでノーマンが定義する2種類のユーザーエラーの考え方についても記載されていたので抜粋
https://u-site.jp/alertbox/slips
（要約すると）
・ユーザーの起こすエラーにはスリップとミステークの2種類がある
・スリップは、ユーザー自身による失敗
→解決策：ユーザーへの負荷を減らす
・ミステークは、情報がユーザーに正しく届けられていないことによる失敗
実例から考察する
○楽天市場
良い点
ミスの内容と改善方法を具体的に説明している
(実例)
-メールアドレス
：入力されたメールアドレスの形式はご登録いただけません。
：メールアドレス（確認入力）とメールアドレスが一致しません。
-パスワード
：パスワードは6文字以上で入力してください。
下記のアンダーラインが引かれている箇所はテキストリンクになっていて、ユーザーに正確にミスの箇所を伝えている
→アンダーラインが引かれている箇所はテキストリンクこと自体は分かりにくい
悪い点
パスワード以外は入力が終わるまで、エラーが表示されなかった
→ミスにすぐに気づくことができない
視認性を強めるための赤だと思うが、目がチカチカする
→エラーメッセージだけでなく、項目名の四角にも色がついていて赤の面積を大きい
→結果、ユーザーに不快な思いをする
→企業の色が暗めの赤であるため、デメリットは承知であえて明るめの赤をチョイスしているのかもしれない
→他にも赤が企業のカラーとなっているサイトなども見ていきたい
★NEXT＞ユニクロ
更新ボタンを押してしまった際にはすぐにエラー画面になり、最後フォームを自然検索から探さなければいけない
→文字多い、対象方法も明確でない。離脱が予想される
そもそも、こういった説明書きは読んでもらえるのだろうか？
→2018年よりなどと見た時点で読み飛ばしてしまいそう
→（追記）ユニクロでは出していなかった
○ユニクロ（同じ企業カラーが赤のブランド）
良い点
エラーメッセージがすぐに表示され、ミスにすぐに気づく
パスワードはチェックボックスで確認でき、「スリップ*」を防いでいる
*ノーマンの提唱するユーザー自身による失敗のこと
赤の量の最小限に抑え不快感は少ない（楽天のフォームとの比較ポイント）
必須項目には青色を使い、赤色はエラー以外では使われていない
まとめ
ニールセンやノーマンの提唱する定義を具体的に物差しにしてサイトを見てみると実際に課題を大別することができました。
あとはその課題を今の技術でどう改善、表現するのかを考えるという部分は、案件の予算やシステム的な都合などから変わってくると思いますが、まずは理想を追求する上で上記のようなやり方は有効かと思いました。
改善、表現するのかの手段を考える上でも、ニールセンやノーマンの提唱する定義を具体的に物差しにして、競合サイトを見ることである程度はあたりが付けられるなと思いました。
あとがき
記事を書く際のフォーマットが少しずつ固まってきました。
①直近の悩みや課題を書き出す
②課題を解決に向かわせるための基準・物差しを手に入れる
③物差しを使って現行サービスを測る
④物差しからはみ出た部分や物差しで正しく示されている場所を理解・考察する
といった流れで記事を書いている気がします。
今後のもフォーマットに磨きをかけたり、新しい形もに見つけたと思います。引き続きよろしくお願いいたします。
この記事が気に入ったらサポートをしてみませんか？