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

Penny McLachlan
Penny McLachlan

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

PWA में मौजूद, इंस्टॉल करने के लिए बटन का स्क्रीनशॉट.
आपके PWA में मौजूद, इंस्टॉल करने के लिए एक आसान बटन.

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

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

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

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

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

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

इंस्टॉल करने के लिए उपलब्ध इंडिकेटर के साथ ओमनीबॉक्स का स्क्रीनशॉट.
ब्राउज़र से मिलने वाला इंस्टॉल प्रमोशन (डेस्कटॉप).
ब्राउज़र से मिले इंस्टॉल प्रमोशन का स्क्रीनशॉट.
ब्राउज़र से मिलने वाला इंस्टॉल प्रमोशन (मोबाइल).

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

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

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

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

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

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

कस्टम इंस्टॉल बटन..
आसानी से इंस्टॉल करने के लिए बटन.

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

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

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

हेडर में कस्टम इंस्टॉल बटन
हेडर में कस्टम इंस्टॉल बटन

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

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

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

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

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

लैंडिंग पेज

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

लैंडिंग पेज पर कस्टम इंस्टॉल प्रॉम्प्ट.
लैंडिंग पेज पर कस्टम इंस्टॉल का प्रॉम्प्ट.

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

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

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

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

पेज के सबसे ऊपर कस्टम इंस्टॉल बैनर.
पेज पर सबसे ऊपर, खारिज किया जा सकने वाला बैनर.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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