मोबाइल-फर्स्ट वेब डिज़ाइन का डेस्कटॉप पर नकारात्मक प्रभाव

 (nngroup.com)
3 पॉइंट द्वारा GN⁺ 2023-10-27 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • मोबाइल के लिए बनाए गए लेआउट को बिना बदलाव डेस्कटॉप तक बढ़ाने पर इमेज, टेक्स्ट और whitespace जरूरत से ज़्यादा बड़े हो जाते हैं, और जानकारी लंबे पेज में बिखर जाती है — इस content dispersion से usability खराब होती है
  • दुनिया भर के 55% से अधिक वेब ट्रैफ़िक के मोबाइल से आने के कारण mobile-first व्यापक रूप से अपनाया गया है, लेकिन जब इसे minimalism और large-image-केंद्रित डिज़ाइन के साथ जोड़ा जाता है, तो डेस्कटॉप पर information density काफी कम हो जाती है
  • 13 qualitative usability tests में dispersed और compact लेआउट की तुलना के नतीजे बताते हैं कि dispersed पेज जानकारी ढूंढने और समझने को अधिक कठिन बनाते हैं
  • बिखरा हुआ content स्क्रॉल और क्लिक बढ़ाकर interaction cost बढ़ाता है, और संबंधित जानकारी को कई स्क्रीन में याद रखने की जरूरत पैदा करता है, जिससे cognitive load, frustration और trust में गिरावट हो सकती है
  • डेस्कटॉप पर महत्वपूर्ण संबंधित जानकारी को एक ही viewport में समूहित करना चाहिए, और accordion जैसे mobile-only pattern का सीमित उपयोग करना चाहिए

content dispersion क्या है

  • content dispersion वह स्थिति है जिसमें responsive webpage का content बड़े laptop या desktop स्क्रीन पर जरूरत से ज़्यादा बड़ा और फैला हुआ दिखाई देता है
  • जब mobile-first पेज डेस्कटॉप पर render होते हैं, तो स्क्रीन-भर इमेज, फूले हुए बड़े फ़ॉन्ट और अत्यधिक negative space मिलकर लंबे पेज बनाते हैं और अधिक स्क्रॉल की मांग करते हैं
  • अगर dispersion केवल कुछ सेक्शन तक सीमित हो, तो यह बड़ा usability issue नहीं भी हो सकता, लेकिन जब पेज का अधिकांश हिस्सा बिखरा हुआ हो, तो उसका cumulative प्रभाव आमतौर पर नकारात्मक होता है
  • बड़े-स्क्रीन डिवाइस पर content dispersion cognitive load, interaction cost, content comprehension की कठिनाई और user frustration बढ़ाता है

content dispersion पैदा करने वाली डिज़ाइन प्रवृत्तियाँ

  • mobile-first approach में पहले मोबाइल के लिए डिज़ाइन किया जाता है, फिर उसे tablet और desktop के लिए समायोजित किया जाता है
    • दुनिया भर के 55% से अधिक वेब ट्रैफ़िक मोबाइल डिवाइस से आने के कारण यह approach व्यापक हो गई है
  • minimalism वेबसाइट से वे डिज़ाइन तत्व हटाता है जो उसके मुख्य function या message के लिए जरूरी नहीं होते
    • जटिल दिखने से बचने के लिए इसमें negative space का काफी उपयोग होता है
    • इससे एक viewport में दिखने वाले content की मात्रा घट सकती है, और कम information density वाले लंबे पेज बन सकते हैं
  • large image-केंद्रित डिज़ाइन आधुनिक वेब में high-resolution images के बड़े उपयोग की प्रवृत्ति से जुड़ा है
    • बड़ी इमेज ध्यान खींच सकती हैं, लेकिन टेक्स्ट content को जरूरत से ज़्यादा बिखरा भी सकती हैं
    • डेस्कटॉप पेज पर कुछ बड़ी इमेज अच्छी तरह काम कर सकती हैं
    • लेकिन बहुत अधिक बड़ी इमेज होने पर उनके बीच का text-based content पूरे पेज में टुकड़ों में बंट जाता है

13 usability tests की पद्धति

  • यह अध्ययन 13 qualitative usability tests और semi-structured interviews को मिलाकर किया गया
  • तुलना दो तरह के लेआउट और दो तरह के पेज प्रकारों के संयोजन पर आधारित थी
    • लेआउट: compact, dispersed
    • पेज प्रकार: homepage, product page
    • कुल 4 prototypes का उपयोग किया गया
  • dispersed prototypes वास्तविक desktop webpages को देखकर पुनर्निर्मित किए गए, जिनमें content density कम थी, negative space ज्यादा था और टेक्स्ट बड़ा था
  • compact version वही content इस्तेमाल करके अलग से बनाया गया
  • users ने 4 prototypes पर open-ended tasks किए और बाद में प्रत्येक पेज प्रकार के दोनों versions की तुलना पर चर्चा की
  • पूरी research methodology अलग methodology page में उपलब्ध है

