Form Design Cheatsheet
Form တွေက conversion တွေ သေတဲ့နေရာ။ မင်းဟာကို အဲ့လိုမဖြစ်စေနဲ့။
Column တစ်ခု
Single-column layout တွေကို အမြန်ဆုံး scan ဖတ်နိုင်တယ်။ Multi-column form တွေက user ရဲ့ ဒေါင်လိုက်စီးဆင်းမှုကို ဖျက်ပြီး ကျော်သွားခံရတယ်။
Label တွေကို field အပေါ်ထား
အပေါ်ကပ်ထားတဲ့ label တွေက input နဲ့ အနီးဆုံးဖြစ်ပြီး ဘာသာပြန်လည်း ခံနိုင်ရည်ရှိတယ်။ Placeholder-only label တွေ ဘယ်တော့မှမသုံး — focus ရောက်တာနဲ့ ပျောက်သွားတယ်။
Inline validation
User ရိုက်နေတုန်း validate လုပ်၊ မှန်တဲ့ entry တွေကိုလည်း အတည်ပြု (အစိမ်းရောင်အမှန်ခြစ်က စိတ်ချမ်းသာစေတယ်)။ Submit နှိပ်ပြီးမှ error တွေအကုန် တစ်ခါတည်း မချနဲ့။
ကူညီတဲ့ error တွေ
ဘာမှားလဲ ဘယ်လိုပြင်ရမလဲ ပြော၊ field နားမှာပဲ: "That date is in the past — pick a future date." "Invalid input." လို့ ဘယ်တော့မပြောနဲ့။
Button တွေ
Form တစ်ခုမှာ primary action တစ်ခု။ ရလဒ်နဲ့ တံဆိပ်ကပ် ("Create account"၊ "Send invitation") — "Submit." လို့ ဘယ်တော့မခေါ်နဲ့။
Mobile
အနည်းဆုံး 44px touch target၊ field အလိုက် မှန်တဲ့ keyboard (ဖုန်းအတွက် numeric၊ email အတွက် email)၊ autofill attribute တွေ ဖွင့်။