カテゴリー
フォーム系
C-3

制限コントロールを活用する

入力可能な内容に制限がある場合は、ラジオボタン、ドロップダウン、スライダーなどの制限コントロールを用いる。

01
Bad

決まった選択肢があるのに自由入力させると入力ミスが起きやすい

お届け先

例: 東京都、大阪府

決まった選択肢があるのに自由入力させると入力ミスが起きやすい

Good

選択肢から選ぶだけなので入力ミスがなく、操作も簡単

お届け先

選択肢から選ぶだけなので入力ミスがなく、操作も簡単

02
Bad

「1〜10」の範囲なのにテキストで入力させる

商品購入

半角数字で入力してください

範囲があるのにテキストで入力させると無効な値が入りやすい

Good

+/-ボタンで増減でき、範囲外の値を防止

商品購入
5

+/-ボタンで増減でき、範囲外の値を防止

03
Bad

日付をテキストで入力させ、書式エラーが頻発

イベント予約

例: 2024/01/15

日付をテキストで入力させると書式エラーが頻発

Good

カレンダーから選択でき、書式を意識する必要がない

イベント予約

カレンダーから日付を選択できます

日付ピッカーで書式を意識せず正確に入力

C-3制限コントロールを活用する
C-3

制限コントロールを活用する

入力可能な内容に制限がある場合は、ラジオボタン、ドロップダウン、スライダーなどの制限コントロールを用いる。

01
Bad

決まった選択肢があるのに自由入力させると入力ミスが起きやすい

お届け先

例: 東京都、大阪府

決まった選択肢があるのに自由入力させると入力ミスが起きやすい

Good

選択肢から選ぶだけなので入力ミスがなく、操作も簡単

お届け先

選択肢から選ぶだけなので入力ミスがなく、操作も簡単

02
Bad

「1〜10」の範囲なのにテキストで入力させる

商品購入

半角数字で入力してください

範囲があるのにテキストで入力させると無効な値が入りやすい

Good

+/-ボタンで増減でき、範囲外の値を防止

商品購入
5

+/-ボタンで増減でき、範囲外の値を防止

03
Bad

日付をテキストで入力させ、書式エラーが頻発

イベント予約

例: 2024/01/15

日付をテキストで入力させると書式エラーが頻発

Good

カレンダーから選択でき、書式を意識する必要がない

イベント予約

カレンダーから日付を選択できます

日付ピッカーで書式を意識せず正確に入力