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

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

チートシートのキャプチャ

Free Download: Cheat Sheet For Designing Web Forms

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

チートシートのキャプチャ
Simple form field
フォームのラベルは入力フィールドの左側に配置し、すぐに理解できるようシンプルな文言にします。
Buttons
ボタンはプライマリとサポートの2種類用意し、プライマリボタンはより目立つよう大きくて異なるデザインのものにします。
チートシートのキャプチャ
Optionals fields
任意入力の箇所でよく利用される「*」印は、全てのユーザーに理解されるサインではありません。可能であれば、はっきりと任意であることを明記します。
Support text
入力をサポートするテキストは、ユーザー目線で分かりやすい文章にします。
Help text
アドバイスするテキストは、複雑なものをアドバイスするためのものです。可能であれば、フォーマットが分かる入力例を掲載するとよいでしょう。
Date fields
日付を入力する場合は、セレクトボックスだけでなくカレンダーなどがあるとより入力しやすくなります。
チートシートのキャプチャ
Inline validation
入力エラーは可能であれば、そのフィールドをフォーカスするように目立たせて、何がどのようにエラーなのかを明示します。
Postcode look-up
郵便番号は住所の一部を特定できるので、それを自動で表示します。

チートシートのキャプチャ
Layout and examples
レイアウトは関連したフィールドをグループ化することで、より容易に入力できるようになります。
チートシートのキャプチャ
Page level error handling
送信後のエラーは、エラー項目のそれぞれにページ内リンクをつけると、スクリーンリーダーのユーザーにより大きいアクセシビリティを提供できます。
チートシートのキャプチャ
Entering currency values
必要があれば、通貨は異なる単位でも受け付けるオプションを用意します。
Password strength
パスワードを設定する場合は、可能であればその強度も明示するとよいでしょう。
Adding more than 1 email/phone
多くのユーザーはメールや電話など複数の連絡先をもっています。複数の連絡先入力欄を設け、プライマリを選択できるようにします。

top of page

©2017 coliss