エラーメッセージはフォームのどこに表示するべきか

UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に

[htnmiki]

いい感じでお願いします

[uunfo]

入力欄そばだとどれがエラーなのか探さないとわからなくて、見つからないとそもそもエラーなのかどうかも分からなくてなぜ進まないのか戸惑う。全体と個別と両方出す方がいい／requiredでブラウザに任せた方がいいかも

[primedesignworks]

エラー文は⚠️アイコン付き、右だと改行して読みづらくなるのですぐ下に配置、最初のエラーがある部分まで自動スクロール、をぼくは基本で作ってる。

[orangehalf]

文字の流れで読めるから右が良いと言うのはわかるのだけど、アラビア語みたいに右から左に書く言語のサイトだとエラーメッセージ左に出すのがよいのかな。アラビア語で提供するサービスを作る機会はないけど

[otchy210]

モバイルに慣れたせいか、視線の流れが左→右より上→下を意識するのが普通になったので、エラーメッセージも右より下に置く方が自然に感じる。PC/モバイル関わらず。PC でもワンカラムデザインが最近主流だし。

[youter]

あいつとあいつに音読してやりたい。

[table]

小理屈考えずにA/Bテストやろうやこんなもん

[imaginaration]

上にエラー一覧だして、フォームの右に詳しいエラーメッセージかなあ？

[cartman0]

個人的にはHTML5のvalidation API（標準）のままでいいと思う

[KAZ99K]

上が良いと思う。下や右だとエラーを認知した後視線を上か左に戻させられるストレスがある。上側に、ラベル文字を覆い隠すように「ラベル文字を含んだエラーをだす」が注意喚起・視線移動のストレス両面で最適では？

[idr_zz]

左や上より右か下か。理由も納得。目線の移動。スマホでは右より下が出しやすいかも。 エラーメッセージはフォームのどこに表示するべきか | UX MILK

[miruto]

全部上に出すのは手抜きだと思ってます(´･∀･`)自分が作るサイトは基本的に入力フォームの下ですわ！

[manabuyasuda]

基本は縦に並べていく（スマホで横並びは無理）、上はラベルがあるのでエラーは下に置くのがいいかな。 動的に出し分ける場合は、上に置くとフォーム要素がチラついてしまうかもと思った。

[hiddy216]

ABテストは多数決で一段階多数派に最適化するだけだから、本来的には少数派のための最適化も考慮されなければならない。なので方向性の検証には良いけど、完了にはならない。

[nismit]

フォームのエラーメッセージをUXと検証データと共にどこに配置すべきかが理由と一緒に書いてて凄い良い

[inikot]

富士通見てるか

[tzk2106]

だからこういう提案くれる制作会社ってどこにいるの…。（数ヶ月ぶり4回目のコメント）

[atsushifx]

左側にエラーを示すマーク、入力欄の右か下にメッセージかな？ / そもそも入力項目を適切に減らすことが大前提の気もする

[tohokuaiki]

「みんなだいたいわかってた内容」だけど、経験則を明文化するの大切。あと、上にまとめて置くのは実装が楽だから以上のものはない。手間とお金もらえるなら💰

[rti7743]

一番上にエラーがあるよとサマリーを出して、個別のエラーはそれぞれの入力フォームの下だろう。

[progrhyme]

知見。アラビア語圏では逆なのかな

[threeMonths]

フォームの幅を広げたくなくて下に出してた。右のほうがよいんだね

[z1h4784]

インラインで出した方がいいと分かってはいるんだけど、画面上部にまとめて表示するのに比べてそれなりに工数が増えてしまうから管理画面とかではやらない方針にしてる

[iishun]

エラーメッセージが読まれない問題。

[satmat]

認知心理学の領域だ…

[wozaki]

下

[tasukenosuke]

Webフォームじゃなくてガッチガチの業務画面についての考察はよ

[tihata]

やっぱり入力欄の側がいいよね...

[deokisikun]

フォームが無くなれば良い

[pongeponge]

個人的には入力フォームの中に薄い色で書いてあるのが好みかな

[IGA-OS]

ディスプレイの幅も意識してデザイン。

[blend27]

スクリーンリーダーのことを考慮した記事も見たい

[hosiken]

アプリの話だけどAndroidでトースト(中央下寄りにふわっと出るメッセージ)でエラーメッセージ出したつもりになりがちなの本当ダメと思う。出すのは楽だけどわかりづらく表示されて勝手に消えるからUXとしては最悪レベル

[natu3kan]

エラーメッセージが右側にあると本文とエラー内容が見比べやすいのと、チェックリスト感覚でどれがエラーなのかわかりやすいのはあるかも。英字文化で読む方向が左から右だから、小項目の出力結果が右に出るのは自然

[nakayuki805]

インラインがベストだとわかっていても各項目ごとにエラー表示実装するのが面倒なので手抜きのため一番上にまとめて表示してたりする

[Windblume2007]

モバイルで一番上とかにあるとやる気なくなる

[QueSTioN]

最近久々にhuluをPCWebブラウザで使うためにログインしたんだけど、エラー時に全部空欄に戻るからまた一からになったの、この話以前の論外だと思う。

[BRITAN]

“フォーム上部にエラーメッセージを表示”←未だに多いんだよね…。しかも上までスクロールしないと見えない罠になっていたりする。

[itochan]

ページの上と、入力フィールド周辺の両方に配置しない理由、また入力フィールドの中への表示をテストしない理由は？