AXV

Yaxshi dizayn qanday bo'ladi?

Tamoyillar, belgilar va dizayn jarayoni: ilovani «ko'z bilan emas, qoida bilan» baholaymiz

9-sinfUX/UI dizayn1-hafta · 2-dars

Takrorlash: 1-dars 5 daqiqa

UI

Tashqi ko'rinish: ranglar, tugmalar, shriftlar. Ko'zga ko'rinadigan qism.
VS

UX

Umumiy tajriba: qulaylik, tezlik, his-tuyg'u. Maqsadga erishdimi?
Savol: Google Maps da xarita va tugmalar qaysi biriga kiradi? Manzilga tez yetib borish-chi?
01

Yaxshi va yomon dizayn

Chiroyli degani qulay degani emas. Farqni ko'rib o'rganamiz

Bitta vazifa, ikki ekran

Yomon Yaxshi

Qanday belgilar bor?

Yomon

Ko'z adashadi, ortiqcha bezak.
Bosdingiz, javob yo'q.
Xatoni qaytarib bo'lmaydi.
Tushuntirish kerak.
VS

Yaxshi

Faqat kerakli narsa.
Bosishga javob bor.
Bekor qilish va orqaga bor.
O'zi tushunarli.
Qoida: foydalanuvchi qo'llanma o'qimasdan ishlata olsa, dizayn yaxshi.
02

UI ning 4C tamoyili

To'rtta C: nazorat, izchillik, qulaylik, yengillik

To'rtta C

Control

bosing

Foydalanuvchi boshqaradi, xatoni qaytara oladi

Consistency

bosing

Hamma joyda bir xil mantiq va uslub

Comfortability

bosing

Tabiiy, oddiy, stresssiz ishlash

Cognitive Load

bosing

Ortiqcha ma'lumot bilan charchatmaslik

Control: nazorat sizda

Xato qilish mumkin. Qaytarish imkoni bo'lsa, foydalanuvchi ishonadi.

Misollar: «Bekor qilish (Undo)», «Orqaga (Back)». Pastga ↓ rasmni ko'ring

Undo qanday ko'rinadi

o'chirish Xabar o'chirildi Bekor qilish

Izchillik va qulaylik

Svetofor hamma shaharda bir xil: qizil to'xta, yashil yur.

Consistency: tugmalar, ranglar, belgilar va menyular bir xil mantiqda: foydalanuvchi yangi funksiyani tez tushunadi.

  • O'qiladigan yozuv o'lchami
  • Elementlar orasida yetarli masofa
  • Tugma bosish uchun qulay joyda
  • Comfortability: stresssiz jarayon

Cognitive Load: sumka o'xshatishi

Hammasi bir joyda Faqat keraklisi

Savol 1/3: qaysi C buzilgan?

Rasmni o'chirdingiz, qaytarib bo'lmaydi.

To'g'ri: Control. Foydalanuvchi xatoni qaytara olmasa, nazorat unda emas.

Savol 2/3: qaysi C buzilgan?

Bir sahifada ko'k tugma, boshqasida qizil va boshqa shaklda.

To'g'ri: Consistency. Tugmalar hamma joyda bir xil mantiqda bo'lishi kerak.

Savol 3/3: qaysi C buzilgan?

Bosh sahifada 14 ta banner va 4 xil shrift.

To'g'ri: Cognitive Load. Ortiqcha ma'lumot foydalanuvchini charchatadi.
03

UX ning 7 tamoyili

Dizaynerlar tanlov qilganda tayanadigan yetti ustun

Birinchi to'rtta

Foydalanuvchi markazida

Ehtiyoj, maqsad va odatlarni hisobga olish

Intuitivlik

Tushuntirishsiz, tabiiy ishlata olish

Izchillik

Har sahifada bir xil mantiq

Oddiylik va aniqlik

Bezaksiz, har element maqsadli

Qolgan uchtasi

Feedback

Har amalga tizim javob beradi: rang o'zgaradi, xabar chiqadi

Moslashuvchanlik

Turli ekran, qurilma va imkoniyatlarga mos (nogironlar uchun ham)

