इंटरैक्शन के लिए कई छोटे HTML पेजों को navigation के ज़रिए जोड़ा जा सकता है

 (blog.jim-nielsen.com)
1 पॉइंट द्वारा GN⁺ 2 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • (L)ots of (L)ittle ht(M)l page(s) तरीका JavaScript-आधारित in-page इंटरैक्शन को कई छोटे HTML पेजों के बीच मूवमेंट से बदल देता है
  • इंटरैक्शन को HTML पेजों के बीच navigation के रूप में बनाया जाता है, आधुनिक वातावरण में इसे CSS view transitions से बेहतर किया जाता है, और ज़रूरत पड़ने पर ही थोड़ा JavaScript जोड़ा जाता है
  • ब्लॉग का Menu JavaScript से खुलने वाला UI नहीं है, बल्कि <a href="/menu/"> लिंक के जरिए menu-विशेष पेज पर जाने का तरीका है
  • menu बंद करना भी मूल रूप से / पर जाने वाला लिंक है, लेकिन document.referrer होने पर JavaScript से history.back() चलाया जाता है ताकि history में menu खोलने-बंद करने की एंट्रियाँ न जुड़ें
  • ब्राउज़र की मूल क्षमता link navigation पर निर्भर रहने से यह पुराने devices, पुराने browsers, और JavaScript disabled वातावरण में भी काम करता है, और पेज का आकार छोटा रखने पर इंटरैक्शन तेज़ और मज़बूत होता है

Menu implementation का तरीका और design के नतीजे

  • खोलना और बंद करना, दोनों link से

    • सामान्य पेज में menu पेज पर जाने वाला लिंक होता है, और menu पेज में वही लिंक “X” में बदलकर menu बंद करने का काम करता है
    • बंद करने की क्रिया भी मूल रूप से / पर जाने वाला लिंक है, लेकिन document.referrer होने पर JavaScript से history.back() चलाया जाता है ताकि ब्राउज़र history में menu खोलने-बंद करने की एंट्रियाँ न जुड़ें
    • सरल किया गया implementation इस प्रकार है 
      <!-- Normal page -->
<nav>
  <a href="/menu/">
    <svg>...</svg>
  </a>
</nav>

<!-- Menu page -->
<nav>
  <a href="/" onclick="document.referrer ? history.back() : window.location.href = '/'; return false;">
    <svg>...</svg>
  </a>
</nav>

  • direct visit और internal navigation में अंतर

    • document.referrer के जरिए यह अलग किया जाता है कि menu पेज पर ब्लॉग के अंदर से navigation करके पहुँचे हैं या URL टाइप करने जैसी direct visit से
    • internal navigation होने पर अर्थपूर्ण history.back() चलाया जा सकता है, और direct visit होने पर / पर ले जाया जाता है

  • approach ही design को आकार देती है

    • यह एक सरल दिखने वाला समाधान है, लेकिन इसमें navigation की प्रकृति, कई पेजों में फैले इंटरैक्शन, और पेज का आकार छोटा रखने के तरीकों को साथ में सोचना पड़ता है
    • पेज का आकार छोटा रखना ज़रूरी है ताकि इंटरैक्शन तेज़, मज़बूत और सहज बना रहे
    • अगर ब्राउज़र को मनमाना code चलाने, उसे fetch करने, compile करने और दिखाने वाला runtime मानने के बजाय documents को navigate करने वाला tool माना जाए, तो tools जिस दिशा में ले जाते हैं उससे कहीं अधिक सरल वेबसाइट बनाई जा सकती है

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

1 टिप्पणियां

 
GN⁺ 2 시간 전
Lobste.rs की रायें

  • आम तौर पर मुझे हमेशा HTML में response देने वाला तरीका पसंद है, लेकिन menu जैसी चीज़ों के मामले में मैं आश्वस्त नहीं हूँ
    toggle किए जा सकने वाले elements और menu खोलने के लिए पूरे page transition में से कौन बेहतर है, इस पर accessibility experts की राय जानना चाहूँगा
    यहाँ Popover API बेहतर समाधान जैसा लगता है, क्योंकि इससे पूरे round trip request के बिना JavaScript-रहित menu दिया जा सकता है
    बाकी अधिकांश बातों पर मैं सहमत हूँ कि page transition से डरने की ज़रूरत नहीं है। अब SSR·static sites में SPA जैसी navigation को accessibility के साथ बनाना भी लगभग हमेशा बहुत मुश्किल नहीं रहा

    • मैं accessibility expert तो नहीं हूँ, लेकिन web development के लिए NVDA install करके रखने वाले व्यक्ति के रूप में कहूँ तो user experience में मुझे बहुत बड़ा फ़र्क महसूस नहीं होता
      page navigation मौजूदा position को reset कर देता है, लेकिन अगर इरादा menu खोलने का था और आप सचमुच menu तक पहुँच जाते हैं, तो दोनों काफ़ी समान हैं
      फिर भी, जैसे non-screen-reader users के लिए होता है, वैसे ही menu खोलने पर नए page पर जाना काफ़ी अजीब लगता है
    • यहाँ मुख्य शब्द can है, should नहीं। अगर interaction के लिए HTML pages उपयुक्त हैं तो उनका उपयोग करें, और अगर कोई दूसरा तरीका ज़्यादा उपयुक्त है तो वही अपनाएँ
      उदाहरण के लिए, अगर पूछा जाए कि component की expand/collapse state के लिए दो अलग HTML pages बनाए जाएँ या <details> tag इस्तेमाल किया जाए, तो जाहिर है दूसरा विकल्प बेहतर है
      उसी तरह Popover API का उपयोग करना भी बिल्कुल ठीक है। बात यह नहीं है कि multi-page HTML navigation पर ज़ोर दिया जाए, बल्कि यह है कि page के भीतर interaction के लिए JavaScript की अनिवार्यता से बचा जाए

  • प्रस्तावित तरीका JavaScript और onclick से menu को dynamically load करता है, इसलिए इसमें latency आती है और user journey में एक data point और जुड़ जाता है
    इसकी जगह menu को हर page में शामिल करके <details> element या :focus-within CSS selector से दिखाया या छिपाया जा सकता है
    https://nlnet.nl इसी तरह काम करता है

  • बताया गया approach वास्तव में ठीक से काम नहीं करता। JavaScript बंद करके blog post खोलें, फिर menu खोलें और बंद करें, तो आप मूल post पर लौटने के बजाय home(/) पर चले जाते हैं
    close button में सही link डालने के लिए backend से menu को dynamically render करना ही पड़ेगा, तभी यह तरीका सही बैठेगा
    व्यक्तिगत रूप से, अगर संभव हो तो मैं Popover API को प्राथमिकता दूँगा। तब backend के बिना भी सब कुछ statically render किया जा सकता है

    • menu के X icon का link https://blog.jim-nielsen.com/ की ओर जाता है, लेकिन JavaScript चालू होने पर लगता है कि onclick handler navigation को intercept कर लेता है 
      document.referrer  
  ? history.back()  
  : window.location.href = '/';  
