ज़रूरत से ज़्यादा डिज़ाइन किए गए Anchor Link

 (thirty-five.com)
7 पॉइंट द्वारा GN⁺ 2025-04-05 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Anchor link का ढांचा बस इतना है: बटन क्लिक → शीर्षक तक scroll, लेकिन असली implementation में समस्याएँ आती हैं
  • नीचे मौजूद शीर्षक viewport के ऊपरी हिस्से तक ठीक-ठीक scroll नहीं होते, जिससे UX खराब होता है
  • इसे हल करने के लिए कई तरह के approaches आज़माए गए, और तरीका धीरे-धीरे अधिक परिष्कृत और जटिल होता गया

सरल समाधान: padding जोड़ना

  • नीचे वाले शीर्षक scroll में आ जाएँ, इसके लिए extra space जोड़ने का तरीका
  • delta निकालकर padding जोड़ने से समस्या हल हो सकती है
  • लेकिन design team को अनावश्यक खाली जगह पसंद न आए

व्यावहारिक समाधान: trigger line को खिसकाना

  • trigger line को viewport के निचले हिस्से की ओर खिसकाकर ऐसा adjust करना कि नीचे वाला शीर्षक उससे टकराए
  • समस्या यह है कि शीर्षक viewport के बिल्कुल नीचे आ जाता है, जिससे पढ़ने में आसानी घटती है

सुधारित विकल्प: virtual trigger point बनाना

  • असल शीर्षक की जगह वही रहने देते हुए, सिर्फ trigger होने की position को ऊपर की ओर shift की गई virtual position के रूप में बनाया जाता है
  • इससे हर शीर्षक पर अलग adjustment लागू करने की flexibility मिलती है
  • लेकिन पहला शीर्षक बहुत ऊपर shift हो जाता है और नई समस्या पैदा होती है → अलग से adjustment चाहिए

और बेहतर तरीका: trigger position को proportionally shift करना

  • सभी triggers को एक जैसा shift नहीं किया जाता; पहला शीर्षक जैसा है वैसा, आख़िरी शीर्षक सबसे ज़्यादा shift
  • बीच के शीर्षक अपनी position के अनुसार अनुपातिक रूप से shift होते हैं
  • यह शीर्षकों का क्रम बनाए रखने और scroll से वहाँ तक पहुँच संभव रहने जैसी शर्तें पूरी करता है
  • यह तरीका सरल और उपयोगी है, और ज़्यादातर मामलों में ठीक से काम करता है

उन्नत approach: custom mapping function से optimization

  • trigger position को मनमाने ढंग से 25% स्थान पर रखा गया था, इसलिए virtual position असली position से बहुत दूर जा सकती है
  • इसे हल करने के लिए MSE(Mean Squared Error) आधारित optimization approach लाई गई

loss function की रचना

  • Anchor Penalty: virtual शीर्षक position का असली position से कितना विचलन है
  • Section Penalty: sections के बीच दूरी (scroll length) में कितना बदलाव आता है
  • इन दोनों मानों को weights के साथ adjust करके सबसे उपयुक्त trigger position निकाली जाती है

constraints

  • page की सीमा के भीतर रहना
  • पहला शीर्षक ऊपर की ओर shift न हो
  • शीर्षकों का क्रम बना रहे

insight: simple proportional shifting की सीमा

  • बहुत लंबे pages (जैसे पूरी Bible) में पूरे page पर छोटे-छोटे shifts जमा करके लागू करने जैसी अक्षमता आती है
  • page जितना लंबा होगा, error उतनी बढ़ सकती है और UX पर बुरा असर पड़ सकता है

अंतिम समाधान: Smoothstep आधारित variable mapping function

  • हर शीर्षक की position को 0~1 के बीच normalize किया जाता है, और उसी के आधार पर adjustment ratio निकाला जाता है
  • Smoothstep function(S(x) = 3x² - 2x³) का उपयोग कर smooth transition लागू किया जाता है
  • adjustment शुरू होने की position a सेट की जाती है, ताकि एक निश्चित बिंदु तक कोई shift न हो और उसके बाद धीरे-धीरे बढ़े
    • उदाहरण: a = 0.4 हो तो ऊपर के 40% शीर्षकों में कोई बदलाव नहीं, नीचे के 60% में क्रमिक adjustment
  • नतीजतन, ऊपर के शीर्षक अपनी मूल जगह पर रहते हैं, नीचे के शीर्षकों पर अधिकतम adjustment लागू होता है → स्वाभाविक UX मिलता है

