水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > 入力欄が泣き別れ

入力欄が泣き別れ

2003年7月9日(水曜日)

入力欄が泣き別れ

使いやすさ日記『168. ブロードバンドのエリア・チェック』 (usability.novas.co.jp)」。電話番号の入力フォームが三つに分かれていて使いにくい、という話がありますが、同感です。ペーストできませんし、IME に覚えさせておいても一発入力できません。

実はもう一つ、HTML として致命的に問題になる点があります。それは、後の入力欄にラベルがつけられないこと。全てのフォームコントロールにユニークなラベルをつける必要がありますが、三つまとめて「電話番号」というラベルは付けられても、入力欄一つ一つにラベルを付けることができないのですよね。

※一応、それぞれ「市外局番」「市内局番」「お客様番号」という呼称があるので、つけようと思えばつかないことはないのですが。

では分けることにメリットはないのかというと、そうでもありません。使いやすさ日記にはこう書かれています。

ひとつだけメリットがあるとすれば、「ここは電話番号いれるところ!」ってのが見えとしてアピールしやすいというのはありますね。

以上、使いやすさ日記『168. ブロードバンドのエリア・チェック』 より

ひとつだけと言われていますが、そんなことはないでしょう。入力欄が一つだけだと、電話番号入力の際の書式に迷う可能性があります。"000-0000-0000" とハイフンで区切れば良いのか、000 (0000) 0000 と括弧でくくるのか、それとも 00000000000 と全部つなげれば良いのか……。入力欄が分かれていれば、ここで迷うことがありません。逆に、入力欄を一つにする場合は、どこかに入力例を書いておく必要があるでしょう。

あともう一つ、市外局番や市内局番が分かれていると、システムのデータ処理に都合が良い場合があります。一つにしようと画策してみても、サーバ側システムの要請で「入力欄を分ける必要がある」と言われてしまうことがあったりしますね。

とは言うものの、個人的にはやっぱり入力欄は一つの方が好きだったりします。

関連する話題: Web / ユーザビリティ

人気のページ

最近の日記

関わった本など

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト