Daha İyi Bir Varsayılan Firefox Arayüzü Nasıl Oluşturulur

(github.com/black7375)

1 puan yazan GN⁺ 2024-02-21 | 1 yorum | WhatsApp'ta paylaş

Firefox v89’un Proton UI’ı, 2021’de yayımlandıktan sonra sekmeler, boşluklar ve ikonlar etrafında tartışma yarattı; Firefox-UI-Fix bunu tamamlayan bir tema olarak Waterfox ve Floorp’un varsayılan temasına da uygulandı
Tasarım kararları A/B testleri yerine Jakob’s Law, Gestalt psikolojisi, Fitts’s Law ve Nielsen Norman Group araştırmaları gibi UX teorilerine ve örneklerine dayanıyor
Düğme gibi görünen sekmeler, geniş padding ve metin odaklı menüler; seçili durumu algılamayı, tıklama verimini, küçük ekranlarda içerik gösterimini ve erişilebilirliği zayıflatabilir
Lepton Theme, 36px~240px aralığında sekme durumunu tutarlı biçimde ifade eder; kapatma düğmesini, ikonları, padding’i, tema renklerini ve işletim sistemine göre başlık çubuğu alanını ayarlar
Amaç Proton UI’ı reddetmek değil, Proton UI’a saygı duyarak onu iyileştirmek; CSS sınırlamaları nedeniyle page action button davranışı gibi uygulanması zor alanlar da hâlâ var

Firefox v89 Sonrası UI Tartışmaları ve Projenin Kapsamı

Bu belge, ağırlıklı olarak Firefox v89 temelindeki UI’ı ele alır ve sonrasında bazı iyileştirmelerin yapıldığı varsayımıyla ilerler
Firefox v89’un 2021’de yayımlanmasının ardından Proton UI etrafındaki tartışmalar Reddit ve Hacker News’te büyük yankı uyandırdı
Firefox-UI-Fix deposu, Proton UI’ın çeşitli sorunlarını giderirken hızla popülerlik kazandı; Waterfox ve Floorp da bu temayı varsayılan olarak kullanıyor
Mozilla, Windows 7 ve Windows 8 desteğini sonlandırmaya karar verdi; Firefox v115 eski Windows sürümlerini destekleyen son sürüm
- Firefox v115’in Eylül 2024’e kadar sunulması planlanmıştı
- Hem Mozilla’nın hem de projenin eski Windows ile ilgili kodları ve özellikleri temizlemesi gerekiyordu; bu belge eski Windows UI’ını da birlikte ele alıyor

UI/UX’i Değerlendirme Kriterleri

Tasarım kriterleri genel olarak üç başlıkta özetlenir: sezgisellik, verimlilik ve esneklik
A/B testi için gerekli veri veya ortam bulunmadığından, kullanıcı davranışını öngörüp çeşitli teorileri kullanarak tümdengelimsel bir değerlendirme yapılır
Sezgisellik
- Simplicity: Gereksiz öğeleri kaldırarak veya sadeleştirerek bilişsel yükü azaltır
- Visibility: Temel işlevleri görünür kılarak kullanımı kolaylaştırır
- Accustomably: Hızlı uyum sağlanabilmesi için öğrenme yükünü azaltır
- Consistency: İstisnaları azaltarak hatırlamayı kolaylaştırır
- Predictability: Kullanıcının kontrolün kendisinde olduğunu hissetmesini sağlayarak kaygıyı azaltır
- Affordance: Nasıl etkileşim kurulacağına dair ipuçları sağlar
Verimlilik
- Clearly: Ayrımlar kolayca algılanabilmelidir
- Proximal: Hızlıca hareket edilebilecek kadar yakın olmalıdır
- Bulky: Büyük boyut, algılamayı veya hareketi kolaylaştırır
- Snappy: Akıcı ve kesintisiz biçimde tepki vermelidir
Esneklik
- Accessibility: Yaş, engellilik durumu vb. fark etmeksizin geniş bir kullanıcı kitlesini kapsar
- Functional: Gereksinimleri karşılayabilmek için çeşitli işlevleri destekler
- Contextual: Her bağlamda doğal biçimde var olmalıdır
- Harmonious: Her öğeyle doğal biçimde uyum sağlamalıdır
- Pleasure: Eğlence veya yaratıcılık için tatmin sunmayı hedefler
- Compatibility: Düşük sürüm API’leri, üst sürüm yol haritaları, upstream, işletim sistemi, RTL vb. unsurları dikkate alır

Proton UI’da Sorunlu Görülen Üç Nokta

Firefox v89 Developer Edition’ın ilk izlenimi temizdi; ancak gerçek kullanımda önemli ölçüde rahatsızlık verdiği değerlendiriliyor
Temel sorun üç başlıkta toplanıyor
- Tab: Sekmeler düğme gibi görünüyor
- Padding: Boşluklar çok geniş
- Icons: Yalnızca ikonlarla okumak zor olabiliyor veya ikonların kaldırılması başka sorunlar yaratıyor

Düğme Gibi Görünen Sekmelerin Sorunu

Alışkanlık ile Değişim Arasındaki Denge
- Jakob’s Law’a göre kullanıcılar, yeni uygulamaların da zaten bildikleri UX gibi davranmasını bekler
- Firefox’un yeni sekme UI’ı bu beklentiyle çeliştiği için alışması zor bir biçim gibi görünüyor
- Ancak yalnızca alışılmadık olduğu gerekçesiyle UI değişikliklerini engellemek gelişimi sekteye uğratabilir ve sadece trendleri takip etmekle sınırlı kalınmasına yol açabilir
- Hızlı takipçi olunabilir, ancak inovasyonu engellememeye dikkat etmek gerekir
Gestalt Psikolojisiyle Sekme Algısı
- Gestalt psikolojisi, sekmelerin neden farklı bir grup gibi hissedildiğini açıklamak için kullanılır
- Law of Proximity: Sekmeler araç çubuğundan uzakta olduğu için farklı bir grup gibi hissedilir
- Law of Similarity: Sekmeler araç çubuğundan farklı renkte olduğu için farklı bir grup gibi görünür
Safari’nin Geri Aldığı Düğme Tipi Sekmeler
- Apple, WWDC’de macOS 12 Monterey’in yeni Safari tarayıcısını tanıttı
- Kullanıcı şikâyetleri artınca Beta 3’te düğme gibi görünen sekmeler için bir uzlaşma çözümü sundu
  - macOS Monterey Beta 3: Apple Redesigns Safari Tab Interface Following Complaints
  - macOS Monterey beta 3 brings redesigned Safari tab interface to address complaints
