【保存版】エラー表示に関するEFOの鉄則15つ | UI改善ブログ by f-tra
フォーム入力でユーザーに最もストレスを与え、離脱につながるきっかけのひとつであるエラー表示。 このエラー表示時のストレスをいかに軽減させるかがEFOにおいては非常に大きなポイントです。 エラー表示の改善については過去に何度もお伝えしてきましたが、本日の記事ではこれまで取り上げた内容を15のポイントにまとめてお伝えいたします。 フォーム改善の際に、チェックリストのように役立てていただければと思います。 表示について 同じエラーでも、見せ方によってユーザーが受け取るストレスの大きさが左右されます。 まずはどのようにエラー内容を見せるかという側面から7つのポイントをお伝えします。 1. 入力画面上でエラーを表示する 例えば、エラー内容だけを示したページに遷移する方法や、ダイアログ内にエラー内容を表記する方法では、ユーザーがエラー内容を参照しながら修正を行うことができません。エラーが複数ある場合に
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
