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

Penny McLachlan
Penny McLachlan

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

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

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

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

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

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

ब्राउज़र का अपने-आप प्रमोशन होने की सुविधा

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

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

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

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

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

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

सरल इंस्टॉल बटन

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

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

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

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

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

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

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

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

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

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

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

लैंडिंग पेज

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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