return false;
      यह href में लिखी destination से अलग page पर भेजता है, इसलिए यह खराब user experience है। मैं अक्सर link पर mouse hover करके destination देखता हूँ, इसलिए इस तरह धोखा-सा महसूस होना अच्छा नहीं लगता

  • एक तरफ़ से देखें तो यह मुझे सचमुच बहुत पसंद आया। सिर्फ HTML से भी JavaScript की तुलना में ज़्यादा smooth और simple तरीके से बहुत कुछ किया जा सकता है
    दूसरी तरफ़, यह तरीका मुख्यतः mobile पर ज़्यादा उपयुक्त लगता है। desktop page में तो आम तौर पर उम्मीद होती है कि menu हमेशा दिखे या pop-out हो, न कि page transition कराए
    तो क्या अब browser के हिसाब से दो versions के pages रखने पड़ेंगे?

    • उल्टा, mobile पर connection अस्थिर हो तो पहले menu पर जाना और फिर destination पर जाना पड़ेगा
      friction दोगुना हो जाता है
    • लगता है आप काफ़ी युवा हैं। 20~30 साल पहले लगभग सभी websites इसी तरह काम करती थीं, और HTML को भी कुछ हद तक इसी तरह इस्तेमाल करने के लिए सोचा गया था
      JavaScript तो लगभग एक आकस्मिक उपज थी
      मुझे हैरानी होती है कि यह तरीका किसी JavaScript समाधान से ज़्यादा कठिन या जटिल लगता है। website बनाने का यह निस्संदेह सबसे सरल और आसान तरीका है

  • navigation का तरीका खास पसंद नहीं आया, लेकिन transition effect अच्छा लगा, और मुझे पता नहीं था कि ऐसा संभव है
    मैंने इसे अपनी site पर भी लागू किया, जहाँ मैं अपना बनाया हुआ C++ static generator और template library इस्तेमाल करता हूँ: https://vittorioromeo.com/
    मेरे हिसाब से यह dark/light theme switcher के लिए खास तौर पर अच्छा बैठता है

  • desktop पर “menu” क्लिक करके किसी दूसरे page पर जाना अच्छा नहीं लगता। पूरा page refresh होता है, इसलिए यह अपेक्षा के विपरीत काफ़ी परेशान करता है
    व्यक्तिगत रूप से इससे reading flow और सोचने की लय टूट जाती है। किसी दूसरी site के link पर click करते समय ऐसा लगता है कि आप एक कमरा छोड़कर दूसरे में जा रहे हैं, इसलिए पहले वाले कमरे को पीछे छोड़ना स्वाभाविक है; लेकिन menu में ऐसा होना ऐसा लगता है जैसे दरवाज़े तक गए और अचानक पूरी तरह दूसरे कमरे में पहुँच गए, इसलिए असहज लगता है
    ईमानदारी से कहूँ तो idea अच्छा है, लेकिन इस्तेमाल करने का अनुभव अच्छा नहीं है
    और कौन-सा transition effect कहा जा रहा है, यह भी समझ नहीं आया। मेरे environment में Menu button दबाने पर बस सामान्य तरीके से Menu page load होता है

    • cross-document view transitions अभी Firefox में काम नहीं करते
      हो सकता है दूसरे browsers में भी न करते हों, लेकिन मैं मुख्य browser के रूप में Firefox fork Librewolf इस्तेमाल करता हूँ
      Chromium में transition effect दिखता है

  • मज़ेदार idea है, लेकिन desktop पर यह कैसे काम करेगा, यह सोच रहा हूँ
    full-page menu कुछ ज़्यादा ही लगता है, इसलिए पूरे page को बदलने वाला तरीका कम उपयुक्त लगता है

  • menu page load delay कम करने के लिए preload का ज़िक्र नहीं किया गया
    इसे इस्तेमाल करने पर यह कितना अच्छा काम करेगा, यह जानने की उत्सुकता है

    • सही cache headers भी लगाने चाहिए। यहाँ साधारण expires header ही काफ़ी हो सकता है
      तब दिखाने से पहले server पर validation के लिए जाने की ज़रूरत भी नहीं पड़ेगी, इसलिए यह बहुत तेज़ महसूस होगा

  • कुछ साल पहले मैंने @misty का बनाया एक text game देखा था, जिसमें साधारण links को interaction की तरह इस्तेमाल करके choice का illusion दिया गया था
    साधारण HTML और मज़बूत storytelling ने गहरा असर छोड़ा था