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

मुस्तफ़ा कुर्तुल्दू
मुस्तफ़ा कुर्तुल्दू

शुरुआती जानकारी

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

यूनिफ़ाइड इंस्टॉल की भाषा

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

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

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

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

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

मूल इंस्टॉल प्लस आइकॉन.
मूल इंस्टॉल प्लस आइकॉन.

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

ज़ूम और इंस्टॉल करने के आइकॉन के साथ खोज बार (खोज क्वेरी डालने वाला बार) की गड़बड़ी मौजूद है.
खोज वाली पट्टी की गड़बड़ी, जिसमें ज़ूम और इंस्टॉल करने के आइकॉन मौजूद हैं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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