japan.internet.comThe Internet & IT Network
RSS
  • ニュース
  • コラム
  • リサーチ
  • ヘッドライン
  • 特集
  • ブログ
  • プレスリリース
  • 専門チャンネル
  • イベント
  • ランキング
  • ニュースメール
2008年9月9日
文字サイズ文字サイズ小文字サイズ中文字サイズ大
WebTutorial2002年1月23日 00:00

ユーザビリティと HTML フォーム -- 2

海外海外internet.com発の記事
  • このエントリーを含むはてなブックマーク
  • この記事をクリップ!
  • Buzzurlにブックマーク
  • Yahoo!ブックマークに登録
  • newsing it!

任意フィールドと必須フィールド

December 10, 2001

必須フィールドにはアスタリスクマークをつけ、ページのトップに 「*印のついたフィールドには必ず記入下さい」と注意書きを付けることはよくある。 これは、いいユーザビリティだ。

なぜそれが必須フィールドなのかユーザーに分かりにくい場合は、 説明したほうがいい。 例えば、ユーザーの多くは、ショッピングの取引にEメールアドレスがなぜ必要なのか分からない。 「ご注文についてお客様と連絡を取る際に必要になります」とか 「クレジットカードの保護策としてお聞きします」と説明してもいいだろう。

必須フィールドが理由もないのに多すぎると、客の信用を失うこともある。ファックス番号は本当に必要だろうか?実際一度でも使うことなんてあるだろうか?

無駄な情報は集めないように

まず浮かぶのはファックス番号だ。 その情報が必要かどうか定かでないときには、 Web にフォームが載ってから6か月間にどのくらい利用されたか審査するのも1つの手だ。 集められた情報を会社の誰かひとりでも利用しただろうか?もし誰も利用していないなら、 集めるのはやめよう。過度の情報は、ユーザー認知という意味でとくに犠牲を伴う。

フォームを何枚かに分ける

Eコマースのフォームは数ページにまたがるのがほとんどで、 それぞれのページが特定の作業専用になっている。1つは商品オーダー用に、1つは個人情報に、1つは配達用にそして1つはクレジットカード明細にと。

その利点は以下である。

  1. ユーザーは1ページの非常に長いフォームを読まないで済む
  2. ページごとにバリデーションを行うことができるので、エラー処理がしやすい
  3. 先のページの内容を後のページに自動的に当てはめられる

欠点は、先のページに入力した内容を忘れたユーザーが「戻る」ボタンを押してそれを見ようとすると、順序が乱れいろいろ面倒が生じることだ。

前のページに記入した情報を使う可能性のあるページがあれば、そのページにも載せるように。 住所については以前にも書いた。 複数の住所を持ったユーザーは、最初どの住所を使ったか忘れがちである。 送料はもう1つ気をつけなければならない点だ。 例えば、「商品を5つ以上買うと 50% 送料割り引き」と言われた場合、 客は4つオーダーしたのかそれとも5つだったか思い出せない。 だから前のページに戻る。 これだけでたちまちユーザビリティに問題が出てきてしまう。 送料がオーダーした商品によって変わるなら、 注文の情報も繰り返し配達のページに載せる必要がある。

入力内容のバリデーション

バリデーションは自動的に処理され、フィールドが全て正しく記入されたかチェックする。 例えば、Eメールアドレスを聞いたのに回答に@マークがついてなければ、間違いだとわかる。

フォームが返したデータを読み込む際に、システムは間違いを見つけることができる。 バリデーションのためにクライアント(ブラウザ)側で JavaScript を使うサイトもある。これは簡単なものなら問題ないが、一般的にはサーバー側でバリデーションしたほうがいい。より複雑なバリデーションができるし、データベース情報と比較できるからだ。

バリデーションを緻密に行いすぎると、よく問題が起こる。 特に海外にも商品を売りたいのにシステムが国際標準でない場合。 郵便番号入力フィールドで米国では一般的な5桁の数字でバリデーションした場合、 7桁の郵便番号である英国やカナダからの客を失うことになる。 クレジットカード明細と対になったコードが入力できないからだ。

米国外の住人には「State」もやっかいだ。 何百万といるロンドンのインターネット ショッピング利用者は、 米国のEコマースのフォームには次のように入力するのを学習した。

City: London
State: London

ロンドンには州がないし、郡ひとつだからだ。しかし、 これはわかりにくいし、ひどいユーザビリティだ。 ドロップダウンボックスだともっと大きな問題になる可能性がある。この件についてはまもなく触れる。

