AXV

UX flow diagrammalari

User flow, flowchart shakllari va axborot arxitekturasi

10-sinfAdvanced UX/UI4-hafta · 11-dars

Bugun nimani o'rganamiz?

User flow

Foydalanuvchi yo'llarining vizual tasviri va flowchart shakllari

3 xil oqim

Task flow, wireflow va user flow

Axborot arxitekturasi

Karta tartiblash va daraxt testi

01

User flow nima?

Foydalanuvchi yo'lining xaritasi

User flow: barcha mumkin bo'lgan yo'llar

User flow: foydalanuvchi ilova yoki veb-saytdan foydalanganda bosib o'tishi mumkin bo'lgan barcha yo'llarni ko'rsatuvchi vizual tasvir.

Kirish nuqtasi

Onboarding ekrani yoki bosh sahifa: flowchart shu yerdan boshlanadi

Yakuniy harakat

Sotib olish, ro'yxatdan o'tish yoki hisob yaratish

Flowchart shakllari

Kirish Amal Qaror? Ha Maqsad Yo'q

Nega user flow chizamiz?

Intuitiv interfeys

Foydalanuvchi kerakli amalni tezroq bajaradi; maqsadga yo'llarning samaradorligi baholanadi

Mavjud interfeysni tahlil

Foydalanuvchi qayerda qiynalishini topadi

Taqdimot

Jamoa bir fikrda bo'ladi, mijozga qarorlar asoslanadi

02

User flow turlari

Task flow, wireflow, user flow

Task flow: «Parolni tiklash»

Login Telefon kiritish Topildi? Yo'q: xato Ha Kod yuborish Yangi parol: maqsad

Uch xil oqim

Kartani bosing

Task flow

bosing

Bitta vazifa: hisob yaratish, parolni tiklash, xarid. Odatda bitta asosiy yo'l.

Wireflow

bosing

Wireframe + flowchart. Har bosqichda ekran maketi; mobil ilovalar uchun qulay.

User flow

bosing

Turli personalar va kirish nuqtalari: home, reklama banneri, qidiruv natijalari.

Wireflow: har bosqichda ekran maketi

Login

Parolni unutdim

Telefon

Kod yuborish

Yangi parol

Saqlash

Wireflow: wireframe va flowchartning aralashmasi. Mobil ekranlar kichik, diagrammaga osongina sig'adi.

User flow: bir maqsad, uch kirish

Bosh sahifa Reklama banneri Qidiruv natijasi Mahsulot sahifasi Xarid: maqsad

Bilimingizni sinang

Flowchartda «Ha» va «Yo'q» yo'llari chiqadigan shakl qaysi?

To'g'ri: romb qaror qabul qilish nuqtasi. To'rtburchak esa bajariladigan amalni bildiradi.

User flow qachon tuziladi?

Dastlabki rejalashtirish bosqichida, user research tugagach.

Nimalar oldin tayyor bo'ladi: pastga

Oldindan bajarilgan ishlar

  1. Empatiya xaritalari
  2. Affinity diagrammalar
  3. Persona yaratish
  4. Asosiy ssenariylar

User flow nimani aniqlaydi?

Nechta ekran kerakQanday ketma-ketlikQaysi elementlar zarur
03

Axborot arxitekturasi

Ma'lumotni foydalanuvchi mantiqi bo'yicha guruhlash

Karta tartiblash (Card Sorting)

Ochiq

Ishtirokchilar mavzularni o'zlari toifalaydi va nom beradi

Gibrid

Tayyor toifalar bor, yangisini yaratish ham mumkin

Yopiq

Faqat berilgan toifalarga ajratiladi

Kartalardan toifalarga

Qabul Jadval Galereya Aloqa guruhlash Ta'lim Qabul, Jadval Hayot Galereya, Aloqa Daraxt testi topa oladimi?

Task flow chizish: 4 qadam

1. Kirish va maqsad

Foydalanuvchi qayerdan kiradi va nimaga erishmoqchi? Ikkalasini yozing.

2. Amallar (to'rtburchaklar)

Foydalanuvchi bajaradigan har bir amalni to'rtburchakka yozing.

3. Qarorlar (romblar)

Har rombdan Ha va Yo'q yo'llarini chiqaring.

4. Sinab ko'ring

Sherigingiz diagramma bo'yicha yursin: qayerda to'xtab qoldi?

Amaliy topshiriq 20 daqiqa

OsonShakl tanlang: «Kirish» bosiladi; «Parol to'g'rimi?»; «Arizani yuborish».
O'rtaTask flow, wireflow yoki user flow: bitta yo'l; ekran maketlari o'qlar bilan; ikki persona va uch kirish nuqtasi.
Qiyin«Maktab saytida ro'yxatdan o'tish»: kamida 5 to'rtburchak va 2 romb. Sherigingiz to'siqni topadi.

Odatiy xatolar

Hamma sahifa bitta diagrammada

Task flow bitta vazifaga qaratiladi.

Romb o'rniga to'rtburchak

Qaror nuqtasidan Ha va Yo'q yo'llari chiqishi shart.

Kirish nuqtasi yoki maqsad yo'q

Oqim qayerdan boshlanib, qayerda tugashi ko'rinsin.

Tadqiqotsiz chizish

User flow user research va persona'dan keyin tuziladi.

Xulosa

Bugun o'rgandik

  • User flow, romb va to'rtburchak
  • Task flow, wireflow, user flow
  • Karta tartiblash va daraxt testi

Keyingi dars

Figma da wireframe: bugungi oqimni ekranlarga aylantiramiz va tugmalar bilan bog'laymiz