1 पॉइंट द्वारा GN⁺ 2024-02-21 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Firefox v89 का Proton UI 2021 में लॉन्च होने के बाद tabs, spacing और icons को लेकर विवाद का कारण बना, और Firefox-UI-Fix इसे बेहतर बनाने वाली theme है जिसे Waterfox और Floorp की default theme में भी अपनाया गया है
  • design decisions, A/B testing की बजाय Jakob’s Law, Gestalt psychology, Fitts’s Law, और Nielsen Norman Group के research जैसे UX सिद्धांतों और उदाहरणों पर आधारित हैं
  • button जैसे दिखने वाले tabs, चौड़ा padding, और text-केंद्रित menus, selected state की पहचान, click efficiency, छोटे screens पर content visibility, और accessibility को कमजोर कर सकते हैं
  • Lepton Theme 36px~240px के भीतर tab state को लगातार एक जैसा दिखाता है, और close button, icon, padding, theme colors, और OS-वार title bar space को समायोजित करता है
  • लक्ष्य Proton UI को नकारना नहीं, बल्कि Proton UI का सम्मान करते हुए उसे बेहतर बनाना है, और CSS की सीमाओं के कारण page action button behavior जैसे कुछ हिस्से अब भी लागू करना कठिन हैं

Firefox v89 के बाद का UI विवाद और प्रोजेक्ट का दायरा

  • यह दस्तावेज़ Firefox v89 आधारित UI पर केंद्रित है, इस मान्यता के साथ कि उसके बाद कुछ सुधार हुए हैं
  • 2021 में Firefox v89 रिलीज़ होने के बाद Proton UI को लेकर Reddit और Hacker News पर बड़ा विवाद हुआ
  • Firefox-UI-Fix repository ने Proton UI की कई समस्याओं को सुधारते हुए तेज़ी से लोकप्रियता हासिल की, और Waterfox तथा Floorp भी इस theme को default के रूप में इस्तेमाल करते हैं
  • Mozilla ने Windows 7 और Windows 8 support समाप्त करने का निर्णय लिया, और Firefox v115 legacy Windows को support करने वाला आख़िरी version है
    • Firefox v115 को सितंबर 2024 तक उपलब्ध कराया जाना था
    • Mozilla और प्रोजेक्ट, दोनों को legacy Windows से जुड़ा code और features साफ़ करने थे, और यह दस्तावेज़ legacy Windows UI को भी साथ में कवर करता है

UI/UX का आकलन करने के मानदंड

  • design criteria को मोटे तौर पर तीन भागों में बाँटा गया है: सहजता, दक्षता, और लचीलापन
  • A/B testing के लिए ज़रूरी data या environment उपलब्ध नहीं है, इसलिए user behavior का अनुमान लगाकर और कई सिद्धांतों का उपयोग करके निष्कर्ष निकाले गए हैं
  • सहजता

    • Simplicity: गैर-ज़रूरी elements हटाकर या सरल बनाकर cognitive load कम करना
    • Visibility: मुख्य functions को स्पष्ट रूप से दिखाना ताकि उन्हें इस्तेमाल करना आसान हो
    • Accustomably: जल्दी अनुकूलन हो सके, इसके लिए सीखने का बोझ कम करना
    • Consistency: exceptions कम करके चीज़ों को याद रखना आसान बनाना
    • Predictability: user को यह महसूस कराना कि चीज़ें उसके नियंत्रण में हैं, ताकि असहजता कम हो
    • Affordance: किस तरह interaction करना है, इसके संकेत देना
  • दक्षता

    • Clearly: अंतर स्पष्ट रूप से पहचान में आना चाहिए
    • Proximal: इतनी नज़दीक होना चाहिए कि तेज़ी से पहुँचा जा सके
    • Bulky: बड़ा आकार पहचानने या पहुँचने को आसान बनाता है
    • Snappy: प्रतिक्रिया smooth और बिना रुकावट के होनी चाहिए
  • लचीलापन

    • Accessibility: उम्र, disability आदि से परे व्यापक उपयोगकर्ताओं को समायोजित करना
    • Functional: ज़रूरतों को पूरा करने के लिए विभिन्न functions स्वीकार करना
    • Contextual: हर स्थिति में स्वाभाविक रूप से मौजूद होना
    • Harmonious: हर element के साथ स्वाभाविक रूप से मेल खाना
    • Pleasure: आनंद या रचनात्मकता के लिए संतुष्टि देना
    • Compatibility: lower-version API, higher-version roadmap, upstream, OS, RTL आदि को ध्यान में रखना

Proton UI में देखी गई तीन समस्याएँ

  • Firefox v89 Developer Edition का पहला impression साफ़-सुथरा था, लेकिन वास्तविक उपयोग में इसे काफ़ी असुविधाजनक माना गया
  • मुख्य समस्याएँ तीन बिंदुओं में सिमटती हैं
    • Tab: tabs button की तरह दिखते हैं
    • Padding: spacing बहुत ज़्यादा है
    • Icons: केवल icons के सहारे पढ़ना कठिन है, या icons हटाने से दूसरी समस्याएँ पैदा होती हैं

button जैसे दिखने वाले tabs की समस्या

  • परिचितता और बदलाव के बीच संतुलन

    • Jakob’s Law के अनुसार users उम्मीद करते हैं कि नया app भी उसी UX की तरह काम करे जिससे वे पहले से परिचित हैं
    • Firefox का नया tab UI इस अपेक्षा से अलग जाता है, इसलिए इसे अपनाना कठिन लग सकता है
    • लेकिन सिर्फ़ अपरिचित होने के कारण UI बदलावों को रोकना प्रगति में बाधा डाल सकता है और केवल trends का पीछा करने तक सीमित कर सकता है
    • तेज़ follower बना जा सकता है, लेकिन innovation को रोकने से बचना चाहिए
  • Gestalt psychology के नज़रिए से tab की पहचान

    • Gestalt psychology का उपयोग यह समझाने के लिए किया गया है कि tabs अलग group जैसे क्यों महसूस होते हैं
    • Law of Proximity: tabs toolbar से दूर हैं, इसलिए वे अलग group जैसे लगते हैं
    • Law of Similarity: tabs का रंग toolbar से अलग है, इसलिए वे अलग group जैसे दिखते हैं
  • Safari ने वापस लिया button-style tab

