ユーザー視点のウェブデザインガイド

良いサイトに学ぶ ユーザビリティーの高いフォーム

ページ

良いサイトに学ぶ ユーザビリティーの高いフォーム

ウェブサイトのフォームといっても、その設計指針は一様に決まるものではなく、サービスの内容によってさまざまな設計パターンが考えられる。優れたフォームを実装しているサイトの例をいくつか挙げたので、設計のポイントを掴んでほしい。

ワイキューブ資料請求フォーム

人材コンサルティング会社の請求フォームであることから、法人を意識したフォーム設計がなされている。また、入力フォームの項目の組み立てや必須項目と任意項目の使い分けなど、特にB to Bサービスを手がけるサイトのフォーム設計において参考にすべき点が多い。

三井住友銀行 One's Style 申し込みフォーム

このURLから1ページ進むとフォームのページになる。記入内容の多い金融サービスの申し込みを、ステップを切って実装している。数字入力は半角・全角の両方に対応しており、ユーザーへの配慮が伺える。また、項目によってプルダウンメニューとラジオボタンをうまく使い分けている点も参考になるだろう

 

TIPS フォーム設計のポイント
  1. ユーザーの入力負担をなるべく軽減する。
    • 入力項目数は必要最低限に留める。
    • 自動住所入力など、ユーザーの入力をサポートする機能を実装する。
  2. ユーザーが入力すべき内容を直観的に理解できるようにする。
    • 例やヒント、注意点を入力フォーム近辺に記載する。
    • ユーザーが誤解する可能性のある表現は避ける。
    • 必須項目か任意項目かを明記する。
  3. フォームが複数ページにわたる場合は、ユーザーが位置を把握できるように、ステップと現在位置を明記する。
  4. エラーへの対処を容易にする。
    • エラーは、エラーが起こった項目のすぐ近くに表示する。
    • 赤色文字やアイコンなどの目印を使って、ユーザーがエラーを直観的に理解できるようにする。
  5. 項目の重要度によっては、2度入力を求めることも検討する(主にパスワードやメールアドレス)。
  6. SSL暗号化対応を明記する。

※この記事は、『Web Master完全ガイド vol.2』掲載の記事です(掲載時タイトル「商売を繁盛させるウェブサイト接客術」)。

ページ

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

タグ
タグ(tag)は、「荷札、商品札」といった意味の単語。Web領域では「HTML言 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]