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

Penny McLachlan
Penny McLachlan

प्रोग्रेसिव वेब ऐप्लिकेशन (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 को इंस्टॉल करने की अहमियत के बारे में कम शब्दों में बताएं. उदाहरण के लिए, पीडब्ल्यूए को iOS/Android ऐप्लिकेशन से अलग दिखाने के लिए, यह बताएं कि यह उपयोगकर्ता के डिवाइस पर काफ़ी कम स्टोरेज का इस्तेमाल करता है या यह स्टोर पर रीडायरेक्ट किए बिना तुरंत इंस्टॉल हो जाएगा.

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

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

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

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

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

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

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

कन्वर्ज़न के बाद

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

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

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

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

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

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

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

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

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

साइन अप पेज पर, कस्टम इंस्टॉल बटन.
साइन अप पेज पर, इंस्टॉल करने के लिए कस्टम बटन.

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

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

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

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

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

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

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

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

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

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

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