चेकआउट मैस्कॉट एनिमेशन: पेमेंट, ऑर्डर और ईमेल

चेकआउट और ऑर्डर के हर इवेंट के लिए कौन-सी स्टेट सही है?

हर पंक्ति में ऐसा टेक्स्ट है जो अपने-आप में पूरा है: रकम, ऑर्डर नंबर, डिलीवरी की तारीख। मैस्कॉट सिर्फ़ टोन की पुष्टि करता है; जानकारी कभी उस पर निर्भर नहीं होती। यह screen reader इस्तेमाल करने वालों के लिए और कैरेक्टर को स्क्रॉल करके आगे बढ़ जाने वाले हर व्यक्ति के लिए ज़रूरी है।

एनिमेशन की वजह से चेकआउट धीमा होने से कैसे रोकें?

चेकआउट की स्पीड को एक सख्त सीमा मानें। Baymard Institute के सर्वे में अमेरिका के 18% ऑनलाइन खरीदारों ने पिछली तिमाही में "बहुत लंबी / जटिल चेकआउट प्रक्रिया" की वजह से ऑर्डर छोड़ दिया था (Baymard)। Apple की motion guidance यही बात interaction के स्तर पर कहती है: "लोगों को कुछ भी करने से पहले एनिमेशन पूरा होने का इंतज़ार न कराएँ" (Apple HIG)।

• एनिमेशन के लिए कुछ भी न रोकें। कन्फ़र्मेशन पेज ऑर्डर की जानकारी तुरंत दिखाता है; success रिएक्शन उसके साथ चलता है, उससे पहले नहीं।
• Loading का मतलब सच में loading। पेमेंट request शुरू होते ही लूप शुरू करें और response आते ही बंद करें। कोई न्यूनतम play time नहीं।
• देर से लोड करें। पेमेंट फ़ॉर्म के interactive होने के बाद एनिमेशन रनटाइम और फ़ाइलें fetch करें, और तब तक उनकी जगह एक स्थिर पोस्टर दिखाएँ।
• फ़ॉर्म से दूर रहें। कार्ड फ़ील्ड, एड्रेस autocomplete या Pay बटन के लेबल के पास कोई कैरेक्टर नहीं।

loader की टाइमिंग के बारे में सामान्य जानकारी के लिए लोडिंग एनिमेशन जोड़ें देखें।

पेमेंट फ़ेल होने पर मैस्कॉट को कैसा व्यवहार करना चाहिए?

उसे बिल्कुल रिएक्ट नहीं करना चाहिए। पेमेंट decline होना शर्मिंदगी या चिंता की बात हो सकती है, और error वाला चौंकना या उदास चेहरा इसे डांट जैसा महसूस कराता है। कैरेक्टर को छिपा दें या स्थिर छोड़ दें, और शांत टेक्स्ट को अपना काम करने दें।

Stripe का documentation टेक्स्ट लिखने में मदद करता है। इसके अनुसार कार्ड जारी करने वाले ज़्यादातर declines को generic श्रेणी में रखते हैं और प्राइवेसी व सुरक्षा कारणों से इनकी बारीकियाँ सिर्फ़ अपने कार्डधारकों से ही साझा करते हैं (Stripe)। कुछ codes के लिए, जैसे खोया हुआ बताया गया कार्ड, Stripe कहता है कि असली वजह "ग्राहक को नहीं बतानी चाहिए" और इसे generic decline के रूप में दिखाना चाहिए (Stripe)।

फ़ेल हुए पेमेंट की अच्छी स्क्रीन:

• साफ़ शब्दों में बताती है कि पेमेंट नहीं हो पाया,
• कार्ट और भरी गई जानकारी बनाए रखती है,
• पेमेंट का कोई दूसरा तरीका देती है और बैंक से संपर्क करने का सुझाव देती है,
• खरीदार को दोष देने से बचती है, जिसकी सलाह NN/g भी error messages के लिए आम तौर पर देता है (NN/g)।

"आपसे कोई पैसा नहीं कटा" का वादा तब तक न करें जब तक आपका पेमेंट प्रोवाइडर इसकी पुष्टि न करे; authorization स्टेटमेंट पर pending के रूप में दिख सकते हैं।

क्या मैं Shopify या hosted checkout के अंदर मैस्कॉट लगा सकता हूँ?

आम तौर पर पेमेंट स्टेप के अंदर नहीं। Shopify के checkout UI extensions "checkout पेज से अलग, एक isolated sandbox में चलते हैं", DOM तक पहुँच के बिना एक Web Worker के अंदर, और "प्लेटफ़ॉर्म द्वारा उपलब्ध कराए गए खास UI components और APIs तक सीमित" होते हैं (Shopify)। वहाँ Rive या Lottie रनटाइम नहीं चल सकता।

आप इसे कहाँ जोड़ सकते हैं:

