बेहतर डिफ़ॉल्ट Firefox UI बनाने का तरीका

फ़ायरफ़ॉक्स डिफ़ॉल्ट UI सुधारने का तरीका

• Firefox v89 के बाद UI को लेकर काफी विवाद रहा, और इसी कारण यह रिपॉज़िटरी लोकप्रिय हो गई।
• Waterfox और Floorp ब्राउज़र ने भी इसे डिफ़ॉल्ट थीम के रूप में सेट किया है।
• 2023 में Mozilla ने Windows 7 और Windows 8 के सपोर्ट को समाप्त करने का फैसला किया। v115 इसका आख़िरी सपोर्टेड संस्करण है, और सितंबर 2024 तक उपलब्ध रहेगा।

सिद्धांत

• लेखक UI/UX डिज़ाइन के लिए 3 मुख्य और 16 छोटे (sub) मानदंडों का उल्लेख करते हैं।
• A/B टेस्ट नहीं कर पाने की स्थिति में यूज़र बिहेवियर का अनुमान लगाना बहुत ज़रूरी हो जाता है।
• सहजता, सरलता, दृश्यता, अनुकूलनशीलता, सुसंगतता, पूर्वानुमेयता, हैंडलिंग, दक्षता, स्पष्टता, निकटता, आकार, प्रतिक्रियाशीलता, लचीलापन, पहुँच, कार्यक्षमता, संदर्भता, समरसता, आनंद और संगतता को ध्यान में रखा गया।

समस्याएँ

• Firefox v88 Photon UI और v89 Proton UI के बीच की कमियों की चर्चा की गई है।
• टैब का बटन जैसा दिखना, बहुत ज़्यादा padding, और अकेले आइकन को पढ़ना/समझना कठिन होना—ये मुख्य समस्याएँ थीं।

टैब समस्याएँ (अनुकूलनशीलता, हैंडलिंग)

• अनुकूलनशीलता और हैंडलिंग को ध्यान में रखते हुए टैब डिज़ाइन की समस्याओं का विश्लेषण किया गया।
• Apple Safari का उदाहरण देते हुए बताया गया कि यूज़र की शिकायतों के बाद टैब डिज़ाइन में बदलाव कैसे किए गए।

बहुत ज़्यादा स्पेस की समस्या (दृश्यता, निकटता, आकार, संदर्भता)

• दृश्यता, निकटता, आकार और संदर्भता के हिसाब से यह समझाया गया कि अत्यधिक स्पेस क्यों समस्या बनता है।
• Fitts के नियम का उपयोग करके क्लिक करने में आसान UI कैसे डिज़ाइन करें, यह समझाया गया।
• Google Chrome के साथ UI spacing तुलना करके समस्या की जड़ें निकाली गईं।

आइकन की मदद (स्पष्टता, पहुँच)

• स्पष्टता और पहुँच को बेहतर करने में आइकनों की भूमिका समझाई गई है।
• 2023 में Chrome के डिज़ाइन refresh के उदाहरण से आइकन की अहमियत पर ज़ोर दिया गया।

टैब पुनः डिज़ाइन

• टैब स्टेट्स के लिए अलग-अलग डिजाइन विकल्पों पर चर्चा की गई और Proton UI की आम गलतियों की ओर संकेत किया गया।
• टैब की चौड़ाई के अनुसार स्मार्ट और efficient (प्रभावी) behavior के अनुसार डिज़ाइन किया गया।

वितरण

• अच्छे UI के लिए निजी मापदंड तो होते ही हैं, लेकिन एक हद तक यह 'टेस्ट' या 'रुचि' का मामला भी है।
• Lepton, Photon और Proton टैब की तुलना करके प्रत्येक के अनुसार उपयुक्त उदाहरण चुने गए।

आइकन जोड़ना और padding समायोजन

• आइकन जोड़कर और padding बदलकर पहले की मुख्य शिकायतों को दूर किया गया।
• Edge, Chrome और Lepton के मेनू आइकन की तुलना से Lepton की आइकन डिज़ाइन की गुणवत्ता को बेहतर बताया गया।

थीम

• यह UI अलग-अलग OS और सेटिंग्स के अनुरूप होने वाला अनुभव देता है।
• Windows 7 से लेकर macOS तक विभिन्न OS डिज़ाइनों के अनुरूप बदलाव शामिल हैं।