- Bu uzlaşma da başarısız oldu ve Apple sonunda tamamen klasik sekme tasarımına geri döndü
  - Apple Releases Safari 15.1 for macOS Big Sur and macOS Catalina
  - Apple reverts to more traditional Safari tab design in macOS Monterey RC following controversy
- Bu, Apple’ın her zaman haklı olduğu anlamına gelmez; ancak birkaç kez geri dönülmesi zor bir noktaya kadar gelindiği düşünüldüğünde button-like tab eleştirilebilir

Aşırı boşlukları ve ikonları kaldırma

Boşluklar ve içerik görünürlüğü
- Web tarayıcıları web içeriği görüntüleyicileri olduğundan, içeriğin gösterilmesini engellememelidir
- Proton UI, fazla padding nedeniyle içerik gösterimi açısından dezavantajlıdır
- 13 inç dizüstü gibi küçük ekranlı cihazlarda bu sorun kritiktir
Fitts Yasası açısından tıklama verimliliği
- Fitts Yasası, bir hedef alana hızlıca gitmek için gereken sürenin hedefe olan mesafe ile hedef genişliği arasındaki orana bağlı olduğunu söyler
- Temel formül MT = a + b · ID = a + b · log₂(2D/W) şeklindedir
- MT hareketi tamamlama ortalama süresi, a ve b giriş aygıtı seçimine bağlı sabitler, ID ise zorluk indeksidir
- D başlangıç noktasından hedefin merkezine olan mesafe, W ise hareket ekseni boyunca ölçülen hedef genişliğidir
- Sabitler ve logaritma hariç tutulduğunda önemli olan 2D/W oranıdır
- Önce mesafeyi azaltmak, genişliği en üst düzeye çıkarmak ama mesafenin artmasına yol açmamak gerekir
- Kalan alanı doldurarak padding’in aşırı büyümesini de önlemek gerekir
- Photon(v88), Amazon ikonu ve menü açısından daha kolay tıklanabilen bir UI olarak değerlendirilir
  - Amazon ikonunda W daha büyüktür
  - Menüde W biraz daha küçüktür ancak D çok daha küçüktür
- İkon gerçek tıklanabilir alandan daha küçük görünüyorsa dezavantaj oluşur; bu yüzden padding alanını doldurup ikonun daha büyük görünmesini sağlamak daha iyidir
Compact UI farkının neredeyse kaybolması sorunu
- Mozilla, compact UI’yi deprecated yaptı
- v89’daki Compact UI, Normal UI, Touch UI seçeneklerinde sekme çubuğu ve araç çubuğu yüksekliği biraz farklı olsa da farkın neredeyse anlamsız olduğu düşünülür
Yalnızca metinden oluşan UI ve erişilebilirlik
- Mozilla’nın Content design considerations for the new Firefox yazısını görünce ikonları kaldırmanın iyi bir tercih olup olmadığı sorgulanır
- Nielsen Norman Group’un ikon araştırması, yalnızca metinden oluşan biçimin en kötü sonucu verdiğini özetler
- 2023’te çıkan Chrome’un yeni UI’si de ikonlar içerir

Lepton Theme’in sekme yeniden tasarımı

Sekme durumlarını tutarlı göstermek
- Sekme tasarımı yalnızca şekille ilgili değil, birçok durumu ele alma problemidir
- Sekmeler şu durumlara sahip olabilir
  - 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 vb.
- Bu durumlar 36px~240px içinde tutarlı biçimde ifade edilmelidir
Photon, Proton ve Lepton’da seçili durum karşılaştırması
- Photon ve Leptonda seçili sekme araç çubuğuna bağlı olduğu için kolayca algılanır
- Lepton, görsel yükü azaltmak için arka plan sekmelerindeki container göstergesini kısa tutar
- Protonda vurgulanan arka plan rengi ile üst çubuk arasında hangi sekmenin seçili olduğunu ayırt etmek zordur
- Üst çubuk bir container sekmesi göstergesidir, ancak önceki UI olan Photondaki seçili sekmeye benzer hissettirir
- Selected, Multiple selected, Hovered, General durumlarının karşılaştırması şöyle özetlenir
  - Photon, araç çubuğu bağlantısıyla Selected durumunu algılatır; üst bağlam çizgisi rengiyle Multiple selected ve Hovered durumlarını ayırır
  - Protonda Selected ve Multiple selected neredeyse aynı görünür
  - Lepton, araç çubuğu bağlantısı ve farklı arka plan renkleriyle durumları ayırır
Sessize alma, PIP, sabitlenmiş sekme gibi birleşik durumlar
- Muted, Hover, PIP kombinasyonunda tarayıcılar arasında büyük fark vardır
  - Photonda Muted ile Muted + Hover ayırt edilmez; PIP göstergesi varsa Muted konumu büyük ölçüde değişir
  - Proton English, Muted durumunu yalnızca metinle gösterir; PIP ise sadece hover durumunda anlaşılır
  - Proton Korean, görüntüleme diline göre UI’yi değiştirir; Muted favicon’u gizler ve PIP göstergesi elde edilemez
  - Lepton tüm bilgileri gösterir, Muted ve PIP konumlarını sabit tutar ve hover sırasında kontrol edilebilir olduğuna dair sinyal verir
- Daha karmaşık kombinasyonlarda Protonun Korece ortamda neredeyse kullanılamaz olduğu düşünülür
- Lepton, birleşik durumları şu şekilde ele alır
  - Her zaman tüm bilgileri ifade eder
  - Favicon yoksa Muted boyutunu büyüterek onun yerine kullanır
  - Pinned durumunda da konumu her zaman aynı tutar
  - Container ve Titlechanged gibi konumlar çakışırsa bunları birleştirerek gösterir
