ホーム » ビジネスブログ » CMS・MovableType »

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

2017年2月 1日

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

投稿者 中野

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

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

form usability (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

投稿者 中野 : 2017年2月 1日 13:26

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

タグ:


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.0.1