अप्रैल में, Chrome टीम ने 2019 MDN Web DNA Report में बताई गई सबसे ज़्यादा समस्याओं के आधार पर, स्क्रोल और टच-ऐक्शन से जुड़ा एक सर्वे जारी किया. 2021 का स्क्रोल सर्वे रिपोर्ट तैयार है. Chrome टीम, सर्वे के नतीजों से मिली कुछ जानकारी और कार्रवाइयों के बारे में बताना चाहती है. हमें उम्मीद है कि इन नतीजों से ब्राउज़र वेंडर और स्टैंडर्ड ग्रुप को यह समझने में मदद मिलेगी कि वेब स्क्रोलिंग को कैसे बेहतर बनाया जाए.
2021 Scroll Survey Report देखें.
ध्यान देने लायक नतीजे
सर्वे में, बिना नाम ज़ाहिर किए 880 सबमिशन इकट्ठा किए गए. इनमें से 366 लोगों ने हर सवाल का जवाब दिया.
स्क्रोलिंग की सुविधा को चालू करने के लिए, सीएसएस की सिर्फ़ एक लाइन का इस्तेमाल किया जाता है. जैसे, overflow-x:
scroll;. हालांकि, स्क्रोल एपीआई और विकल्पों का दायरा बहुत बड़ा है. यह JavaScript से लेकर सीएसएस तक फैला हुआ है. यहां दिए गए नतीजों से, वेब डेवलपर को आ रही समस्याओं को हाइलाइट करने में मदद मिलती है.
वेब स्क्रोलिंग से कुल मिलाकर कितनी संतुष्टि मिली
सवाल 27
45%
कुछ हद तक या पूरी तरह से नाखुश हैं
कि वेब स्क्रोलिंग की सुविधा काम नहीं कर रही है.
इस सवाल को सर्वे के आखिर में जान-बूझकर रखा गया था. इससे पहले, स्क्रोल करने के 26 इस्तेमाल के उदाहरणों और सुविधाओं के बारे में सवाल पूछे गए थे. जवाब से पता चलता है कि वेब कम्यूनिटी को स्क्रोल करने में समस्या आ रही है. जवाब देने वाले लोगों में से करीब आधे लोगों ने, कुल मिलाकर असंतुष्ट होने की बात कही है.
हमारा मानना है कि स्क्रोल के साथ काम करने के बारे में लोगों की राय इतनी खराब नहीं होनी चाहिए. इस मेट्रिक को बदलने की ज़रूरत है. इससे पता चलता है कि काम करना बाकी है.
स्क्रोल करने में समस्या आ रही है
दूसरा सवाल
43%
स्क्रोल करने में कुछ हद तक या
बहुत मुश्किल
होती है.
हमारी रिसर्च के मुताबिक, स्क्रोल करने की सुविधा के कई इस्तेमाल के उदाहरणों की वजह से ये समस्याएं आती हैं. स्क्रोल करने से हमारा मतलब इन कार्रवाइयों से हो सकता है:
- स्क्रोल किए जा सकने वाले इलाकों में एलिमेंट की पोज़िशन तय करना
- इनफ़ाइनाइट स्क्रोल
- स्क्रोल से लिंक किया गया ऐनिमेशन
- कैरसेल
- Scrollview padding
- साइक्लिक स्क्रोल
- वर्चुअलाइज़्ड स्क्रोल
ब्राउज़र की सुविधाओं का न होना, जटिल JavaScript, और टच, कीबोर्ड, और गेमपैड जैसे इनपुट मोड के लिए सपोर्ट की ज़रूरत होने की वजह से, ये सभी काम मुश्किल हो जाते हैं.
टच इंटरैक्शन की अहमियत
तीसरा सवाल
51%
रिपोर्ट में टच इंटरैक्शन को
उनके काम के लिए बहुत या बेहद ज़रूरी
के तौर पर मार्क किया गया हो.
मोबाइल वेब का इस्तेमाल करने वाले लोगों की संख्या अब भी बढ़ रही है. इसलिए, यह देखकर हैरानी नहीं हुई कि आधे लोगों ने बताया कि वेब पर काम करने के लिए, टच करना बहुत ज़रूरी है. इससे पता चला कि सीएसएस स्क्रोल स्नैप और touch-action जैसी वेब सुविधाओं पर ज़्यादा ध्यान देने की ज़रूरत है, ताकि वेब, टच इंटरैक्शन की बेहतर सुविधा दे सके.
टैब कुंजी या गेमपैड नेविगेशन में आने वाली समस्या
पांचवां सवाल (a)
44%
गेमपैड और टैब नेविगेशन को इस्तेमाल करना कुछ हद तक या बहुत मुश्किल
है.
स्क्रोल करने में, नेविगेशन के तरीके शामिल होते हैं. जैसे, कीबोर्ड के ऐरो, टैब बटन, स्पेसबार दबाना, और गेमपैड. कस्टम स्क्रोलिंग करते समय, इन तरीकों को शामिल करना मुश्किल हो सकता है. जवाब देने वाले करीब आधे लोगों का कहना है कि इन इनपुट को शामिल करना कुछ हद तक या बहुत मुश्किल है.
लर्निंग touch-action
नौवां सवाल
50%
सर्वे से,
`touch-action: manipulation`
के बारे में सीखने की रिपोर्ट.
सर्वे में कुछ सवाल, कुछ एपीआई के इस्तेमाल के बारे में पूछे गए थे. इनके जवाब, हां, नहीं या "आज मैंने सीखा" के तौर पर दिए जा सकते थे. एक अहम सुझाव यह था कि सर्वे में शामिल कई लोगों ने touch-action के बारे में जाना. ऐसा इसलिए, क्योंकि कस्टम टच जेस्चर बनाने के लिए यह एक ज़रूरी प्रॉपर्टी है. इसके लिए, स्क्रोल करने के दौरान इंटरैक्ट करना ज़रूरी होता है.
साइक्लिकल स्क्रोलिंग
सवाल 27
58%
कभी-कभी, अक्सर या हर प्रोजेक्ट पर
साइक्लिक स्क्रोलिंग का इस्तेमाल करके रिपोर्ट करें.
60 सेकंड के बाद, यह फिर से 0 से शुरू हो जाती है.
ये संख्याएं, स्क्रोल करने की सुविधा के लिए बहुत ज़्यादा हैं. इस सुविधा के लिए, वेब प्लैटफ़ॉर्म से बहुत कम या कोई सहायता नहीं मिलती है. इस वजह से, इस सुविधा में अक्सर तकनीकी समस्याएं आती हैं. साथ ही, डुप्लीकेट या JavaScript को इस इफ़ेक्ट को लागू करने के लिए डाला जाता है. यह प्रॉडक्ट कैरसेल के लिए लोकप्रिय है. साथ ही, इसका इस्तेमाल तब किया जाता है, जब सेकंड या मिनट में समय चुनकर साइक्लिक स्क्रोलिंग की सुविधा देनी हो.
क्या स्क्रोल की जा सकने वाली जगहें ज़रूरी हैं
दूसरा सवाल
55%
बहुत या
बहुत ज़्यादा ज़रूरी है
16%
रिपोर्ट बिलकुल भी नहीं
या थोड़ा-बहुत ज़रूरी है
जवाब देने वाले लोगों ने स्क्रोल की जा सकने वाली जगहों को अहम माना. इससे यह भी पता चलता है कि अच्छी क्वालिटी वाली स्क्रोलिंग की सुविधा देने के लिए, कितनी मेहनत करनी पड़ती है.
कैरसेल
सवाल 20
87%
कैरसेल इस्तेमाल किए हैं.
24%
रिपोर्ट को मैनेज करना
आसान होता है.
करीब-करीब हर जवाब देने वाले व्यक्ति ने अपने वेब वर्क में कैरसेल का इस्तेमाल किया है. हालांकि, सिर्फ़ 25% लोगों को इन्हें मैनेज करना आसान लगता है. हमारी रिसर्च के दौरान, पहले से बने कैरसेल काफ़ी लोकप्रिय थे. हालांकि, इस आंकड़े ने हमें चौंका दिया, क्योंकि यह समस्या पूरी तरह से हल नहीं हुई है.
इनफ़ाइनाइट स्क्रोलिंग
सवाल 22
65%
इसका इस्तेमाल कभी-कभी
से हर प्रोजेक्ट के लिए किया जा सकता है
60%
कुछ हद तक या
बहुत मुश्किल.
दो-तिहाई लोगों ने अपने वेब वर्क में, कभी न खत्म होने वाले स्क्रोल का इस्तेमाल किया. वहीं, इतने ही लोगों ने बताया कि इसका इस्तेमाल करना मुश्किल है. यह एक और उदाहरण है, जिसमें इस्तेमाल ज़्यादा किया जाता है, लेकिन इसे लागू करना मुश्किल होता है. इससे हमें पता चलता है कि इस पर ध्यान देने की ज़रूरत है.
content-visibility और contain-intrinsic-size को एक साथ इस्तेमाल किया जा सकता है. इससे लंबी स्क्रोल करने वाली जगहों के लिए, रेंडरिंग की लागत कम हो जाती है. हालांकि, ऐसा लगता है कि इससे "ज़्यादा लोड करें" वाले इनफ़िनिट स्क्रोल यूज़र एक्सपीरियंस (यूएक्स) में मदद नहीं मिल रही है.
स्क्रोल से लिंक किए गए या स्क्रोल से ट्रिगर होने वाले ऐनिमेशन
सवाल 24
47%
इसका इस्तेमाल कभी-कभी
से लेकर हर प्रोजेक्ट के लिए किया जा सकता है
56%
कुछ हद तक या
बहुत मुश्किल के तौर पर रिपोर्ट करें
जवाब देने वाले लोगों में से करीब आधे लोग, स्क्रोल-ऑर्केस्ट्रेटेड ऐनिमेशन का इस्तेमाल करते हैं. साथ ही, आधे लोगों को इसे इस्तेमाल करने में मुश्किल आती है. इससे पता चलता है कि ज़्यादा इस्तेमाल करने वाले लोगों को इसे इस्तेमाल करने में मुश्किल आती है.
पहले से मौजूद स्क्रोलिंग की सुविधा के साथ मुकाबला करना
सवाल 26
32%
always या
most of the time
50%
कभी-कभी
फ़ोन और टैबलेट ऐप्लिकेशन में स्क्रोल करने और टच करने की सुविधा पहले से मौजूद होती है. इसलिए, अक्सर यह कहा जाता है कि वेब को इन सुविधाओं को अपनाना चाहिए. इन सुविधाओं में स्क्रोल से जुड़े ऐनिमेशन, प्रोग्रामैटिक इंटरफ़ेस, आवाज़ को इंटिग्रेट करने की सुविधा, स्क्रोल के बारे में जानकारी देने वाले हिंट, और पुल-टू-रिफ़्रेश एपीआई शामिल हैं.
सिर्फ़ आधे लोगों को लगता है कि कभी-कभी ही, स्क्रोल करने की सुविधा को बिल्ट-इन स्क्रोलिंग से मैच किया जा सकता है.
वेब पर स्क्रोल करने से जुड़े इंटरैक्शन से, लोगों की संतुष्टि का पता चलता है
सवाल 27
सर्वे से जुड़ी ज़रूरी बातें
सर्वे के नतीजों को चार कैटगरी में बांटा गया है: कंपैटिबिलिटी, शिक्षा, एपीआई, और सुविधाएं.
इनके साथ काम करता है
Chrome टीम ने एक लक्ष्य तय किया है. इसके तहत, वेब पर मौजूद कॉन्टेंट को अलग-अलग ब्राउज़र पर इस्तेमाल करने से जुड़ी समस्याओं को कम करना है. इसमें स्क्रोल करने से जुड़ी समस्याएं भी शामिल हैं.
इन तीन समस्याओं पर सबसे पहले ध्यान दें:
1. हॉरिज़ॉन्टल स्क्रोलिंग की सुविधा.
1. overscroll-behavior क्रॉस ब्राउज़र.
1. -webkit-scrollbar से प्रीफ़िक्स हटाना और स्टैंडर्ड का पालन करना.
शिक्षा
सर्वे के नतीजों से पता चला कि touch-action और लॉजिकल प्रॉपर्टी के बारे में ज़्यादा जानकारी देने की ज़रूरत है. ब्राउज़र, अंतरराष्ट्रीय लेआउट के मामले में सबसे आगे है. हालांकि, ऐसा लगता है कि इसका सही तरीके से इस्तेमाल नहीं किया जा रहा है या इसे ठीक से नहीं समझा गया है.
इन बातों पर ध्यान दें:
1. touch-action
1. लॉजिकल प्रॉपर्टी
API
स्क्रोल स्नैपिंग का इस्तेमाल बढ़ता जा रहा है. डेवलपर ने बताया है कि वे लोकप्रिय लाइब्रेरी और प्लगिन के साथ मिलकर काम करने वाली सुविधाओं का इस्तेमाल करना चाहते हैं. सीएसएस और प्लगिन लाइब्रेरी के बीच इस अंतर को कम करने से, स्क्रोल स्नैप डेवलपर और उपयोगकर्ता अनुभव को बेहतर बनाने में मदद मिलेगी.
हम एपीआई से जुड़े काम पर scroll-snap फ़ोकस करेंगे:
1. एपीआई की उपलब्धता और अलग-अलग ब्राउज़र के साथ काम करने की क्षमता.
1. नए सीएसएस एपीआई पर काम करना शुरू करें. जैसे, scroll-start.
1. नए JS इवेंट पर काम करना शुरू करें. जैसे, snapChanged().
सुविधाएं
सर्वे के नतीजों से पता चला कि उपयोगकर्ताओं को वेब पर स्क्रोल करने से जुड़े कुछ कॉम्पोनेंट इस्तेमाल करने में समस्या आ रही है. ऐसा इसलिए है, क्योंकि प्लैटफ़ॉर्म ऐसे प्रिमिटिव उपलब्ध नहीं कराता जिनकी मदद से, प्लग इन या ज़्यादा मेहनत किए बिना इन कॉम्पोनेंट को बनाया जा सके. हम इस बारे में ज़्यादा जानकारी पाने की कोशिश कर रहे हैं.
डेवलपर को इन सुविधाओं को बनाने में मुश्किल होती है: 1. कैरसेल 1. वर्चुअल स्क्रोल 1. इनफ़ाइनाइट स्क्रोलिंग