Sekme genişliğine göre alan kullanımı
- Lepton, sekme genişliğine göre davranışı ayarlar
- Genişlik yeterliyse Proton gibi tüm kapatma düğmelerini gösterir
- Sekmeler sonuna kadar dolup genişlik yetersiz kalırsa arka plan sekmelerinin kapatma düğmelerini gizler
- Hatalı tıklamaları azaltmak için kapatma düğmesinin boyutunu küçültür, ancak arka plan sekmesine hover yapıldığında sekme hâlâ kapatılabilir
- Sekme başlığı, padding ve gradyan ayarlanarak daha verimli görünecek hâle getirilir
- Son sekmede New metninin görünmesi için alandan tasarruf edilir
- Yalnızca genişlik yetersiz olduğunda ayarlama yaparak wiki kelimesinin net görünmesini sağlar
- Lepton web içeriğini daha fazla gösterir; Photon ve Leptonda sekme ayırıcıları bulunur
Dağıtım biçimi ve zevk
- İyi UI ölçütleri kişiden kişiye değişir ve bir noktaya kadar zevk meselesidir
- Üç sekme konsepti sunar
  - Proton’a uyarlanmış genel Lepton sekmeleri
  - Dik açılı bağlam çizgisine sahip Photon sekmeleri
  - Orijinal Proton sekmeleri
- Bu tema özellikle Photon sekme UI desteğiyle bilinir

İkon ve padding ayarı

Paneller ve bağlam menüsü
- İkon ekleme ve padding ayarıyla mevcut şikâyetler azaltılır
- unbalanced strokes sorunu, katkıcı @zapSNH tarafından düzeltildi ve tarayıcı genelinde tutarlı, tanınabilir bir ikon seti elde edildi
Edge, Chrome ve Lepton menü karşılaştırması
- Edge’de özel bir neden olmadan ikonu boş bırakılmış menüler vardır; ikonlar genel olarak birbirine fazla benzediği için göz gezdirmek zordur
- New InPrivate window gibi bazı Edge ikon metaforlarının kafa karıştırıcı olduğu düşünülür
- Chrome’un ikon stili modern değildir; yuvarlak UI’ye kıyasla köşeli kalır ve ikonlar metin boyutuna göre fazla küçük görünür
- Lepton, modern stile ve uygun boyuta sahip tutarlı bir ikon seti sunar
- Yalnızca önemli ikonlarda dolu ikon kullanarak hızlıca göz gezdirilebilirliği artırır ve görünüşü ayırt eden metaforlar kullanır
Bağlam menüsü ve kısayol grupları
- Edge’de Add all tabs to favorites için neden ikon olmadığı anlaşılamaz
- Chrome’da bağlam menüsü ikonu hiç yoktur
- Lepton, ikonları net biçimde ayırt edilecek şekilde yerleştirir
- Web sayfası bağlam menüsünde yalnızca Firefox üstte bir kısayol grubu bulundurur ve pie menu gibi hızlı erişilebilir bir etki sağlar
Daha fazla ikon uygulama
- Global menüye ve çeşitli panellere ikonlar eklenir
- Yer imi kütüphanesi klasörü açıldığında menü ikonu da tepki verir
- Menü ve panel boyutları küçülür, metin başlangıç konumu hizalanır
- Çeşitli yerleşim durumlarına uygun ikonlar eklenir

OS, tema, renk uyumu

Sistem varsayılan teması
- Lepton, farklı OS’lere ve ayarlara göre UI’ı uyarlar
  - Windows 7: Aero pencere tasarımını yakından izler
  - Windows 8.1: Başlık çubuğunun Windows 7’deki gibi iyi uyum sağlamasını sağlar
  - Windows 10 Light: Windows 10’un Legacy Edge renklerini izler
  - Windows 10 Dark: Aynı ölçütü uygular
  - Windows 10 Dark + Accent titlebar: Başlık çubuğu vurgu rengi ayarı açıksa bunu izler
  - MacOS Light/Dark: Mac renklerini izler
- Windows 11 kullanıcıları userChrome.compatibility.os.win11 seçeneğiyle Edge’e benzer Windows 11 renklerini kullanabilir
- Linux’ta da çalışır; renk sorunlarını ve yerel olmayan başlık çubuğu düğmeleriyle ilgili sorunları düzeltir
Başlık çubuğu düğme alanı
- Tabs on bottom veya One Liner gibi durumlarda araç çubuğunun içinde başlık çubuğu düğmeleri için alan ayırmak gerekir
- OS’ye göre değerler ve konumlar farklıdır
  - Win7, Win8: 105px, sağ
  - Win10: 138px, sağ
  - Mac: 72px, sol
  - Linux: 84px; sistem temasına göre değişebilir
- Tam ekranda yerel UI kullanıldığı için 0px olarak ele alınmalıdır
- Hem sol hem sağ mümkündür; düğme sayısı üç olabilir de olmayabilir de
Proton temasını tamamlama
- Proton temasının kendi renk kontrastı eksikliğinden kaynaklanan erişilebilirlik sorunlarını düzeltir
- Paket temaların renk kontrastını ve dış çizgi gölgelerini iyileştirir
- Proton temasının uygulanmadığı bölümlere de uygulayarak daha tutarlı hale getirir
- Karanlık modun uygulanmadığı bölümlere de karanlık modu uygular
- Varsayılan tema dışındaki özel temalar kullanıldığında da renklerin düzgün uygulanmasını sağlar
- Tablolarda ve listelerde okumayı kolaylaştırmak için çift numaralı satırlara farklı bir arka plan rengi ekler
- Ses oynatıcıya Proton tasarımını izleyen yuvarlatılmış kenarlar uygular
- Video oynatıcıda içeriğin daha iyi görünmesini sağlar ve simgeleri de daha hoş görünecek şekilde düzeltir

Etkileşim ve animasyon

