फ़ूड डिलीवरी ऐप मैस्कॉट: ऑर्डर स्टेटस से मूड तक
Charmotion टीम द्वारा · अपडेट:
हर order status को मैस्कॉट की एक स्टेट से जोड़ें: order placed पर success रिएक्शन, preparing पर loading लूप, driver arriving पर attention, delivered पर success, और cancelled पर refund details के पास छोटा sad लूप या शांत idle। ऐप में इसे एनिमेट करें, ज़रूरी pushes के साथ GIF जोड़ें, और Live Activities में छोटी stills इस्तेमाल करें।
मुख्य बातें
- एक status, एक स्टेट; ETA और बाकी जानकारी हमेशा text में रहती है।
- Live Activities अधिकतम आठ घंटे चलती हैं, 4 KB data के अंदर update होती हैं, और images presentation से बड़ी नहीं होनी चाहिए, इसलिए छोटी stills इस्तेमाल करें।
- Android Live Updates में food delivery tracking को सही उपयोग बताया गया है, और custom RemoteViews की अनुमति नहीं है।
- iOS push attachments में 10 MB तक के GIF चलते हैं; इन्हें placed, arriving और delivered के लिए रखें।
- कैरेक्टर सेट में map, route, scooter ride या walk cycle नहीं होते; tracking UI आपका अपना रहता है।
पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।
हर order status के लिए मैस्कॉट की कौन सी स्टेट सही है?
| Order status | स्टेट | साथ में दिखने वाला टेक्स्ट |
|---|---|---|
| Browsing, खाली basket | idle (0) या wave (2) | आस-पास के restaurants |
| ऑर्डर हो गया | success, फिर idle (0) | ऑर्डर नंबर, ETA |
| Restaurant ने accept किया | yes | "Restaurant को आपका order मिल गया है" |
| Preparing | loading (5) | ETA, अपडेट किया हुआ |
| Pick up हो गया, रास्ते में | loading (5) या happy (1) | Courier का नाम, ETA |
| पहुँच रहा है, courier पास में | attention (9) | "2 मिनट में पहुँच रहा है" |
| डिलीवर हुआ | success, फिर happy (1) | Delivery time, order को rate करें |
| देरी | idle (0) | नया ETA और कारण, अगर पता हो |
| Cancelled | sad (4) एक बार, या idle (0) | Refund राशि और समय |
| Review लिखना | listening (6) | कोई नहीं |
| Restaurants रात के लिए बंद | sleeping (8) | खुलने का समय |
Code में mapping एक ही जगह रखें ताकि हर surface एक जैसा दिखे। Charmotion .riv लूप के लिए mood नंबर और वन-शॉट के लिए ट्रिगर लेता है (Rive inputs):
const MOOD = { idle: 0, happy: 1, wave: 2, sad: 4, loading: 5, listening: 6, sleeping: 8, attention: 9 };
const BY_STATUS = {
placed: { fire: "success", mood: MOOD.idle },
accepted: { fire: "yes", mood: MOOD.loading },
preparing: { mood: MOOD.loading },
arriving: { mood: MOOD.attention },
delivered: { fire: "success", mood: MOOD.happy },
delayed: { mood: MOOD.idle },
cancelled: { mood: MOOD.sad },
};
function showStatus(status) {
const step = BY_STATUS[status];
const inputs = rive.stateMachineInputs("CharacterStateMachine");
if (step.fire) inputs.find((i) => i.name === step.fire)?.fire();
const mood = inputs.find((i) => i.name === "mood");
if (mood) mood.value = step.mood;
}Delivery मैस्कॉट कितना playful हो सकता है?
शुरुआत और अंत में playful, बीच में शांत। Order placed और delivered रिएक्शन के लिए अच्छे मौके हैं। देरी, cancellation, गायब items और refunds नहीं।
- देरी: नए ETA के साथ idle। देरी पर कोई मज़ाक नहीं और कोई उदास चेहरा नहीं; ज़्यादा इंतज़ार कर रहा भूखा user ऐप की भावनाएँ नहीं देखना चाहता।
- Cancellations: अगर आपका ब्रांड हल्का-फुल्का है, तो refund details के पास एक छोटा sad लूप ठीक है, क्योंकि नुकसान दोनों का है और अगला कदम साफ़ है। अगर आपका ब्रांड संयमित है, तो idle इस्तेमाल करें।
- गायब या गलत items: support form पर कोई मैस्कॉट नहीं। सीधा text और जल्दी समाधान।
- कभी दोष न दें। कैरेक्टर से यह इशारा न होने दें कि गलती courier या restaurant की है। NN/g की error-message guidance भी errors में मज़ाक और दोषारोपण से बचने की सलाह देती है (NN/g)।
क्या मैस्कॉट Live Activities और Live Updates में दिख सकता है?
हाँ, status के साथ बदलने वाली छोटी still images के रूप में, लूपिंग एनिमेशन के रूप में नहीं।
iOS Live Activities. Apple के documentation के अनुसार एक Live Activity अधिकतम आठ घंटे तक active रह सकती है, static और dynamic data मिलाकर 4 KB से ज़्यादा नहीं हो सकता, और image assets presentation size से बड़े नहीं होने चाहिए, वरना system उसे शुरू करने में fail हो सकता है (Apple)। System सिर्फ़ content में बदलाव को एनिमेट करता है, अधिकतम दो सेकंड तक (Apple)। इसलिए:
- widget extension में हर मूड के लिए एक छोटी PNG bundle करें,
- update में सिर्फ़ status string भेजें, और image locally चुनें,
- status बदलने पर system के image transition को ही "एनिमेशन" बनने दें।
Android Live Updates. Android की guidance में "active food delivery tracking" को सही उपयोग बताया गया है, ProgressStyle जैसी styles ज़रूरी हैं, और notification में custom content view नहीं होना चाहिए (Android Developers)। Tracker icon को dynamically update किया जा सकता है, जो एक छोटी मैस्कॉट still के लिए स्वाभाविक जगह है।
Live Activity और widget limits गाइड में sizes और workarounds की ज़्यादा जानकारी है।
Push notifications में मैस्कॉट कैसे जोड़ें?
iOS पर notification service extension notification दिखने से पहले इमेज डाउनलोड करके attach करता है। Attachments 10 MB तक के JPEG, GIF या PNG, या 50 MB तक के वीडियो हो सकते हैं (Apple)। Android पर BigPictureStyle का documentation bitmap पर आधारित है, इसलिए still भेजें (Android Developers)।
- तीन मौके चुनें। ऑर्डर प्लेस हुआ, पहुँच रहा है और डिलीवर हो गया। हर status बदलने पर इमेज भेजना सिर्फ़ शोर है।
- पहले text। Title और body में सब कुछ होना चाहिए; कई users notification कभी expand नहीं करते।
- इसे छोटा रखें। दरवाज़े के बाहर कमज़ोर signal पर भी छोटा GIF जल्दी लोड होता है।
कौन सी फ़ाइल कहाँ इस्तेमाल करें?
| जगह | फ़ाइल |
|---|---|
| Order tracking स्क्रीन | status से चलने वाली Rive .riv, या हर स्टेट के लिए एक MP4 |
| Live Activity, Live Update, विजेट | छोटी PNG stills, हर मूड के लिए एक |
| iOS push | GIF attachment |
| Receipt email | GIF, जिसमें पहले success पोज़ हो |
| Social और ads | 9:16 वीडियो |
ffmpeg से किसी भी clip से stills बनाएँ, उदाहरण के लिए ffmpeg -ss 0.5 -i arriving.mp4 -frames:v 1 arriving.png, फिर उन्हें presentation size पर scale करें।
डिलीवरी ट्रैकिंग के लिए मैस्कॉट सेट क्या नहीं कर सकता?
Charmotion सेट आपके एक कैरेक्टर को 17 तरीकों से एनिमेट करता है: दस लूप (जिनमें loading, attention, happy, sad और sleeping शामिल हैं), छह वन-शॉट रिएक्शन (जिनमें success और yes शामिल हैं) और एक लॉन्च इंट्रो। इससे ऊपर दिया हर स्टेटस कवर हो जाता है। इसमें ये शामिल नहीं हैं:
- मैप, रूट या चलता हुआ डॉट,
- कैरेक्टर का स्कूटर या बाइक चलाना, पैदल चलना या बैग उठाना,
- एनिमेशन के अंदर बना progress bar या ETA काउंटडाउन,
- कूरियर यूनिफ़ॉर्म जैसे कपड़े।
कैरेक्टर को अपने प्रोग्रेस कंपोनेंट और मैप के बगल में रखें, उनके अंदर नहीं। हर सेट में पुश नोटिफ़िकेशन, ईमेल और सोशल के लिए MP4, 9:16 और GIF हैं, साथ में ऐप के अंदर ट्रैकर के लिए .riv और ट्रांसपेरेंट वीडियो (पेड प्लान, $20/माह से)।
अक्सर पूछे जाने वाले सवाल
क्या ऑर्डर लेट होने पर डिलीवरी ऐप का मैस्कॉट उदास दिखना चाहिए?
नहीं। शांत idle स्टेट इस्तेमाल करें और नया ETA टेक्स्ट में दिखाएँ। भूखे ग्राहक को ज़्यादा इंतज़ार करते समय ऐप की भावनाओं की ज़रूरत नहीं होती, और देरी पर मज़ाक अक्सर उल्टा पड़ता है। sad को, अगर इस्तेमाल करना ही हो, तो कैंसलेशन के लिए रखें और उसके साथ रिफ़ंड की साफ़ जानकारी दिखाएँ।
क्या मैं iOS Live Activity में एनिमेटेड मैस्कॉट लगा सकता हूँ?
लूप के रूप में नहीं। Live Activities सिर्फ़ कंटेंट बदलने पर, अधिकतम दो सेकंड तक एनिमेट करती हैं, अपडेट डेटा 4 KB के अंदर रखना होता है और इमेज presentation से बड़ी नहीं होनी चाहिए। widget extension में हर मूड के लिए एक छोटी स्टिल इमेज बंडल करें और ऑर्डर स्टेटस बदलने पर इमेज बदल दें।
किन ऑर्डर अपडेट के push notification में इमेज होनी चाहिए?
ऑर्डर प्लेस हुआ, कूरियर पहुँच रहा है और डिलीवर हो गया। यही वे पल हैं जब लोग अपना फ़ोन देखते हैं। इन तीनों में इमेज जोड़ें और बाकी अपडेट सिर्फ़ टेक्स्ट में रखें, ताकि मैस्कॉट शोर नहीं, एक संकेत बना रहे। notification का टेक्स्ट इमेज के बिना भी समझ में आना चाहिए।
इस गाइड से झटपट जवाब
स्रोत
- Displaying live data with Live Activities, Apple Developer Documentation
- Animating data updates in widgets and Live Activities, Apple Developer Documentation
- Live updates, Android Developers
- UNNotificationAttachment, Apple Developer Documentation
- NotificationCompat.BigPictureStyle, Android Developers
- Error-Message Guidelines, Nielsen Norman Group
- Inputs (web runtime), Rive