स्क्रॉल को मत छेड़िए

• Scrolljacking ब्राउज़र की डिफ़ॉल्ट स्क्रॉल गति, दिशा और इफ़ेक्ट को ओवरराइड करके वह अनुमानित वेब नेविगेशन बिगाड़ देता है जिसकी उपयोगकर्ता अपेक्षा करते हैं
• Nielsen Norman Group के usability research में कई प्रतिभागियों ने दिशा-बोध खोने का अनुभव किया, और कुछ ने बदले हुए स्क्रॉल को bug समझा
• momentum, smooth और inertia scrolling plugins muscle memory और ब्राउज़र की डिफ़ॉल्ट क्षमताओं को तोड़ देते हैं, जिससे लंबी पेजों में अपनी वर्तमान स्थिति समझना मुश्किल हो जाता है
• screen transition animations और JavaScript dependency, motion sickness, चक्कर, assistive technology, low-end devices और mobile environments में accessibility और performance का बोझ बढ़ाते हैं
• उपयोगकर्ता स्क्रॉल इफ़ेक्ट देखने नहीं बल्कि content देखने आते हैं, इसलिए साइट के लिए native और fast scrolling को वैसा ही रहने देना बेहतर है

---

Scrolljacking वेब नेविगेशन को कैसे खराब करता है

• Scrolljacking वह तरीका है जिसमें ब्राउज़र के डिफ़ॉल्ट स्क्रॉल व्यवहार को फिर से परिभाषित करके वेबपेज की स्क्रॉल गति, दिशा और इफ़ेक्ट बदले जाते हैं
• momentum scrolling, smooth scrolling और inertia scrolling plugins, scrolljacking के आम रूप हैं
• यह सुधार जैसा दिख सकता है, लेकिन यह स्वाभाविक, कुशल और अनुमानित वेब नेविगेशन अनुभव में बाधा डालता है
• इसका असर मुख्य रूप से usability, accessibility और performance पर पड़ता है

usability research में दिखी उलझन

• Nielsen Norman Group के usability research से पता चलता है कि scrolljacking उपयोगकर्ताओं में दिशा-बोध खोने की समस्या पैदा कर सकता है
  • कई प्रतिभागियों ने कम से कम कुछ हद तक दिशा-बोध खोने का अनुभव किया
  • कुछ उपयोगकर्ताओं ने बदले हुए स्क्रॉल व्यवहार को bug के रूप में समझा
  • task-oriented उपयोगकर्ताओं ने navigation-oriented उपयोगकर्ताओं की तुलना में scrolljacking के प्रति बहुत कम सहनशीलता दिखाई
• एक प्रतिभागी ने प्रतिक्रिया दी कि “मैंने पूरा swipe किया, लेकिन कहीं पहुँचा ही नहीं”, और कहा कि अगर वह संभावित ग्राहक होता तो उसे बहुत झुंझलाहट होती
• mobile पर लंबी scrolling duration और छोटी स्क्रीन के कारण यह समस्या और बढ़ जाती है

उपयोगकर्ता अपेक्षाओं और नियंत्रण का हनन

• उपयोगकर्ता अपेक्षा करते हैं कि स्क्रॉल करते ही content तुरंत हिलेगा
• momentum scrolling plugins तुरंत और अनुमानित मूवमेंट की जगह animation-मिश्रित व्यवहार देते हैं
• ऐसे बदलाव उपयोगकर्ताओं की muscle memory और पुरानी आदतों में बाधा डालते हैं, जिन पर वे कुशल नेविगेशन के लिए निर्भर होते हैं
• डिफ़ॉल्ट स्क्रॉल को ओवरराइड करने पर साइट की प्रस्तुति उपयोगकर्ता की पसंद या ज़रूरतों से ऊपर आ जाती है
• उपयोगकर्ता साइट पर ज़रूरत से ज़्यादा सजाए गए स्क्रॉल अनुभव के लिए नहीं, बल्कि content देखने के लिए आते हैं

चक्कर और accessibility का बोझ