अतिरिक्त whitespace और icon हटाना

  • whitespace और content visibility

    • वेब ब्राउज़र वेब content viewer है, इसलिए उसे content दिखाने में बाधा नहीं बनना चाहिए
    • Proton UI में बहुत अधिक padding होने के कारण content display के मामले में नुकसान होता है
    • 13-inch laptop जैसे छोटे स्क्रीन वाले devices पर यह समस्या गंभीर हो जाती है
  • Fitts’s Law के नज़रिये से click efficiency

    • Fitts’s Law के अनुसार किसी target area तक तेज़ी से पहुँचने में लगने वाला समय target तक की दूरी और target की चौड़ाई के अनुपात पर निर्भर करता है
    • मुख्य formula MT = a + b · ID = a + b · log₂(2D/W) है
    • MT औसत movement completion time है, a और b input device के चयन पर निर्भर constants हैं, और ID difficulty index है
    • D starting point से target center तक की दूरी है, और W movement axis के along मापी गई target width है
    • constants और logarithm को छोड़ दें तो 2D/W अनुपात महत्वपूर्ण है
    • पहले दूरी कम करनी चाहिए, और चौड़ाई अधिकतम रखनी चाहिए, लेकिन दूरी बढ़े बिना
    • बची हुई जगह भरकर padding को बहुत बड़ा होने से भी रोकना चाहिए
    • Photon(v88) को Amazon icon और menu में ज़्यादा आसान clickable UI के रूप में आंका गया है
      • Amazon icon का W बड़ा है
      • menu में W थोड़ा छोटा है, लेकिन D बहुत कम है
    • अगर icon वास्तविक click area से छोटा दिखे तो नुकसान होता है, इसलिए padding area भरकर icon को बड़ा दिखाना बेहतर है
  • Compact UI के अंतर का लगभग खत्म हो जाना

    • Mozilla ने compact UI को deprecated कर दिया है
    • v89 का Compact UI, Normal UI, Touch UI केवल tab bar और toolbar height में थोड़ा अलग है, इसलिए इनके बीच का अंतर लगभग अर्थहीन माना गया है
  • text-only UI और accessibility

Lepton Theme का tab redesign

  • tab states को एकसमान तरीके से दिखाना

    • tab design सिर्फ़ appearance का नहीं, बल्कि कई states को handle करने का भी सवाल है
    • tab में निम्नलिखित states हो सकती हैं
      • Selected, Multiple Selected, Hover, Text overflow, Tab overflow, Reaching tab resizing
      • Sound & Muted, Autoplay Block, PIP, Pinned, Container, No favicon
      • Changed title, Loading, Unloaded, Crashed, Shared, Theme, UI Density आदि
    • इन states को 36px~240px के भीतर एकसमान तरीके से दिखाया जाना चाहिए
  • Photon, Proton, Lepton में selected state की तुलना

    • Photon और Lepton में selected tab toolbar से जुड़ा हुआ दिखता है, इसलिए उसे पहचानना आसान है
    • Lepton visual overload कम करने के लिए background tab के container indication को छोटा रखता है
    • Proton में highlighted background color और top bar के बीच यह पहचानना मुश्किल है कि कौन-सा tab selected है
    • top bar container tab indicator है, लेकिन यह पुराने Photon UI के selected tab जैसा महसूस होता है
    • Selected, Multiple selected, Hovered, General state comparison को इस तरह संक्षेप में बताया गया है
      • Photon toolbar connection से Selected को पहचानता है, और top context line color से Multiple selected और Hovered को अलग करता है
      • Proton में Selected और Multiple selected लगभग एक जैसे दिखते हैं
      • Lepton toolbar connection और अलग-अलग background colors से states को अलग करता है
  • mute, PIP, pinned tab जैसी composite states

    • Muted, Hover, PIP combination में browsers के बीच बड़ा अंतर है
      • Photon में Muted और Muted + Hover अलग नहीं दिखते, और PIP indicator होने पर Muted की position काफ़ी बदल जाती है
      • Proton English में Muted केवल text के रूप में दिखता है, और PIP का पता केवल hover state में चलता है
      • Proton Korean में display language के अनुसार UI बदल जाता है, Muted favicon को छिपा देता है, और PIP indicator नहीं मिल पाता
      • Lepton सभी information दिखाता है, Muted और PIP की position स्थिर रखता है, और hover पर यह संकेत देता है कि control किया जा सकता है
    • अधिक जटिल combinations में Proton को Korean environment में लगभग उपयोग करना मुश्किल माना गया
    • Lepton composite states को निम्न तरीके से संभालता है
      • हमेशा सारी information दिखाता है
      • favicon न होने पर Muted का आकार बढ़ाकर उसका विकल्प देता है
      • Pinned state में भी position हमेशा एक जैसी रखता है
      • Container और Titlechanged की तरह जब positions overlap हों तो उन्हें जोड़कर दिखाता है
  • tab width के अनुसार space usage

    • Lepton tab width के अनुसार behavior को adjust करता है
    • width पर्याप्त होने पर यह Proton की तरह सभी close buttons दिखाता है
    • जब tabs पूरी तरह भर जाएँ और width कम हो, तो background tabs के close buttons छिपा देता है
    • accidental clicks कम करने के लिए close button का size घटाता है, लेकिन background tab पर hover करने पर उसे फिर भी बंद किया जा सकता है
    • tab title padding और gradient को adjust करके ज़्यादा efficient दिखाया जाता है
    • आख़िरी tab में New text दिखाई दे, इसके लिए space बचाई जाती है
    • width कम होने पर ही adjustment किया जाता है ताकि wiki शब्द स्पष्ट दिखें
    • Lepton ज़्यादा web content दिखाता है, और Photon तथा Lepton में tab separators होते हैं
  • distribution form और preference

    • अच्छे UI का मानदंड व्यक्ति-दर-व्यक्ति बदलता है और कुछ हद तक यह पसंद का मामला है
    • तीन तरह के tab concepts दिए जाते हैं
      • Proton के अनुरूप सामान्य Lepton tab
      • सीधी context line वाले Photon tab
      • मूल Proton tab
    • यह theme खास तौर पर Photon tab UI support के लिए जाना जाता है