बिखरे हुए content से पैदा होने वाली usability समस्याएँ

  • जब dispersion पेज के बड़े हिस्से में फैला हो, तो यह पूरे user experience पर बड़ा असर डाल सकता है
  • मुख्य समस्याएँ इस प्रकार हैं
    • पेज की लंबाई और interaction cost में वृद्धि
    • cognitive load में वृद्धि
    • पेज का conceptual model बनाना कठिन होना
    • frustration में वृद्धि
    • trust में कमी

  • स्क्रॉल और क्लिक बढ़ना

    • content dispersion लंबे पेज बनाता है जिनमें अधिक स्क्रॉल चाहिए, और accordion जैसे mobile-only design elements content तक पहुँचने के लिए अधिक क्लिक मांगते हैं
    • जब mobile-first वेबसाइट बड़े स्क्रीन पर render होती है, तो content फैलकर लंबा पेज बन जाता है; minimalism और image-led design जितना अधिक जुड़ते हैं, यह प्रभाव उतना बढ़ता है
    • जब content कई viewports में बंटा हो, तो पेज के भीतर किसी खास जानकारी को ढूंढना कठिन हो जाता है
    • test participants ने dispersed product page में compact version की तुलना में जानकारी ढूंढने में अधिक कठिनाई महसूस की

  • mobile-only patterns की desktop पर समस्या

    • accordion मोबाइल पर बहुत-सी जानकारी को छोटे स्थान में fold करके पेज छोटा रख सकता है, और users को सीधे उनकी रुचि वाले हिस्से तक ले जा सकता है
    • बड़े स्क्रीन पर लंबे पेज की समस्या अपेक्षाकृत कम होती है, इसलिए accordion content fragmentation पैदा कर सकता है और महत्वपूर्ण जानकारी ढूंढने की interaction cost काफी बढ़ा सकता है
    • एक participant ने कहा कि dispersed prototype के product-information accordion में जानकारी पढ़ने के लिए हर item को खोलना और बंद करना पड़ता था
    • दूसरे participant ने compact page को बेहतर बताया क्योंकि उसमें कम क्लिक थे और जानकारी तुरंत सामने थी

  • cognitive load में वृद्धि

    • जैसे-जैसे इमेज बड़ी और negative space विस्तृत होती जाती है, text-based content कई viewports में टुकड़ों में बंट जाता है
    • जब संबंधित content स्क्रीन इकाइयों में कट जाता है, तो users के लिए उसे एक ही इकाई के रूप में देखना कठिन हो जाता है
    • निर्णय लेने के लिए users को अलग-अलग viewports की जानकारी याद रखनी पड़ती है या आगे-पीछे स्क्रॉल करना पड़ता है, जिससे short-term memory पर आसानी से बोझ बढ़ सकता है
    • compact layout एक ही viewport में अधिक जानकारी दिखाकर cognitive burden कम करता है और navigation को आसान बनाता है
    • इमेज की प्रकृति भी fragmentation के अनुभव को प्रभावित करती है
      • informational images ऐसी होती हैं जिन्हें users उपयोगी जानकारी पाने के लिए समय देकर देखते हैं, इसलिए बड़े स्क्रीन पर बड़े आकार में दिखने पर भी उनका अतिरिक्त बोझ कम हो सकता है
      • decorative images में जानकारी का मूल्य नहीं होता; users उन्हें देखे बिना आगे बढ़ जाते हैं, लेकिन उपयोगी content तक पहुँचने के लिए बड़ी सजावटी visuals स्क्रॉल करनी पड़ती हैं, जिससे fragmentation और बुरा महसूस होता है

conceptual model और trust पर प्रभाव

  • dispersed पेज, लंबे पेज और working-memory के बोझ के कारण, वेबसाइट क्या संप्रेषित करना चाहती है इसका आकलन करना और conceptual model बनाना कठिन कर देते हैं
  • homepage prototype में participants ने कहा कि 4–5 propositions को एक साथ देखकर उसकी range समझने की जगह उन्हें उन्हें याद रखकर समझना पड़ता था, जिससे यह अधिक कठिन हो गया
  • product page में price, product details और reviews जैसे खरीद-निर्णय के तत्व जब अलग-अलग viewports में बिखरे थे, तो users को उन्हें अलग-अलग consume और याद रखना पड़ता था
  • जब महत्वपूर्ण जानकारी साथ में हो या कम viewports में रखी जाए, तो product या value proposition की conceptual understanding बनाना आसान होता है
  • illusion of completeness dispersed वेबसाइटों में अधिक स्पष्ट हो सकता है
    • color blocks viewport में मजबूत horizontal breaks बना सकते हैं, या बहुत अधिक negative space पेज के खत्म होने का आभास दे सकती है
    • अगर यह संकेत न मिले कि नीचे और content है, तो users सामग्री छोड़ सकते हैं
  • usability समस्याएँ जमा होने पर dispersed वेबसाइट कम content वाली और पहुँचने में कठिन लग सकती है
  • कुछ users को यह भी लग सकता है कि कंपनी जानकारी छिपा रही है, जिससे trust कम हो सकता है
  • users ने विशेष रूप से तब compact layout को ज्यादा पसंद किया जब उनका लक्ष्य वेबसाइट को explore करना और उसके offer को समग्र रूप से समझना था