• momentum scrolling plugins तैरते या डगमगाते animations जोड़ते हैं, जो motion sickness या चक्कर के प्रति संवेदनशील उपयोगकर्ताओं के लिए बोझ बन सकते हैं
• कई साइटें इसे बंद करने का विकल्प नहीं देतीं, इसलिए उपयोगकर्ताओं के लिए पढ़ते समय असुविधा से बचना मुश्किल हो जाता है
• screen readers और keyboard navigation जैसी assistive technologies timing delay के कारण बाधित हो सकती हैं
• motor disabilities या visual limitations वाले उपयोगकर्ताओं के लिए इन delays की वजह से साइट का उपयोग और कठिन हो सकता है
• accessibility को वैकल्पिक सुविधा नहीं, बल्कि वेब उपयोग की बुनियादी आवश्यकता की तरह देखा जाना चाहिए

performance और device consistency में गिरावट

• momentum scrolling plugins JavaScript लोड करते हैं, और पुराने या low-end devices पर lag, stutter और failure पैदा कर सकते हैं
• पेज “Smooth” महसूस होने के बजाय कमजोर devices पर टूटा हुआ लग सकता है
• animation rendering के लिए bloated JavaScript libraries, अतिरिक्त dependencies और ज़्यादा CPU cycles की ज़रूरत पड़ती है
• नतीजतन page load time धीमा हो सकता है
• mobile networks या खराब connectivity वाले इलाकों में चमकदार scroll effects पेज को और धीमा तथा कम accessible बना देते हैं

ब्राउज़र की डिफ़ॉल्ट सुविधाएँ और स्थिति पहचान की समस्या

• आधुनिक browsers पहले से ही उन उपयोगकर्ताओं के लिए momentum scrolling settings शामिल करते हैं जिन्हें इसकी ज़रूरत है
• third-party plugins इन डिफ़ॉल्ट सुविधाओं को ओवरराइड कर सकते हैं या टकराव पैदा कर सकते हैं, जिससे custom scroll gestures या momentum scrolling टूट सकती है
• system-wide reduced motion settings जैसी उपयोगकर्ता प्राथमिकताएँ अपेक्षित तरीके से काम नहीं कर सकतीं
• momentum scrolling animations उपयोगकर्ता input और परिणाम के बीच delay जोड़ते हैं
• लंबी पेजों में अपनी सटीक स्थिति समझना कठिन हो जाता है, और तेज़ नेविगेशन भी झंझटभरा बन जाता है

power users और maintenance cost

• जो power users दस्तावेज़ों को जल्दी स्कैन करना या पेज पर बहुत सटीक तरीके से आगे-पीछे जाना चाहते हैं, उनके लिए momentum scrolling काम की रफ़्तार धीमी कर देता है
• धीमी animations का इंतज़ार करना पड़ता है, इसलिए यह उन उपयोगकर्ताओं की अपेक्षाओं से टकराता है जो काम जल्दी पूरा करना चाहते हैं
• momentum scrolling plugins एक बार लगाकर भूल जाने वाली सुविधा नहीं हैं
• इन्हें नए browsers, operating systems और devices के साथ compatible बनाए रखने के लिए regular updates चाहिए
• हर update के साथ नए bugs आने का जोखिम रहता है, और development teams पर अतिरिक्त काम आ जाता है, जबकि वही समय और लागत साइट को तेज़, सुरक्षित या बेहतर optimized बनाने में लगाई जा सकती थी

निष्कर्ष: स्क्रॉल को डिफ़ॉल्ट व्यवहार ही रहने दें

• Scrolljacking और momentum scrolling plugins अनावश्यक जटिलता जोड़ते हैं, usability घटाते हैं और उपयोगकर्ताओं को निराश करते हैं
• Nielsen Norman Group के शब्दों में, “usability आनंद की नींव है”
• स्क्रॉल को फिर से ईजाद करने के बजाय native, अनुमानित और तेज़ स्क्रॉल व्यवहार बनाए रखना चाहिए
• स्क्रॉल को कोई खास event मत बनाइए; उपयोगकर्ताओं को बस स्क्रॉल करने दीजिए

[GN⁺]

Hacker News की राय