icon और padding adjustment

  • panel और context menu

    • icon जोड़ने और padding adjust करने से पुरानी शिकायतें कम की गईं
    • unbalanced strokes issue को contributor @zapSNH ने ठीक किया, जिससे browser भर में एकसमान और पहचानने योग्य icon set मिल गया
  • Edge, Chrome, Lepton menu comparison

    • Edge में बिना किसी खास वजह के ऐसे menu हैं जिनमें icon खाली हैं, और कुल मिलाकर icons इतने मिलते-जुलते हैं कि उन्हें जल्दी स्कैन करना मुश्किल है
    • New InPrivate window जैसे कुछ Edge icon metaphors को भ्रामक माना गया है
    • Chrome के icons style के हिसाब से modern नहीं लगते, rounded UI की तुलना में ज़्यादा angular हैं, और text size के मुकाबले बहुत छोटे दिखते हैं
    • Lepton modern style और उचित size वाले एकसमान icon set देता है
    • केवल महत्वपूर्ण icons पर filled icons इस्तेमाल करके scannability बढ़ाई जाती है, और ऐसे metaphors का उपयोग किया जाता है जो appearance को अलग पहचान दें
  • context menu और shortcut group

    • Edge में Add all tabs to favorites पर icon क्यों नहीं है, यह समझ से बाहर माना गया है
    • Chrome में context menu icons बिल्कुल नहीं हैं
    • Lepton icons को इस तरह रखता है कि वे साफ़ तौर पर अलग दिखें
    • web page context menu में केवल Firefox ऊपर shortcut group देता है, जिससे pie menu जैसा तेज़ access effect मिलता है
  • और अधिक icons का उपयोग

    • global menu और विभिन्न panels में icons जोड़े गए
    • bookmark library folder खुलने पर menu icons भी प्रतिक्रिया देते हैं
    • menu और panel का size कम हो जाता है, और text की शुरुआत की position align हो जाती है
    • अलग-अलग layout cases के अनुसार icons जोड़े गए

OS, थीम, रंग समर्थन

  • सिस्टम डिफ़ॉल्ट थीम

    • Lepton अलग-अलग OS और सेटिंग्स के अनुसार UI को समायोजित करता है
      • Windows 7: Aero विंडो डिज़ाइन के काफ़ी करीब रहता है
      • Windows 8.1: शीर्षक पट्टी को Windows 7 की तरह अच्छी तरह मेल खाने देता है
      • Windows 10 Light: Windows 10 के Legacy Edge रंगों का अनुसरण करता है
      • Windows 10 Dark: वही मानक लागू करता है
      • Windows 10 Dark + Accent titlebar: अगर शीर्षक पट्टी accent color सेटिंग चालू हो, तो उसी का अनुसरण करता है
      • MacOS Light/Dark: Mac के रंगों का अनुसरण करता है
    • Windows 11 उपयोगकर्ता userChrome.compatibility.os.win11 विकल्प से Edge जैसे Windows 11 रंगों का उपयोग कर सकते हैं
    • Linux पर भी काम करता है, और रंग संबंधी समस्याएँ तथा non-native titlebar button समस्याएँ ठीक करता है
  • शीर्षक पट्टी बटन स्पेस

    • Tabs on bottom या One Liner जैसे मामलों में toolbar के अंदर titlebar button के लिए जगह सुरक्षित करनी पड़ती है
    • OS के अनुसार मान और स्थिति अलग होती है
      • Win7, Win8: 105px, दाईं ओर
      • Win10: 138px, दाईं ओर
      • Mac: 72px, बाईं ओर
      • Linux: 84px, लेकिन सिस्टम थीम के अनुसार बदल सकता है
    • फुल स्क्रीन में native UI इस्तेमाल होता है, इसलिए इसे 0px मानना चाहिए
    • बायाँ और दायाँ दोनों संभव हैं, और बटन तीन हों यह ज़रूरी नहीं है
  • Proton थीम सुधार

    • Proton थीम की अपनी कम color contrast से पैदा हुई accessibility समस्याओं को ठीक करता है
    • bundled themes के color contrast और outline shadow को बेहतर बनाता है
    • जहाँ Proton थीम लागू नहीं थी, वहाँ भी लागू करके उसे अधिक एकसमान बनाता है
    • जहाँ dark mode लागू नहीं था, वहाँ भी dark mode लागू करता है
    • डिफ़ॉल्ट थीम के बजाय custom theme इस्तेमाल करने पर भी रंग सही तरह लागू हों, यह सुनिश्चित करता है
    • टेबल और सूची में पढ़ने में आसानी के लिए सम पंक्तियों पर अलग background color जोड़ता है
    • audio player पर Proton डिज़ाइन के अनुरूप rounded border लागू करता है
    • video player में कंटेंट को बेहतर दिखाता है और आइकनों को भी अधिक साफ़-सुथरा बनाता है

