दमदार और इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन बनाने में डेवलपर की मदद करना

परिचय

साल 2020 की शुरुआत में, Chrome की टीम ने मोबाइल और डेस्कटॉप के लिए एक प्लान बनाया था. इस प्लान का मकसद, इंस्टॉल किए गए वेब ऐप्लिकेशन को ढूंढने और उनसे जुड़ने की सुविधा को बेहतर बनाना था. हमारे काम की वजह से, PWA के इंस्टॉल और यूज़र ऐक्टिविटी में 100% से ज़्यादा की बढ़ोतरी हुई. हमने मौजूदा सुविधाओं पर रिसर्च करके, A/B टेस्ट एक्सपेरिमेंट चलाकर, और उपयोगकर्ताओं की राय और उम्मीदों के बारे में जानने के लिए, उनसे इंटरव्यू करके ऐसा किया है. इस लेख में बताया गया है कि हम वहां कैसे पहुंचे.

इंस्टॉल करने के लिए एक जैसी भाषा

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

साल 2019 में टैक्सोनॉमी पर की गई एक और स्टडी में कोई अंतर नहीं मिला. इसलिए, PWA को इंस्टॉल करने के अनुभव को एक जैसा बनाने के लिए, टीम ने Android पर लेबल को इंस्टॉल करें पर अपडेट करने का फ़ैसला लिया. साल 2021 में की गई एक और स्टडी में, भाषा, इंस्टॉल करें, पाएं, और डाउनलोड करें की तुलना की गई. इसमें हमें पता चला कि उपयोगकर्ताओं को इंस्टॉल करें का मतलब, चल रही प्रोसेस से था. उपयोगकर्ताओं को लगता था कि डाउनलोड करें लेबल वाले बटन पर टैप करने से, उन्हें किसी वेबसाइट पर भेज दिया जाएगा. वहीं, डाउनलोड करें लेबल वाले बटन पर टैप करने से, उन्हें लगता था कि फ़ाइल उनके डाउनलोड फ़ोल्डर या उससे मिलते-जुलते फ़ोल्डर में सेव हो जाएगी.

इन सभी बातों को ध्यान में रखते हुए, हमने यह फ़ैसला लिया है कि इंस्टॉल करें लेबल, PWA के लिए सबसे सही है. हमारा सुझाव है कि वेब प्लैटफ़ॉर्म के सभी डेवलपर, आने वाले समय में 'इंस्टॉल करें' को अपनी पसंदीदा स्ट्रिंग के तौर पर इस्तेमाल करें.

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

हमारे डेस्कटॉप प्लैटफ़ॉर्म पर, हमारा डिज़ाइन पैटर्न ऐसा है कि जब भी कोई वेबसाइट किसी PWA को लोड करती है, तो Chrome एक पिल दिखाएगा. यह पिल, ऑम्नीबॉक्स की दाईं ओर दिखेगी. इसमें एक आइकॉन और इंस्टॉल करें लेबल होगा. इसके बाद, जब कोई उपयोगकर्ता किसी साइट पर जाएगा, तो उसे सिर्फ़ आइकॉन दिखेगा. इस पिल पर क्लिक करने से, डेस्कटॉप के लिए PWA इंस्टॉल हो जाता है.

इंस्टॉल करने के लिए ओरिजनल प्लस आइकॉन.
ओरिजनल इंस्टॉल प्लस आइकॉन.

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

ज़ूम और इंस्टॉल आइकॉन के साथ मौजूद, ऑमनीबॉक्स में मौजूद गड़बड़ी.
ज़ूम और इंस्टॉल आइकॉन के साथ मौजूद, Omnibox में गड़बड़ी.

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

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

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

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

ज़ाहिर है कि एक आइकॉन से दुनिया नहीं बदलेगी. इसलिए, हम अपनी अगली सुविधा के बारे में बताना चाहते हैं.

इन-प्रॉडक्ट सहायता

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

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

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

डेस्कटॉप पर प्रॉडक्ट में मदद पाने की सुविधा का इस्तेमाल करने से, हमें PWA इंस्टॉलेशन में 100% से ज़्यादा की बढ़ोतरी दिखी. इससे पता चलता है कि जुड़ाव में रहने वाले उपयोगकर्ताओं पर फ़ोकस करने से, वेब ऐप्लिकेशन को इंस्टॉल करने की सुविधा बेहतर हुई है.

बेहतर इंस्टॉल यूज़र इंटरफ़ेस (यूआई)

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

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

बेहतर इंस्टॉल यूज़र इंटरफ़ेस (यूआई).
बेहतर इंस्टॉल यूज़र इंटरफ़ेस (यूआई), छोटा और बड़ा किया गया स्टेटस.

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

नतीजा

इस टीम ने पिछले दो साल Chrome की नई सुविधाओं को एक्सप्लोर करने और उन पर प्रयोग करने में बिताए हैं. इन सुविधाओं की मदद से, PWA डेवलपर को बेहतर सुविधाएं मिलती हैं. साथ ही, वेब पर बेहतर अनुभव पाने के फ़ायदों के बारे में उपयोगकर्ताओं को जानकारी दी जा सकती है. हमारे पास अब भी बहुत कुछ करने का विकल्प है. हालांकि, हम मिलकर अपने उपयोगकर्ताओं के जीवन को बेहतर बना सकते हैं और ओपन वेब को और बेहतर बना सकते हैं.