on:2011年1月31日sponsorsウェブサイトのフォームをユーザーが使いやすくなるように最適化する10のポイントを紹介します。Usability[ad#ad-2]下記は各ポイントを意訳したものです。必須入力欄は強調するユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。エラーメッセージは分かりやすくフォームのエラーメッセージは、「あなたが下に必要とさせるフィールドに全てを書き込まなくてはなりません」などのように分かりにくいテキストではなく、「あなたのメールアドレスを入力してください」のように具体的に分かりやすく表記します。入力項目ごとにメッセージを用意するのが一番です。ユーザーが入力している時に、リアルタイムでエラーメッセージを表示するのも良い解決方法です。これは、ユーザーにどこがエラーなのか的確に伝えることができます。メールアドレスの入力欄では、それが正しいフォーマットであるかリアルタイムに調べ、正しくなければユーザーにすぐにエラーメッセージを表示します。クライアントサイドのバリデーションJavaScriptを使用して、クライアントサイドでフォームに入力されたデータの妥当性をチェックすることで、ユーザーにミスしたことをすぐに知らせることができます。これはメールアドレスが正しいフォーマットであるか、電話番号が数字のみであるかなど、データベースをチェックする必要のない入力フォームに良いことです。入力している欄を明示ユーザーが現在入力している入力欄を外見上明白にすることは、ユーザーが入力する際の助けになります。これはCSSの「:focus」を使って、簡単に実装することができます。ユーザーが入力している欄のエリアの背景を、微妙に異なるカラーにするなど、最小限の変化を与えます。Chromeでは入力時にボーダーのカラーを変更しますが、こういったブラウザの機能があなたのウェブサイトのデザインに適しているか確認を忘れないでください。進捗を明示もし、あなたのフォームが複数のページで構成されたものであれば、そのフォームが完了するまでの全部のステップと現在のステップをユーザーに提供するようにします。これはオンラインストアでは、いたって普通のことです。進捗の明示がなければ、ユーザーはフォームがいつ終わるか分からないまま、「次へ」のボタンをクリックし続けることになります。これは途中で脱落してしまう原因の一つになります。データの保存やキャッシュフォームは、数多くのページやステップがあるほど、ユーザーエラーに陥りやすいものです。その際、ユーザーが入力したデータの喪失を避けるために、クッキーを使用してユーザーの入力したデータを保存するのは良い方法です。これはアクシデントで入力を中断してしまったユーザーが再度一から入力しなくてはいけないところを救うものになるでしょう。送信ボタンの文言フォームの送信(submit)ボタンの文言を「送信する(submit)」ではなく、「サインアップする」などのように、フォームに入力することで得られるアドバンテージを文言にしてください。これはボタンをクリックすることで具体的に何ができるのか、ということをユーザーに伝えます。そんなことはないでしょう。ユーザーが入力したデータに対して「キャンセルボタン」があることは、ユーザーに二度も何について入力しているかを考えさせることになるかもしれません。入力例の記載ユーザーの入力に電話番号やクレジットカード番号のような一定のフォーマットを求めている場合は、どのように入力するのか入力例を記載するようにします。パスワードのように特定の特徴を持っているのであれば、それを必要条件として明記してください。入力例を記載することで、曖昧性を減らし、フォームの入力をより短時間にできます。study」によると、フォームを走査しているユーザーは、左から右へ走査するより、下へ走査することが望ましいとされています。フォームの入力欄を垂直方向に配置することは、ユーザーの必要とする目の動きを減らします。Posts関連記事が見つかりませんでした。WordPress当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。