• थीम पेज: प्रोडक्ट, कार्ट और drawer, एक custom section के ज़रिए। Shopify में एनिमेशन जोड़ें गाइड में थीम के अंदर वीडियो, Rive और GIF की जानकारी है।
• Checkout और thank-you extensions: Shopify का image component एक इमेज URL लेता है; वहाँ एनिमेटेड GIF चलता है या नहीं, इस पर भरोसा करने से पहले अपने स्टोर के प्रीव्यू में टेस्ट कर लें।
• ईमेल और ऑर्डर स्टेटस पेज: अगला सेक्शन देखें।

पेमेंट प्रोवाइडर्स के hosted checkouts आम तौर पर custom एनिमेशन की बजाय लोगो और रंग जैसी branding settings देते हैं, इसलिए मैस्कॉट को उनके आसपास के अपने पेजों पर रखें।

ऑर्डर कन्फ़र्मेशन और शिपिंग ईमेल को एनिमेट कैसे करें?

GIF इस्तेमाल करें, और उन email clients को ध्यान में रखकर डिज़ाइन करें जो इसे नहीं चलाएँगे। Can I email के अनुसार Windows के लिए Outlook 2007 से 2019 तक एनिमेटेड GIF सपोर्ट नहीं करते, और Office 365 अकाउंट वाला Outlook एनिमेशन तीन बार चलाकर रुक जाता है और एक play बटन दिखाता है (Can I email)। Gmail और Apple Mail GIF चलाते हैं।

• पहला फ़्रेम ही मतलब बताए। ऑर्डर कन्फ़र्म के लिए success पोज़ से शुरू करें, उससे पहले के किसी न्यूट्रल फ़्रेम से नहीं।
• छोटा और हल्का। success रिएक्शन कुछ ही सेकंड का होता है; 480 px का GIF, जिसे लगभग आधी चौड़ाई पर दिखाया जाए, high-density स्क्रीन पर भी शार्प रहता है।
• Alt text. "Order confirmed" या मैस्कॉट का नाम और पोज़ लिखें, ताकि इमेज बंद होने पर भी email का मतलब समझ आए।
• इसे host करें। Template में image tag के साथ अपने CDN या store की file storage से GIF को reference करें।

Push notifications में भी यही तरीका काम करता है। iOS पर attachment 10 MB तक का GIF हो सकता है (Apple); इसे shipped और delivered के लिए भेजें, हर status बदलने पर नहीं।

E-commerce stack में कौन सी फ़ाइल कहाँ लगती है?

Charmotion ये आपके मैस्कॉट या लोगो की एक इमेज से बनाता है: 17 एनिमेशन, जिनमें loading, success, attention, happy और sleeping शामिल हैं, MP4, 9:16 वीडियो, GIF, .riv और ट्रांसपेरेंट WebM और MOV के साथ (पेड प्लान, $20/माह से)। यह क्या नहीं बनाता: आपके प्रोडक्ट पकड़े हुए पोज़, डिब्बा उठाए या डिलीवरी वैन चलाता कैरेक्टर, वॉक साइकल, या प्रोग्रेस बार। ऑर्डर ट्रैकिंग UI आपका अपना कंपोनेंट रहता है, कैरेक्टर उसके बगल में।

अक्सर पूछे जाने वाले सवाल

क्या checkout पेज पर payment के दौरान loading एनिमेशन दिखाना चाहिए?

हाँ, लेकिन सिर्फ़ तब जब payment request सच में चल रही हो, disabled Pay button के पास एक छोटे text label के साथ। Request शुरू होते ही इसे शुरू करें, response आते ही रोक दें, और कभी minimum play time न जोड़ें। Baymard के अनुसार लंबे और उलझे हुए checkouts की वजह से orders अधूरे छोड़ दिए जाते हैं।

क्या मैं Shopify के order confirmation emails में animated GIF इस्तेमाल कर सकता हूँ?

हाँ। GIF को host करें और notification template में image tag से उसे reference करें, फिर एक test order भेजें। पहला फ़्रेम ऐसा डिज़ाइन करें कि वह अकेले ही order confirmed बता दे, क्योंकि Windows के लिए Outlook (2007 से 2019 तक) सिर्फ़ वही फ़्रेम दिखाता है।

क्या payment confirm होने से पहले मैस्कॉट को खुशी मनानी चाहिए?

नहीं। success रिएक्शन सिर्फ़ तब चलाएँ जब आपका server order confirm कर दे, shopper के Pay टैप करने पर कभी नहीं। पहले खुशी मनाना और फिर decline दिखाना, कोई एनिमेशन न होने से भी बुरा है। Request के दौरान loading दिखाएँ, confirmation के बाद success, और failure पर कुछ भी नहीं।

इस गाइड से झटपट जवाब

• Payment fail होने पर checkout मैस्कॉट को कैसे react करना चाहिए?

स्रोत

• Cart abandonment rate statistics, Baymard Institute
• Motion, Apple Human Interface Guidelines
• Card declines, Stripe Docs
• Decline codes, Stripe Docs
• Checkout UI extensions, Shopify Developers
• GIF image format support in email clients, Can I email
• Error-Message Guidelines, Nielsen Norman Group
• UNNotificationAttachment, Apple Developer Documentation