इंटरैक्शन और एनीमेशन

  • सहायक इंटरैक्शन

    • hover के समय mouse pointer या element बदलने से यह संकेत मिलता है कि कुछ हो रहा है
    • panel के zoom command जैसे, स्वभाव में अलग और छोटे दिखने वाले elements पर mouse pointer बदलना मददगार होता है
    • field पर mouse आने पर border दिखे, तो यह सहज रूप से पता चलता है कि उसे क्लिक किया जा सकता है
    • सक्रिय आइटम के टेक्स्ट में accent color का उपयोग करता है
    • हटाए गए आइटम को disabled जैसा दिखाने के लिए icon को grayscale करता है और शीर्षक पर strikethrough लगाता है, लेकिन hover करने पर बिना strikethrough वाला शीर्षक दिखता है
  • एनीमेशन डिज़ाइन

    • एनीमेशन UI को अधिक smooth और natural बनाते हैं, लेकिन कभी-कभी इससे क्रिया धीमी महसूस हो सकती है
    • डिज़ाइन के मानदंड इस प्रकार हैं
      • Photon ki easing curve का अनुसरण करते हुए शुरुआत में तेज़ acceleration और अंत में smooth deceleration देता है
      • शुरुआती एनीमेशन की अवधि कम करके तेज़ प्रतिक्रिया का एहसास देता है
      • समाप्ति एनीमेशन की अवधि बढ़ाकर उसे smooth महसूस कराता है
      • बड़े ऑब्जेक्ट्स की अवधि छोटे ऑब्जेक्ट्स से लंबी होती है
      • nested ऑब्जेक्ट्स के भीतर की अवधि भी लंबी होनी चाहिए
    • background color, arrow rotation, container tabs, sound और pinned tabs, sidebar पर भी यही सिद्धांत लागू करता है
    • डिफ़ॉल्ट नहीं होने वाले वैकल्पिक फीचर्स पर भी यही सिद्धांत लागू करता है
      • Autohide Back Button
      • Autohide Page Action
      • Autohide Tab Bar
  • इलस्ट्रेशन पुनर्स्थापना

    • Photon ki dostana illustration के बारे में माना जाता है कि उसने error स्थितियों में होने वाली असहजता कम की थी
    • यह थीम उन इलस्ट्रेशन को फिर से बहाल करती है
    • लागू होने के उदाहरण हैं Welcome back, DNS error, Session restore, Search result स्क्रीन

निष्कर्ष और सीमाएँ

  • यह थीम परंपरा, मनोविज्ञान, शोध परिणामों को ध्यान में रखती है और मौजूदा थीमों की खूबियों को आगे बढ़ाती है
  • यह OS, dark mode, custom theme, और संदर्भ-अनुरूप इंटरैक्शन का समर्थन करती है
  • CSS की सीमाओं के कारण page action button behavior जैसी कुछ चीज़ें लागू नहीं की जा सकतीं
  • लक्ष्य है "🦊 I respect proton UI and aim to improve it."