Testlash va takomillashtirish

Dizayn foydalanuvchi fikri bilan doim yaxshilanadi

Feedback: tugma «gapirsin»

Yuborish 1. bosdik Yuklanmoqda... 2. ishlayapti Yuborildi 3. tayyor

Qismning ustiga sichqoncha olib boring yoki bosing.

Javob bo'lmasa, foydalanuvchi tugmani 5 marta bosadi.

Real misollar: qo'llanmadan

Google Maps

Xarita, tugma, menyu: UI. Manzilga osonlik bilan yetib borish: UX.

Kiyim-kechak sayti

Jinsi bo'yicha, keyin toifalarga bo'lish: foydalanuvchi kerakli narsani tez topadi.

Ijtimoiy tarmoq ilovasi

Dizayner foydalanuvchi qaysi funksiyani ko'proq qadrlashini o'rganadi.

«Mobile_Book»

Qidiruv, ro'yxat, tafsilot, yuklab olish: butun ilova bitta ssenariydan kelib chiqadi.

04

Dizayn jarayoni

G'oyadan bosiladigan prototipgacha

Design Thinking: sikl

Empatiya Muammo G'oya Prototip Test iteratsiya: test natijasi bilan qaytamiz

UX dizayner nima qiladi?

Tadqiqot. Intervyu, so'rov, kuzatuv orqali auditoriyani tushunadi
Axborot arxitekturasi. Ma'lumotni mantiqiy tartibga soladi
Wireframe va prototip. Skeletdan jonli modelgacha
Foydalanuvchi testi. Haqiqiy odamlar bilan sinaydi
Iteratsiya. Yaxshilaydi va qaytadan sinaydi

Wireframe, mockup, prototip

Wireframe skelet, kulrang Mockup rang, shrift, ikon Prototip bosiladi, jonli

Skeletdan ko'rinishga

kutubxona.uz

[ Sarlavha ]

[ qidiruv qatori ]

Skeletdan ko'rinishga

kutubxona.uz

Maktab kutubxonasi

Kitob nomini yozing: Qidirish

Rang, shrift va tugma qo'shildi: bu mockup.

Ish usullari

Design Thinking

Empatiya, Muammo, G'oya, Prototip, Test

Lean UX

Avval sinab ko'r, keyin tuzat: tez prototip

Agile UX

Dizayner va dasturchi qisqa sprintlarda birga ishlaydi

05

Foydalanuvchi kim?

Dizayn «men» uchun emas, uning uchun

Ssenariy: Shaxnoza

«Talaba Shaxnoza ilmiy maqola yozish uchun mobil ilovadan elektron kitob izlaydi. Kitob nomini qidiruvga kiritadi, kerakli kitobni tanlaydi, tafsilotini o'qib chiqadi va yuklab oladi.»
Persona: ShaxnozaMaqsad: kitob topishQurilma: telefon

Pastga ↓ ssenariydan nima kelib chiqadi

Ssenariydan bloklar

  1. Qidiruv oynasi
  2. Kitoblar ro'yxati
  3. Kitob tafsilot sahifasi
  4. Yuklab olish tugmasi
  5. Xatcho'p va baholash

User flow: yo'l xaritasi

Ochish Qidiruv Tanlash Tafsilot Yuklab olish Topilmadi? xato yo'li ham dizaynning bir qismi

Amaliyot 18 daqiqa

Oson5 ta holat: qaysi tamoyil buzilgan? (8 daq.)
O'rtaSevimli ilovangizni 4C + Feedback bo'yicha jadvalda baholang (dalil bilan)
QiyinYomon «Buyurtma» ekranini qog'ozda wireframe qilib qayta chizing

Xulosa

Bugun o'rgandik

4C, UX ning 7 tamoyili, yaxshi va yomon dizayn belgilari, wireframe / mockup / prototip, persona va user flow

Uyga vazifa

Bitta ilovaning 3 ekranini 4C bo'yicha baholang. Keyingi dars: foydalanuvchini qanday o'rganamiz (tadqiqot usullari)