• URL, browser navigation और back button से भी छेड़छाड़ नहीं करनी चाहिए
  लगता है यह लड़ाई बहुत पहले ही हार चुके हैं, और SPA ने वेब को तोड़कर इसे कहीं ज़्यादा खराब बना दिया है

  • SPA को अनिवार्य रूप से ऐसा होना ज़रूरी नहीं; बस लोगों ने इसे ऐसा बनाने का चुनाव किया
    History API ठीक-ठाक है, जिससे SPA और उसका अपना navigator browser और users के हिसाब से काम कर सकता है
    लेकिन कई developers ने bookmarkability, navigation जैसी वेब की बुनियादी बातों की परवाह नहीं की और सब बिगाड़ दिया
    अच्छी SPA को सामान्य website की तरह काम करना चाहिए, और तेज़ व responsive होने के अलावा यह पता नहीं चलना चाहिए कि वह SPA है
  • मुझे यह पसंद नहीं कि page के किसी element से interact करने भर से back button को बहुत बार दबाना पड़ता है
    किसी खास state को bookmark या share कर पाना सही है, लेकिन इसके लिए नया navigation step बनाने के बजाय URL का वहीं पर बदल जाना कहीं बेहतर है
  • URL से छेड़छाड़ न करने वाली SPA बनाने का आसान तरीका बहुत पहले से मौजूद था
    वेब की बुनियाद, URL, back, scroll user experience वगैरह की परवाह न करने वाले लोगों ने वेब को खराब किया है; SPA अपने-आप में समस्या नहीं है
  • Esc key से भी छेड़छाड़ मत करो, Squarespace!
  • Redirects ने बहुत पहले ही browser history को खराब कर दिया था, और 2-step redirect chain सबसे खराब experience है
    Browser को इसे ठीक करना चाहिए, लेकिन inertia इतना ज़्यादा है कि शायद ऐसा नहीं होगा

• “हम users से बेहतर जानते हैं” वाला रवैया सिर्फ Momentum scroll पर नहीं, बल्कि आज के UX design के कई trends पर भी वैसा ही लागू होता है
  जानना चाहता हूं कि आखिर हम हर चीज़ की कीमत पर aesthetics की पूजा तक कैसे पहुंच गए

  • यह UI/UX design से भी गहरा, पूरी IT industry का मुद्दा है
    इसके पीछे users को अपनी कोई भी ज़िम्मेदारी खुद न लेने देने वाला बेहद patronizing रवैया है
    आज ही मैंने macOS में “Touch ID को enable करने के लिए password चाहिए” वाली झुंझलाने वाली behavior बंद करने का तरीका खोजा; reboot के बाद मांग समझ में आती है, लेकिन time-based लगने वाली मांग बंद की जा सके ऐसा नहीं लगा
    जो सबसे करीब तरीका मिला, वह bioutil command से time limit घटाना था; बढ़ा नहीं सकते थे
    सोच रहा हूं कि maximum value check कहां है, उसे reverse engineer करके lower-level API को सीधे call कर bypass किया जा सकता है या नहीं
  • मुझे नहीं लगता कि इस समस्या को “UX design trend” पर डालना fair है
    यह तो बल्कि UX design की गैर-मौजूदगी जैसा है
  • वह हिस्सा मीठे शब्दों में पैक किए गए Call to Action buttons की याद दिलाता है
    “Button presses You” जैसा title वाला एक अच्छा blog post था, लेकिन मिल नहीं रहा
    मुख्य बात यह है कि application का उद्देश्य अब यह तय करना नहीं रह गया कि user program से क्या करवाना चाहता है; दिशा यह हो गई है कि application user को क्या और कैसे करने का निर्देश दे

• Scrollbar से भी छेड़छाड़ नहीं करनी चाहिए
  लगता है आजकल हर जगह उन्हें करीब 1px width का बनाने का trend है

  • सही है, बहुत छोटी scrollbar touchscreen पर इस्तेमाल के लायक नहीं रहती
    अगर app को सच में ergonomic बनाना है, तो one-finger या two-finger gestures, जैसे finger से drag करके scroll करना, ठीक से काम करना चाहिए
  • Mouse hover करने पर दिखना ठीक है, लेकिन कई websites आसान रास्ता चुनकर एक axis या दोनों axes में scrollbar को पूरी तरह बंद कर देती हैं
    फिर desktop पर scroll करने का इकलौता तरीका frame के किनारे से आगे text को drag-select करना रह जाता है
  • आम तौर पर मैं scrollbar छिपा देता हूं
    Overflowing content से बचने की कोशिश करता हूं, लेकिन जब overflow ज़रूरी हो, तो scrollbar design में बाधा डालती है और default scrollbar इतनी बदसूरत होती है कि उसे hide कर देता हूं
  • मुझे गायब हो जाने वाली scrollbars पसंद हैं
    Mouse हिलाते ही वे दिखती हैं, और रुकते ही गायब हो जाती हैं
    Progress position देखनी हो तो mouse को हल्का सा हिला दें

