Ovqat yetkazib berish ilovasi dizayni chiroyli ekranlardan emas, buyurtma ssenariysidan boshlanadi: odam nimani tanlaydi, narxni nima o‘zgartiradi va menyu bilan eshik orasida nechta teginish bor. KruchuVerchu ilovasi ustida, Sankt-Peterburgdagi shaurma tarmog‘i uchun, shunday ishladik: 30+ ekran va menyudan manzilgacha to‘rt qadam.
Qisqacha
Tarmoq ko‘cha taomi eng yaxshi tarmoqlardagi qahvadek toza va tez buyurtma qilinadigan o‘z ilovasini xohladi.
Oddiy ro‘yxat-menyu buni eplay olmaydi: shaurma didga qarab yig‘iladi, qo‘shimchalar, o‘lcham va souslar esa yakuniy narxni o‘zgartiradi. Faqat taomlar ro‘yxati ko‘rsatilsa, mehmon o‘z tanlovi narxga qanday ta’sir qilishini ko‘rmaydi.
Loyiha tafsilotlari KruchuVerchu keysi sahifasida. Biz dizayn uchun javobgar edik: brend, interfeys va har bir ekranning mantig‘i.
Vazifa uchta talab bilan tasvirlandi, ularning har biri ekranda tekshiriladi.
| Vazifa | Biz nima qildik | Mehmon nimani ko‘radi |
|---|---|---|
| Bir necha teginishda buyurtma | To‘rt qadamli yo‘l: menyu, karta, savat, manzil | Ortiqcha bo‘limlarsiz qisqa yo‘l |
| Didga qarab yig‘ilgan shaurma | Konfigurator: ingredientlar, qo‘shimchalar va souslar bitta ekranda | Ingredient fotosi, qo‘shimcha narxi va darhol qayta hisoblanadigan jami |
| Ekranda taniladigan brend | Sariq rang, teskari «VERCHU» va interfeysdagi aylanish | Brend faqat logotipda emas, har bir harakatda |
Birorta qatorni chiroyli maket bilan yopib bo‘lmaydi. Ularni och qolgan odam bilan buyurtma orasida nechta teginish va ekran qolgani hamda odam tanlovining narxini darhol ko‘rishi bilan tekshirishadi.
Tayyor taom kartasida tanlaydigan narsa yo‘q, didga qarab yig‘iladigan taomda esa tanlovning o‘zi buyurtmaning asosiy qismi.
| Mezon | Tayyor taom | Didga qarab yig‘iladigan taom |
|---|---|---|
| Mehmon nimani hal qiladi | Olish yoki olmaslik | Nimadan yig‘ish va qancha qo‘shib to‘lash |
| Narxni nima o‘zgartiradi | Hech narsa, narx bitta | Qo‘shimchalar, o‘lcham va souslar |
| Nimani ko‘rsatish kerak | Foto va nom | Har bir ingredient fotosi va har bir qo‘shimcha narxi |
| Qayerda xato qilish osonroq | Taom tavsifida | Jamida: mehmon u nimadan tashkil topganini tushunmaydi |
Dizayn uchun xulosa shu: didga qarab yig‘iladigan taomga jonli jamili alohida konfigurator-ekran kerak. Usiz «o‘zing yig‘» afzalligi narx haqidagi taxminlarga aylanadi.
Buyurtma yo‘li bitta harakat sifatida loyihalangan: menyu, karta, savat, manzil.
Apple iOS dizayni bo‘yicha tavsiyalarida ekrandagi boshqaruv elementlari sonini cheklash va ikkinchi darajali amallarni minimal harakat bilan ochiladigan qilishni maslahat beradi. To‘rt qadamli qisqa yo‘l shu tamoyilni buyurtmaga qo‘llaydi: har bir ortiqcha bo‘lim — voz kechish uchun ortiqcha sabab.
Bunday ssenariylar qanday qurilishi va mobil interfeyslarda qaysi xatolar eng ko‘p uchrashini mobil ilova UX/UI-dizayni haqidagi maqolada tasvirlaganmiz.
Konfigurator mahsulot tayyor ro‘yxatdan tanlanmasdan, mijoz uchun yig‘iladigan joyda kerak. KruchuVerchuda u har bir ingredient fotosini va qo‘shimchaning halol narxini ko‘rsatadi, yakuniy narx esa ortiqcha ekranlarsiz shu zahoti qayta hisoblanadi.
Mehmon ingredientlar, qo‘shimchalar va souslarni bitta ekranda tanlaydi. Qo‘shimcha narxi darhol ko‘rinadi, shuning uchun odam ustama haqida oxirgi qadamda emas, tanlov qilayotganda bilib oladi.
Ingredient fotosi «nima olaman» degan savolga javob beradi, yonidagi narx esa «bu qancha turadi» degan savolga. Ikkala javob bitta ekranda bo‘lsa, tanlov oldinga-orqaga o‘tishni talab qilmaydi.
Misol Konfigurator faqat shaurma uchun emas. Pitseriyada ham asos, to‘ldirma va o‘lcham alohida tanlanadi, jami ham xuddi shunday tanlovga bog‘liq. Buyurtma mantig‘i bitta tamoyilga qurilgan va mahsulot mijoz uchun yig‘iladigan har qanday joyga mos.
KruchuVerchu nomi six atrofida aylanadi, interfeys ham: shaurma yig‘ishdan buyurtma holati halqasigacha.
Brendga faqat logotipda emas, har bir harakatda o‘qilish vazifasi qo‘yildi. Buning uchun uchta belgi bor: sariq rang, teskari «VERCHU» va aylanish. Palitra, shriftlar va ikonkalar bitta dizayn-tizimga yig‘ilgan, shuning uchun barcha ekranlar bitta ilovaning qismlariga o‘xshaydi.
Nom qanday tanlanishi va nimadan butun taqdimot o‘sib chiqishi mumkinligini neyming haqidagi maqolada ko‘rib chiqqanmiz.
Maslahat Brendga faqat rang emas, harakat ham bering. Rang va shriftni oddiygina takrorlash mumkin, «nom — harakat — interfeys» bog‘lanishi esa ma’noga tayanadi. Nomda obraz bo‘lsa, uni faqat qadoqda emas, animatsiya va buyurtma holatida ko‘rsatish mumkinligini tekshiring.
KruchuVerchuning barcha ekranlari bitta dizayn-tizimga yig‘ilgan, ishni to‘rt blokka bo‘lish mumkin.
Yagona tizim fayllardagi tartib uchun emas. Ilova ishlab chiqilib, to‘ldirib borilganda yangi ekran tayyor komponentlardan yig‘iladi, qaytadan chizilib, boshqalari bilan moslashtirilmaydi.
Buyurtmachi App Store’da chiqarishni rejalashtirgan edi, shuning uchun dizayn tizimi va barcha ekranlar aynan iOS uchun loyihalandi.
Platforma tanlovi dizayn qarorlarini belgilaydi: iOS’ning o‘z imo-ishoralari, o‘z tizim komponentlari va elementlarni joylashtirish qoidalari bor. Apple, masalan, boshqaruv elementlariga ekranning o‘rtasi va pastki qismida yetish qulayroq ekanini eslatadi, asosiy tugma qayerda bo‘lishini hal qilganda buni hisobga olish kerak.
Keyinroq Android kerak bo‘lsa, o‘sha platforma qoidalari uchun alohida ishlov kerak bo‘ladi, bu ishni oldindan rejaga kiritgan ma’qul.
Ilova bir vaqtning o‘zida ikki platforma uchun kerak bo‘lsa, iOS va Android uchun mobil ilova ishlab chiqish haqidagi maqoladan boshlang. Do‘konga chiqishdan oldin nima tekshirilishi App Store va Google Play’da nashr qilish haqidagi materialda yozilgan.
Buyurtmachiga 30+ ekran, dizayn-tizim va buyurtma mantig‘i topshirildi: vitrinadan kuryer kuzatuvigacha. Bu ishlab chiqishga tayyor mahsulot, tayyor ilova emas, chunki kod loyihaga kirmagan.
Bu 30+ ekranga vitrina, katalog, taom kartalari, konfigurator, savat va kuzatuv kiradi. Dasturchi uchun bu mo‘ljal: ilova so‘z bilan tavsifdan emas, tayyor ekranlar va buyurtma mantig‘idan yig‘iladi.
Keysda buyurtmalar, tushum yoki tezlik bo‘yicha raqamlar yo‘q, biz ularni o‘ylab topmaymiz: loyiha natijasi — ishlab chiqishga tayyor mahsulot.
Bu savollar mijoz buyurtmani o‘zi yig‘adigan har qanday xizmatga mos: qahvaxonadan pitseriyagacha. Ekranlarni chizishni boshlashdan oldin ularni bering.
Xato Qo‘shimcha narxini faqat savatda ko‘rsatish. Odam taomni narxni bilmay yig‘adi, jamini esa oxirida, qarorni o‘zgartirish qiyinroq bo‘lganda ko‘radi. Konfigurator narx tanlov qilinayotgan joyda qayta hisoblansa, halol bo‘ladi.
Natijani telefonda tekshirish mumkin: menyudan manzilgacha yo‘lni bosib o‘ting va teginishlarni sanang, so‘ng eng murakkab taomni yig‘ing va har bir tanlovdan keyin uning narxi aniq ekaniga ishonch hosil qiling. Taxmin qilishga to‘g‘ri kelsa, dizayn hali tugamagan.
Biz bezakdan emas, buyurtma ssenariysidan va undagi narxni nima o‘zgartirishidan boshlaymiz. Avval menyudan manzilgacha yo‘l, keyin konfigurator, so‘ng brend, ikonkalar va komponentlar bitta dizayn-tizimda. Shunda ekranlar bir-biriga mos bo‘ladi, dasturchiga esa rasmlar to‘plami emas, tasvirlangan mantiq beriladi.
Biz dizayn uchun javobgarmiz: brend, interfeys va ekranlar mantig‘i. Sayt yoki platforma ishlab chiqishni alohida buyurtma qilish mumkin, formatlar va narxlar sayt va platformalar ishlab chiqish sahifasida jamlangan. Vazifa va ishlar tarkibini qisqa suhbatdan keyin aniqlashtiramiz.
Vazifangizni muhokama qilamiz
Nima qilish kerakligini yozing — muddat va narxni baholab, yechim taklif qilamiz.
Faqat dizaynni: brend, interfeys va har bir ekranning mantig‘ini. Natija — ishlab chiqishga tayyor 30+ ekran va dizayn-tizim, tayyor ilova emas.
Mahsulot tayyor ro‘yxatdan tanlanmasdan, mijoz uchun yig‘iladigan har qanday joyga mos: buyurtma mantig‘i xuddi shu tamoyilga qurilgan. Masalan, pitseriyada bu asos, to‘ldirma va o‘lcham, shaurmada — ingredientlar, qo‘shimchalar va souslar.
Qo‘shimchalar, o‘lcham va souslar jamini o‘zgartiradi, shuning uchun konfigurator ingredient fotosi va narxini darhol ko‘rsatadi hamda summani ortiqcha ekranlarsiz shu zahoti qayta hisoblaydi.
Buyurtmachi App Store’da chiqarishni rejalashtirgan edi, shuning uchun dizayn tizimi va barcha ekranlar aynan iOS uchun loyihalandi.
To‘rtta: menyu, karta, savat, manzil. Yo‘l ortiqcha bo‘limlarsiz, bitta harakat sifatida loyihalangan.
30+ ekran, dizayn-tizim va buyurtma mantig‘iga: vitrinadan kuryer kuzatuvigacha. Bu ishlab chiqishga tayyor mahsulot.