Yardımcı etkileşimler
- Hover sırasında fare imleci veya öğe değişirse, bir şey yapıldığına dair ipucu verir
- Paneldeki yakınlaştırma/uzaklaştırma komutları gibi diğer eylemlerden farklı yapıda olan ve küçük görünen öğelerde fare imlecinin değişmesi yardımcı olur
- Fare bir alanın üzerine geldiğinde kenarlık belirirse, tıklanabilir olduğu sezgisel olarak anlaşılır
- Etkin öğenin metninde vurgu rengi kullanılır
- Silinen öğelerde simge devre dışı bırakılmış gibi gri tonlamalı yapılır ve başlığın üzeri çizilir; ancak hover edildiğinde üzeri çizilmemiş başlık görünür
Animasyon tasarımı
- Animasyonlar UI’ı daha akıcı ve doğal hale getirir, ancak bazen işlemin yavaş hissedilmesine neden olur
- Tasarım ölçütleri şöyledir
  - Photon’un easing curve’ünü izleyerek başta hızlı hızlanır, sonda yumuşakça yavaşlar
  - Başlangıç animasyon süresini kısaltarak hızlı tepki veriyormuş hissi sağlar
  - Bitiş animasyon süresini uzatarak akıcı hissettirir
  - Büyük nesnelerin süresi küçük nesnelerden daha uzundur
  - İç içe geçmiş nesnelerin içindeki süre de uzun olmalıdır
- Aynı ilkeler arka plan rengine, ok döndürmeye, kapsayıcı sekmelere, sesli ve sabitlenmiş sekmelere, kenar çubuğuna uygulanır
- Varsayılan olmayan isteğe bağlı özelliklere de aynı ilkeler uygulanır
  - Autohide Back Button
  - Autohide Page Action
  - Autohide Tab Bar
İllüstrasyonları geri getirme
- Photon’un dostane illüstrasyonlarının hata durumlarındaki şaşkınlığı azalttığı düşünülür
- Bu tema söz konusu illüstrasyonları geri getirir
- Uygulama örnekleri Welcome back, DNS error, Session restore, Search result ekranlarıdır

Sonuç ve sınırlamalar

Bu tema gelenekleri, psikolojiyi ve araştırma sonuçlarını dikkate alır; mevcut temaların güçlü yanlarını devralır
OS, karanlık mod, özel temalar ve bağlama uygun etkileşimleri destekler
CSS sınırlamaları nedeniyle page action button behavior gibi uygulanamayan şeyler de vardır
Hedef şudur: “🦊 I respect proton UI and aim to improve it.”

1 yorum

GN⁺ 2024-02-21

Hacker News yorumları

Yeni UI’da en rahatsız edici olan şey, tüm öğelerin fazla büyümüş olmasıydı
Parmakla dokunulan bir telefon ekranı olsa anlaşılır, ama normal masaüstü boyutunda ciddi bir alan israfı
Yazıda bahsedilen padding artışı da bunun bir nedeni, ama compact UI density seçeneğinin kaldırılması da büyük etken
about:config içinde browser.compactmode.show değerini açtıktan sonra Menü > Daha fazla araç > Araç çubuğunu özelleştir > alttaki “density” yoluna giderek yeniden kullanabilirsiniz
Seçeneğin yanında “not supported” yazıyor, ama yıllardır böyle
- Arayüzde bol padding olmasını çok daha fazla tercih ederim
  Padding yeterli olduğunda görsel gürültü ve karmaşıklık azalıyor, öğelere nefes alacak alan kalıyor
  Somut bir pratik avantajı olmayabilir ama sadece bakınca bile daha az huzursuz hissettiriyor
- Bir tarafta “padding ile alanı boşa harcamayın” diyenler var; KDE konusu her açıldığında da “padding olmadan bilgi ve metinleri çok sıkıştırıyorlar, okumak zorlaşıyor” diyenler çıkıyor
  Yapsan da eleştiriliyorsun, yapmasan da eleştiriliyorsun
- Neden “not supported” olarak gösterildiğinin arka planını bilen var mı merak ediyorum
- Benim sorunum buydu; bugün o bayrağı bir deneyeceğim
- “not supported”, “modern” tasarım tercihlerini eleştirenlere karşı bir huysuzluk gibi görünmüştü
Firefox için popüler bir tema olan Lepton’ın geliştiricisiyim
Benim açımdan çeşitli kararları nasıl aldığımı ve Mozilla’nın hayal kırıklığı yaratan kararlarını nasıl iyileştirdiğimi görebilirsiniz
Bu da onu nasıl iyileştirdiğimi ve neden popüler olduğunu açıklayabilir
Bu yazı bir serinin parçası
- https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
- Lepton’ı nerede bulabileceğimi merak ediyorum
  Eklenti mağazasındaki temalarda bu adla hiçbir şey çıkmıyor
  Belki Lepton eski Firefox UI olduğu için yalnızca eski sürümlerde kalmış olabilir
  Yazıyı okudum ama bir şeyi kaçırmış olabilirim
- Genelde UI’ı fazla özelleştirmem, varsayılanlara alışmaya çalışırım
  Çünkü daha az sürtünme oluyor ve kurar kurmaz varsayılan ayarlara uyum sağlayabilmek hoşuma gidiyor
  Ama Firefox UI özelleştirmesi kurulumu kolay ve kalitesi de iyi olduğu için istisna oldu
  Bakımının yapıldığı hissi de önemli bir artı
  Bu kadar uzun süredir yazılar yazdığınızı bilmiyordum; ilginç ve iyi belgelenmiş görünüyor, okumayı düşünüyorum
- Telemetrin arayüz öğelerini kaldırmayı gerekçelendirmek için kullanılması özellikle ilginç
  Kişisel olarak adres çubuğu o kadar büyük ki içine 10 düğme koysanız bile yer kalacak gibi
  Bu yüzden, kaldırılabilecek hiçbir şey kalmayana kadar her şeyi kaldırmak istemek dışında, öğeleri ortadan kaldırmak için özel bir neden hayal etmek zor
  UI/UX konusunda bilgili görünüyorsunuz, bu yüzden bir sorum var: siyah-beyaz ikonların renkli ikonlardan daha kötü olduğuna dair bir teorim var; bununla ilgili araştırma ya da uzlaşı var mı merak ediyorum