• मैं Gopher के ज़माने से internet इस्तेमाल कर रहा हूं, और pure HTML aesthetics की minimalism पसंद है
  लेख के नीचे उस website का link भी बहुत अच्छा लगा जिसने इस लेख को inspire किया
  ऐसी pages पर source view करने पर सिर्फ nostalgia नहीं, बल्कि “इन लोगों को सच में समझ है” जैसी गर्माहट महसूस होती है
  यह Helvetica documentary के उस scene जैसा है, जहां designers बताते हैं कि 1950s के खराब script fonts की जगह नए सिरे से Helvetica चुन पाने का एहसास कैसा था

• मुझे लगता है scroll के हिसाब से background में दिखने वाली content बदलने वाली, या page sections को ही बांट देने वाली flashy landing pages भी इसमें शामिल हैं
  उदाहरण: https://webflow.com/made-in-webflow/website/Translate-Webflo...

  • उस तरह से behave करने वाली apps flawed code की वजह से कुछ ही हैं, browser खुद एक अच्छा scroller है
    iPad का tilt scroll बुज़ुर्ग लोगों को भी तेजी से पढ़ने और scroll करने में मदद करता है, और auto scroll भी काफी अच्छा है

• जो pages मूल रूप से सिर्फ ऊपर-नीचे scroll करने के लिए थे, उनमें item rows में < > buttons डालना मुझे आज भी उतना ही नापसंद है जितना पहली बार देखने पर था
  Streaming media platforms इस मामले में सबसे बदनाम हैं, लेकिन वे अकेले दोषी नहीं हैं

• आजकल मुझे सबसे ज़्यादा नफरत Ctrl+F या Ctrl+K को hijack करने से है

  • Selection behavior और Ctrl-C को hijack करना भी जोड़ना चाहूंगा
  • Browser का shortcut overwriting allow करना ही बहुत खराब है
    Browser side पर इसे संभव बनाने के लिए निश्चित ही extra code चाहिए रहा होगा, और Google, Apple या Mozilla के लिए वह code न लिखने में कोई खर्च नहीं था
  • उपयोगी in-app search देने पर भी Ctrl+F hijacking मुझे सचमुच नापसंद है
    Browser को ऐसे cases के लिए Shift+Ctrl+F जैसा alternative shortcut देना चाहिए
    अभी-अभी पता चला कि Firefox में Shift+Cmd+F कुछ करता है
  • Outlook for web Ctrl+R को hijack करता है
    Standard key combinations से छेड़छाड़ नहीं करनी चाहिए
    दूसरी applications की functionality छीनकर user को चौंकाना नहीं चाहिए
  • ईमानदारी से कहूं तो इसे दोनों तरह से देखा जा सकता है
    हाल ही में Mac पर Google Sheets में spreadsheet के भीतर search के लिए Cmd-F काम करना बंद हो गया; वह तरीका system shortcut को hijack करना ही था, लेकिन असल में कोई replacement functionality भी नहीं थी
    इसलिए search करने के लिए Sheets menu bar में जाकर menu के अंदर ढूंढना पड़ता था

• नीचे scroll करने पर animation आगे बढ़े, elements side में move करें, और scroll gate पार किए बिना page में और नीचे न जा सकें—ऐसी चीज़ों से भी छेड़छाड़ नहीं करनी चाहिए
  यह डरावना, खटकने वाला, बाधा डालने वाला और user-hostile design है

• सबसे मज़ेदार बात यह है कि “Back to the normal version” link click करने के लिए पहले सबसे ऊपर तक smooth scroll होकर वापस जाना पड़ता है
  बढ़िया फंसा दिया

• सोच रहा हूं कि Firefox में इसे about:settings से बंद किया जा सकता है या नहीं
  या फिर event detection टूट जाएगा?

  • मुझे भी जानना है कि सिर्फ browser settings से इस feature को रोका जा सकता है या नहीं
    विकल्प के तौर पर browser extension मदद कर सकता है
    Implementation शायद case-by-case अलग होगा, और page का example [1] luxy.js [2] library इस्तेमाल करता है
    इस खास page [1] पर developer tools console में नीचे का command चलाने से smooth scroll behavior disable हो गया था
    luxy.init({ wrapperSpeed: 1.0});
    1. https://dontfuckwithscroll.com/smooth.html
    2. https://min30327.github.io/luxy.js/