एक बेहतर डिफ़ॉल्ट Firefox UI कैसे बनाया जाए
(github.com/black7375)- 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
- Apple ने WWDC में macOS 12 Monterey के नए Safari browser की घोषणा की
- user complaints बढ़ने पर उसने Beta 3 में button जैसे दिखने वाले tabs पर एक समझौता-पसंद redesign पेश किया
- वह समझौता भी विफल रहा, और Apple ने अंततः पूरी तरह पारंपरिक tab design पर वापसी कर ली
- इसका मतलब यह नहीं कि Apple हमेशा सही है, लेकिन यह तथ्य कि मामला कई बार वापस मोड़ना कठिन हो जाने तक पहुँचा, button-like 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औरbinput device के चयन पर निर्भर constants हैं, औरIDdifficulty index हैDstarting point से target center तक की दूरी है, औरWmovement axis के along मापी गई target width है- constants और logarithm को छोड़ दें तो
2D/Wअनुपात महत्वपूर्ण है - पहले दूरी कम करनी चाहिए, और चौड़ाई अधिकतम रखनी चाहिए, लेकिन दूरी बढ़े बिना
- बची हुई जगह भरकर padding को बहुत बड़ा होने से भी रोकना चाहिए
Photon(v88)कोAmazonicon और menu में ज़्यादा आसान clickable UI के रूप में आंका गया हैAmazonicon का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
- Mozilla के Content design considerations for the new Firefox को देखकर इस बात पर सवाल उठता है कि icon हटाना सही विकल्प था या नहीं
- Nielsen Norman Group की icon research में निष्कर्ष दिया गया कि केवल text वाले रूप ने सबसे खराब परिणाम दिखाए
- 2023 में आए Chrome के नए UI में भी icon शामिल हैं
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 से जुड़ा हुआ दिखता है, इसलिए उसे पहचानना आसान हैLeptonvisual overload कम करने के लिए background tab के container indication को छोटा रखता हैProtonमें highlighted background color और top bar के बीच यह पहचानना मुश्किल है कि कौन-सा tab selected है- top bar container tab indicator है, लेकिन यह पुराने
PhotonUI के selected tab जैसा महसूस होता है Selected,Multiple selected,Hovered,Generalstate comparison को इस तरह संक्षेप में बताया गया हैPhotontoolbar connection सेSelectedको पहचानता है, और top context line color सेMultiple selectedऔरHoveredको अलग करता हैProtonमेंSelectedऔरMultiple selectedलगभग एक जैसे दिखते हैंLeptontoolbar connection और अलग-अलग background colors से states को अलग करता है
-
mute, PIP, pinned tab जैसी composite states
Muted,Hover,PIPcombination में browsers के बीच बड़ा अंतर हैPhotonमेंMutedऔरMuted + Hoverअलग नहीं दिखते, और PIP indicator होने परMutedकी position काफ़ी बदल जाती हैProton EnglishमेंMutedकेवल text के रूप में दिखता है, औरPIPका पता केवल hover state में चलता हैProton Koreanमें display language के अनुसार UI बदल जाता है,Mutedfavicon को छिपा देता है, औरPIPindicator नहीं मिल पाताLeptonसभी information दिखाता है,MutedऔरPIPकी position स्थिर रखता है, और hover पर यह संकेत देता है कि control किया जा सकता है
- अधिक जटिल combinations में
Protonको Korean environment में लगभग उपयोग करना मुश्किल माना गया Leptoncomposite states को निम्न तरीके से संभालता है- हमेशा सारी information दिखाता है
- favicon न होने पर
Mutedका आकार बढ़ाकर उसका विकल्प देता है Pinnedstate में भी position हमेशा एक जैसी रखता हैContainerऔरTitlechangedकी तरह जब positions overlap हों तो उन्हें जोड़कर दिखाता है
-
tab width के अनुसार space usage
Leptontab 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 में
Newtext दिखाई दे, इसके लिए 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 मिलता है
- Edge में
-
और अधिक 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 समस्याएँ ठीक करता है
- Lepton अलग-अलग OS और सेटिंग्स के अनुसार UI को समायोजित करता है
-
शीर्षक पट्टी बटन स्पेस
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 टिप्पणियां
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” लिखा है, लेकिन यह कई सालों से ऐसा ही है
पर्याप्त padding होने पर visual noise और complexity कम होती है, और elements को सांस लेने की जगह मिलती है
हो सकता है कोई ठोस practical benefit न हो, लेकिन देखने भर से बेचैनी कम लगती है
करो तो भी बुराई, न करो तो भी बुराई वाली स्थिति है
मैं Firefox के popular theme Lepton का author हूं
मेरे नजरिए से देखा जा सकता है कि मैंने कई decisions कैसे लिए और Mozilla के निराशाजनक decisions को कैसे सुधारा
इसलिए यह समझा सकता है कि इसे कैसे बेहतर बनाया गया और यह popular क्यों हुआ
यह लेख एक series का हिस्सा है
add-ons store के themes में उस नाम से कुछ नहीं दिखता
शायद Lepton पुराना Firefox UI है, इसलिए सिर्फ पुराने releases में ही बचा हो, यह भी हो सकता है
लेख तो पढ़ा, लेकिन हो सकता है कुछ छूट गया हो
क्योंकि friction कम होता है, और install करते ही default settings के साथ adapt हो पाना अच्छा लगता है
लेकिन Firefox UI customization set up करने में आसान और quality में भी अच्छा है, इसलिए यह exception बन गया
इसका maintained महसूस होना भी एक महत्वपूर्ण फायदा है
पता नहीं था कि आपने इतने लंबे समय से लिखा है; यह दिलचस्प और अच्छी तरह documented लगता है, इसलिए पढ़ने का सोच रहा हूं
निजी तौर पर address bar इतना बड़ा लगता है कि उसमें 10 buttons डालने के बाद भी जगह बच जाएगी
इसलिए, जब तक हटाने लायक कुछ और न बचे तब तक सब कुछ हटाते जाना चाहते हैं—इसके अलावा items हटाने की कोई खास वजह सोचना मुश्किल है
लगता है आपको UI/UX की अच्छी समझ है, इसलिए एक सवाल है: मेरा एक theory है कि black-and-white icons colored icons से खराब होते हैं; क्या इस पर कोई related research या consensus है?
बस सलाह दूंगा कि steps को पहले सरल तरीके से व्यवस्थित करें, और advanced section को पूरी तरह नीचे ले जाएं
बेहतर 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 करने के बाद डालूंगा
इस तरह के 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 में अलग भी किया जा सकता है
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 पर निजी तौर पर यह कम सही लगता है
लेकिन मैं top tab bar छिपाकर Firefox के साथ अच्छी तरह फिट होने वाला Tree Style Tab इस्तेमाल कर रहा था, इसलिए उस बदलाव पर भी ध्यान नहीं गया
Firefox अपने-आप में मुझे खास पसंद नहीं है, लेकिन tab tree का UX benefit उन छोटी details से कहीं ज्यादा है जिनमें Chrome/Safari थोड़ा बेहतर हैं, इसलिए इस पर सोचता भी नहीं
हालांकि developer tools की वजह से frontend work के लिए Chrome इस्तेमाल करता हूं
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 यह है: पिछले comment वाले same link में इस CSS result का screenshot जोड़ा है: https://gist.github.com/aclarknexient/88673880d373864eee1927...
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 सही साबित करने की कोशिश करता दिखता है, वह थोड़ा मजाकिया लगता है
लेकिन 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 पूरी तरह चूक जाता है
कृपया बस बंद करो, और मुझे वह browsing शुरू करने दो जिसके लिए मैं आया/आई हूँ
updates के बीच Office 365 और Game Pass ठूंसने वाले Microsoft के dark patterns की नकल न करे तो अच्छा होगा
ऐसे feature ads उन लोगों को दिखाओ जिन्होंने अभी Firefox install नहीं किया है; मैं तो पहले से “customer” हूँ, इसलिए मुझे परेशान मत करो
इसलिए मैं ज़्यादातर Chrome इस्तेमाल करता/करती हूँ
वह भले ही ज़्यादा inferior हो और मेरी निगरानी कर सकता हो, लेकिन कम-से-कम मेरे रास्ते में तो नहीं आता
यही रास्ता है :)
[1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
[2] https://superuser.com/a/1424494
सोचता/सोचती हूँ कि क्या कोई और भी है जिसे tabs का “buttons जैसा दिखना” बिल्कुल परेशान नहीं करता
कभी-कभी लगता है कि शायद बस मैं ही ऐसा/ऐसी हूँ
पता नहीं पहली बार इस्तेमाल करने वालों को यह सच में इतना खटकता है या नहीं
इन comments को देखने से पहले मैंने कभी इस बारे में सोचा तक नहीं था, और tab bar जैसी है वैसी ही पूरी तरह usable लगती है, इसलिए शायद अब भी दोबारा नहीं सोचूँगा/सोचूँगी
बल्कि यह 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 से इसे अपनी पसंद के हिसाब से बदलकर इस्तेमाल करता/करती हूँ
लेकिन यह बिना किसी कारण की gaps डालकर pixels बर्बाद कर रहा है
इस point तक आते-आते हम बेतुके UI decisions के इतने आदी हो चुके हैं कि organizations जो देती हैं, उसी के साथ बस चल पड़ते हैं
consistency या easy discoverability में दिलचस्पी रखने वाली जगहें लगभग दिखती ही नहीं
समझ नहीं आता 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 पर बहुत शिकायत करने की ज़रूरत मैंने महसूस नहीं की
20 साल पुराना browser निकाल लें, तो bookmark management लगभग वैसा ही है, या कुछ मामलों में थोड़ा बेहतर भी
शायद bookmark improvements sexy नहीं हैं, इसलिए किसी को परवाह नहीं
अब यह सिर्फ एक पतली 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” क्यों जारी किया, और साथ ही इसे बंद करने का विकल्प भी क्यों हटा दिया
कुछ यूज़र इसे पसंद करें तो ठीक है, लेकिन मेरा कमबख्त विकल्प छीनकर इसे जबरन थोपना नहीं चाहिए
Chrome में जांचने पर यह सच में Firefox जैसा ही व्यवहार करता है
यूज़र-विरोधी पहलू में उनका तर्क था कि जिन्हें नया व्यवहार पसंद नहीं है वे telemetry चालू नहीं रखते, इसलिए वे अपनी पसंद की सुविधा पाने के हकदार नहीं हैं
यह देखते हुए कि Firefox की मुख्य ताकत privacy-oriented model है, यह काफी विडंबनापूर्ण है
4 साल हो गए, फिर भी रोज़ अटकता हूं
विडंबना यह है कि मैं आम तौर पर उसी मामले में फेल होता हूं जिसमें यह बदलाव मदद करने वाला था
जब मैं पूरा URL चुनना चाहता हूं और सहज रूप से दो बार क्लिक करता हूं, तो पहले क्लिक में पूरा चुना जाता है और दूसरे क्लिक में selection घटकर एक शब्द रह जाता है
एक पल के लिए उलझन होती है, फिर दोबारा क्लिक करना शुरू करता हूं, और अब पूरे URL को चुनने के लिए तीन और क्लिक करने पड़ते हैं
यह हैरान कर देने वाली हद तक चिढ़ पैदा करता है
tracker की व्याख्या कुछ ऐसी लगती है कि “भविष्य में कभी हम कुछ और कर सकते हैं जो इसे सही ठहराएगा”
4 साल बाद भी ऐसा कुछ नज़र नहीं आता
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” कर देना चाहिए
अगर 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 करना मुश्किल है कि कौन सा रूप सामने आएगा; शुरुआत में तो पक्का, और आदत पड़ने के बाद भी एहसास रहता है कि “बस सब अपने-अपने तरीके से खुलता है”
आदत हो जाती है, लेकिन यह फिर भी बिखरा हुआ है
बस 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 इस्तेमाल कर रहा हूं