- Kurulum süreci çok kolaydı
  Ancak adımları önce sade biçimde özetlemenizi, gelişmiş bölümü ise tamamen aşağıya almanızı öneririm
```
1. OS komut satırında betiği çalıştır  
2. `about:support` sayfasına gidip başlangıç önbelleğini temizle’ye tıkla  
```
Daha iyi bir tarayıcı UX’i, güçlü söylemek gerekirse dikey sekmelerden başlar
Yatay sekmeler 6-8 tane açıldığında bile yönetmesi veya takip etmesi zorlaşır
Dikey iç içe sekmelerde, yeni sekmede açılan bağlantılar otomatik olarak alt sekme olur; bu yapı ve bağlam yatay sekmelere göre çok daha kolay çıkarılabilir
Buna site bazlı renkler eklenince sekme grupları da daha görünür olur; sekme ağacını yer imlerine ekleyerek araştırma veya dokümantasyon işlerinin ilerleme durumu da kaydedilebilir
CSS dosyası ve birkaç ekran görüntüsü burada: https://gist.github.com/aclarknexient/88673880d373864eee1927...
İç içe geçmiş ve renkli sekmelerin ekran görüntüsünü de eklemem gerekiyor; yorumu gönderdikten sonra ekleyeceğim
- Dikey sekmeleri seviyorum; birden fazla uzun soluklu iş arasında gidip gelen gezinme tarzım için büyük avantaj sağlıyor
  Sekmeler bu kullanım için yer imlerinden daha uygun; çünkü 2024’te bile tüm tarayıcıların yer imi yöneticileri olgunlaşmamış durumda ve yer imlerini düzenlemek berbat
  İç içe sekmeler beni çok cezbetmiyor ama Firefox eklentisi Sidebery’nin “panes”i ya da Arc’ın “spaces”i gibi, sekme kenar çubuğunda gösterilen sekme gruplarını tek tıkla değiştirme özelliği güçlü
  Özellikle panel/alanları tarayıcı profilleriyle ilişkilendirince daha da iyi oluyor
  Örneğin tek bir tarayıcı penceresini genel gezinme, alışveriş, çevrim içi üniversite dersleri ve yazılım geliştirme için değiştirebilir; gerekirse belirli bir paneli/alanı geçici olarak yeni bir pencereye ayırabilirsiniz
- Zevk meselesi olduğunu kabul ediyorum ama tam tersine güçlü biçimde inanıyorum
  Yatay sekme çubuğunda 6-8’den fazla sekme açınca yönetmenin ve takip etmenin zorlaştığı doğru
  Son 6 ay boyunca Arc kullandım; dikey sekme çubuğunda da 6-8 sekme açık olduğunda yönetmek ve takip etmek aynı şekilde zordu
  Sonunda her 4 saatte bir hepsini kapatıp baştan başlamaya başladım
  İki tarafta da bana daha ikna edici gelen iki argüman var
  Birincisi, yatay ve dikeyde sekme çubuğunun kapladığı piksel sayısını sayınca, yataydan eşit veya daha az piksel kullanan pratik bir dikey sekme çubuğu hiç görmedim
  İkincisi, monitörlerde neredeyse her zaman dikeyden daha fazla yatay piksel olduğu için, dikey sekme çubuğunun monitörün ekran oranını daha iyi kullandığı iddiası da var
  Bu, 16:9 ve üzeri oranlarda doğru gibi hissettiriyor; ancak MacBook’larda yaygın olan 16:10’da kişisel olarak daha az doğru görünüyor
- “Tartışmalı” FF89 ekran görüntüsüne bakınca en büyük değişikliklerden biri, sekmelerin daha fazla padding ile yeniden tasarlanması gibi görünüyor
  Ama üst sekme çubuğunu gizleyip Firefox’la iyi uyum sağlayan Tree Style Tab kullandığım için o değişikliği bile fark etmemiştim
  Firefox’un kendisini özellikle seviyor değilim; ama sekme ağacının UX kazancı, Chrome/Safari’nin biraz daha iyi yaptığı küçük ayrıntıları fazlasıyla bastırdığı için tereddüt etmiyorum
  Yalnız geliştirici araçları nedeniyle frontend işleri için Chrome kullanıyorum
- Kendi yorumuma yanıt yazmak HN adabına aykırı mı, yoksa bilgiyi iyi yapılandırmak mı emin değilim :)
  Tree Style Tab seçenekleri sayfasının gelişmiş bölümünde, canlı yeniden yüklenen bir kullanıcı stil sayfası alanı var
  Tarayıcıyı yeniden başlatmadan yazı tipi seçimini test etmek için harika
  Ben Apple’ın SF Pro daraltılmış yazı tipini kullanacak şekilde değiştirdim
  Normalde neredeyse her yerde kullandığım Iosevka Mono, sekme başlıklarında bir şekilde uymadı
  CSS şöyle:
```
: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;  
}  
```
  Bu CSS sonucunun ekran görüntüsünü önceki yorumla aynı bağlantıya ekledim: https://gist.github.com/aclarknexient/88673880d373864eee1927...
- Dizüstünde dikey sekmeler pek iyi olmamaya başlıyor
  Firefox’ta otomatik gizlenen kenar çubuğu hack’i bozuldu ve düzeltmeye üşendim; şimdi de 100’er sekme açık olmadığı hâlde birkaç inçlik gri boş alan oluşuyor
  Genelde yalnızca 5-10 kadar sekme açık tutuyorum
  Daha can sıkıcı olan, bugün birçok web sitesinin mobil/masaüstü ayrımını kullanıcı aracısına göre değil tarayıcı viewport boyutuna göre yapması
  Tree Style Tab yüzünden zaten yatay genişlikten 1 inç kaybettiğim için, sitenin beni iPad sanmasına kadar daraltabileceğim çok az alan kalıyor
  Bu yüzden fiilen tarayıcıyı tam ekran kullanmak zorundayım; aksi hâlde metin satır sonları berbat olan bir sürü hamburger menü çıkıyor ve gezinme daha da kötüleşiyor
  Çoğu zaman kenar çubuğunu tamamen kapatmak gerekiyor; bu da sekme değiştirirken birkaç tık daha ekliyor
