カテゴリー
フォーム系
46

入力欄を構造化する

入力すべき値の書式に合わせて、入力欄を分割または制限コントロール化する。

01
Bad

長い文字列を一つの欄に入力させると、書式がわかりにくい

連絡先情報

例: 090-1234-5678

形式が曖昧で、ハイフンの有無など入力ミスが起きやすい

Good

区切りごとに入力欄を分けることで、書式が明確になる

連絡先情報
--

入力欄が分かれていて形式が明確、自動でフォーカスも移動

02
Bad

16桁を一つの欄に入力させ、確認しにくい

お支払い情報

例: 1234567890123456

16桁を一つの欄に入力させると確認しにくい

Good

4桁×4欄に分割し、入力確認が容易

お支払い情報
---

4桁ずつ分割して入力確認が容易

03
Bad

都道府県から番地まで1欄に入力させる

お届け先住所

例: 東京都渋谷区神宮前1-2-3

都道府県から番地まで1欄に入力させると構造が不明確

Good

都道府県・市区町村・番地を別欄に分離

お届け先住所

都道府県・市区町村・番地を別欄に分離して構造化

No.46入力欄を構造化する
46

入力欄を構造化する

入力すべき値の書式に合わせて、入力欄を分割または制限コントロール化する。

01
Bad

長い文字列を一つの欄に入力させると、書式がわかりにくい

連絡先情報

例: 090-1234-5678

形式が曖昧で、ハイフンの有無など入力ミスが起きやすい

Good

区切りごとに入力欄を分けることで、書式が明確になる

連絡先情報
--

入力欄が分かれていて形式が明確、自動でフォーカスも移動

02
Bad

16桁を一つの欄に入力させ、確認しにくい

お支払い情報

例: 1234567890123456

16桁を一つの欄に入力させると確認しにくい

Good

4桁×4欄に分割し、入力確認が容易

お支払い情報
---

4桁ずつ分割して入力確認が容易

03
Bad

都道府県から番地まで1欄に入力させる

お届け先住所

例: 東京都渋谷区神宮前1-2-3

都道府県から番地まで1欄に入力させると構造が不明確

Good

都道府県・市区町村・番地を別欄に分離

お届け先住所

都道府県・市区町村・番地を別欄に分離して構造化