इंटरैक्शन

• ऐसे interactions तैयार किए गए हैं जो यूज़र को समझने में मदद करें कि स्क्रीन पर क्या हो रहा है, और साथ ही अनुभव को मज़ेदार भी बनाते हैं।

निष्कर्ष

• यह थीम परंपराओं, मनोविज्ञान और शोध निष्कर्षों को ध्यान में रखते हुए पुराने थीम्स की सर्वोत्तम खूबियों को आगे बढ़ाती है।
• यह OS, डार्क मोड, कस्टम थीम और इंटरैक्शन को स्थिति के हिसाब से सपोर्ट करती है।

GN⁺ की राय

• इस लेख की सबसे बड़ी ताकत यह है कि उपयोगकर्ता अनुभव सुधारने के लिए डिज़ाइन प्रिंसिपल्स और समस्या समाधान तरीके पर गहरी analysis दी गई है।
• Firefox यूज़र्स के लिए यह थीम बेहतर ब्राउज़िंग अनुभव देने वाला एक व्यावहारिक विकल्प बन सकती है।
• UI/UX डिज़ाइन में रुचि रखने वालों के लिए यह सामग्री डिज़ाइन फैसलों के पीछे की सोच और उनके प्रभाव को समझने में मदद करने वाला useful resource है।

[GN⁺]

Hacker News टिप्पणी

• नए UI की मुख्य समस्या यह है कि हर चीज़ कुछ ज़्यादा बड़ी लगती है। मोबाइल स्क्रीन पर यह ठीक बैठ सकता है, लेकिन सामान्य ডেস্কटॉप स्क्रीन पर यह जगह की बर्बादी करता है। इसमें, जैसा कि लेख में बताया गया है, padding बढ़ने का हिस्सा भी है, लेकिन compact UI density विकल्प हटाया जाना भी कारण है। फिर भी about:config में browser.compactmode.show सेट करके इसे वापस लाया जा सकता है। यह विकल्प कई सालों से "unsupported" दिखाया जाता है, फिर भी इसी स्थिति में बना हुआ है।
• Lepton जैसी लोकप्रिय Firefox थीम के लेखक के नाते, Mozilla के कुछ बेहतर न होने वाले फैसले कैसे सुधारें और उससे थीम क्यों लोकप्रिय हुई—इन बातों को अपने लिए लिये गए कई निर्णयों के नज़रिये से देखा जा सकता है। यह पोस्ट एक सीरीज़ का हिस्सा है।
• मैं मानता हूँ कि बेहतर ब्राउज़र UX की शुरुआत vertical tabs से होनी चाहिए। horizontal tabs में 6–8 tabs खुलते ही उन्हें manage या track करना कठिन हो जाता है। vertical, nested tabs में नया लिंक खुलने पर वह automatic child tab बन जाता है। इससे horizontal tabs की तुलना में structure और context समझना आसान होता है। अलग साइट्स को अलग रंग देने पर tab groups और साफ़ दिखते हैं। साथ ही शोध या दस्तावेज़ीकरण का काम आगे बढ़ाने के लिए tab "tree" को bookmark किया जा सकता है। CSS files और कुछ screenshots यहाँ दिए हैं।
• यह पोस्ट थीम लेखक की ओर से यह दिखाने की कोशिश करती है कि UX नियमों से शुरू करके उसने कितनी objective तरीके से बेहतर Firefox थीम बनाई, जबकि ज़्यादातर बदलाव सिर्फ निजी पसंद के लगते हैं। यह निश्चित रूप से अच्छे तरीके से बनाया और maintain किया गया है, पर निजी तौर पर यह मेरे लिए visual तौर पर बहुत आकर्षक नहीं है और कुछ हद तक अधिक जटिल लगता है। लोगों की पसंद अलग-अलग होती है, और Firefox ने एक ही design चुना है लेकिन इन बदलावों को support करने की सुविधा दी है—यह अच्छी बात है। लेकिन लेखक का यह कोशिश करना कि उसकी पसंद अनुभवजन्य रूप से सही है, थोड़ा नासमझी भरा लगता है।
• Firefox ने जब से tabs को बदल दिया, मैंने इसे default browser के रूप में छोड़ दिया। कभी-कभी टेस्ट के लिए खोलता हूँ, लेकिन जब भी इन्हें button की जगह tabs के रूप में देखता हूँ तो खुद से note कर लेता हूँ कि छह महीने बाद फिर से कोशिश करूँगा। खासकर light theme में हल्के gray बैकग्राउंड पर सफेद buttons इसे और खराब बना देते हैं। ऊपर से यह Windows के system theme settings का सम्मान नहीं करता। Edge में यह समझ आता है, Chrome में शायद नहीं, लेकिन कम से कम contrast पर्याप्त है। Firefox में contrast पूरी तरह miss हो जाता है।
• कुछ लोग हैं जो tabs के "button" होने पर भी कोई फर्क नहीं देखते। क्या नए users के लिए यह सच में inconvenient है? कभी-कभी लगता है कि शायद सिर्फ मैं ही ऐसा सोचता हूँ।
• जब सब लोग अपनी pet complaints बता रहे हैं, तो मेरी भी ये हैं:
  • जब bookmark folders में बड़ा tree हो, तब छोटे popup वाले "Bookmark जोड़ें" UI से नया bookmark जोड़ना बहुत खराब लगता है।
  • bookmark sidebar नाम से खोज कर सकता है, लेकिन यह नहीं बता पाता कि bookmark कहाँ मौजूद है। Bookmark Search Plus 2 इस समस्या को ठीक कर देता है, जबकि ज़रूरी नहीं होना चाहिए।
  • कई sidebars नहीं रखी जा सकतीं। इसलिए Tree Style Tabs के साथ bookmark folder और search को एक साथ खोलना संभव नहीं है। यह सच में गलत है।
  • असल में बस यही हैं। ज़्यादातर शिकायतें bookmark handling से जुड़ी हैं! बाकी UI शायद ठीक है, या शायद मैं उससे इतना familiar हो गया हूँ कि odd चीज़ें दिखती ही नहीं। फिर भी मैं Firefox से काफी खुश हूँ। मुझे बाकी लोगों की तरह redesign पर ज़ोर देकर complain करने की ज़रूरत महसूस नहीं होती।
