アークウェブのブログ

2017年2月 1日

フォームのユーザビリティー：「日付入力UXガイドライン」にA-Formは対応できるか？

投稿者 中野

• Tweet
• 

ウェブサイトのフォームで色々入力する際、「日付入力」でイラッとすることありませんか？

UXの世界で有名なニールセン・ノーマン・グループが、先日「日付入力フォームのガイドライン」を掲載していました（記事URLは末尾に）。
そこで、このガイドラインに沿ったフォーム作成が弊社の MT用フォーム作成プラグインA-Form でできるか？ をチェックしてみました。以下4つのポイントについてです。

(Creative Commons by Andreanna Moya)

1. カレンダーピッカーは現在に近い（少なくとも1年以内の）日付を選択させる場合に使おう

まずは1年以内の日付を選択するような項目でカレンダーピッカーを使う、という判断が大切ですね。
そして、A-Formには「カレンダー」パーツがあり、このパーツでは初期値を「本日」などに設定できるので、入力しやすくできますね。

2. 年／月／日と区切られた入力欄はユーザーに負担を強いるので使うべきではない

これに従うなら、A-Formでは日付入力は「テキスト」パーツ一つにすべきでしょう。
「テキスト」パーツや「ドロップダウンリスト」パーツを3つ組み合わせてCSSで横並びにすれば年／月／日が分割された入力欄を作ることができますが、無理にそうしない方がいいでしょう。

3. 受け付ける書式を狭めるべきではない。制限をかけるなら凡例を示しておこう

受け付ける書式を狭めるとは、「9月」を入力する際に「09」はいいが「9」はダメとしたり、「2017/12/31」はいいが「2017-12-31」はエラーとするなどを意味します。
「テキスト」パーツで入力欄を作り、「半角英数記号のみ」のバリデーションを無効にしておく（チェックを外しておく）ことで実現できますね。

4. 誕生日で200年以上前や未来を指定できたり、不要な日付（範囲）は外しておくべき

「カレンダー」パーツで、選択可能範囲や選択除外日をきちんと設定しておけばいいですね。

というわけで、これらのポイントについてA-Formで作成するフォームはクリアできそうです。
ユーザーをイライラさせないフォームはサイト構築の基本ですので、ぜひ気をつけてみてください。

参考にした記事：
Date-Input Form Fields: UX Design Guidelines

カテゴリー: A-Form, A-Member, A-Reserve(MTプラグイン) , CMS・MovableType

タグ：

« 前の記事：Zen Cart公式：PHPMailerの脆弱性パッチ（5.2.21）適用について
» 次の記事：MT用AMPページ生成支援プラグイン「AmpConvert」のページ公開