कब content dispersion मददगार हो सकता है

  • पूरे पेज में dispersion का cumulative usability impact आमतौर पर नकारात्मक होता है, लेकिन कुछ स्थितियों में यह अनुभव को बेहतर भी बना सकता है
  • एक viewport में content कम होने से users एक समय में एक ही highlighted content पर ध्यान केंद्रित कर सकते हैं, और information overload की भावना कम हो सकती है
  • viewport के भीतर content density घटाकर जानकारी को उभारना इन स्थितियों में उपयोगी हो सकता है
    • जब complex content को टुकड़ा-टुकड़ा समझना हो
    • जब users को दिखाए गए content से परिचित होना हो और बहुत अधिक जानकारी उन्हें overwhelm कर सकती हो
    • जब high-value images दिखानी हों
  • बड़ी product photos users को उत्पाद के विवरण आसानी से देखने देती हैं और value बढ़ा सकती हैं
  • उच्च informational value वाली इमेज dispersion को justify कर सकती हैं, लेकिन filler images या सिर्फ visual interest के लिए डाली गई इमेज बिना अतिरिक्त लाभ के केवल dispersion बढ़ाती हैं
  • homepage prototype में इमेज की value कम होने के कारण content dispersion के सकारात्मक प्रभाव कम देखे गए

desktop डिज़ाइन के लिए सिफारिशें

  • desktop rendering का अलग से मूल्यांकन करना चाहिए
    • यदि डेस्कटॉप पर पेज के बड़े हिस्से जरूरत से ज़्यादा फैल रहे हों, तो यह देखना चाहिए कि क्या महत्वपूर्ण content को scan करना आसान बनाने के लिए redesign की जरूरत है
  • इमेज के जोड़ने वाले value का आकलन करना चाहिए
    • उन बड़ी इमेज को प्राथमिकता दें जो product या service के context को समझने में मदद करें
    • यह तय करें कि डेस्कटॉप पर जो dispersion बड़ी इमेज पैदा करती हैं, वह उनके value के मुकाबले उचित है या नहीं
  • महत्वपूर्ण संबंधित content को एक ही viewport में समूहित करना चाहिए
    • यह सोचना चाहिए कि offer को समझने के लिए कौन-सी जानकारी सबसे अधिक संबंधित है, और ऐसा डिज़ाइन चुनना चाहिए जो आगे-पीछे स्क्रॉल कम करे
  • mobile-only interactions और design elements को सीमित करना चाहिए
    • डेस्कटॉप पर accordion का उपयोग कम करना चाहिए
    • उसी content को desktop-friendly तरीके से दिखाने वाले adaptive design पर विचार करना चाहिए
  • dispersion का उपयोग मुख्य बिंदुओं या complex content पर ध्यान केंद्रित कराने की रणनीति के रूप में सीमित रूप से करना अधिक उपयुक्त है

निष्कर्ष

  • minimal desktop pages में बिखरा हुआ content distraction कम कर सकता है और मुख्य बिंदुओं या complex information पर ध्यान केंद्रित करा सकता है
  • लेकिन जब पूरा पेज mobile-first, minimalism और image-led design के आधार पर बनाया जाता है, तो डेस्कटॉप पर usability समस्याएँ बढ़ जाती हैं
  • जब content कई viewports में फैलकर टुकड़ों में बंट जाता है, तो users के लिए जानकारी को consume और understand करना कठिन हो जाता है

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

