Formalarni qanday loyihalash kerak: UX bo‘yicha eng yaxshi amaliyotlar

Asosiy qoidalar

Forma — foydalanuvchi natija uchun o‘z vaqti va ma’lumotlari bilan to‘laydigan joy. U qancha kam kuch talab qilsa, shuncha ko‘p oxirigacha to‘ldiriladi.

• Faqat zarur narsani so‘rang. Har bir maydon joriy qadam uchun kerak bo‘lishi lozim.
• Har bir maydon ustida ko‘rinadigan yorliq, faqat pleysholder emas.
• Bitta ustun va maydonlarning mantiqiy tartibi.
• Telefonda kerakli klaviatura ochilishi uchun to‘g‘ri kiritish turlari.
• Xatolar — darhol, maydon yonida va qanday tuzatish haqida maslahat bilan.

Yorliqlar va pleysholderlar

Pleysholder (maydon ichidagi kulrang matn) foydalanuvchi yoza boshlashi bilan yo‘qoladi. Agar u yorliq o‘rnini bossa, odam nima kiritayotganini unutadi, to‘ldirilgan formani tekshirganda esa qaysi maydon qaysi ekanini tushunolmaydi. Bundan tashqari, och kulrang matn ko‘pincha yomon o‘qiladi.

Maydon ustidagi yorliqlar chapdagilardan qulayroq: ularni ko‘z bilan maydonga bog‘lash osonroq va tor ekranda buzilmaydi.

Maydonlar tartibi va guruhlash

• Maydonlarni bitta ustunga joylashtiring — shunda nigoh to‘g‘ri chiziq bo‘ylab harakatlanadi va hech narsa o‘tkazib yuborilmaydi.
• Tartib — oddiydan murakkabga va odatiydan shaxsiyga: avval ism, keyin aloqa, keyin tafsilotlar.
• Bog‘liq maydonlarni sarlavhalar ostida guruhlang: «Aloqa», «Yetkazib berish manzili», «To‘lov».
• Qisqa bog‘liq maydonlarni (shahar va pochta indeksi, karta amal qilish muddati) bitta qatorga qo‘yish mumkin.
• Uzun formani progress ko‘rsatkichi bilan bosqichlarga bo‘ling.

Kiritish turlari va avtoto‘ldirish

To‘g‘ri type, inputmode va autocomplete foydalanuvchi vaqtini har qanday vizual usuldan ko‘ra ko‘proq tejaydi.

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

<label for="phone">Telefon</label>
<input id="phone" type="tel" autocomplete="tel">

<label for="code">SMS-kod</label>
<input id="code" inputmode="numeric" autocomplete="one-time-code">

<label for="name">Ism</label>
<input id="name" type="text" autocomplete="given-name">

• type="email" va type="tel" telefonda @ yoki raqamli klaviaturani ochadi.
• autocomplete brauzerga saqlangan ma’lumotlarni qo‘yish imkonini beradi.
• Qisqa ro‘yxatlar uchun (5–6 tagacha variant) ochiladigan ro‘yxatdan ko‘ra radiotugmalar yaxshiroq.
• Zarurat bo‘lmasa, telefon yoki sanani bir nechta maydonga bo‘lmang.

autocomplete qiymatlarining to‘liq ro‘yxati MDN hujjatlarida bor.

Tekshirish (validatsiya)

• Maydonni foydalanuvchi undan chiqqandan keyin tekshiring, har bir tugma bosilganda emas — aks holda xato odam hali yozayotganda paydo bo‘ladi.
• Tuzatish boshlangach, qiymat to‘g‘ri bo‘lishi bilan xatoni darhol olib tashlang.
• Xabar — maydon ostida, qizil rangda va ikonka yoki matn bilan, rangni farqlashda qiynaladigan odamlar ham ko‘rishi uchun.
• Xato matni qanday tuzatishni tushuntiradi: «Noto‘g‘ri format» emas, «Emailni name@example.com ko‘rinishida kiriting».
• Xatolar bilan yuborilganda fokusni birinchi xato maydonga o‘tkazing.
• Formatga bag‘rikeng bo‘ling: telefonni bo‘sh joy, qavs va chiziqchalar bilan qabul qiling va uni o‘zingiz normallashtiring.

Majburiy maydonlar

Deyarli barcha maydonlar majburiy bo‘lsa, ixtiyoriylarini «(ixtiyoriy)» so‘zi bilan belgilang. Majburiylari kam bo‘lsa — ularni belgilang. Izohsiz yolg‘iz yulduzcha hammaga ham tushunarli emas, shuning uchun uni forma boshida izohlang.

Formani qanday qisqartirish mumkin

Misol: konsultatsiyaga ariza formasi.

Har bir maydon uchun savol bering: u aynan hozir kerakmi? Buni keyinroq bilib olish yoki avtomatik aniqlash mumkinmi?