PWA इंस्टॉलेशन के प्रमोशन के पैटर्न

मुस्तफ़ा कुर्तुल्दू
मुस्तफ़ा कुर्तुल्दू
पेनी मैकलाक्लन
पेनी मैकलाक्लन

प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) को इंस्टॉल करने से, उपयोगकर्ताओं के लिए ऐप्लिकेशन को ढूंढना और उसका इस्तेमाल करना आसान हो सकता है. ब्राउज़र प्रमोशन की मदद से भी, कुछ उपयोगकर्ताओं को यह नहीं पता होता कि वे PWA इंस्टॉल कर सकते हैं. इसलिए, ऐप्लिकेशन में PWA इंस्टॉल करना फ़ायदेमंद हो सकता है. इसका इस्तेमाल करके, PWA का प्रमोशन किया जा सकता है और उसे इंस्टॉल किया जा सकता है.

PWA में, सामान्य 'इंस्टॉल करें' बटन का स्क्रीनशॉट.
आपके PWA में, 'इंस्टॉल करें' बटन दिया जाता है.

हालांकि, इस लेख में पूरी जानकारी नहीं है, लेकिन PWA को इंस्टॉल करने के अलग-अलग तरीकों के बारे में बताया गया है. आपने चाहे किसी भी पैटर्न या पैटर्न का इस्तेमाल किया हो, वे सभी एक ही कोड पर ले जाते हैं जो इंस्टॉल फ़्लो को ट्रिगर करता है. इस बारे में, ऐप्लिकेशन इंस्टॉल करने का अपना अनुभव कैसे उपलब्ध कराएं में बताया गया है.

सबसे सही तरीके

कुछ ऐसे सबसे सही तरीके हैं जो आपकी साइट पर इस्तेमाल होने वाले प्रमोशनल पैटर्न पर भी लागू होते हैं.

  • प्रमोशन को, उपयोगकर्ता की गतिविधियों के बीच में रखें. उदाहरण के लिए, PWA के लॉगिन पेज पर, कॉल-टू-ऐक्शन को लॉगिन फ़ॉर्म के नीचे डालें और 'सबमिट करें बटन' पर क्लिक करें. प्रमोशन पैटर्न का गलत इस्तेमाल करने से, आपके PWA की उपयोगिता कम हो जाती है और यूज़र ऐक्टिविटी वाली मेट्रिक पर बुरा असर पड़ता है.
  • उसमें प्रमोशन को खारिज या अस्वीकार करने की सुविधा शामिल होनी चाहिए. याद रखें कि अगर उपयोगकर्ता ऐसा करते हैं, तो उनकी प्राथमिकता याद रखें और फिर से संकेत दें. ऐसा तब करें, जब आपके कॉन्टेंट के साथ लोगों के जुड़ाव में कोई बदलाव हो. जैसे, साइन इन करना या खरीदारी पूरी करना.
  • अपने PWA के अलग-अलग हिस्सों में तकनीकों को मिलाएं, लेकिन इस बात का ध्यान रखें कि इंस्टॉल प्रमोशन से अपने उपयोगकर्ता को प्रभावित या परेशान न करें.
  • प्रमोशन को, beforeinstallprompt इवेंट के शुरू होने के बाद ही दिखाएं.

ब्राउज़र का अपने-आप प्रमोशन होना

कुछ शर्तें पूरी होने पर, ज़्यादातर ब्राउज़र अपने-आप उपयोगकर्ता को यह बताते हैं कि आपका प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल किया जा सकता है. उदाहरण के लिए, डेस्कटॉप Chrome, खोज वाली पट्टी में इंस्टॉल करें बटन दिखाता है.

खोज बार (खोज क्वेरी डालने वाला बार) का स्क्रीनशॉट, जिस पर दिखने वाला इंस्टॉल इंडिकेटर दिख रहा है.
ब्राउज़र से मिलने वाला इंस्टॉल प्रमोशन (डेस्कटॉप).
ब्राउज़र से मिले, इंस्टॉल करने से जुड़े प्रमोशन का स्क्रीनशॉट.
ब्राउज़र से मिला, इंस्टॉल करने का प्रमोशन (मोबाइल).

Android के लिए Chrome, उपयोगकर्ता को मिनी जानकारीबार दिखाता है. हालांकि, beforeinstallprompt इवेंट में preventDefault() को कॉल करके, इसे रोका जा सकता है. अगर preventDefault() को कॉल नहीं किया जाता है, तो जब कोई उपयोगकर्ता पहली बार आपकी साइट पर जाएगा और वह Android पर इंस्टॉल करने की ज़रूरी शर्तों को पूरा करेगा, तब बैनर दिखाया जाएगा. इसके बाद, करीब 90 दिनों के बाद फिर से बैनर दिखेगा.