सत्यापन और समापन

  • अंतिम implementation को डिज़ाइन की बारीकी और व्यावहारिकता के संतुलन वाली solution माना जा सकता है
  • बेशक, designer का feedback शायद बस इतना हो: “...बस ठीक से काम करना चाहिए”
  • लेकिन कम-से-कम यह ब्लॉग पोस्ट बारीक engineering के ऐसे रिकॉर्ड के रूप में रहेगी जिसे लंबे समय तक याद रखा जाएगा

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-04-05
Hacker News राय

  • बैकएंड डेवलपर के रूप में फ्रंटएंड काम को देखते समय कभी-कभी उसकी जटिलता देखकर हैरानी होती है

    • लेख शानदार है और काम भी अच्छी तरह किया गया है, लेकिन यह सवाल उठता है कि साधारण स्क्रॉल के लिए इतनी जटिलता लानी ज़रूरी है या नहीं

  • साइड नेविगेशन में "active anchor" संकेतक के UX उद्देश्य पर सवाल

    • जब पाठक किसी लंबे सेक्शन के बीच में हो, तो यह स्क्रीन पर न दिख रहे heading की जगह मौजूदा सेक्शन की याद दिला सकता है
    • इसका मतलब है कि यह स्क्रॉल करके गुज़रे heading के आधार पर नहीं, बल्कि स्क्रीन पर दिख रहे सेक्शन के आधार पर काम करता है
    • अगर कोई छोटा सेक्शन स्क्रीन का ज़्यादातर हिस्सा नहीं घेरता, तो active संकेतक शायद उतना उपयोगी न हो

  • anchor link की सबसे महत्वपूर्ण UX विशेषता यह है कि उसे दूसरों को भेजा जा सके और bookmark के रूप में सहेजा जा सके

    • किसी खास सेक्शन को bookmark कर पाना, पेज के ऊपर से शुरू करके स्क्रॉल करने या anchor link पर क्लिक करने से कहीं ज़्यादा सुविधाजनक है
    • यह वेबसाइट #anchor-name URL का उपयोग नहीं करती, इसलिए यह सुविधा नहीं देती

  • Jira के anchor/permalink से चिढ़कर क्लिक किया, लेकिन यह मिलता-जुलता होते हुए भी अलग तरीका है

    • keyboard से anchor पर जाया नहीं जा सकता
    • लेखक से सवाल: HTML तत्व की जगह non-interactive तत्व पर JS event listener क्यों इस्तेमाल किया गया

  • मुख्य पेज content के नीचे padding जोड़ना आदर्श होगा

    • इससे content के आखिर का हिस्सा viewport के निचले किनारे से चिपक जाने की समस्या हल होती है
    • मोबाइल पर 90vh, और बड़े स्क्रीन पर 50vh का margin उपयुक्त है
    • डेस्कटॉप पर 90vh margin अजीब लग सकता है

  • आधुनिक browser में text fragments का उपयोग करके पेज के किसी खास हिस्से को highlight किया जा सकता है

    • Chrome में text को highlight करके right-click करें और "लिंक कॉपी करें" चुनें
    • anchor की जगह किसी खास text हिस्से को highlight करने के लिए इसे रोज़ इस्तेमाल किया जाता है

  • कई "active" states की अनुमति देना भी संभव है

    • अगर content लंबा हो, तो दो सेक्शन के header दोनों "active" हो सकते हैं
    • छोटे content में बहुत ज़्यादा हिस्से highlight हो सकते हैं

  • दूसरे comments पढ़ना मज़ेदार है

    • मोबाइल पर साइट का डिज़ाइन दिलचस्प है और समस्या का समाधान साफ़ तौर पर सामने आता है
    • pop-up के बिना तकनीकी विषयों वाला ब्लॉग पढ़ना ताज़गीभरा लगता है

  • Firefox डेस्कटॉप में "सुंदर समाधान" "मध्य सेक्शन" को highlight करता है

    • पेज के नीचे तक पहुँचे बिना भी निष्कर्ष पूरी तरह दिखाई देता है
    • स्क्रीन पर दिख रहे सभी anchor को highlight करना ही जवाब है

  • लेख साफ़-सुथरा है और ब्लॉग का डिज़ाइन उससे भी ज़्यादा दिलचस्प है

    • right-aligned तरीका पसंद नहीं, लेकिन बाएँ तरफ़ के pop-up की inline activation बहुत बढ़िया है