電話番号のバリデーションにも落とし穴がたくさんある。 バリデーションしないで残しておくのがおそらく一番だろう。 ただし、進んで国際表記で +44 (0) 207 … と入力した国際的なユーザーを排除しようと躍起になっているなら話は別だが。だから、電話番号はバリデーションから外すか、もしくはフィールドに「電話番号なし。耳が聞こえないもので」と書きこむか。

ユーザビリティと HTML フォーム
エラーメッセージ


関連テーマ
最新トップニュース
  • インターネットコム株式会社とポイントオンリサーチが実施した「Google サービスの認知度に関する調査」によると、Google ユーザーに最も利用されているサービスは、地図情報サービス「Google Earth」であることがわかった。
  • 国内ディズニーの各サイトがハロウィーン一色に(Webマーケティング 10月8日 09:30)
    ウォルト・ディズニー・ジャパンの一部門である、ディズニー・インタラクティブ・メディア・グループ ジャパンは、2008年10月7日、ディズニー公式ホームページなどのコンテンツやサービスにおいて期間限定でハロウィーンイベントを実施することを発表した。
  • gooseGrade ではブロガーが自分の記事に貼り付けるウィジェットを提供している。
  • コラムちゃんと title つけていますか?(Webマーケティング 10月8日 09:00)
    head の中にある title タグをしっかり記述していますか? title タグは SEO の中で最も重要な要素の一つと言われています。この中の記述が順位にも影響を与えると考えられていますが、検索結果での表示としても重要な記述です。
  • コラム行政サービスのマルチチャネル化について(パブリック - テクノロジー 10月8日 09:00)
    総務省の重点施策としている「電子政府・電子自治体の推進等」の施策事業が疑問視されている。とりわけ、電子申請等のオンライン利用拡充だけが行政サービス向上の重点施策に聞こえてくるが、住民と行政の手続きチャネルを見極める必要がある。本レポートでは、住民が行政(地方自治体)への問合せ等の手段について考察し、住民視点の行政サービスとなる「行政サービスのマルチチャネル化」を提言する。
Graphic Design Forum
【Graphic Design Forum】
コメントをお寄せいただいた方々へ (10月7日)
データメーション
【データメーション】
eBayのやり口(10月7日)
ベンチャー専門家の目利きブログ「なぜこの企業は伸びるのか?」
【ベンチャー専門家の目利きブログ「なぜこの企業は伸びるのか?」】
「プロの営業マンを社会に輩出していく!!」/株式会社A・R・M(10月6日)
エンジニアの独り言
【エンジニアの独り言】
得体の知れない情報(?)との向き合い方(9月17日)
最新テクノロジーの意外な処方箋
【最新テクノロジーの意外な処方箋】
昆虫と退屈なことについて(9月16日)
e-Japan 先端テクノロジー解説
e-Japan 先端テクノロジー解説
行政サービスのマルチチャネル化について(10月8日)
ウチのサイトを SEO
ウチのサイトを SEO
ちゃんと title つけていますか?(10月8日)
百式のネットビジネス研究
百式のネットビジネス研究
Blog 記事の編集を読者に任せることができる「gooseGrade」(10月8日)
「IT の耳」
「IT の耳」
【書評】ニコ動から RMT まで〜『人はなぜ形のないものを買うのか―仮想世界のビジネスモデル』(10月7日)
DevX
DevX
アジャイルソフトウェアプロジェクトを管理する(10月7日)
エンジニア転職ノウハウ開発室
エンジニア転職ノウハウ開発室
SEって、デジタル製品は判官びいきで選ぶよね?(10月7日)
アイレップの SEM フロンティア
アイレップの SEM フロンティア
フル CSS でサイト構築をする SEO のメリット(10月7日)
モバイルSEO@フラクタリスト
モバイルSEO@フラクタリスト
応用的な SEO 施策(3)(10月6日)
サーチからはじまるインタラクティブエージェンシー
サーチからはじまるインタラクティブエージェンシー
DB マーケティングと Web マーケティング 〜ビールとオムツの伝説から〜(10月6日)
最新ハイテク講座
最新ハイテク講座
視聴者が参加する時代へ!ネットにつながる「テレビ」(10月3日)
海外のインターネットコムアメリカ韓国ドイツトルコ
Copyright 2008 Jupitermedia Corporation All Rights Reserved.http://www.internet.com/