यूज़र इंटरफ़ेस के प्रमोशन पैटर्न

यूज़र इंटरफ़ेस के प्रमोशन पैटर्न का इस्तेमाल, करीब-करीब किसी भी तरह के PWA के लिए किया जा सकता है. ये पैटर्न, साइट नेविगेशन और बैनर जैसी जगहों पर दिखते हैं. किसी भी दूसरे तरह के प्रमोशनल पैटर्न की तरह, उपयोगकर्ता को उसके कॉन्टेक्स्ट की जानकारी होनी चाहिए, ताकि उन्हें बिना कोई रुकावट न दिखे.

प्रमोशन यूज़र इंटरफ़ेस (यूआई) को ट्रिगर करने के बारे में सोचने वाली साइटें, बड़ी संख्या में इंस्टॉल हासिल करती हैं. साथ ही, जिन साइटों को इंस्टॉल करने में दिलचस्पी नहीं होती है उन्हें ऐप्लिकेशन इस्तेमाल करने में रुकावट नहीं आती.

इंस्टॉल करने का आसान बटन

उपयोगकर्ता अनुभव आसान होने के लिए, अपने वेब कॉन्टेंट में सही जगह पर 'इंस्टॉल करें' या 'ऐप्लिकेशन पाएं' बटन शामिल करें. पक्का करें कि बटन, अन्य ज़रूरी फ़ंक्शन को ब्लॉक न करे और आपके ऐप्लिकेशन पर उपयोगकर्ता को ऐक्सेस न कर पाए.

पसंद के मुताबिक इंस्टॉल करने का बटन..
इंस्टॉल करने का आसान बटन.

यह इंस्टॉल करने का बटन है, जो आपकी साइट के हेडर का हिस्सा होता है. अन्य हेडर कॉन्टेंट में अक्सर साइट ब्रैंडिंग, जैसे कि लोगो और हैमबर्गर मेन्यू शामिल होती है. हेडर, position:fixed हो सकते हैं या हो सकता है कि यह आपकी साइट की फ़ंक्शन और उपयोगकर्ता की ज़रूरतों पर निर्भर न करता हो.

हेडर में, पसंद के मुताबिक इंस्टॉल करने का बटन.
हेडर में, पसंद के मुताबिक इंस्टॉल करें बटन.

सही तरीके से इस्तेमाल किए जाने पर, अपनी साइट के हेडर से PWA को इंस्टॉल करने का प्रमोशन करना, आपके सबसे भरोसेमंद ग्राहकों के लिए आपके अनुभव पर वापस आने का आसान तरीका है. आपके PWA हेडर में मौजूद पिक्सल बहुत महंगे होते हैं. इसलिए, पक्का करें कि इंस्टॉल करने का कॉल-टू-ऐक्शन सही साइज़ का हो, वह अन्य संभावित हेडर कॉन्टेंट की तुलना में ज़्यादा अहम हो, और उसमें कोई रुकावट न आए.

हेडर में कस्टम इंस्टॉल बटन
हेडर में, पसंद के मुताबिक 'इंस्टॉल करें' बटन

सुनिश्चित करें कि आपने:

  • जब तक beforeinstallprompt चालू न हो गया हो, तब तक 'इंस्टॉल करें' बटन न दिखाएं.
  • अपने उपयोगकर्ताओं के लिए, इंस्टॉल किए गए इस्तेमाल के उदाहरण की वैल्यू का आकलन करें. चुनिंदा टारगेटिंग के लिए, सिर्फ़ उन उपयोगकर्ताओं को दिखाएं जिन्हें इससे फ़ायदा मिलने की संभावना है.
  • हेडर स्पेस का बेहतर तरीके से इस्तेमाल करें. सोचें कि हेडर में आपके उपयोगकर्ता को और क्या ऑफ़र करने से मदद मिलेगी. साथ ही, अन्य विकल्पों के मुकाबले, इंस्टॉल प्रमोशन की प्राथमिकता को अहमियत दें.
नेविगेशन मेन्यू में पसंद के मुताबिक इंस्टॉल करें बटन
स्लाइड आउट नेविगेशन मेन्यू में, इंस्टॉल करें बटन या प्रमोशन जोड़ें.