Bu yazı, tema yazarının UX kurallarına dayanarak nesnel olarak daha iyi bir Firefox teması yaptığına ikna etmeye çalışıyor gibi; ama değişikliklerin çoğu kişisel tercih gibi görünüyor
İyi yapılmış ve bakımı sürdürülen bir iş olduğu kesin; ancak kişisel olarak görsel açıdan pek çekici bulmuyorum ve bazı kısımlar daha karmaşık görünüyor
Herkesin tercihi farklı; Firefox bir tasarım seçmiş olsa da bu tür değişiklikleri desteklemesi de güzel
Ancak yazarın kendi tercihinin deneysel olarak doğru olduğunu kanıtlamaya çalışıyor gibi görünmesi biraz komik
- UI kesinlikle zevk meselesi olduğu için dağıtımı üç farklı biçimde hazırladım
  Yine de sekme sessizdeyken yüklenip yüklenmediğine dair bir gösterge olmaması ya da sekme ayırıcılarının bulunmaması kafa karıştırıcıydı
Firefox sekmeleri mahvettiğinden beri onu varsayılan tarayıcı olarak kullanmaktan vazgeçtim
Ara sıra test için açıyorum; hâlâ sekme değil de düğme gibi görünüyorsa, içimden “yaklaşık yarım yıl sonra tekrar dene” diye not düşüyorum
Açık tema, açık gri üzerinde beyaz düğmeler olduğu için özellikle hakaret gibi
Windows sistem tema ayarlarını da düzgün izlemiyor
Windows’ta uygulamalar açık temayı korurken görev çubuğuna, Başlat menüsüne ve başlık çubuğuna renk uygulanabiliyor; Edge bunu anlıyor, Chrome anlamasa bile kontrastı yeterli
Firefox ise tamamen ıskalıyor
- Firefox’u ikincil tarayıcı olarak kullanıyorum; her açtığımda önce yoluma çıkıp araya girerek son seferden beri eklenen Pocket, VPN gibi yeni değişiklikleri ve özellikleri bildiriyor
  Lütfen artık durup, yapmaya geldiğim gezinmeye başlamama izin verse
  Güncellemeler arasında Office 365 ve Game Pass dayatan Microsoft’un karanlık kalıplarını takip etmemesini isterim
  Böyle özellik reklamlarını henüz Firefox kurmamış kişilere yapabilir; ben zaten “müşteriyim”, beni rahatsız etmesin
  Bu yüzden çoğunlukla Chrome kullanıyorum
  Daha kötü olabilir ve beni izleyebilir, ama en azından yolumu kesmiyor