• सबसे बड़ा "बेख़ास / अनावश्यक Firefox UI बदलाव" का मुद्दा चार साल पहले browser.urlbar.clickSelectsAll हटाया जाना है। जैसा अनुमान था, Mozilla ने इसे seriously नहीं लिया। bug report पढ़ने पर यह केवल user-hostile लग सकता है। कोई दूसरा text field ऐसा काम नहीं करता। Mozilla ने इस "feature" को launch करके इसे disable करने का ऑप्शन हटाने का कारण समझ नहीं आता।
• Firefox का वास्तविक UI/UX nightmare इसके legacy leftovers हैं। सभी core browser features अलग-अलग अन्य views में खुलते हैं। settings browser tab में खुलते हैं, history sidebar से खुलता है, लेकिन history manage करने के लिए अलग window चाहिए। bookmarks और downloads भी उसी अलग window में खुलते हैं। Downloads का छोटा popup है, लेकिन डাউনलोड मैनेजमेंट अलग window में खुलता है। ctrl+b sidebar खोलता है जबकि ctrl+shift+o वह अन्य window खोलता है। profile? कोई user-friendly profile feature नहीं है, बस about:profiles में एक छिपा हुआ legacy interface-सा लगता है। Passwords? वे browser tab में खुलते हैं और बाकी से एक अलग, असंगत look रखते हैं।
• Proton UI का शायद सबसे बड़ा negative point, जिसे कोई mention नहीं करता, यह है कि यदि आप modern 1080p (या उससे ऊपर) monitor पर नहीं हैं, तो यह objectively बड़ा upgrade लगता है। मेरा notebook पुराना X220 Thinkpad है, इसलिए ये बदलाव सिर्फ screen space को बेवजह बर्बाद करके मेरी productivity पर असर डालते हैं। यहाँ यह Electron या React ऐप को अनावश्यक रूप से bloated बनाने जैसा नहीं है; बल्कि ऐसा लगता है कि Mozilla ने सिर्फ Firefox पर अभी भी काम करने का impression देने के लिए बिना वजह UI बदल दिया। Proton मुझे इतना पसंद नहीं कि मैं custom userchrome चला रहा हूँ।