नेविगेशन मेन्यू, आपके ऐप्लिकेशन के इंस्टॉल करने का प्रमोशन करने का बेहतरीन प्लैटफ़ॉर्म है, क्योंकि मेन्यू खोलने वाले उपयोगकर्ता यह बताते हैं कि आपका ऐप्लिकेशन हमें कैसा अनुभव दे रहा है.

सुनिश्चित करें कि आपने:

  • नेविगेशन से जुड़े अहम कॉन्टेंट में रुकावट न डालें. PWA इंस्टॉल प्रमोशन को अन्य मेन्यू आइटम के नीचे रखें.
  • आपका PWA इंस्टॉल करने से लोगों को क्या फ़ायदा होगा, इस बारे में एक छोटी और सही पिच बताएं.

लैंडिंग पेज

लैंडिंग पेज का मकसद आपके प्रॉडक्ट और सेवाओं को प्रमोट करना होता है. इसलिए, PWA को इंस्टॉल करने के फ़ायदों का प्रमोशन करते समय, बड़े स्तर पर इसका इस्तेमाल किया जा सकता है.

लैंडिंग पेज पर कस्टम इंस्टॉल प्रॉम्प्ट.
लैंडिंग पेज पर, पसंद के मुताबिक इंस्टॉल करने का प्रॉम्प्ट.

सबसे पहले, अपनी साइट की खास बात समझाएं, फिर वेबसाइट पर आने वाले लोगों को बताएं कि उन्हें इंस्टॉलेशन से क्या मिलेगा.

सुनिश्चित करें कि आपने:

  • उन सुविधाओं को इस्तेमाल करें जो आपकी वेबसाइट पर आने वाले लोगों के लिए सबसे ज़्यादा मायने रखती हैं. साथ ही, उन कीवर्ड पर ज़ोर दें जो उन्हें आपके लैंडिंग पेज पर ला सकते हैं.
  • अपने इंस्टॉल प्रमोशन और कॉल-टू-ऐक्शन को आकर्षक बनाएं. हालांकि, ऐसा सिर्फ़ तब करें, जब आपने खास बात को साफ़ तौर पर बता दिया हो. आखिरकार यह आपका लैंडिंग पेज है.
  • ऐप्लिकेशन के उस हिस्से में इंस्टॉल प्रमोशन जोड़ें जहां उपयोगकर्ता अपना ज़्यादातर समय बिताते हैं.

ज़्यादातर उपयोगकर्ताओं को मोबाइल वर्शन में, इंस्टॉल करने के लिए बैनर दिख रहे हैं. साथ ही, वे बैनर से मिलने वाले इंटरैक्शन के बारे में जानते हैं. बैनर का इस्तेमाल सावधानी से करना चाहिए, क्योंकि इनसे लोगों को परेशानी हो सकती है.

पेज के सबसे ऊपर, पसंद के मुताबिक इंस्टॉल करने से जुड़ा बैनर.
पेज पर सबसे ऊपर मौजूद, खारिज किया जा सकने वाला बैनर.

सुनिश्चित करें कि आपने:

  • बैनर दिखाने से पहले, उपयोगकर्ता की ओर से आपकी साइट में दिलचस्पी दिखाने तक इंतज़ार करें. अगर उपयोगकर्ता आपके बैनर को खारिज करता है, तो इसे तब तक न दिखाएं, जब तक कि उपयोगकर्ता कोई कन्वर्ज़न इवेंट ट्रिगर न करे. इस कन्वर्ज़न इवेंट से पता चलता है कि आपके कॉन्टेंट से उपयोगकर्ता का ज़्यादा जुड़ाव है. जैसे, किसी ई-कॉमर्स साइट से खरीदारी करना या किसी खाते के लिए साइन अप करना.
  • बैनर में अपना PWA इंस्टॉल करने के फ़ायदों के बारे में कम शब्दों में जानकारी दें. उदाहरण के लिए, किसी PWA को किसी iOS/Android ऐप्लिकेशन से इंस्टॉल करने में अंतर किया जा सकता है. इसके लिए, आपको यह बताना होगा कि यह उपयोगकर्ता के डिवाइस पर करीब-करीब बिना स्टोरेज का इस्तेमाल करता है या यह स्टोर रीडायरेक्ट के बिना तुरंत इंस्टॉल हो जाएगा.

अस्थायी यूज़र इंटरफ़ेस (यूआई)

