B2B SaaS मैस्कॉट: ऑनबोर्डिंग, एम्प्टी स्टेट और 404

B2B प्रोडक्ट में मैस्कॉट कहाँ होना चाहिए?

उन स्क्रीन पर जहाँ यूज़र इंतज़ार कर रहा है, शुरुआत कर रहा है या अटका हुआ है, वहाँ नहीं जहाँ वह काम कर रहा है। एक छोटा नक्शा:

SwiftUI, Compose, Flutter और वेब में ऑनबोर्डिंग और एम्प्टी स्टेट ट्रिगर को स्टेप-बाय-स्टेप जोड़ने के लिए ऑनबोर्डिंग और एम्प्टी स्टेट में मैस्कॉट जोड़ें देखें। यह गाइड उससे जुड़े B2B फ़ैसलों को कवर करती है।

मैस्कॉट वाली अच्छी एम्प्टी स्टेट कैसी होती है?

Nielsen Norman Group की जटिल ऐप्लिकेशन में एम्प्टी स्टेट की गाइडलाइन तीन काम बताती है: सिस्टम स्टेटस बताना, सीखने के संकेत देना, और मुख्य टास्क तक सीधे रास्ते देना (NN/g)। मैस्कॉट तीनों में मदद कर सकता है, लेकिन इनमें से कोई भी काम अकेले नहीं कर सकता।

• पहले स्टेटस। NN/g चेतावनी देता है कि कंटेंट लोड होते समय "No records" न दिखाएँ। क्वेरी पूरी होने तक loading लूप दिखाएँ, फिर एम्प्टी स्टेट।
• एक वाक्य में सिखाएँ। "Projects में आपकी टीम के टास्क इकट्ठा होते हैं। एक बनाएँ या Jira से इम्पोर्ट करें।" कैरेक्टर इसके बगल में रहता है, इसकी जगह नहीं।
• एक मुख्य बटन। सीधा रास्ता स्क्रीन का सबसे ज़रूरी हिस्सा है। इसे मैस्कॉट की तुलना में नज़र के ज़्यादा करीब रखें।
• खालीपन के प्रकार से मिलान करें। पहली बार इस्तेमाल पर स्वागत (idle या wave)। यूज़र ने खुद लिस्ट खाली की तो छोटा इनाम (happy)। कोई नतीजा नहीं मिला तो न्यूट्रल idle और सर्च बढ़ाने का तरीका। "No permission" पर कोई मैस्कॉट नहीं, बस यह कि किससे पूछना है।

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

जैसे ही कोई स्क्रीन रोज़मर्रा की बन जाए। Apple की मोशन गाइडेंस कहती है कि "बार-बार होने वाले UI इंटरैक्शन में आमतौर पर मोशन जोड़ने से बचें" और लोगों को उसका इंतज़ार कराने के बजाय "मोशन रद्द करने दें" (Apple HIG)। Microsoft का Office Assistant, Clippy, ऐसे कैरेक्टर की जानी-मानी मिसाल है जो पहले से काम जानने वाले लोगों को बार-बार टोकता रहता था (Wikipedia)।

मैस्कॉट को हटाने का एक प्लान जो ज़्यादातर B2B प्रोडक्ट में काम करता है:

1. ऑनबोर्डिंग स्टेट को ऑनबोर्डिंग से जोड़ें। जब सेटअप चेकलिस्ट पूरी हो जाए या बंद कर दी जाए, तो उसके मैस्कॉट वाले पल भी उसके साथ चले जाएँ।
2. सिर्फ़ कभी-कभार वाले पल रखें। इम्पोर्ट पूरा होना, माइलस्टोन, एम्प्टी स्टेट और 404 पेज रहें; हर एक्शन पर होने वाले रिएक्शन हटें।
3. एक सेटिंग दें। यूज़र प्रेफ़रेंस में "Show mascot" टॉगल, और उन एडमिन के लिए workspace-लेवल डिफ़ॉल्ट जो सबके लिए शांत प्रोडक्ट चाहते हैं।
4. सिस्टम सेटिंग का सम्मान करें। मोशन कम करें चालू हो तो स्टिल इमेज दिखाएँ (MDN)।

क्या 404 पेज पर मैस्कॉट होना चाहिए?

हो सकता है, अगर पेज काम का बना रहे। U.S. Web Design System का 404 टेम्पलेट सलाह देता है: "मज़ाकिया, बहुत क्यूट या चंचल एरर मैसेज से बचें", क्योंकि किसी ज़रूरी चीज़ तक पहुँचने की कोशिश में यूज़र्स को हल्कापन पसंद नहीं आ सकता। यह भी कहता है कि यूज़र्स को बताएँ कि वे आगे क्या कर सकते हैं और मुख्य नेविगेशन शामिल करें (digital.gov)।

मैस्कॉट के साथ काम करने वाला 404 पेज:

• शांत sleeping या idle लूप, कोई error रिएक्शन या मज़ाक नहीं,
• "Page not found" जैसी सीधी हेडिंग और एक लाइन कि ऐसा क्यों हुआ होगा,
• सर्च, डैशबोर्ड का लिंक और मुख्य नेविगेशन,
• सर्वर से असली HTTP 404 स्टेटस। success कोड के साथ भेजे गए एरर पेज को Google soft 404 मानता है (Google Search Central)।

इस पेज को हल्का रखें: एक छोटा वीडियो या स्टिल इमेज काफ़ी है। जिस पेज का एकमात्र काम लोगों को कहीं और भेजना है, उस पर पूरा एनिमेशन रनटाइम लोड न करें।

Dark mode कैसे संभालूँ?

ऐसा फ़ॉर्मेट चुनें जिसका अपना बैकग्राउंड न हो, या हर थीम के लिए अलग एक्सपोर्ट बनाएँ।

