ユーザーが使いやすいフォームを設計するのに役立つチップス -Form design crib sheet

ユーザーが使いやすいフォームを設計するのに役立つチップスをまとめたチートシートを紹介します。

Free Download: Cheat Sheet For Designing Web Forms

[ad#ad-2]

チートシートはPDF, PSD, Omnigraffle形式で配付されており、内容を簡単に紹介します。

Simple form field

フォームのラベルは入力フィールドの左側に配置し、すぐに理解できるようシンプルな文言にします。

Buttons

ボタンはプライマリとサポートの2種類用意し、プライマリボタンはより目立つよう大きくて異なるデザインのものにします。

Optionals fields

任意入力の箇所でよく利用される「*」印は、全てのユーザーに理解されるサインではありません。可能であれば、はっきりと任意であることを明記します。

Support text

入力をサポートするテキストは、ユーザー目線で分かりやすい文章にします。

Help text

アドバイスするテキストは、複雑なものをアドバイスするためのものです。可能であれば、フォーマットが分かる入力例を掲載するとよいでしょう。

Date fields

日付を入力する場合は、セレクトボックスだけでなくカレンダーなどがあるとより入力しやすくなります。

Inline validation

入力エラーは可能であれば、そのフィールドをフォーカスするように目立たせて、何がどのようにエラーなのかを明示します。

Postcode look-up

郵便番号は住所の一部を特定できるので、それを自動で表示します。

[ad#ad-2]

Layout and examples

レイアウトは関連したフィールドをグループ化することで、より容易に入力できるようになります。

Page level error handling

送信後のエラーは、エラー項目のそれぞれにページ内リンクをつけると、スクリーンリーダーのユーザーにより大きいアクセシビリティを提供できます。

Entering currency values

必要があれば、通貨は異なる単位でも受け付けるオプションを用意します。

Password strength

パスワードを設定する場合は、可能であればその強度も明示するとよいでしょう。

Adding more than 1 email/phone

多くのユーザーはメールや電話など複数の連絡先をもっています。複数の連絡先入力欄を設け、プライマリを選択できるようにします。