स्नैकबार डिज़ाइन पैटर्न जैसा अस्थायी यूज़र इंटरफ़ेस (यूआई), उपयोगकर्ता को सूचना देता है. साथ ही, इससे उपयोगकर्ता ऐप्लिकेशन इंस्टॉल करते समय आसानी से कोई कार्रवाई कर सकता है. सही तरीके से इस्तेमाल किए जाने पर, इस तरह के यूज़र इंटरफ़ेस (यूआई) पैटर्न से उपयोगकर्ता के फ़्लो में कोई रुकावट नहीं आती. साथ ही, उपयोगकर्ता इसे अनदेखा करने पर आम तौर पर अपने-आप हट जाते हैं.

स्नैकबार के तौर पर कस्टम इंस्टॉल बैनर.
खारिज किया जा सकने वाला स्नैकबार, जिससे पता चलता है कि PWA को इंस्टॉल किया जा सकता है.

अपने ऐप्लिकेशन के साथ कुछ इंटरैक्शन करने के बाद स्नैकबार दिखाएं. अगर यह पेज लोड होने के दौरान दिखता है या बिना कॉन्टेक्स्ट के दिखता है, तो हो सकता है कि इसे आसानी से न समझा जा सके या इससे समझने के लिए ज़रूरत से ज़्यादा जानकारी मिल जाए. ऐसा होने पर, लोगों को दिखने वाली हर चीज़ को ख़ारिज कर दिया जाएगा. याद रखें, हो सकता है कि आपकी साइट पर नए उपयोगकर्ता आपका PWA इंस्टॉल करने के लिए तैयार न हों. इसलिए, इस पैटर्न का इस्तेमाल करने से पहले तब तक इंतज़ार करना बेहतर है, जब तक कि आपको उपयोगकर्ता की दिलचस्पी के सिग्नल न मिलें. उदाहरण के लिए, वेबसाइट पर बार-बार आना, साइन इन करना या मिलता-जुलता कन्वर्ज़न इवेंट.

स्नैकबार के तौर पर कस्टम इंस्टॉल बैनर.
खारिज किया जा सकने वाला स्नैकबार, जिससे पता चलता है कि PWA को इंस्टॉल किया जा सकता है.

सुनिश्चित करें कि आपने:

  • स्नैकबार को 4 से 7 सेकंड के बीच दिखाएं, ताकि उपयोगकर्ताओं को उन्हें देखने और उस पर प्रतिक्रिया देने का समय मिल सके. साथ ही, वे बिना किसी रुकावट के विज्ञापन देख सकें.
  • इसे अस्थायी यूज़र इंटरफ़ेस (यूआई) जैसे कि बैनर वगैरह पर दिखाने से बचें.
  • इस पैटर्न का इस्तेमाल करने से पहले, तब तक इंतज़ार करें, जब तक कि आपको उपयोगकर्ता की दिलचस्पी के अच्छे सिग्नल न मिलें. उदाहरण के लिए, वेबसाइट पर बार-बार आना, उपयोगकर्ता के साइन इन या मिलता-जुलता कन्वर्ज़न इवेंट.

रूपांतरण के बाद

उपयोगकर्ता कन्वर्ज़न इवेंट के तुरंत बाद, जैसे कि किसी ई-कॉमर्स साइट पर खरीदारी करने के तुरंत बाद, अपने PWA को इंस्टॉल करने का प्रमोशन करने का यह बेहतरीन मौका होता है. उपयोगकर्ता साफ़ तौर पर आपके कॉन्टेंट से जुड़ता है और कन्वर्ज़न से यह पता चलता है कि उपयोगकर्ता को फिर से आपकी सेवाओं का इस्तेमाल करना होगा.

कन्वर्ज़न के बाद इंस्टॉल प्रमोशन.
उपयोगकर्ता के खरीदारी करने के बाद इंस्टॉल प्रमोशन.

बुकिंग या चेकआउट की प्रोसेस

क्रम से चलने के दौरान या उसके बाद, इंस्टॉल करने का प्रमोशन दिखाएं. जैसे, बुकिंग या चेकआउट प्रोसेस के बाद की प्रोसेस. अगर उपयोगकर्ता की खोज पूरी करने के बाद प्रमोशन दिखाया जा रहा है, तो प्रोसेस पूरी होने के बाद, उसे ज़्यादा प्रमुखता से दिखाया जा सकता है.

उपयोगकर्ता के इस्तेमाल के बाद मिलने वाला इंस्टॉल प्रमोशन.
उपयोगकर्ता के सफ़र के बाद, इंस्टॉल करने से जुड़ा प्रमोशन.