- Sidebery[1] kurup varsayılan sekmeleri gizlemek[2] yeterli
  Yol budur :)
  [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
  [2] https://superuser.com/a/1424494
Sekmelerin “düğme gibi görünmesinin” hiç umurunda olmadığı başka biri var mı merak ediyorum
Bazen sadece ben böyle düşünüyorum sanıyorum
İlk kez kullanan insanlara gerçekten bu kadar rahatsız edici geliyor mu bilmiyorum
- Firefox’u her gün kullanıyorum ama bunun bir “sorun” sayıldığını bile bilmiyordum
  Bu yorumları görmeden önce hiç düşünmemiştim; sekme çubuğunu şu hâliyle tamamen kullanılabilir bulduğum için muhtemelen bir daha da düşünmem
- Sekmelerin düğme gibi görünmesi başlı başına beni pek rahatsız etmiyor
  Aksine sekme görünümü için yaygın bir alternatif; bildiğim kadarıyla Windows 95’in sekme denetimlerinde de sekmeleri düğme gibi gösteren bir mod vardı
  Sanırım özgün görev çubuğunda da kullanılıyordu; 90’lardan beri mIRC’de kanal/pencere değiştirmek için de kullanıldı
  Ama bu belirli “sekme düğmelerinin” görünüşünü kişisel olarak beğenmiyorum
  Uzun bir hap gibi, yutması zor görünüyor; ayrıca eskiden sekmeye benzemesine alışmıştım ve bunu değiştirmek için bir neden göremiyorum
  Neyse ki Firefox görünümü özelleştirmeye izin veriyor; userChrome.css ile daha hoşuma gidecek şekilde değiştirip kullanıyorum
- Firefox kullanımımı etkilemiyor
  Ama orada olması için hiçbir neden olmayan boşluklar koyarak piksel israfı yapıyor
  Bu noktada saçma UI kararlarına alıştım; kuruluşlar ne verirse onunla idare eder hâle geliyoruz
  Tutarlılıkla ya da kolay keşfedilebilirlikle ilgilenen yer neredeyse yok gibi görünüyor
- Sekmesi olan diğer şeylerden, örneğin yalnızca tarayıcılardan değil dosya yöneticileri ya da editörlerden de yeterince farklı olduğu için rahatsız ediyor
  Anlambilimi neden tamamen pencereden dışarı attıklarını anlamıyorum
  Düğme gibi görünüyor ama düğme gibi davranmıyor
- Farkına bile varmamıştım; işaret edildikten sonra da benim için sorun olmadı
  Bunu sorun olarak görenler bana epey kusur arıyor gibi geliyor
Herkes kendi şikâyetini yazdığına göre ben de benimkini yazayım
Yer imleri klasör ağacı büyükse, “Add Bookmark” UI’ının küçük açılır penceresinde yeni yer imini ekleyeceğin konumu bulma süreci berbat
Yer imleri kenar çubuğunda ada göre arama yapılabiliyor, ama o yer iminin nerede olduğu bulunamıyor
Bookmark search plus 2 gibi bir yer imi arama eklentisi bunu çözüyor, ama aslında buna gerek olmamalı
Düzenleme: sağ tık -> Show in Folder seçeneğini öğrendim; bu harika
Yine de en iyi UI değil ve bahsettiğim eklenti hâlâ çok daha sezgisel
Aynı anda birden fazla kenar çubuğu açılamıyor
Bu yüzden dikey sekmeler için Tree Style Tabs ile yer imi klasörlerini/aramayı aynı anda açık tutamıyorsun
Saçmalık
Aslında hepsi bu; çoğu da yer imi yönetimi ile ilgili
UI’ın geri kalanı iyi mi, yoksa alıştığım için kusurları göremiyor muyum bilmiyorum ama Firefox’u oldukça rahat kullanıyorum
Diğerleri gibi stilin yeniden tasarlanmasından çok şikâyet etme ihtiyacı duymadım
- Bilinmeyen bir nedenle tüm tarayıcılarda yer imleri feci derecede ihmal edildi
  20 yıl önceki bir tarayıcıyı açsanız yer imi yönetimi neredeyse aynı, hatta bazı durumlarda biraz daha iyi
  Yer imlerini iyileştirmek “seksi” değil; bu yüzden kimse umursamıyor gibi
- Acaba eskiden büyük yan paneli açan Ctrl+Shift+B kısayoluna dair kas hafızan mı kaldı diye merak ediyorum
  Şimdi yalnızca dar bir yatay çubuk gösteriyor
  Ben de bu yüzden bu yeniden tasarımı kesinlikle sinir bozucu buluyorum, ama “yer imi yönetimi” kısayolu olan Ctrl+Shift+O’yu keşfettim
  Yer imlerinin bulunduğu daha büyük bir açılır pencere açıyor ve şu ana kadar eski yan panel kadar neredeyse kullanışlı görünüyor
  Yer imi araması da yapılabiliyor; sağ tıklayıp bağlam menüsünden “show in folder” seçilirse hiyerarşide nerede olduğunu da gösteriyor
  Gerçi benim yer imlerimin hepsi “other bookmarks” içinde, bu yüzden çok kullanacak gibi değilim
En büyük “gereksiz Firefox UI değişikliği” şikâyeti, 4 yıl önce browser.urlbar.clickSelectsAll seçeneğinin kaldırılmasıydı
Tahmin edileceği gibi Mozilla bunu umursamıyor
Hata raporunu okursanız, kullanıcı düşmanlığı dışında bir açıklama yok: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
Hiçbir UI’daki hiçbir metin alanı böyle davranmıyor
Mozilla’nın bu “özelliği” neden dağıttığını ve aynı anda kapatma seçeneğini de neden kaldırdığını anlayamıyorum
Bazı kullanıcıların bunu tercih etmesi sorun değil, ama lanet olası seçeneğimi elimden alıp bunu bana zorla dayatmamalı
- Gerçekte Mozilla’nın mantığı, diğer tüm büyük tarayıcıların böyle davranmasıydı
  Chrome’da kontrol edince gerçekten Firefox gibi davrandığını görüyorsunuz
  Kullanıcı düşmanlığı tarafında ise, yeni davranıştan hoşlanmayanların telemetriyi açmadığı için istedikleri özelliği hak etmediği gibi bir mantık vardı
  Firefox’un başlıca avantajının gizlilik odaklı model olduğu düşünülürse epey ironik
- Tamamen katılıyorum
  4 yıl geçti ama hâlâ her gün takılıp duruyorum
  İronik biçimde, genelde başarısız olduğum senaryo tam da bu değişikliğin yardımcı olmayı amaçladığı durum
  URL’nin tamamını seçmek istediğim için içgüdüsel olarak iki kez tıklıyorum; ilk tıklamada tamamı seçiliyor, ikinci tıklamada seçim tek bir kelimeye daralıyor
  Bir an afallayıp tekrar tıklamaya başlıyorum; bu kez URL’nin tamamını seçmek için üç kez daha tıklamam gerekiyor
  Bu şaşırtıcı derecede sinir bozucu
  İzleyicideki açıklama “gelecekte bir gün bunu haklı çıkaracak başka bir şey yapabiliriz” seviyesinde görünüyor
  4 yıl sonra hâlâ öyle bir şey görünmüyor
- Bu özellik Firefox’tan kaldırıldıktan sonra Vivaldi’ye geçtim
  Vivaldi hâlâ bu davranışı seçilebilir kılıyor
  Tıklayınca tümünü seçmeyi kapatabilen başka bir Unix tarayıcısı var mı merak ediyorum
  Genel olarak Vivaldi’den memnunum ama daha fazla seçenek olsa iyi olurdu
- Hâlâ bozuk
  Çünkü “Paste and Go” özelliği düzgün çalışmıyor
  Sağduyuya göre “Paste and Go”, pano metnini imleç konumuna doğru şekilde ekleyen “Paste” işleminden sonra “adres çubuğundaki adrese git” komutunu çalıştırmakla aynı olmalı
  Ama otomatik seçilmiş URL’nin seçimini kaldırıp içine imleci yerleştirdikten sonra “paste and go” kullanırsanız, Firefox mevcut URL’yi yok sayıp doğrudan panodaki metne gitmeye çalışıyor
  Bu, kullanıcıyı istemediği bir URL’yi ziyaret etmeye kandırabileceği için güvenlik riski de olabilir
  Düzeltmek istemiyorlarsa adını gerçek davranışa uygun şekilde “Clear, Paste, and Go” olarak değiştirmeliler
- “Mozilla umursamıyor” deniyor ama dahili seçenek, sonuçta dahili seçenektir; büyük kurumsal destek sözleşmesi gibi bir durum yoksa hiçbir tarayıcı bunu fazla umursamaz
  Geliştirme ya da mobil cihaz yönetimiyle ilgili olmayan bir iş için about:config içine girmeniz gerekiyorsa, güncellemeden sonra da çalışmaya devam etmesini beklemek zordur
  Her seçenek, bakımı yapılması gereken koddur
  Tahminimce o seçeneği kullanan kodu yeniden yazarken, resmi olarak desteklemedikleri bir özelliği yeniden uygulamamak gibi daha hızlı ve ucuz yolu seçtiler
Firefox’un gerçek UI/UX kâbusu legacy kalıntılar
Temel tarayıcı özelliklerinin her biri sanki bambaşka bir görünümde açılıyor
Ayarlar tarayıcı sekmesi, geçmiş ise kenar çubuğu
Ama bu yalnızca Ctrl+H için geçerli; geçmiş yönetimi Ctrl+Shift+H ile ayrı bir pencere açıyor
Yer imleri ve indirmeler de o pencerede; Firefox 3/4 döneminden sürüklenip gelmiş gibi duran Library penceresi
İndirmeler için küçük bir açılır pencere de var ama Ctrl+J ve indirme yönetimi o pencereyi açıyor
Yer imlerinde Ctrl+Shift+O o pencereyi açıyor, Ctrl+B ise kenar çubuğunu açıyor
Profiller, şaka gibi, kullanıcıya yönelik işe yarar bir özelliğe fiilen sahip değil; about:profiles içinde legacy görünen bir arayüz gizli
Parolalar tarayıcı sekmesinde açılıyor ama başka hiçbir şeyle pek uyumlu olmayan kendine özgü bir görünüme sahip
Tutarlı olan tek şey, ayarlar ve eklentilerin ikisinin de tarayıcı sekmesi olması ve birbirlerine bağlantı vermesi
Geri kalanı tarayıcı sekmeleri, pencereler, kenar çubukları, pop-out’lar ve birbirinden farklı UI’ların karıştığı bir keşmekeş
Oldukça uzun süredir böyle dağınık ve tek bir vizyon ya da toparlamaya dönük gerçek bir çaba olmadığı için muhtemelen böyle kalacak
Yakın zamanda eklenen Firefox View da, başka bir UI katmanı ekleyen bir şey gibi görünüyor
Orada da geçmiş var; yani geçmişi görmenin üç kadar yolu var ve en az biri fazla
Belki Library penceresinin işlevlerini View sekmesine taşıma girişimidir, ama şu an için yalnızca kafa karışıklığını artırıyor
Bir ölçüde abartı olduğu doğru
Diğer tarayıcılar da son dönemde kenar çubuklarını seviyor ve açılır pencereler ile menülere sahip
Yine de özellikle göze batan şey, orada burada beliren legacy görünümlü Library penceresi ile ayarlar/eklentiler/parolalar gibi tarayıcı sekmesinde açılan özellikler arasındaki karşıtlık
Sonuçta bir tarayıcı özelliğini açtığınızda hangi biçimde karşınıza çıkacağını tahmin etmek zor; başta kesinlikle böyle, alıştıktan sonra bile “her biri kafasına göre açılıyor” hissi kalıyor
Alışılıyor ama yine de dağınık
- Bazı özelliklerde hem popover hem pencere olmasının sorun olmadığını düşünüyorum
  Yeter ki akıllıca uygulanmış olsun
  Örneğin Safari’de indirmeler varsayılan olarak popover, ama o popover’ı “koparıp” pencereye dönüştürebiliyorsunuz
  İki kullanım durumunu da desteklerken tutarlılığı koruyor
  Firefox’un da bu düşünce tarzına epey ihtiyacı var
Proton UI’da insanların pek dile getirmediği en kötü nokta, modern 1080p ve üzeri monitör kullanmıyorsanız nesnel olarak büyük bir gerileme olması
Dizüstüm eski bir X220 ThinkPad olduğu için, bu değişiklik ekran alanını anlamsız derecede fazla israf edip gerçek çalışma verimliliğimi etkiledi
Daha yeni donanım almaya gücü yetmeyen ya da herhangi bir nedenle kullanmak istemeyen insanlara zarar veren kullanıcı düşmanı yazılım mühendisliği akımının bir parçası
Bu örnekte mesele her şeyi hantal Electron ya da React uygulamasına çevirmek de değil; Mozilla’nın hâlâ Firefox’u önemsiyormuş gibi görünmesini sağlayacak yüzeysel bir izlenim yaratmak için UI’ı sebepsiz yere daha kötü hale getirmesi
Proton benim kullanım biçimim için o kadar kötü ki özelleştirilmiş userChrome kullanıyorum

Daha İyi Bir Varsayılan Firefox Arayüzü Nasıl Oluşturulur

Firefox v89 Sonrası UI Tartışmaları ve Projenin Kapsamı

UI/UX’i Değerlendirme Kriterleri

Sezgisellik

Verimlilik

Esneklik

Proton UI’da Sorunlu Görülen Üç Nokta

Düğme Gibi Görünen Sekmelerin Sorunu

Alışkanlık ile Değişim Arasındaki Denge

Gestalt Psikolojisiyle Sekme Algısı

Safari’nin Geri Aldığı Düğme Tipi Sekmeler

Aşırı boşlukları ve ikonları kaldırma

Boşluklar ve içerik görünürlüğü

Fitts Yasası açısından tıklama verimliliği

Compact UI farkının neredeyse kaybolması sorunu

Yalnızca metinden oluşan UI ve erişilebilirlik

Lepton Theme’in sekme yeniden tasarımı

Sekme durumlarını tutarlı göstermek

Photon, Proton ve Lepton’da seçili durum karşılaştırması

Sessize alma, PIP, sabitlenmiş sekme gibi birleşik durumlar

Sekme genişliğine göre alan kullanımı

Dağıtım biçimi ve zevk

İkon ve padding ayarı

Paneller ve bağlam menüsü

Edge, Chrome ve Lepton menü karşılaştırması

Bağlam menüsü ve kısayol grupları

Daha fazla ikon uygulama

OS, tema, renk uyumu

Sistem varsayılan teması

Başlık çubuğu düğme alanı

Proton temasını tamamlama

Etkileşim ve animasyon

Yardımcı etkileşimler

Animasyon tasarımı

İllüstrasyonları geri getirme

Sonuç ve sınırlamalar

İlgili okumalar

1 yorum

Hacker News yorumları