1 टिप्पणियां

 
GN⁺ 2024-02-21
Hacker News टिप्पणियां
  • नए UI में सबसे असुविधाजनक बात यह थी कि सभी elements बहुत बड़े हो गए थे
    अगर यह उंगली से दबाने वाली मोबाइल स्क्रीन होती तो समझ आता, लेकिन सामान्य desktop size पर यह काफी जगह बर्बाद करता है
    लेख में बताई गई padding बढ़ना भी एक वजह है, लेकिन compact UI density option हटाना भी बड़ा कारण है
    about:config में browser.compactmode.show को on करने के बाद, menu > More tools > Customize toolbar > नीचे “density” पर जाएं तो इसे फिर से इस्तेमाल किया जा सकता है
    option पर “not supported” लिखा है, लेकिन यह कई सालों से ऐसा ही है

    • मुझे interface में भरपूर padding होना कहीं ज्यादा पसंद है
      पर्याप्त padding होने पर visual noise और complexity कम होती है, और elements को सांस लेने की जगह मिलती है
      हो सकता है कोई ठोस practical benefit न हो, लेकिन देखने भर से बेचैनी कम लगती है
    • एक तरफ वे लोग हैं जो कहते हैं “padding से जगह बर्बाद मत करो”, और जब भी KDE की बात आती है तो कुछ लोग कहते हैं “padding के बिना information और text इतना ठूंस दिया गया है कि पढ़ना मुश्किल है”
      करो तो भी बुराई, न करो तो भी बुराई वाली स्थिति है
    • उत्सुकता है कि क्या किसी को background पता है कि इसे “not supported” क्यों दिखाया जाता है
    • यही मेरी समस्या थी, आज उस flag को एक बार आजमाकर देखूंगा
    • “not supported” उन लोगों के प्रति चिढ़ जैसा लगा जिन्होंने “modern” design choice की आलोचना की थी
  • मैं Firefox के popular theme Lepton का author हूं
    मेरे नजरिए से देखा जा सकता है कि मैंने कई decisions कैसे लिए और Mozilla के निराशाजनक decisions को कैसे सुधारा
    इसलिए यह समझा सकता है कि इसे कैसे बेहतर बनाया गया और यह popular क्यों हुआ
    यह लेख एक series का हिस्सा है

    • https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
    • जानना चाहता हूं कि Lepton कहां मिल सकता है
      add-ons store के themes में उस नाम से कुछ नहीं दिखता
      शायद Lepton पुराना Firefox UI है, इसलिए सिर्फ पुराने releases में ही बचा हो, यह भी हो सकता है
      लेख तो पढ़ा, लेकिन हो सकता है कुछ छूट गया हो
    • आम तौर पर मैं UI को ज्यादा customize नहीं करता और बस defaults की आदत डालने की कोशिश करता हूं
      क्योंकि friction कम होता है, और install करते ही default settings के साथ adapt हो पाना अच्छा लगता है
      लेकिन Firefox UI customization set up करने में आसान और quality में भी अच्छा है, इसलिए यह exception बन गया
      इसका maintained महसूस होना भी एक महत्वपूर्ण फायदा है
      पता नहीं था कि आपने इतने लंबे समय से लिखा है; यह दिलचस्प और अच्छी तरह documented लगता है, इसलिए पढ़ने का सोच रहा हूं
    • यह खास तौर पर दिलचस्प है कि telemetry का इस्तेमाल interface items हटाने को justify करने के लिए किया जाता है
      निजी तौर पर address bar इतना बड़ा लगता है कि उसमें 10 buttons डालने के बाद भी जगह बच जाएगी
      इसलिए, जब तक हटाने लायक कुछ और न बचे तब तक सब कुछ हटाते जाना चाहते हैं—इसके अलावा items हटाने की कोई खास वजह सोचना मुश्किल है
      लगता है आपको UI/UX की अच्छी समझ है, इसलिए एक सवाल है: मेरा एक theory है कि black-and-white icons colored icons से खराब होते हैं; क्या इस पर कोई related research या consensus है?
    • installation process बहुत आसान था
      बस सलाह दूंगा कि steps को पहले सरल तरीके से व्यवस्थित करें, और advanced section को पूरी तरह नीचे ले जाएं
      1. OS command line में script चलाएं  
      2. `about:support` पर जाकर startup cache clear करने पर click करें  
      
  • बेहतर browser UX, अगर जोर देकर कहें, तो vertical tabs से शुरू होता है
    horizontal tabs में सिर्फ 6–8 tabs खोलते ही उन्हें manage या track करना मुश्किल हो जाता है
    vertical nested tabs में नए tab में खुलने वाले links अपने-आप child tabs बन जाते हैं, और उनकी structure व context को horizontal tabs की तुलना में कहीं ज्यादा आसानी से समझा जा सकता है
    इसमें site-specific colors जोड़ दें तो tab groups भी बेहतर दिखते हैं, और tab tree को bookmark करके research या documentation work की progress भी save की जा सकती है
    CSS file और कुछ screenshots यहां हैं: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    nested और colored tabs का screenshot भी जोड़ना है, इसलिए comment post करने के बाद डालूंगा

    • मुझे vertical tabs पसंद हैं, और कई लंबे चलने वाले कामों के बीच switch करने वाले मेरे browsing style के लिए ये बड़ा फायदा हैं
      इस तरह के use case के लिए tabs bookmarks से बेहतर fit होते हैं, क्योंकि 2024 में भी सभी browsers के bookmark manager अपरिपक्व हैं और bookmarks organize करना बहुत खराब अनुभव है
      nested tabs मुझे बहुत आकर्षित नहीं करते, लेकिन Firefox extension Sidebery के “panes” या Arc के “spaces” की तरह tab sidebar में दिखने वाले tab groups को एक click में बदलने की सुविधा powerful है
      खासकर अगर panels/spaces को browser profiles से जोड़ दिया जाए तो और अच्छा होगा
      उदाहरण के लिए, एक ही browser window को सामान्य browsing, shopping, online university lectures और software development के लिए switch किया जा सकता है, और जरूरत हो तो किसी खास panel/space को temporarily नई window में अलग भी किया जा सकता है
    • taste का फर्क मानता हूं, लेकिन मैं बिल्कुल उलटा और उतनी ही मजबूती से मानता हूं
      horizontal tab bar में 6–8 से ज्यादा tabs खोलने पर manage और track करना मुश्किल होता है, यह सही है
      पिछले 6 महीनों से Arc इस्तेमाल किया है, और vertical tab bar में भी 6–8 tabs खुले हों तो manage और track करना उतना ही मुश्किल था
      आखिर में हर 4 घंटे में सब बंद करके नए सिरे से शुरू करना पड़ता है
      दोनों तरफ की जो arguments ज्यादा समझ आती हैं, वे दो हैं
      पहली, horizontal और vertical में tab bar कितने pixels घेरता है यह गिनें तो मैंने ऐसा practical vertical tab bar नहीं देखा जो horizontal से बराबर या कम pixels लेता हो
      दूसरी, monitors में लगभग हमेशा vertical की तुलना में horizontal pixels ज्यादा होते हैं, इसलिए यह argument भी है कि vertical tab bar monitor के aspect ratio का बेहतर उपयोग करता है
      16:9 या उससे ऊपर में यह सही लगता है, लेकिन MacBook में आम 16:10 पर निजी तौर पर यह कम सही लगता है
    • “विवादित” FF89 screenshot देखें तो सबसे बड़े बदलावों में से एक tabs को ज्यादा padding के साथ redesign करना लगता है
      लेकिन मैं top tab bar छिपाकर Firefox के साथ अच्छी तरह फिट होने वाला Tree Style Tab इस्तेमाल कर रहा था, इसलिए उस बदलाव पर भी ध्यान नहीं गया
      Firefox अपने-आप में मुझे खास पसंद नहीं है, लेकिन tab tree का UX benefit उन छोटी details से कहीं ज्यादा है जिनमें Chrome/Safari थोड़ा बेहतर हैं, इसलिए इस पर सोचता भी नहीं
      हालांकि developer tools की वजह से frontend work के लिए Chrome इस्तेमाल करता हूं
    • अपने ही comment पर reply करना HN etiquette के खिलाफ है या जानकारी को बेहतर structure करने का तरीका, पता नहीं :)
      Tree Style Tab options page के advanced section में live reload होने वाला user stylesheet area है
      browser restart किए बिना font choices test करने के लिए यह बहुत अच्छा है
      मैंने Apple के SF Pro condensed font का इस्तेमाल करने के लिए बदल दिया
      Iosevka Mono, जिसे मैं आम तौर पर लगभग हर जगह इस्तेमाल करता हूं, tab titles के लिए कहीं न कहीं ठीक नहीं बैठा
      CSS यह है:
      :root.sidebar tab-item.unread .label-content {  
      font-style: italic !important;  
      }
      
      :root.sidebar tab-item {  
      font-family: "SF Pro" !important;  
      font-stretch: condensed !important;  
      font-weight: 300 !important;  
      }
      
      :root.sidebar tab-item.active .label-content {  
      font-weight: 500 !important;  
      }  
      
      पिछले comment वाले same link में इस CSS result का screenshot जोड़ा है: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    • laptop पर vertical tabs खराब लगने लगते हैं
      Firefox में auto-hide sidebar hack टूट गया और उसे ठीक करना झंझट लगा, इसलिए अब tabs 100-100 खुले भी नहीं हैं फिर भी कई inches की grey empty space बन जाती है
      आम तौर पर सिर्फ 5–10 ही खुले रखता हूं
      ज्यादा irritate करने वाली बात यह है कि आजकल कई websites mobile/desktop का फैसला user agent से नहीं, बल्कि browser viewport size से करती हैं
      tree style tabs की वजह से पहले ही horizontal width में 1 inch खो चुका हूं, इसलिए site के iPad समझने से पहले घटाने लायक width बहुत कम बचती है
      इसलिए practically browser को fullscreen में ही इस्तेमाल करना पड़ता है, वरना खराब text wrapping वाले ढेरों hamburger menus आ जाते हैं और navigation और बदतर हो जाता है
      ज्यादातर समय sidebar पूरी तरह बंद करनी पड़ती है, जिससे tabs बदलते समय कुछ extra clicks बढ़ जाते हैं
  • यह post शायद यह समझाने की कोशिश करती है कि theme author ने UX rules के आधार पर objectively बेहतर Firefox theme बनाई है, लेकिन ज्यादातर बदलाव personal preference लगते हैं
    यह साफ है कि इसे अच्छी तरह बनाया और maintain किया गया है, लेकिन निजी तौर पर यह visually बहुत appealing नहीं लगता और कुछ हिस्से ज्यादा complex दिखते हैं
    हर व्यक्ति की preference अलग होती है, और Firefox ने एक design चुना है लेकिन ऐसे बदलावों को support भी करता है, इसलिए यह अपने-आप में अच्छी बात है
    लेकिन author जिस तरह अपनी preference को empirically सही साबित करने की कोशिश करता दिखता है, वह थोड़ा मजाकिया लगता है

    • UI निश्चित रूप से taste का मामला है, इसलिए distribution को तीन रूपों में बनाया गया
      लेकिन muted होने पर loading में है या नहीं इसका कोई indication न होना, या tab separator न होना, confusion पैदा करता था
  • Firefox ने tabs खराब कर दिए, उसके बाद से उसे default browser के रूप में इस्तेमाल करना छोड़ दिया
    कभी-कभी test के लिए खोलकर देखता/देखती हूँ, और अगर वे अब भी tabs नहीं बल्कि buttons जैसे दिखते हैं, तो मन में लिख लेता/लेती हूँ कि करीब आधे साल बाद फिर कोशिश करेंगे
    light theme में तो यह खास तौर पर अपमानजनक लगता है, क्योंकि हल्के grey पर सफेद buttons हैं
    Windows system theme settings का भी ठीक से पालन नहीं करता
    Windows में apps light theme बनाए रख सकते हैं, जबकि taskbar, Start menu और title bar पर रंग लागू हो सकता है; Edge इसे समझता है, और Chrome भले न समझे, contrast तो पर्याप्त रहता है
    Firefox पूरी तरह चूक जाता है

    • मैं Firefox को secondary browser के रूप में इस्तेमाल करता/करती हूँ, लेकिन हर बार चालू करते ही यह पहले बाधा डालता है और बीच में आकर बताता है कि पिछली बार के बाद Pocket, VPN जैसी कौन-सी नई changes और features जोड़ी गई हैं
      कृपया बस बंद करो, और मुझे वह browsing शुरू करने दो जिसके लिए मैं आया/आई हूँ
      updates के बीच Office 365 और Game Pass ठूंसने वाले Microsoft के dark patterns की नकल न करे तो अच्छा होगा
      ऐसे feature ads उन लोगों को दिखाओ जिन्होंने अभी Firefox install नहीं किया है; मैं तो पहले से “customer” हूँ, इसलिए मुझे परेशान मत करो
      इसलिए मैं ज़्यादातर Chrome इस्तेमाल करता/करती हूँ
      वह भले ही ज़्यादा inferior हो और मेरी निगरानी कर सकता हो, लेकिन कम-से-कम मेरे रास्ते में तो नहीं आता
    • Sidebery[1] install कर के default tabs छिपा दें[2]
      यही रास्ता है :)
      [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
      [2] https://superuser.com/a/1424494
  • सोचता/सोचती हूँ कि क्या कोई और भी है जिसे tabs का “buttons जैसा दिखना” बिल्कुल परेशान नहीं करता
    कभी-कभी लगता है कि शायद बस मैं ही ऐसा/ऐसी हूँ
    पता नहीं पहली बार इस्तेमाल करने वालों को यह सच में इतना खटकता है या नहीं

    • मैं Firefox रोज़ इस्तेमाल करता/करती हूँ, लेकिन मुझे पता भी नहीं था कि इसे “समस्या” माना जाता है
      इन comments को देखने से पहले मैंने कभी इस बारे में सोचा तक नहीं था, और tab bar जैसी है वैसी ही पूरी तरह usable लगती है, इसलिए शायद अब भी दोबारा नहीं सोचूँगा/सोचूँगी
    • tabs का buttons जैसा दिखना अपने आप में मुझे खास परेशान नहीं करता
      बल्कि यह tab shape का एक आम alternative है, और जहाँ तक मुझे पता है Windows 95 के tab control में भी tabs को buttons जैसा दिखाने वाला mode था
      लगता है मूल taskbar में भी यही इस्तेमाल हुआ था, और 90s से mIRC में channel/window switching के लिए भी
      लेकिन इस खास “tab button” का look मुझे व्यक्तिगत रूप से पसंद नहीं है
      यह लंबी pill जैसा लगता है, जैसे निगलना मुश्किल हो, और मैं पुराने tabs जैसे दिखने का आदी/आदी हूँ, इसलिए बेवजह बदलने की वजह नहीं दिखती
      सौभाग्य से Firefox में appearance customize किया जा सकता है, इसलिए userChrome.css से इसे अपनी पसंद के हिसाब से बदलकर इस्तेमाल करता/करती हूँ
    • Firefox के उपयोग पर इसका असर नहीं पड़ता
      लेकिन यह बिना किसी कारण की gaps डालकर pixels बर्बाद कर रहा है
      इस point तक आते-आते हम बेतुके UI decisions के इतने आदी हो चुके हैं कि organizations जो देती हैं, उसी के साथ बस चल पड़ते हैं
      consistency या easy discoverability में दिलचस्पी रखने वाली जगहें लगभग दिखती ही नहीं
    • tabs वाली दूसरी चीज़ों, जैसे सिर्फ browsers नहीं बल्कि file managers या editors से भी यह काफी अलग है, इसलिए खटकता है
      समझ नहीं आता semantics को पूरी तरह खिड़की से बाहर क्यों फेंक रहे हैं
      button जैसा दिखता है, लेकिन button जैसा काम नहीं करता
    • मैंने कभी नोटिस भी नहीं किया, और बताने के बाद भी यह समस्या नहीं लगता
      जिन्हें यह समस्या लगता है, उनके बारे में यह काफी बाल की खाल निकालने जैसा दिखता है
  • सब लोग अपनी-अपनी शिकायतें लिख रहे हैं, तो मैं भी अपनी लिख देता/देती हूँ
    अगर bookmark folder tree बड़ी हो, तो “Add Bookmark” UI के छोटे popup में नए bookmark को जोड़ने की जगह ढूँढना भयानक अनुभव है
    bookmark sidebar में नाम से search कर सकते हैं, लेकिन यह नहीं पता चल सकता कि वह bookmark कहाँ है
    Bookmark search plus 2 जैसी bookmark search add-on इसे solve कर देती है, लेकिन इसकी ज़रूरत असल में होनी ही नहीं चाहिए
    edit: right-click -> Show in Folder के बारे में पता चला, और यह शानदार है
    हालांकि यह सबसे अच्छी UI नहीं है, और ऊपर बताई add-on अब भी कहीं ज़्यादा intuitive है
    एक साथ कई sidebars नहीं रख सकते
    इसलिए vertical tabs संभालने के लिए Tree Style Tabs और bookmark folder/search को एक साथ खोल नहीं सकते
    यह बेतुका है
    असल में बस इतना ही है, और इसका ज़्यादातर हिस्सा bookmark handling के बारे में है
    बाकी UI ठीक है या मैं इतना आदी हो चुका/चुकी हूँ कि कमियाँ दिखती नहीं, यह नहीं पता, लेकिन Firefox इस्तेमाल करना मुझे काफी comfortable लगता है
    दूसरों की तरह style redesign पर बहुत शिकायत करने की ज़रूरत मैंने महसूस नहीं की

    • किसी अज्ञात वजह से सभी browsers में bookmarks को बेहद बुरी तरह नज़रअंदाज़ किया गया है
      20 साल पुराना browser निकाल लें, तो bookmark management लगभग वैसा ही है, या कुछ मामलों में थोड़ा बेहतर भी
      शायद bookmark improvements sexy नहीं हैं, इसलिए किसी को परवाह नहीं
    • सोचता/सोचती हूँ कि क्या पहले बड़ा side panel खोलने वाले Ctrl+Shift+B shortcut की muscle memory अभी भी बची हुई है
      अब यह सिर्फ एक पतली horizontal bar दिखाता है
      इसी वजह से मुझे भी यह redesign निश्चित रूप से परेशान करता है, लेकिन मैंने “bookmark management” shortcut Ctrl+Shift+O खोज लिया
      यह bookmarks वाली एक बड़ी popup window खोलता है, और अब तक तो यह पुराने side panel जितना ही लगभग सुविधाजनक लगता है
      bookmark search भी कर सकते हैं, और right-click करके context menu में “show in folder” चुनें तो hierarchy में यह कहाँ है, वह भी दिखाता है
      हालांकि मेरे सारे bookmarks “other bookmarks” में हैं, इसलिए शायद मैं इसका ज़्यादा इस्तेमाल नहीं करूँगा/करूँगी
  • “अनावश्यक Firefox UI बदलाव” को लेकर सबसे बड़ी शिकायत 4 साल पहले browser.urlbar.clickSelectsAll को हटाना है
    जैसा उम्मीद थी, Mozilla को परवाह नहीं है
    बग रिपोर्ट पढ़ें तो यूज़र-विरोधी रवैये के अलावा कोई और वजह समझ नहीं आती: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
    किसी भी UI के किसी भी टेक्स्ट फ़ील्ड में ऐसा व्यवहार नहीं होता
    समझ नहीं आता कि Mozilla ने यह “feature” क्यों जारी किया, और साथ ही इसे बंद करने का विकल्प भी क्यों हटा दिया
    कुछ यूज़र इसे पसंद करें तो ठीक है, लेकिन मेरा कमबख्त विकल्प छीनकर इसे जबरन थोपना नहीं चाहिए

    • असल में Mozilla का तर्क था कि बाकी सभी बड़े browsers इसी तरह व्यवहार करते हैं
      Chrome में जांचने पर यह सच में Firefox जैसा ही व्यवहार करता है
      यूज़र-विरोधी पहलू में उनका तर्क था कि जिन्हें नया व्यवहार पसंद नहीं है वे telemetry चालू नहीं रखते, इसलिए वे अपनी पसंद की सुविधा पाने के हकदार नहीं हैं
      यह देखते हुए कि Firefox की मुख्य ताकत privacy-oriented model है, यह काफी विडंबनापूर्ण है
    • पूरी तरह सहमत
      4 साल हो गए, फिर भी रोज़ अटकता हूं
      विडंबना यह है कि मैं आम तौर पर उसी मामले में फेल होता हूं जिसमें यह बदलाव मदद करने वाला था
      जब मैं पूरा URL चुनना चाहता हूं और सहज रूप से दो बार क्लिक करता हूं, तो पहले क्लिक में पूरा चुना जाता है और दूसरे क्लिक में selection घटकर एक शब्द रह जाता है
      एक पल के लिए उलझन होती है, फिर दोबारा क्लिक करना शुरू करता हूं, और अब पूरे URL को चुनने के लिए तीन और क्लिक करने पड़ते हैं
      यह हैरान कर देने वाली हद तक चिढ़ पैदा करता है
      tracker की व्याख्या कुछ ऐसी लगती है कि “भविष्य में कभी हम कुछ और कर सकते हैं जो इसे सही ठहराएगा”
      4 साल बाद भी ऐसा कुछ नज़र नहीं आता
    • Firefox से यह feature हटने के बाद मैं Vivaldi पर चला गया
      Vivaldi अब भी इस व्यवहार को चुनने देता है
      सोचता हूं कि क्या कोई और Unix browser है जिसमें क्लिक पर पूरा select होना बंद किया जा सकता हो
      कुल मिलाकर Vivaldi से संतुष्ट हूं, लेकिन और विकल्प हों तो अच्छा होगा
    • यह अब भी टूटा हुआ है
      वजह यह है कि “Paste and Go” feature सही से काम नहीं करता
      सामान्य समझ से “Paste and Go” वही होना चाहिए जैसे पहले “Paste” क्लिपबोर्ड टेक्स्ट को cursor की जगह पर सही तरीके से डाले, फिर “address bar के address पर जाए” चलाए
      लेकिन जब auto-selected URL को unselect करके उसके अंदर cursor रखकर “paste and go” इस्तेमाल करते हैं, तो Firefox मौजूदा URL को अनदेखा कर सीधे clipboard के टेक्स्ट पर जाने की कोशिश करता है
      यह security risk भी हो सकता है, क्योंकि इससे यूज़र को ऐसे URL पर जाने के लिए trick किया जा सकता है जिसका उसका इरादा नहीं था
      अगर इसे ठीक नहीं करना है, तो असल व्यवहार के हिसाब से नाम बदलकर “Clear, Paste, and Go” कर देना चाहिए
    • “Mozilla को परवाह नहीं” कहा जाता है, लेकिन internal option आखिर internal option ही होता है, और बड़े enterprise support contract जैसी स्थिति न हो तो कोई भी browser ज्यादा परवाह नहीं करता
      अगर development या mobile device management से जुड़ी बातों के अलावा किसी कारण about:config में जाना पड़ता है, तो update के बाद भी उसके चलते रहने की उम्मीद करना मुश्किल है
      हर option maintain करने वाला code होता है
      मेरा अनुमान है कि उस option का उपयोग करने वाले code को फिर से लिखते समय, उन्होंने ऐसी सुविधा को दोबारा implement न करने का तेज और सस्ता रास्ता चुना होगा जिसे वे आधिकारिक तौर पर support भी नहीं करते थे
  • Firefox का असली UI/UX nightmare legacy बचा-खुचा ढांचा है
    ऐसा लगता है कि हर basic browser feature अलग-अलग view में खुलता है
    Settings browser tab में खुलती हैं, history sidebar में
    लेकिन वह भी सिर्फ Ctrl+H के लिए है; history management Ctrl+Shift+H से अलग window में खुलता है
    bookmarks और downloads भी उसी window में, Firefox 3/4 के दौर से खिंचकर आई लगने वाली Library window में खुलते हैं
    downloads के लिए छोटा popup भी है, लेकिन Ctrl+J और download management वही window खोलते हैं
    bookmarks में Ctrl+Shift+O वही window खोलता है, लेकिन Ctrl+B sidebar खोलता है
    profiles तो मज़ाक की तरह हैं—यूज़र के काम लायक feature लगभग है ही नहीं, और about:profiles में legacy जैसा दिखने वाला interface छिपा है
    passwords browser tab में खुलते हैं, लेकिन उनका अपना अलग रूप है जो किसी और चीज़ से ठीक से मेल नहीं खाता
    coherence बस इतनी है कि settings और add-ons दोनों browser tab में हैं और एक-दूसरे से linked हैं
    बाकी सब browser tab, window, sidebar, pop-out और अलग-अलग UI का घालमेल है
    यह काफी समय से ऐसा ही बिखरा हुआ है, और कोई एकीकृत vision या सच में इसे साफ करने की कोशिश न होने से लगता है आगे भी ऐसा ही रहेगा
    हाल में जोड़ा गया Firefox View भी एक और UI के ऊपर चढ़ा हुआ एक और item जैसा दिखता है
    उसमें भी history है, यानी history देखने के करीब तीन तरीके हो गए हैं, जिनमें कम से कम एक तरीका ज्यादा है
    शायद यह Library window की functionality को View tab में ले जाने की कोशिश हो, लेकिन फिलहाल यह सिर्फ confusion बढ़ाता है
    हां, कुछ हद तक यह बात बढ़ा-चढ़ाकर कही गई है
    दूसरे browsers भी हाल में sidebars पसंद करते हैं और popups व menus रखते हैं
    फिर भी जो बात खास तौर पर चुभती है, वह है जगह-जगह उभरती legacy जैसी Library window और settings/add-ons/passwords जैसे browser tab में खुलने वाले features के बीच का contrast
    आखिर में browser feature खोलते समय यह predict करना मुश्किल है कि कौन सा रूप सामने आएगा; शुरुआत में तो पक्का, और आदत पड़ने के बाद भी एहसास रहता है कि “बस सब अपने-अपने तरीके से खुलता है”
    आदत हो जाती है, लेकिन यह फिर भी बिखरा हुआ है

    • मुझे लगता है कि कुछ features में popover और window दोनों हों तो ठीक है
      बस implementation समझदारी से होना चाहिए
      उदाहरण के लिए Safari में downloads default रूप से popover होते हैं, लेकिन उस popover को “detach” करके window बनाया जा सकता है
      इससे दोनों use cases support होते हैं और consistency भी बनी रहती है
      Firefox को इस तरह की सोच की काफी जरूरत है
  • Proton UI की सबसे खराब बात, जिसके बारे में लोग ज्यादा बात नहीं करते, यह है कि अगर आप आधुनिक 1080p या उससे बड़े monitor का उपयोग नहीं कर रहे हैं तो यह objectively बड़ा regression है
    मेरा laptop पुराना X220 ThinkPad है, और उस बदलाव ने screen space को बेवजह बहुत ज्यादा बर्बाद किया, जिससे असल काम की efficiency पर असर पड़ा
    यह user-hostile software engineering trend का हिस्सा है, जो उन लोगों को नुकसान पहुंचाता है जिनके पास नया hardware खरीदने की क्षमता नहीं है, या जो किसी भी वजह से इसे इस्तेमाल नहीं करना चाहते
    इस मामले में बात हर चीज़ को फूले हुए Electron या React app में बदलने की भी नहीं है; Mozilla ने सिर्फ यह सतही impression देने के लिए UI को बिना वजह बदतर बना दिया कि वह अब भी Firefox की परवाह करता है
    Proton मेरे usage के लिए इतना खराब है कि मैं customized userChrome इस्तेमाल कर रहा हूं