1 टिप्पणियां

 
GN⁺ 2023-10-27
Hacker News की राय

  • Danny O'Brien पुराना ब्लॉग Oblomovka चलाते थे, और करीब 2007 में उन्होंने hinternet शब्द गढ़ा था
    उस समय इंटरनेट वह जगह थी जिसे तकनीकी elite अपने लिए चलाते थे, और आम लोग भी उसमें आना शुरू कर रहे थे। hinternet का मतलब यह धारणा थी कि परिष्कृत तकनीक और मूल्य वाला इंटरनेट अलग है, और Viagra spam व popup banners वाला इंटरनेट अलग
    पहले तकनीकी elite, किसी खतरनाक मोहल्ले में जाने की तरह, hinternet से लगभग बच सकते थे, लेकिन आम लोगों के पास ऐसी पहचान करने की व्यवस्था नहीं थी, इसलिए उनका इंटरनेट अनुभव कहीं ज़्यादा खराब होता था
    अब इंटरनेट का बड़ा हिस्सा hinternet बन चुका है, और बैंक, home mortgage, car payments, utility bills जैसे ज़रूरी systems भी mobile-first ढंग से डिजाइन होते हैं और “real user verification” के बहाने ऐसे dark techniques इस्तेमाल करते हैं जो open platforms पर टूट जाते हैं
    अगर पुराना hinternet नकली घड़ियां बेचने वाली अंधेरी गली था, तो आज यह अर्ध-सरकारी संस्थाओं द्वारा पीछे से चलाए जाने वाले vertical information integration के dystopia के ज्यादा करीब है, और IRS में login करने के लिए आपको id.me जैसा identity management platform इस्तेमाल करना पड़ता है, जो सामान भी बेचता है
    छोटे, refined gardens बनाने की कोशिशें हैं, लेकिन सफलता असमान है, और किसी व्यक्ति के लिए जरूरी कामों के अलावा hinternet में भाग लेने की प्रेरणा लगभग नहीं है
    इस नजरिए से देखें तो “mobile-first web design” बड़े context से अलग किया गया सिर्फ एक symptom है

    • यह hinternet concept दिलचस्प है, लेकिन इसकी व्याख्या में कुछ छूट गया है
      एक तरफ academia, military और government के cultured elite को वैध संस्थापक के रूप में दिखाया गया है, और दूसरी तरफ Eternal September के बाद आई जनता को
      आखिरकार ढांचा ऐसा बनता है कि व्यापारी, सट्टेबाज और ठग जैसे newcomers नए संसार की companies और banks में naturalize हो गए। अगर dot-com era को colonization story की तरह देखें, तो elite अपनी ही जमीन से बेदखल किए गए indigenous people बन जाते हैं, और यह आजकल की narrative style में भी अच्छी तरह फिट बैठता है
      लेकिन इस कथा में जो गायब है, वह असली आम लोग हैं
      1997 से लगभग 2010 तक का dot-com, Web 2.0 और empire-building फिर भी पुराने पैसे और सत्ता का इंटरनेट की ओर जाना और कुछ rough “entrepreneurs” का जुड़ना भर था; 99% लोग दर्शक बने रहे और अब मानो ranch में हांके जा रहे हैं
      people’s internet की संभावना अब भी है, लेकिन free-riding और tragedy of the commons जैसी classic समस्याओं को लगभग हल नहीं किया गया, और इस समय “Web 3.0 और blockchain web” मरा हुआ लगता है
      फिर से public, high-quality और बड़े इंटरनेट की ओर जाना हो तो इंटरनेट के इतिहास और narratives, और असली stakeholders कौन हैं, इसे और बारीकी से देखना होगा
    • सिर्फ व्याख्या से समझना मुश्किल है कि hinternet क्या है
      यह IRC और Usenet केंद्रित, इस्तेमाल में मुश्किल 90s के इंटरनेट की बात है, या free hosting पर illegal content वाली 90s की अंधेरी इंटरनेट दुनिया की, समझ नहीं आता
      forums, IRC, Viagra spam और goatse वाले 90s के इंटरनेट की आज के dark patterns और कुछ mega-companies द्वारा कब्जा किए गए sterilized internet से क्या समानता है, यह साफ नहीं दिखता
    • आखिरकार यह computer literacy कम रखने वाले लोगों के Windows desktop पर अनुभव के ज्यादा करीब है
      mobile usage की वजह से computer illiteracy घट नहीं रही, बल्कि बढ़ रही है, और गलत link पर click करके browser toolbar install करने के बाद धीरे-धीरे dark patterns से संक्रमित होने जैसा है
      रिश्तेदार जब computer problems के लिए संपर्क करते हैं, तो ऐसी हालत काफी बार दिखती है
    • अगर यह iPad पर भी काम कर जाए तो किस्मत अच्छी है, और Verizon या T-Mobile जैसे मूलभूत telecom carriers के पास जिंदगी गिरवी न रखनी पड़े तो भी गनीमत है
      “phonish” या “phonishness” जैसे expressions इस्तेमाल करने पर हमेशा downvotes मिलते हैं, लेकिन smartphones ने जिंदगी बेहतर बनाने के बजाय बदतर बनाई है और ऐसा लगता है कि इंसान को computer की सेवा में लगा दिया है
      अगले platform का इंतजार है
    • सच कहूं तो मुझे याद नहीं कि आखिरी बार ad या आसान phishing कब देखी थी
      junk mail folder के अलावा exposure लगभग नहीं है, और बाकी सब curated होकर “ठीक-ठाक” क्षेत्र या privileged internet residence के ज्यादा करीब ढल गया है
      पैसे नहीं हैं, लेकिन knowledge के मामले में अमीर हूं, और यह ऐसी tragedy of the commons जैसी संरचना लगती है जहां tech-illiterate लोग ads और YouTube जैसी paid services के meat shield बन जाते हैं

  • समय के साथ यह साफ होता जा रहा है कि frontend शायद stack का सबसे मुश्किल हिस्सा है
    लोग सोचते हैं कि Bootstrap React app जल्दबाज़ी में बना देने से वह perfect हो जाएगा, लेकिन हर browser, device, assistive technology और भाषा में काम करने वाली जटिल UI लिखना बेहद कठिन है
    HTML, CSS और संबंधित web API की गहरी जानकारी चाहिए, और अच्छे frontend engineer Big Tech में भी बहुत दुर्लभ हैं
    UX designer जो इन बातों तक सोचते हैं, वे और भी दुर्लभ हैं, और ऐसे लोग मिलियन डॉलर की वैल्यू रखते हैं

    • कई साल frontend developer के रूप में काम करते हुए मैंने इसकी कठिनाई और इस कठिनाई को लगातार मान्यता न मिलने, दोनों को महसूस किया
      आखिरकार designer बन गया; अगर सम्मान वैसे भी नहीं मिलना है, तो कम-से-कम नई technologies की treadmill पर लगातार दौड़ते रहने की ज़रूरत तो नहीं, ऐसा लगा
      backend development भी किया है और वह अपने तरीके से कठिन है, लेकिन पैसे की बात हो तो frontend के बजाय backend चुनूंगा
      design, backend और frontend तीनों करने के बाद मेरे दिमाग में मान्यता और दखल नाम के दो axis बन गए
      design में output visual होता है, इसलिए काफी मान्यता मिलती है, लेकिन हर कोई “इसे बेहतर कैसे किया जाए” पर राय देता है और आसानी से दखल देता है
      backend में दूसरे engineers के अलावा कोई दखल नहीं देता, लेकिन अच्छी तरह करने पर भी वह बस ऐसे काम करता है जैसे उसे वैसे ही करना चाहिए था, इसलिए credit मिलना मुश्किल है
      frontend बीच में आता है: अगर वह अच्छा दिखे और ठीक से चले तो कुछ हद तक मान्यता मिलती है, लेकिन app तेज़ और responsive हो तब भी लगभग आधा credit designer को चला जाता है
      साथ ही लोग दूसरे apps को आधार बनाकर कहते हैं कि “इसे ऐसे काम करना चाहिए”, और frontend developer को designer ने जो approve किया है और backend जो support करता है, उनके बीच किसी तरह उसे चलाना पड़ता है
    • अच्छे frontend engineer सिर्फ दुर्लभ ही नहीं हैं, बल्कि सबसे बेहतरीन लोग frontend काम छोड़ देते हैं, ऐसा भी आम लगता है
      वे उन colleagues से दिनभर लड़ते-लड़ते थक जाते हैं जो coding तो जानते हैं लेकिन design sense नहीं रखते, और जो गुण किसी को अच्छा frontend engineer बनाते हैं, वे कम मनोवैज्ञानिक लागत वाली भूमिकाओं में जाने के लिए भी फायदेमंद होते हैं
    • UI को मैंने हमेशा stack का सबसे कठिन हिस्सा माना है, और अब तो और भी ज़्यादा
      frontend developer किसी objective machine से नहीं, बल्कि subjective इंसानों से dealing करता है; उसे designers और product managers से भी dealing करनी होती है, और backend engineers व infra की constraints भी झेलनी पड़ती हैं
      कई devices और browsers पर काम करवाना होता है, किसी और के चुने framework का उपयोग करते हुए, और कुछ भी तोड़े बिना
      सभी frontend developers को मेरा सम्मान
    • पहले एक non-technical job में internal webapp इस्तेमाल करनी पड़ती थी, और वह ऐसी गलतियों से भरी थी
      हर चीज़ में padding था, text में भी padding, text को घेरने वाले box में भी padding, और उस box को रखने वाली table row में उससे भी बड़ा padding था
      नतीजा यह कि सामान्य 1080p screen पर table की सिर्फ करीब 4 rows ही दिखती थीं, और हर row में असली जानकारी बहुत कम होती थी
      ऊपर से न जाने क्यों font size को viewport width से define किया गया था, जिससे पुराने 4:3 display पर वह लगभग unusable हो जाता था
    • मैं पूरी तरह मानता हूं कि frontend काम बहुत जटिल है और हाल में और जटिल हुआ है, लेकिन इसे stack का सबसे कठिन हिस्सा नहीं मानता, क्योंकि आम तौर पर scaling की चिंता नहीं करनी पड़ती
      ऐसे systems के बारे में सोचिए जिन्हें दिन, हफ्ते या महीने में अरबों events handle करने हों, data caching और data warehouse, real-time notifications, queue workloads, तरह-तरह की API requests, backend systems के बीच synchronization, कई data stores, multi-region scaling, redundancy और backend failures से निपटना हो
      जटिल web software में ये backend समस्याएं सामान्य हैं
      उस backend से जुड़ा frontend आम तौर पर backend automatic processes की वजह से आधी रात को टूटने, या users की संख्या और data scale की चिंता करने से कम जूझता है
      frontend का initial development या browser changes के हिसाब से maintenance कितना भी कठिन हो, development खत्म होने के बाद वह static code की तरह कहीं अधिक जटिल underlying systems से interface करता है, और वे underlying systems data व business requirements बदलने पर लगातार ध्यान मांगते रहते हैं

  • समस्या mobile-first बनाम desktop नहीं है, बल्कि वे designers हैं जो अब भी यह नहीं समझते कि web dynamic content है, जिसे user की screen size और form के अनुसार flow करना चाहिए
    web कागज़ जैसा static medium नहीं है, और न ही किसी खास size और form से बंधा है, इसलिए उसे वैसे treat नहीं करना चाहिए
    web “designer” को content को किसी खास size या pixel resolution में ज़बरदस्ती fit करने की कोशिश नहीं करनी चाहिए; screen resolution और aspect ratio इतने विविध हैं कि content को उनके अनुसार flow कर पाना चाहिए
    जिन visually impaired users को font बड़ा करना पड़ता है, उनके लिए भी font enlargement पर content बुरी तरह टूट जाए तो accessibility बहुत खराब हो जाती है

    • यह कहना आसान है, लेकिन खुद implement करके देखें तो सचमुच मुश्किल है
    • “कागज़ जैसा static medium नहीं है” के बावजूद, dynamic data से बनने वाले print-first page layouts अक्सर मिलते हैं
      ऐसे pages को भी mobile और desktop browsers पर काम करना और हर जगह अच्छा दिखना होता है, लेकिन यह इतना मुश्किल नहीं है
      बस थोड़ा और समय लगता है, और media queries व थोड़ा JavaScript इसे संभव बना देते हैं
    • print background वाली agencies के साथ काम करता हूं, और सच में कहने को बहुत कुछ है
      साथ ही, लंबे समय से यह काम कर रहे लोगों के लिए भी यह एक बेहद अव्यवस्थित क्षेत्र है
      आजकल मैं अपने design background का उपयोग करके planning stage में जितना हो सके शामिल होता हूं, फिर implement और deploy करने के बाद “users के सिर्फ 1% द्वारा इस्तेमाल किए जाने वाले अजीब viewport में जो भी टूटता है, सब बताइए” जैसी approach अपनाता हूं, और review stage या production में CSS patches व viewport-specific media queries से उसे ठीक करता हूं
    • बिल्कुल सहमत नहीं हो सकता
      सभी printed books में text line length मोटे तौर पर समान होने की वजह होती है, और reading width हमेशा सीमित होनी चाहिए
    • “web frontend” जैसी विविध platforms पर अच्छी UI design करना बेहद कठिन है
      width 300px भी हो सकती है, 1920px भी; mouse इस्तेमाल हो सकता है, केवल touch हो सकता है, दोनों हो सकते हैं, या दोनों में से कोई भी नहीं

  • hamburger menu और pictogram icons वगैरह
    मोबाइल पर इन्हें क्यों इस्तेमाल किया जाता है, यह समझ आता है
    जब आपके पास सिर्फ content के लिए जगह हो, तो कुछ ही functions को छोटे icons के रूप में रखना और बाकी actions को hamburger menu में छिपाना समझ में आता है
    लेकिन जगह मौजूद हो तो ऐसा इस्तेमाल करना भयानक है
    अच्छे से अच्छे हाल में भी steps बढ़ जाते हैं, और बुरे हाल में user यह पता लगाने के लिए प्रयोग करता है कि icon क्या करता है और गलती कर बैठता है
    अगर undo ठीक से काम करता हो तो फिर भी कुछ हद तक ठीक है, लेकिन लगता है उन्होंने यह भी तय कर लिया है कि उसके टूटे होने से भी कोई फर्क नहीं पड़ता
    पुराने Apple HIG की तरह, desktop पर अक्सर इस्तेमाल होने वाले actions को menu से बाहर निकालकर label लगे buttons में रखना चाहिए, ताकि user को छिपा-छिपी खेले बिना “मैं क्या कर सकता हूँ?” का जवाब मिल सके
    undo को बाद में जोड़ना मुश्किल होता है, इसलिए प्रयोग की कीमत घटाने के लिए उसे शुरुआत से ही बुनियाद में रखना चाहिए
    अफसोस कि mobile design ने इतना पूरी तरह कब्जा कर लिया है कि चाहे app लगभग पूरी तरह desktop पर इस्तेमाल होने वाला हो और अंदर desktop design का पक्ष लेने वाला कोई हो, UI designer फिर भी hamburger, pictograms और टूटा हुआ undo चुनता है
    ऊपर से modals भी जोरदार वापसी कर चुके हैं, लेकिन blood pressure की वजह से मुझे यहीं रुकना होगा

    • pictogram icons के लिए कोई बहाना नहीं है, ऐसा मुझे लगता है
      moto e4 जैसा 5 साल पुराना सस्ता phone भी 1280x720 screen वाला है, और icons पर labels लगाने के लिए pixels पर्याप्त हैं
      pictogram icons करीब-करीब ऐसे design हैं जैसे “हम users से नफरत करते हैं और चाहते हैं कि उन्हें यह पता चले”
      options की संख्या देखें तो hamburger menu भी कई मामलों में हटाया जा सकता है
      Gmail app भी icons को horizontal bar में रख सकता है, फिर भी hamburger इस्तेमाल करता है, और जगह की इतनी चिंता है कहने के बावजूद chat, video और Spaces के लिए bottom bar फिर भी डाल रखा है
    • मैंने अपनी website का top navigation bar ऐसा बनाया है कि अगर content horizontal रूप से fit न हो तो वह scroll हो: https://www.winstoncooke.com/
      थोड़ी चिंता है कि users को शायद यह पता न चले कि आगे scroll करने के options हैं, लेकिन मैं इसे ऐसे hamburger menu से बेहतर मानता हूँ जो खुलते ही content को ढक देता है
      क्योंकि सभी options और उनके शब्द दिख जाते हैं
      desktop पर ऐसे treatment की जरूरत नहीं होती
    • मैं सहमत हूँ कि pictogram icons discoverability घटाते हैं
      हालांकि मुझे लगता है कि designers इन्हें इसलिए पसंद करते हैं क्योंकि कई भाषाओं में consistent design बनाए रखना आसान होता है
      उदाहरण के लिए German localization fit कराना मुश्किल हो सकता है
    • “pictogram” शब्द इसे सचमुच बहुत अच्छे से समेटता है
      इसमें मैं छिपे हुए context-dependent options भी जोड़ना चाहूँगा
      जब कोई option उपलब्ध न हो तो disabled, यानी greyed-out option कम से कम यह संभावना तो दिखाता है कि सही conditions में कुछ किया जा सकता है
      लेकिन modern design ऐसे options को छिपा देता है, और अगर आपको उन्हें दिखाने वाली जादुई condition न पता हो तो आप उन्हें कभी नहीं देख पाएँगे
      Ubiquiti का Unifi इसका उदाहरण है
      switch ports manage करने वाले page पर “Select All” option नहीं है; पहले आपको एक या अधिक ports select करने पड़ते हैं, तब वह option जादू की तरह प्रकट होता है
      वह सिर्फ छिपा हुआ ही नहीं, उसका context भी गलत है
      अगर वह disabled checkbox के रूप में होता, तो जब कोई port selected न हो तब “Select All” checkbox का disabled होना साफ तौर पर बेवकूफी है, यह सभी तुरंत समझ जाते
    • ऐसे तर्कों के सबसे बड़े विरोधी नए users हैं, ऐसा मुझे लगता है
      screen पर बहुत ज्यादा चीजें हों तो वे आसानी से घबरा जाते हैं, और focus groups पर हावी रहने वाले लोग यही होते हैं
      इसलिए लगता है designers इस एक भयानक rule में बंध गए हैं

  • यह study practical तौर पर समझ नहीं आती
    वे pages न्यूनतम जगह में अधिकतम जानकारी देने के लिए design नहीं किए गए थे, बल्कि product बेचने के लिए design किए गए थे
    अगर content dispersion के कारण negative impact होने का दावा करना है, तो उसे उस उद्देश्य के आधार पर मापना चाहिए जिसके लिए page design किया गया था
    यहाँ explicitly e-commerce और product pages का अध्ययन किया गया था, इसलिए relevant metrics यह हैं कि किस page ने product value का एहसास ज्यादा कराया, conversion rate ज्यादा था, NPS ज्यादा था, या brand affinity बेहतर बनाई
    portable speakers specs से नहीं बिकते, बल्कि beach पर इस्तेमाल की aspirational imagery से बिकते हैं
    product details accordion खोलकर रख दें और पूछें “इस page ने जो प्रस्ताव बताया, उसे आपने कितना अच्छी तरह समझा?”, तो जाहिर है survey score ज्यादा आएगा
    अगर denser page ने conversion बेहतर किया होता तो वह उल्टा हैरान करने वाली बात होती
    यह वैसा ही है जैसे F1 race car की सख्त seat को खराब साबित करने के लिए study design करना, उस पर खूब foam लगाना, फिर test करना कि कौन-सी ज्यादा comfortable है, और जबकि असली metric सिर्फ lap time है, comfort score ज्यादा होने पर उसे बेहतर घोषित कर देना

    • इस thread में देर से आया हूँ, लेकिन इससे सहमत हूँ
      लेख जिन design choices की आलोचना कर रहा है, वे mobile-first design का परिणाम नहीं हैं
      असल में responsive design आम होने से पहले, 2000s के late दौर की websites भी ऐसी ही दिखती थीं
      उदाहरण के लिए Apple: https://www.versionmuseum.com/history-of/apple-website
    • पूरा लेख पढ़ते समय मेरे मन में यही चल रहा था
      यह मूल रूप से marketing leaflet या billboard की information density की तुलना करके कहने जैसा है कि वे सब कुछ convey नहीं कर पाते, जबकि उनका उद्देश्य ही वही है
      ads specs table नहीं होते; वे देखने वाले में product की इच्छा जगाने के लिए होते हैं
    • “portable speakers specs से नहीं, बल्कि beach पर इस्तेमाल की aspirational imagery से बिकते हैं” वाला तरीका कुछ target groups पर काम कर सकता है
      लेकिन मेरे लिए यह उल्टा low-quality nonsense का बहुत मजबूत signal हो सकता है

  • कई websites window size बदलते ही UI को पूरी तरह बदल देती हैं
    कई बार मैं browser को monitor के आधे हिस्से में रखकर बगल में कुछ और रखना चाहता हूँ, लेकिन modern websites में window size घटाते ही UI unusable हो जाता है और यह अक्सर fail हो जाता है

    • यही “responsive design” का responsive हिस्सा है
      अगर अच्छा किया जाए तो शानदार है, लेकिन यह बात भी सही है कि कई websites बहुत aggressive तरीके से behave करती हैं, जैसे उन्होंने असल में सिर्फ दो size categories ही test की हों
    • देखना चाहूँगा कि कौन-से examples हैं
      क्या मतलब यह है कि view छोटा करने पर features और content तक access नहीं रह जाता?

  • मुझे वे websites पसंद नहीं हैं जो useful content को बीच की एक पतली column में डाल देती हैं
    इससे भी बुरी बात यह है कि जो websites पहले ठीक थीं, वे भी धीरे-धीरे खराब हो जाती हैं
    आम तौर पर ऐसा तब होता है जब कोई नया manager आता है और “mobile-first” vision के साथ product को “reimagine” करने की बात करता है
    हाल में Patreon इसका अच्छा example है
    और कुछ मामलों में तो ठीक-ठाक website पूरी तरह गायब हो जाती है और Venmo, Amazon Alexa, Chamberlain जैसे crapp से बदल दी जाती है

  • सच में अटपटी बात यह है कि hover के लिए कोई अच्छा touch alternative नहीं है
    mobile-first की ओर जाते हुए इसे छोड़ देना बहुत उपयोगी UX element को त्यागने जैसा है
    बाकी चीज़ों के लिए मामला “इतना मुश्किल नहीं है” के ज़्यादा करीब है
    जिन समस्याओं को हल करना होता है, उनमें कई screen sizes पर ठीक-ठाक दिखाना समय और complexity के लिहाज़ से काफ़ी नीचे आता है

    • touchscreen पर मुझे लगता है कि long press, hover और right-click दोनों को संभाल लेता है
      कम से कम mobile Firefox में image alt text देखने के लिए मैं यही इस्तेमाल करता हूँ
      असली hover detection शायद संभव हो, लेकिन stylus इस्तेमाल न करने पर UX शायद अच्छा नहीं होगा
    • Xperia Sola में touchscreen से hover जैसा effect संभव था

  • एक web designer के तौर पर मैं थोड़ा असहमत हूँ
    लेख में दिए गए उदाहरणों में प्रति screen simple content ज़्यादा बेहतर काम करता है
    visually समझना आसान है, और compressed version में कई multi-column layouts हैं जिन्हें मैं व्यक्तिगत तौर पर पसंद नहीं करता
    high content density desktop applications के लिए ठीक है, लेकिन जो मूल रूप से brochure website हैं, उनके लिए नहीं

    • फिर भी लेख की दिलचस्प बात यह है कि यह वास्तविक usability research पर आधारित है
      अच्छा है कि यह सिर्फ़ किसी की निजी राय नहीं है
    • सहमत हूँ
      यह मानना मुश्किल है कि marketing pages दशकों के evolution और testing के बाद भी उस चीज़ तक नहीं पहुँचे जो users सच में चाहते हैं, न कि वे जो कहते हैं कि वे चाहते हैं
      internet natives के लिए scrolling बहुत natural behavior है
      बड़े screen का उपयोग करके visually compare करना भी उपयोगी है, लेकिन लेख के examples अच्छे नहीं हैं
      यह कहता है, “एक ही जानकारी को 2x2 grid में रखकर कई services की एक साथ तुलना कराई,” लेकिन समझ नहीं आता कि compare क्या करना है
      वे अलग-अलग services हैं
      product specifications वाला example मुझे पसंद है, लेकिन वह ज़्यादा जानकारी देखने के लिए ज़्यादा clicks मांगने वाली objective usability problem के ज़्यादा करीब है
    • एक और web designer के रूप में सहमत हूँ
      यह देखना चाहिए कि screenshots “scaled down” हैं, इसलिए multi-column arrangement समृद्ध और visually ज़्यादा आकर्षक दिखता है
      horizontal space का उपयोग करने के पक्ष में मैं पूरी तरह हूँ, लेकिन call-to-action buttons के बारे में हमने जो सीखा है, वह single-element design की ओर ले जाता है
    • असल में लेख के title से कुछ हद तक सहमत हूँ, लेकिन examples अच्छे नहीं हैं

  • brochure sites या e-commerce sites की तुलना में, productivity sites और tool interfaces का mobile-first design ज़्यादा चिढ़ाने वाला है
    ऐसे tools को आम तौर पर phone से कौन access करता है

    • हाल ही में मुझे mobile-only identity check app इस्तेमाल करने की बदकिस्मती झेलनी पड़ी
      पिछले employers और residences के नाम और addresses mobile keyboard से enter करना भी दर्दनाक था, लेकिन date input उससे भी बदतर था
      date picker current month और year से शुरू होकर केवल एक-एक महीने scroll करता था, इसलिए जन्मतिथि डालने के लिए करीब 550 taps करने पड़ते
      इससे older workers जैसे protected class पर disproportionate असर पड़ता है, इसलिए EEOC में report करने का मन हुआ, लेकिन नए employer के HR से अपना परिचय कराने का यह अच्छा तरीका नहीं था
    • कुछ लोग ऐसे भी होते हैं जिन्हें इस्तेमाल करने के लिए बहुत zoom करना पड़ता है
      असल में यह small-screen view जैसा हो जाता है, और यह WCAG requirement है