Ssenariy, User Flow va CJM

Foydalanuvchining ilova ichidagi yo'lini hikoya, sxema va his-tuyg'ular xaritasi bilan loyihalaymiz

9-sinfUX/UI dizayn2-hafta · 4-dars

Bugun nimani o'rganamiz?

User Scenario

Persona maqsadiga erishadigan qisqa hikoya

User Flow

Ekranlar, qadamlar va qarorlar blok-sxemasi

CJM

Mijoz yo'li, his-tuyg'ular va og'riq nuqtalari

Takrorlash: Persona

Persona — mahsulotimiz foydalanuvchisining xayoliy, ammo real ma'lumotlarga asoslangan qahramoni.

Nega avval tadqiqot? Kim uchun chizyapmiz?

Savol: nega dizayner chizishdan oldin tadqiqot o'tkazishi kerak?

Foydalanuvchi ssenariysi

Persona ilovaga qanday holatda kiradi va nima qilmoqchi?

Ssenariy 4 ta savolga javob beradi

Katakni bosing: izoh chiqadi.

Misol: Shaxnoza va "Mobile_Book"

10-sinf o'quvchisi Shaxnoza avtobusda ilovani ochadi va «Kvant fizikasi» kitobining PDF'ini yuklab oladi.

Qidiruv panelida «Kvant fizikasi» deb yozadi
Eng yuqori baholangan kitobni tanlaydi
Mundarija va qisqa mazmunni o'qiydi
PDF formatini telefoniga yuklab oladi

Ssenariydan interfeys elementlari

Mobile_Book

Qidiruv: Kvant fizikasi

Natijalar: muqova, nom, reyting

Yuklab olish

Qidiruv qatori
Natijalar ro'yxati (muqova, nom, reyting)
Kitob tafsilotlari: mundarija, izoh
«Yuklab olish» tugmasi

Jumla va interfeys elementi

«Ali manzilini yozmoqda»

bosing

Qidiruv qatori kerak.

«Eng arzonini tanladi»

bosing

Narx va saralash (filter) bo'lishi shart.

«Bitta bosishda buyurtma berdi»

bosing

Katta va qulay CTA tugmasi talab etiladi.

Ssenariy chizishdan oldin yoziladi

Boshlovchilar to'g'ridan-to'g'ri ranglar va rasmlarga kirishadi. Ssenariy esa har bir tugma nega kerakligini ko'rsatadi.

Odatiy xato: ssenariysiz chiroyli, lekin keraksiz ekran chizish.

Pastga bosing: yaxshi ssenariyning namunasi.

Shaxnoza ssenariysi: to'liq

Qahramon va kontekst

Shaxnoza, 16 yosh, abituriyent. Uyda kechqurun dars tayyorlamoqda.

Qadamlar

Ilovani ochadi, «O'tkan kunlar»ni qidiradi, kartani bosadi, «Yuklab olish»ni bosadi, kitobni «Mening kutubxonam»da ko'radi.

User Flow

Ssenariyning vizual blok-sxemasi

User Flow belgilari

Shaklning ustiga olib boring yoki bosing.

User Flow: kitob yuklab olish

Romb: Ha yo'li eng qisqa, Yo'q yo'li Login orqali ketadi.

Happy Path

Qidirish

Tanlash

Yuklash

Happy Path va kutilmagan holatlar

Qidirish

Tanlash

Yuklash

Parol esdan chiqsa-chi? Internet uzilsa-chi? Savatda tovar qolmasa-chi?

User Flow tuzishning 3 qoidasi

1. Happy Path

Avval hech qanday muammosiz, eng qisqa yo'lni chizing.

2. Edge Cases

«Parol esdan chiqsa-chi?» kabi shartli romblarni qo'shing.

3. Qadamlarni kamaytiring

Har bir ortiqcha bosish foydalanuvchilarning 10–20 foizini yo'qotishi mumkin.

Mini-test: User Flow

User Flow sxemasida romb nimani bildiradi?

To'g'ri: to'rtburchak — ekran, romb — qaror qabul qilish nuqtasi.

Tupik: chiqish yo'li yo'q joy

User Flow dizaynerga foydalanuvchi tupikka tushib qolmasligini kafolatlaydi va ortiqcha bosqichlarni ko'rsatadi.

Tupik: foydalanuvchi ekranda qolib ketadi va ilovani yopadi.

Pastga bosing: qadamlar soni nega muhim.

Har bir bosish narxi bor

gacha foydalanuvchi har ortiqcha qadamda yo'qolishi mumkin

Amazon 1-Click Ordering

Customer Journey Map

Foydalanuvchining his-tuyg'ular yo'li

CJM: 5 bosqich va his-tuyg'u egri chizig'i

Bosqich yoki doirani bosing: izoh chiqadi.

CJM bosqichlari qisqacha

Bosqich	Nima bo'ladi?
Xabardorlik	Muammoni his qilish yoki reklama ko'rish
Ko'rib chiqish	Yuklab olish, variantlarni solishtirish
Qaror / Harakat	Xarid qilish yoki xizmatdan foydalanish
Foydalanish	Ilova bilan bevosita ishlash
Sodiqlik	Qoniqish, tavsiya, qayta kirish

Taksi ilovasi: og'riq nuqtasi

Mashina 10 daqiqadan beri topilmayapti

Foydalanuvchi noaniqlikdan asabiylashadi va ilovani yopishi mumkin.

Aniqlik va tanlov berish

Radar animatsiyasi, «qo'shimcha haq taklif qilish» va boshqa tarif tugmalari, taxminiy kutish vaqti.

Yechim ekranda

Haydovchi qidirilmoqda

Taxminiy kutish: 4 daqiqa

Haq taklif qilish Komfort tarifni tanlash

Radar animatsiyasi noaniqlikni kamaytiradi
Tezkor tugmalar: haq yoki tarifni o'zgartirish
Kutish vaqti daqiqalarda ko'rinib turadi

Mini-test: CJM

CJM da «og'riq nuqtasi» (pain point) nima?

To'g'ri: dizayner aynan shu joylarni topib, ularga oson yechim izlaydi.

Bilasizmi?

1-Click

Amazon «Bir bosishda buyurtma» User Flow'ini patentlagan.

Meni o'ylashga majbur qilma

Yaxshi oqimda foydalanuvchi o'ylanib qolmaydi.

CJM tarixi

1980-yillarda xizmat sohasida paydo bo'lgan, smartfonlar davrida ommalashgan.

Amaliyot 20 daqiqa

Oson«Kitob buyurtma qilish» ssenariysini yozing (Kim, qayerda, maqsad, qadamlar)

O'rtaShu ssenariy uchun User Flow chizing: kamida bitta romb («Tizimga kirganmi?»)

QiyinTaksi ilovasidagi 10 daqiqalik kutish og'riq nuqtasini UI yechimi bilan hal qiling

Xulosa

Bugun o'rgandik

Ssenariy matnli hikoya, User Flow uning blok-sxemasi, CJM esa hissiy yo'l va og'riq nuqtalari.

Keyingi dars

5-dars: Wireframe va Balsamiq bilan ilovaning birinchi skeleti.

Uyga vazifa: sevimli xizmatingizda amal (masalan, pul o'tkazish) ssenariysi va 5 qadamli User Flow.