Formalar va Kiritish maydonlari dizayni

Input elementlari, maydon holatlari va xatoliklar (Validation) UX arxitekturasi

9-sinfUX/UI dizayn3-hafta · 8-dars

Bugungi dars rejasi

01. Formalar anatomiyasi

Label, Input, Placeholder, Helper text va asosiy Call to Action tugmasi.

02. Kiritish elementlari

Text Field, Dropdown, Radio Button va Checkbox vazifalarini to'g'ri tanlash.

03. Xatoliklar va Holatlar

Focus, Error, Success va Inline Validation orqali qulay muloqot qurish.

Formalar anatomiyasi

Foydalanuvchiga qulay va aniq kiritish blokini loyihalash

Kiritish maydonining 4 tarkibiy qismi

Placeholder xatosi: Nega Label shart?

Katta xato: Yozganda matn o'chib ketadi

Foydalanuvchi klaviaturada yozishni boshlaganda namuna yo'qoladi. Bir soniya chalg'isa, qaysi maydonni to'ldirayotganini unutib qo'yadi.

To'g'ri UX: Doimiy ko'rinadigan Label

Tepada Label turadi, maydon ichida esa namuna. Foydalanuvchi hech qachon chalkashmaydi va xotirasiga ortiqcha yuk tushmaydi.

Kiritish elementlari turlari

Har bir vazifa uchun eng to'g'ri interfeys vositasini tanlash

Radio Button va Checkbox farqi

Dropdown va Text Area qachon kerak?

Dropdown (Ochiluvchi ro'yxat)

Variantlar soni 5 tadan ko'p bo'lganda (masalan: 12 ta viloyat yoki 200 ta davlat) ekranda joy tejash uchun tanlanadi.

Text Area (Katta matn)

Bir qatorga sig'maydigan sharhlar, kitobga taqriz yoki to'liq yetkazib berish manzili kiritiladigan blok.

Maydon holatlari va Xatoliklar

Foydalanuvchini qo'rqitmasdan to'g'ri yo'naltiruvchi Validation dizayni

Kiritish maydonining 4 holati

Inline Validation nima uchun muhim?

Eski usul: Sahifa qayta yuklanganda

10 ta maydonni to'ldirib Submit bosilganda qizil xatolar chiqadi va kiritilgan ma'lumotlar o'chib ketadi. Foydalanuvchi asabiylashadi.

Zamonaviy usul: Real vaqtda maydon ostida

Har bir maydon to'ldirilishi bilanoq tagida yashil belgi yoki xatoning tushunarli sababi ko'rsatiladi.

Xatolik matnlari (Microcopy) qoidalari

Baqirmang

«Noto'g'ri!» yoki «Xato kiritdingiz!» deb emas, xotirjam va do'stona tilda yozing.

Sababini ayting

«Parol mos emas» emas, balki «Parolda kamida 1 ta raqam bo'lishi kerak» deb aniq ko'rsating.

Yechim bering

Foydalanuvchi darhol tuzatishi uchun to'g'ri namunani (misolni) taqdim eting.

Forma wireframe: Brauzerda ko'rinishi

https://e-kutubxona.uz/register

A'zo bo'lish

Kitoblarni bepul o'qish uchun hisob yarating

Elektron pochta

[email protected]

Parol

•••••••• [ko'zcha]

Form Fatigue (Charchoq) qanday yengiladi?

Maydonlarni qisqartirish

Ixtiyoriy va keraksiz savollarni olib tashlang. Faqat eng zarur 3-4 ta maydon qolsin.

Multi-step (Bosqichlar)

15 ta savolni 3 ta qisqa qadamga bo'ling (1-qadam: Shaxsiy, 2-qadam: Manzil, 3-qadam: To'lov).

Avtomatik to'ldirish

Google yoki OneID orqali birgina chertish bilan ro'yxatdan o'tish imkonini bering.

Multi-step form qadamlari

1. Hisob

Email va parol

2. Janrlar

Qiziqishlar

3. Tayyor

Tasdiqlash

Tezkor viktorina

Foydalanuvchi jinsini tanlashi kerak (Erkak / Ayol). Qaysi element eng to'g'ri hisoblanadi?

To'g'ri: Chunki bu yerda ikkala variantdan faqat bittasini tanlash mumkin.

Bugungi amaliy vazifa 25 daqiqa

Oson«E-kutubxona» uchun Ro'yxatdan o'tish oynasining Label va Input karkasini chizing.

O'rtaParol maydoni uchun «Ko'zcha» belgisi va «Parol kamida 8 ta belgidan iborat bo'lsin» Helper text'ini qo'shing.

QiyinUshbu formaning «Xatolik holati» (Error state)ni qizil chiziq va tushunarli xabar bilan alohida ekranda modellashtiring.

Dars xulosasi

Anatomiya

Label va Helper text har qanday maydonning ajralmas ustunidir.

Aniqlik

Radio Button — bitta tanlov, Checkbox — ko'p tanlov, Dropdown — katta ro'yxat.

Do'stona UX

Inline validation va tushunarli mikro-matnlar orqali xatolarni kamaytirish.

Keyingi dars: Wireframe loyihasini yakunlash va Figmaga eksport

Annotatsiyalar yozish, PNG/SVG eksport va Figmada referens qatlamini yaratish

3-hafta · 9-dars