सुनिश्चित करें कि आपने:

  • एक प्रासंगिक कॉल-टू-एक्शन शामिल करें. आपका ऐप्लिकेशन इंस्टॉल करने से किन उपयोगकर्ताओं को फ़ायदा होगा और क्यों? वे फ़िलहाल जिस यात्रा पर हैं उसके लिए यह कितने काम का है?
  • अगर आपके ब्रैंड के पास, इंस्टॉल किए गए ऐप्लिकेशन इस्तेमाल करने वालों के लिए खास ऑफ़र हैं, तो उनके बारे में बताएं.
  • प्रमोशन को अपने सफ़र में आगे के चरणों से दूर रखें, नहीं तो सफ़र पूरा होने की दर पर बुरा असर पड़ सकता है. ऊपर दिए गए ई-कॉमर्स उदाहरण में देखें कि चेकआउट के लिए ज़रूरी कॉल-टू-ऐक्शन, ऐप्लिकेशन इंस्टॉल प्रमोशन की तुलना में कैसा है.

साइन अप, साइन इन या साइन आउट करने का फ़्लो

यह प्रमोशन, जूरी प्रमोशन पैटर्न का एक खास केस है. इसमें प्रमोशन कार्ड को ज़्यादा प्रमुखता से दिखाया जा सकता है.

साइन अप पेज पर, पसंद के मुताबिक बनाया गया 'इंस्टॉल करें' बटन.
साइन अप पेज पर, पसंद के मुताबिक बनाया गया 'इंस्टॉल करें' बटन.

आम तौर पर, ये पेज सिर्फ़ आपके ऐप्लिकेशन का इस्तेमाल करने वाले लोग देखते हैं, जहां आपके PWA की खास बात पहले ही तय की जा चुकी हो. साथ ही, इन पेजों पर अक्सर बहुत ज़्यादा काम की जानकारी नहीं होती. ऐसे में, एक बड़ा कॉल-टू-ऐक्शन बनाना तब तक किसी तरह की समस्या नहीं है, जब तक कि वह उस तरह से काम को न कर रहा हो.

सुनिश्चित करें कि आपने:

  • साइन अप फ़ॉर्म भरकर, उपयोगकर्ता के सफ़र में रुकावट डालने से बचें. अगर यह कई चरणों वाली प्रोसेस है, तो शायद आप उपयोगकर्ता की प्रोसेस पूरी होने तक इंतज़ार करना चाहेंगे.
  • साइन-अप किए हुए उपयोगकर्ताओं के लिए सबसे काम की सुविधाओं का प्रमोशन करें.
  • अपने ऐप्लिकेशन में साइन-इन की गई जगहों पर अन्य इंस्टॉल प्रमोशन जोड़ें.

इनलाइन प्रमोशन पैटर्न

इनलाइन प्रमोशनल तकनीक, प्रमोशन और साइट के कॉन्टेंट का आपस में मेल खाती हैं. यूज़र इंटरफ़ेस में प्रमोशन की तुलना में यह अक्सर ज़्यादा आसान होता है, क्योंकि इसमें कुछ ऑफ़र नहीं होते. आप चाहते हैं कि आपका प्रमोशन इतनी अलग दिखे कि दिलचस्पी रखने वाले उपयोगकर्ता उस पर ध्यान दें. हालांकि, ऐसा भी नहीं होना चाहिए कि इससे आपके उपयोगकर्ता अनुभव की क्वालिटी पर बुरा असर पड़े.

फ़ीड में विज्ञापन

इन-फ़ीड इंस्टॉल प्रमोशन, आपके PWA में समाचार लेखों या जानकारी कार्ड की दूसरी सूचियों के बीच दिखता है.

कॉन्टेंट फ़ीड में इंस्टॉल प्रमोशन.
कॉन्टेंट फ़ीड में इंस्टॉल प्रमोशन.

आपका मकसद, उपयोगकर्ताओं को यह बताना है कि वे जो कॉन्टेंट देखना चाहते हैं उसे आसानी से कैसे ऐक्सेस करें. उन सुविधाओं और फ़ंक्शन को प्रमोट करने पर फ़ोकस करें जो आपके उपयोगकर्ताओं के लिए मददगार हों.

सुनिश्चित करें कि आपने:

  • उपयोगकर्ताओं को परेशान करने से बचने के लिए, प्रमोशन की फ़्रीक्वेंसी सीमित करें.
  • अपने उपयोगकर्ताओं को प्रमोशन खारिज करने की सुविधा दें.
  • खारिज करने के अपने उपयोगकर्ता के विकल्प को याद रखें.