• Rive ट्रांसपेरेंट canvas पर ड्रॉ करता है, इसलिए एक ही .riv लाइट और डार्क दोनों थीम पर काम करती है।
• ट्रांसपेरेंट वीडियो: Chrome, Firefox और Edge के लिए VP9 alpha वाला WebM, और Safari के लिए alpha वाला HEVC MOV।
• GIF और MP4 में ठोस बैकग्राउंड पहले से जुड़ा होता है। डार्क थीम पर कैरेक्टर के चारों ओर हल्का बॉक्स टूटा हुआ लगता है। हर थीम के surface color पर एक वर्ज़न बनाएँ और उन्हें prefers-color-scheme media query या अपने ऐप की theme class से बदलें (MDN)।

डार्क बैकग्राउंड पर कैरेक्टर को भी जाँचें। गहरी आउटलाइन और नेवी रंग की डिटेल गायब हो सकती हैं; मैस्कॉट का रंग बदलने से बेहतर है उसके पीछे एक हल्का लाइट कार्ड रखना।

SaaS मैस्कॉट का परफ़ॉर्मेंस बजट कितना होना चाहिए?

किसी स्क्रीन के धीमे होने की वजह कभी भी मैस्कॉट नहीं होना चाहिए।

• रनटाइम का खर्च। Rive का canvas-lite web runtime 2.44.0 brotli से compress होने पर लगभग 373 KB का है, और canvas और webgl2 builds इससे बड़े हैं (Rive)। यह खर्च हर ऐप में सिर्फ़ एक बार लगता है, इसलिए यह किसी अकेले 404 पेज की बजाय ऐसे प्रोडक्ट के लिए ज़्यादा सही है जिसमें मैस्कॉट कई जगह दिखता है।
• फ़ाइल का खर्च। एक .riv में सारी स्टेट होती हैं। 17 एनिमेशन वाले एक असली Charmotion सेट में सभी एनिमेशन की .riv 40 KB (brotli के साथ 12 KB) थी, जबकि सारी MP4 मिलाकर 2.6 MB और ट्रांसपेरेंट WebM 6.1 MB की थीं।
• लोड का क्रम। लेआउट में पहले एक स्थिर पोस्टर रेंडर करें, पेज के इंटरैक्टिव होने के बाद रनटाइम लोड करें, और एनिमेशन तैयार होते ही उसे पोस्टर की जगह लगा दें। ऑनबोर्डिंग को कभी किसी एनिमेशन फ़ाइल के इंतज़ार में न रोकें।
• वेब पर GIF नहीं। web.dev तेज़ लोडिंग के लिए एनिमेटेड GIF की जगह वीडियो इस्तेमाल करने की सलाह देता है (web.dev)। GIF को ईमेल और docs के लिए रखें।

Charmotion वह .riv mood नंबर इनपुट और ट्रिगर इनपुट के साथ देता है (पेड प्लान, $20/माह से), साथ में थीम वाले पेज के लिए ट्रांसपेरेंट WebM और HEVC MOV, और ईमेल और हेल्प डॉक के लिए MP4 और GIF। यह 17 एनिमेशन में एक कैरेक्टर है; यह किसी बटन की ओर इशारा करने जैसे नए पोज़ नहीं जोड़ता, इसलिए टूलटिप के लिए अब भी तीर चाहिए।

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

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

हो सकता है, अगर कैरेक्टर ऑनबोर्डिंग, एम्प्टी स्टेट और कभी-कभार आने वाले milestones तक सीमित रहे और काम वाली स्क्रीन से दूर रहे। खरीदार B2B टूल्स को उनकी काबिलियत से परखते हैं, इसलिए असली ग्राहकों के साथ टोन टेस्ट करें, यूज़र्स को इसे छिपाने की setting दें, और इसे बिलिंग, परमिशन या सिक्योरिटी स्क्रीन पर कभी न रखें।

यूज़र्स को SaaS मैस्कॉट बंद करने का विकल्प कैसे दें?

यूज़र प्रेफ़रेंस में "मैस्कॉट दिखाएँ" टॉगल जोड़ें, और एक workspace डिफ़ॉल्ट भी, जिसे admin सेट कर सकें। बंद होने पर हर स्टेट की जगह कुछ न दिखाएँ या एक छोटा स्थिर आइकन दिखाएँ, सारा टेक्स्ट वैसा ही रखें, और सिस्टम में "मोशन कम करें" setting चालू होने पर भी अपने-आप स्थिर इमेज पर स्विच करें।

क्या मज़ेदार 404 पेज SEO के लिए बुरा है?

ह्यूमर से रैंकिंग पर कोई असर नहीं पड़ता; status code से पड़ता है। सर्वर को गायब पेजों के लिए HTTP 404 लौटाना चाहिए, वरना Google उसे soft 404 के रूप में रिपोर्ट कर सकता है। मज़ाक का बड़ा जोखिम usability है: digital.gov मज़ाकिया अंदाज़ की बजाय सीधा संदेश, अगला कदम और मुख्य नेविगेशन देने की सलाह देता है।

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

• SaaS मैस्कॉट को अनुभवी यूज़र्स (power users) के लिए कब पीछे हट जाना चाहिए?

स्रोत

• Designing Empty States in Complex Applications: 3 Guidelines, Nielsen Norman Group
• Motion, Apple Human Interface Guidelines
• 404 page template, U.S. Web Design System (digital.gov)
• How HTTP status codes, and network and DNS errors affect Google Search, Google Search Central
• Runtime sizes, Rive
• Replace animated GIFs with video for faster page loads, web.dev
• prefers-color-scheme, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Office Assistant, Wikipedia