フォームエラー時のUIパターンについて

どうも、こんにちは😁

福岡のデザイン会社、gaz, incでデザイナーをしているヤマトです

今回は、アプリやwebサービスで使用されるフォームのエラー表示について、これまで得た気づきをつらつら書いていきます！

フォームのUIはとても重要

ログインや新規登録で使われるフォームでは、ユーザー名やメールアドレス、パスワードなど、ユーザー特有の情報を入力する必要があるため、UIデザインをする際はほぼ必ず登場する要素になります。フォームは、ユーザーが受動的ではなく能動的にアクションするときに使われるため、フォームが使いにくい場合、より使いにくさが際立ちます。逆に、ログインフォームや新規登録フォームが快適だと、サービスの信頼度や満足度の向上にも寄与していきます。

エラー表示の質が満足度に直結する

ユーザーが正しく入力できなかった場合に、サービス側ができることは、なるべく簡単に間違いを修正できるようにUIを設計することです。
フォームのエラー表示を適切に設計することで、アプリを使用する際の導入体験を担保することにつながります。エラー表示を設計する場合は、どんな形で表現するか、どんらエラー内容にするか、どこに配置するかなど、配慮する部分は様々です。

エラー表示を置く場所

エラー表示を置く位置でよく見られるのが、エラーフォームから離れた部分にエラーが表示されているパターンAのUIです。このエラー表示のパターンの場合、どこのフォームが、どう間違っているのか、一見わかりにくです。
そのため、エラー表示の場所は、エラーに該当するフォームの近くに配置すると良いでしょう。パターンBのように表示場所を近くすることにより、エラー内容・修正箇所の認知負荷を低めることができます。

エラー表示の内容

エラー表示の内容でよく見られるのが、システム側のエラーをそのままユーザー画面でも表示してしまったり、何が間違っているのか理解しづらい表現の場合(パターンA)があります。この場合、ユーザーからすると、具体的に現在どんな状況で、どこを修正する必要があるのかが理解できないため、間違いを簡単に修正することができません。

良いエラーの文言は、パターンBのように、問題を解消するために行う修正点を、より簡潔に、そして明確に表現しています。

エラー文言を考えるときに大事にしているポイントは下記3つです。

・簡潔に明記する
明確さは犠牲にしないようにして、できるだけ文字量が長くならないようにすることで、ユーザーにしっかり読んでもらえるようにします。
・一貫性を担保する
句読点や言い回しなどを統一します。
・具体的に示す
エラー内容が具体的にわかっている場合は、詳細に内容を説明します。
抽象的すぎるとユーザーがアクションを起こしにくくなります。

また、適切なエラーメッセージを作成することで、ビジネスに直接成果が出たデータもあります。例えば、ある研究で、購入手続き画面でカスタムのエラーメッセージを表示することで、コンバージョンが0.5%増加し、年間250,000ポンド(約3,762万)の利益に相当する改善ができたとのことです。*1
*1
https://90percentofeverything.com/2009/02/16/karl-sabino-on-the-roi-of-well-designed-error-messages/index.html

エラー表示のタイミング

エラー表示のタイミングで一番気をつけたい部分は、ユーザーが入力している最中に、エラーを表示させる事です。

ここで、ジムに入会する際に、紙面で新規会員登録の手続きを行う場面を考えてみます。記入者がパスワードを記入している途中で、受付係から「8文字以上でお願いします！」と言われたとします。
すると、記入途中で間違った箇所を指摘された記入者の気持ちは、「今から記入しようと思っていたのに」」という不満な気持ちが湧き起こるでしょう。受付係は、記入者がパスワードを記入した後に指摘した方が、ユーザーの気分を損ねないで済むでしょう。

このように、注意するタイミングは、記入が終了した後に指摘するのが丁寧で優しいフィードバックのタイミングだと感じます。このタイミングについては、アプリ画面上でも同じで、フィードバックのタイミングは、入力フォームを離れた後、つまり記入が終了した後に表示させるのが、優しい指摘のタイミングになります。

そもそもエラーが起きないように

エラー表示で注意する点について、書いてきましたが、そもそも、ユーザーに間違いを起こさせないようにすることを念頭に置いておく必要があります。ユーザーが間違いそうな箇所は、あらかじめヒントとしてフォームの近くに記載しておくことで、入力エラーを抑制できるようにします。

最後に

エラー表示については、フロントの挙動やバックエンド側の処理も考慮した設計を行う点で少し難しいとも感じるため、様々な入力フォームの最適な設計を目指しつつ、気づきがあれば随時、記事にまとめていきたいと思います。

最後まで、お読みいただきありがとうございました😁