Cara Membuat UI Default Firefox yang Lebih Baik

(github.com/black7375)

1 poin oleh GN⁺ 2024-02-21 | 1 komentar | Bagikan ke WhatsApp

Proton UI di Firefox v89 memicu kontroversi seputar tab, margin, dan ikon setelah dirilis pada 2021; Firefox-UI-Fix hadir sebagai tema yang menyempurnakannya dan juga diterapkan sebagai tema default di Waterfox dan Floorp
Keputusan desain tidak bertumpu pada A/B test, melainkan pada teori dan studi kasus UX seperti Jakob’s Law, psikologi Gestalt, Fitts’s Law, serta riset Nielsen Norman Group
Tab yang tampak seperti tombol, padding yang lebar, dan menu yang berpusat pada teks dapat menurunkan pengenalan status terpilih, efisiensi klik, tampilan konten di layar kecil, serta aksesibilitas
Lepton Theme menampilkan status tab secara konsisten dalam rentang 36px~240px, serta menyesuaikan tombol tutup, ikon, padding, warna tema, dan ruang title bar per OS
Tujuannya bukan menolak Proton UI, melainkan menyempurnakan Proton UI sambil menghormatinya; karena keterbatasan CSS, masih ada area yang sulit diimplementasikan, seperti perilaku page action button

Kontroversi UI setelah Firefox v89 dan cakupan proyek

Dokumen ini terutama membahas UI berdasarkan Firefox v89, dengan asumsi bahwa beberapa perbaikan telah dilakukan setelahnya
Setelah Firefox v89 dirilis pada 2021, kontroversi besar seputar Proton UI muncul di Reddit dan Hacker News
Repositori Firefox-UI-Fix dengan cepat meraih popularitas karena menyempurnakan berbagai masalah Proton UI, dan Waterfox serta Floorp juga menggunakan tema ini sebagai default
Mozilla memutuskan untuk mengakhiri dukungan Windows 7 dan Windows 8, dan Firefox v115 adalah versi terakhir yang mendukung Windows lama
- Firefox v115 semula dijadwalkan tersedia hingga September 2024
- Baik Mozilla maupun proyek ini perlu merapikan kode dan fitur terkait Windows lama, dan dokumen ini juga membahas UI Windows lama

Kriteria untuk menilai UI/UX

Kriteria desain secara garis besar dirangkum menjadi tiga: intuitivitas, efisiensi, dan fleksibilitas
Karena tidak ada data atau lingkungan yang diperlukan untuk A/B test, penilaian dilakukan secara deduktif dengan memprediksi perilaku pengguna dan menggunakan berbagai teori
Intuitivitas
- Simplicity: mengurangi beban kognitif dengan menghapus atau menyederhanakan elemen yang tidak perlu
- Visibility: membuat fungsi inti terlihat agar mudah dioperasikan
- Accustomably: mengurangi jumlah hal yang perlu dipelajari agar pengguna dapat cepat beradaptasi
- Consistency: mengurangi pengecualian agar mudah diingat
- Predictability: menurunkan kecemasan dengan membuat pengguna merasa memiliki kendali
- Affordance: menyediakan petunjuk tentang cara mengoperasikan sesuatu
Efisiensi
- Clearly: pembedaan harus dapat dikenali dengan baik
- Proximal: harus cukup dekat agar dapat dijangkau dengan cepat
- Bulky: ukuran besar memudahkan pengenalan atau perpindahan
- Snappy: harus merespons dengan mulus tanpa tersendat
Fleksibilitas
- Accessibility: mengakomodasi cakupan yang luas tanpa memandang usia, disabilitas, dan sebagainya
- Functional: mengakomodasi beragam fungsi agar kebutuhan dapat terpenuhi
- Contextual: hadir secara alami dalam setiap situasi
- Harmonious: berpadu secara alami dengan setiap elemen
- Pleasure: mengejar kepuasan untuk kesenangan atau kreativitas
- Compatibility: mempertimbangkan API versi lama, roadmap versi lebih baru, upstream, OS, RTL, dan lain-lain

Tiga hal yang dianggap bermasalah di Proton UI

Kesan pertama Firefox v89 Developer Edition memang rapi, tetapi dalam penggunaan nyata dianggap sangat tidak nyaman
Masalah utamanya dapat diringkas menjadi tiga hal
- Tab: tab terlihat seperti tombol
- Padding: ruang kosong terlalu besar
- Icons: sulit dibaca hanya dengan ikon, atau penghapusan ikon menimbulkan masalah lain

Masalah tab yang tampak seperti tombol

Keseimbangan antara kebiasaan dan perubahan
- Menurut Jakob’s Law, pengguna mengharapkan aplikasi baru pun berperilaku seperti UX yang sudah mereka kenal
- UI tab baru Firefox terlihat bertentangan dengan ekspektasi ini sehingga sulit untuk diadaptasi
- Namun, jika perubahan UI dihalangi hanya karena tidak familier, perkembangan dapat terhambat dan hanya berhenti pada mengikuti tren
- Kita bisa menjadi pengikut cepat, tetapi harus berhati-hati agar tidak menghambat inovasi
Pengenalan tab dilihat dari psikologi Gestalt
- Psikologi Gestalt digunakan untuk menjelaskan mengapa tab terasa seperti kelompok yang berbeda
- Law of Proximity: tab berada jauh dari toolbar sehingga terasa seperti kelompok lain
- Law of Similarity: tab memiliki warna berbeda dari toolbar sehingga terlihat seperti kelompok lain
Tab berbentuk tombol yang dikembalikan oleh Safari
- Apple mengumumkan browser Safari baru untuk macOS 12 Monterey di WWDC
- Ketika keluhan pengguna meningkat, pada Beta 3 Apple mengajukan kompromi untuk tab yang tampak seperti tombol
  - macOS Monterey Beta 3: Apple Redesigns Safari Tab Interface Following Complaints
  - macOS Monterey beta 3 brings redesigned Safari tab interface to address complaints
- Kompromi itu juga gagal, dan Apple pada akhirnya sepenuhnya kembali ke desain tab klasik
  - 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
- Ini bukan berarti Apple selalu benar, tetapi karena situasinya sampai pada titik sulit untuk dibalik berkali-kali, button-like tab dapat dikritik

Menghapus ruang kosong dan ikon yang berlebihan

Ruang kosong dan visibilitas konten
- Peramban web adalah penampil konten web, sehingga tidak boleh menghalangi tampilan konten
- Proton UI merugikan dari sisi tampilan konten karena padding yang besar
- Pada perangkat layar kecil seperti laptop 13 inci, masalah ini menjadi fatal
Efisiensi klik dilihat dari Fitts’s Law
- Fitts’s Law memandang waktu yang dibutuhkan untuk bergerak cepat ke area target bergantung pada rasio antara jarak ke target dan lebar target
- Rumus intinya adalah MT = a + b · ID = a + b · log₂(2D/W)
- MT adalah waktu rata-rata penyelesaian gerakan, a dan b adalah konstanta sesuai pilihan perangkat input, dan ID adalah indeks kesulitan
- D adalah jarak dari titik awal ke pusat target, dan W adalah lebar target yang diukur sepanjang sumbu gerakan
- Jika mengesampingkan konstanta dan log, rasio 2D/W menjadi penting
- Pertama-tama jarak harus dikurangi, dan lebar dimaksimalkan tanpa membuat jarak bertambah
- Ruang tersisa juga harus diisi agar padding tidak menjadi terlalu besar
- Photon(v88) dinilai sebagai UI yang lebih mudah diklik pada ikon Amazon dan menu
  - Ikon Amazon memiliki W yang lebih besar
  - Menu memiliki W yang sedikit lebih kecil, tetapi D jauh lebih kecil
- Jika ikon terlihat lebih kecil daripada area klik sebenarnya, ada kerugian; jadi lebih baik mengisi area padding agar ikon tampak lebih besar
Masalah ketika perbedaan Compact UI hampir menghilang
- Mozilla menjadikan compact UI deprecated
- Compact UI, Normal UI, dan Touch UI pada v89 dianggap hanya sedikit berbeda pada tinggi tab bar dan toolbar, sehingga perbedaannya hampir tidak bermakna
UI hanya teks dan aksesibilitas
- Setelah melihat Content design considerations for the new Firefox dari Mozilla, muncul keraguan apakah menghapus ikon adalah pilihan yang baik
- Riset ikon Nielsen Norman Group merangkum bahwa bentuk yang hanya berisi teks menunjukkan hasil terburuk
- UI baru Chrome yang dirilis pada 2023 juga menyertakan ikon

Perancangan ulang tab pada Lepton Theme

Menampilkan status tab secara konsisten
- Desain tab bukan hanya soal bentuk, tetapi juga persoalan menangani berbagai status
- Tab dapat memiliki status seperti berikut
  - 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, dan lain-lain
- Status-status ini harus diekspresikan secara konsisten dalam rentang 36px~240px
Perbandingan status terpilih pada Photon, Proton, dan Lepton
- Pada Photon dan Lepton, tab yang dipilih tersambung dengan toolbar sehingga mudah dikenali
- Lepton memendekkan penanda container pada tab latar untuk mengurangi beban visual
- Pada Proton, sulit membedakan tab mana yang dipilih antara warna latar yang disorot dan bar bagian atas
- Bar bagian atas adalah penanda tab container, tetapi terasa mirip dengan tab terpilih pada UI sebelumnya, Photon
- Perbandingan status Selected, Multiple selected, Hovered, dan General dapat dirangkum sebagai berikut
  - Photon mengenali Selected lewat koneksi dengan toolbar, dan membedakan Multiple selected serta Hovered lewat warna garis konteks di bagian atas
  - Pada Proton, Selected dan Multiple selected terlihat hampir sama
  - Lepton membedakan status melalui koneksi dengan toolbar dan warna latar yang berbeda
Status gabungan seperti mute, PIP, dan tab pinned
- Pada kombinasi Muted, Hover, dan PIP, perbedaan antarbrowser cukup besar
  - Photon tidak membedakan Muted dan Muted + Hover, dan jika ada penanda PIP, posisi Muted berubah besar
  - Proton English hanya menampilkan Muted sebagai teks, dan PIP hanya dapat diketahui pada status hover
  - Proton Korean membuat UI berubah sesuai bahasa tampilan, Muted menyembunyikan favicon, dan penanda PIP tidak muncul
  - Lepton menampilkan semua informasi, menjaga posisi Muted dan PIP tetap konsisten, serta memberi sinyal bahwa kontrol tersedia saat hover
- Pada kombinasi yang lebih kompleks, Proton dinilai hampir sulit digunakan di lingkungan bahasa Korea
- Lepton menangani status gabungan dengan cara berikut
  - Selalu mengekspresikan semua informasi
  - Jika tidak ada favicon, ukuran Muted diperbesar untuk menggantikannya
  - Posisi selalu dipertahankan sama bahkan dalam status Pinned
  - Jika posisi bertumpuk seperti Container dan Titlechanged, keduanya digabung untuk ditampilkan
Pemanfaatan ruang sesuai lebar tab
- Lepton menyesuaikan perilaku berdasarkan lebar tab
- Jika lebarnya cukup, semua tombol tutup ditampilkan seperti Proton
- Jika tab memenuhi ruang hingga lebarnya kurang, tombol tutup pada tab latar disembunyikan
- Untuk mengurangi salah klik, ukuran tombol tutup diperkecil, tetapi saat tab latar di-hover, tab tetap bisa ditutup
- Judul tab dibuat terlihat lebih efisien dengan menyesuaikan padding dan gradien
- Ruang dihemat agar teks New terlihat pada tab terakhir
- Penyesuaian hanya dilakukan saat lebar tidak cukup, sehingga kata wiki terlihat jelas
- Lepton menampilkan lebih banyak konten web, sementara Photon dan Lepton memiliki garis pemisah tab
Bentuk distribusi dan selera
- Kriteria UI yang baik berbeda-beda untuk tiap orang dan sampai batas tertentu merupakan persoalan selera
- Tiga konsep tab disediakan
  - Tab Lepton umum yang disesuaikan dengan Proton
  - Tab Photon dengan garis konteks bersudut siku-siku
  - Tab Proton asli
- Tema ini terutama dikenal karena dukungannya terhadap UI tab Photon

Penyesuaian ikon dan padding

Panel dan menu konteks
- Keluhan yang ada dikurangi dengan menambahkan ikon dan menyesuaikan padding
- Isu unbalanced strokes diperbaiki oleh kontributor @zapSNH, sehingga tersedia set ikon yang konsisten dan mudah dikenali di seluruh browser
Perbandingan menu Edge, Chrome, dan Lepton
- Edge memiliki menu dengan ikon kosong tanpa alasan khusus, dan ikon-ikonnya secara keseluruhan terlalu mirip sehingga sulit dipindai sekilas
- Sebagian metafora ikon Edge seperti New InPrivate window dianggap membingungkan
- Chrome memiliki gaya ikon yang tidak modern, tampak bersudut dibandingkan UI yang membulat, dan ikonnya terlihat terlalu kecil dibandingkan ukuran teks
- Lepton menyediakan set ikon yang konsisten dengan gaya modern dan ukuran yang sesuai
- Ikon berisi hanya digunakan pada ikon penting untuk meningkatkan kemudahan pemindaian sekilas, serta menggunakan metafora yang membedakan tampilan
Menu konteks dan grup pintasan
- Di Edge, tidak jelas mengapa Add all tabs to favorites tidak memiliki ikon
- Chrome sama sekali tidak memiliki ikon menu konteks
- Lepton menempatkan ikon agar dapat dibedakan dengan jelas
- Dalam menu konteks halaman web, hanya Firefox yang memiliki grup pintasan di bagian atas, sehingga menghasilkan efek akses cepat seperti pie menu
Penerapan lebih banyak ikon
- Ikon ditambahkan ke menu global dan berbagai panel
- Saat folder pustaka bookmark dibuka, ikon menu juga bereaksi
- Ukuran menu dan panel mengecil, dan posisi awal teks menjadi sejajar
- Ikon ditambahkan untuk menyesuaikan berbagai kasus tata letak

Dukungan OS, tema, dan warna

Tema default sistem
- Lepton menyesuaikan UI dengan OS dan pengaturan yang berbeda
  - Windows 7: mengikuti desain jendela Aero semirip mungkin
  - Windows 8.1: membuat bilah judul serasi seperti di Windows 7
  - Windows 10 Light: mengikuti warna Legacy Edge dari Windows 10
  - Windows 10 Dark: menerapkan acuan yang sama
  - Windows 10 Dark + Accent titlebar: jika pengaturan warna aksen bilah judul aktif, tema akan mengikutinya
  - MacOS Light/Dark: mengikuti warna Mac
- Pengguna Windows 11 dapat menggunakan opsi userChrome.compatibility.os.win11 untuk memakai warna Windows 11 yang mirip Edge
- Juga berfungsi di Linux, serta memperbaiki masalah warna dan tombol bilah judul non-native
Ruang untuk tombol bilah judul
- Dalam kasus seperti Tabs on bottom atau One Liner, ruang untuk tombol bilah judul harus disediakan di dalam toolbar
- Nilai dan posisinya berbeda untuk tiap OS
  - Win7, Win8: 105px, kanan
  - Win10: 138px, kanan
  - Mac: 72px, kiri
  - Linux: 84px, dan dapat berbeda tergantung tema sistem
- Dalam mode layar penuh, UI native digunakan, sehingga harus diperlakukan sebagai 0px
- Sisi kiri maupun kanan sama-sama memungkinkan, dan tombolnya bisa berjumlah tiga atau tidak
Penyempurnaan tema Proton
- Memperbaiki masalah aksesibilitas yang muncul karena kontras warna tema Proton sendiri kurang memadai
- Meningkatkan kontras warna dan bayangan outline pada tema bawaan
- Menerapkannya juga pada bagian yang tidak memakai tema Proton agar lebih seragam
- Menerapkan mode gelap juga pada bagian yang belum mendapatkan mode gelap
- Membuat warna tetap diterapkan dengan baik saat menggunakan tema kustom, bukan tema default
- Pada tabel dan daftar, menambahkan warna latar berbeda untuk baris genap agar lebih mudah dibaca
- Pada pemutar audio, menerapkan sudut membulat yang mengikuti desain Proton
- Pemutar video dibuat agar konten lebih terlihat, dan ikonnya juga diperbaiki agar lebih enak dilihat

Interaksi dan animasi

Interaksi yang membantu
- Saat hover, jika pointer mouse atau elemen berubah, itu memberi petunjuk bahwa ada sesuatu yang dapat dilakukan
- Untuk elemen yang sifatnya berbeda dari aksi lain dan terlihat kecil, seperti perintah zoom in/out pada panel, perubahan pointer mouse dapat membantu
- Jika garis tepi muncul saat mouse berada di atas sebuah field, secara intuitif terlihat bahwa field tersebut dapat ditekan
- Teks pada item aktif menggunakan warna aksen
- Item yang dihapus dibuat tampak nonaktif dengan ikon dalam skala abu-abu dan judul yang dicoret, tetapi saat hover judul tanpa coretan akan terlihat
Perancangan animasi
- Animasi membuat UI terasa lebih halus dan alami, tetapi terkadang membuat aksi terasa lambat
- Kriteria desainnya adalah sebagai berikut
  - Mengikuti easing curve Photon, berakselerasi cepat di awal dan melambat dengan lembut di akhir
  - Mengurangi durasi animasi awal agar terasa merespons dengan cepat
  - Memperpanjang durasi animasi akhir agar terasa halus
  - Objek besar memiliki durasi lebih panjang daripada objek kecil
  - Durasi di dalam objek yang bertingkat juga harus lebih panjang
- Prinsip yang sama diterapkan pada warna latar, rotasi panah, tab kontainer, tab bersuara dan tab yang disematkan, serta sidebar
- Prinsip yang sama juga diterapkan pada fitur opsional yang bukan default
  - Autohide Back Button
  - Autohide Page Action
  - Autohide Tab Bar
Pemulihan ilustrasi
- Ilustrasi Photon yang ramah dianggap mengurangi kebingungan dalam situasi error
- Tema ini memulihkan ilustrasi tersebut
- Contoh penerapannya adalah layar Welcome back, DNS error, Session restore, dan Search result

Kesimpulan dan batasan

Tema ini mempertimbangkan kebiasaan, psikologi, dan hasil riset, sekaligus mewarisi keunggulan tema yang sudah ada
Mendukung OS, mode gelap, tema kustom, dan interaksi yang sesuai konteks
Karena keterbatasan CSS, ada hal-hal yang tidak dapat diimplementasikan, seperti page action button behavior
Tujuannya adalah “🦊 I respect proton UI and aim to improve it.”

1 komentar

GN⁺ 2024-02-21

Komentar Hacker News

Hal yang paling tidak nyaman di UI baru adalah semua elemennya menjadi terlalu besar
Kalau itu layar ponsel yang ditekan dengan jari, masih bisa dimengerti, tetapi pada ukuran desktop biasa ini sangat membuang ruang
Peningkatan padding yang disebut di tulisan itu juga jadi penyebab, tetapi penghapusan opsi compact UI density juga besar pengaruhnya
Setelah mengaktifkan browser.compactmode.show di about:config, masuk ke menu > Alat lainnya > Sesuaikan bilah alat > “density” di bagian bawah, maka opsi itu bisa dipakai lagi
Pada opsi itu tertulis “not supported”, tetapi kondisinya sudah begitu selama bertahun-tahun
- Saya jauh lebih suka antarmuka yang punya padding yang lapang
  Jika padding cukup, noise visual dan kerumitan berkurang, dan elemen-elemen punya ruang untuk bernapas
  Mungkin tidak ada manfaat praktis yang konkret, tetapi hanya dengan melihatnya saja rasanya tidak terlalu membuat cemas
- Di satu sisi ada orang yang berkata “tolong jangan buang ruang dengan padding”, dan setiap kali KDE dibahas ada orang yang berkata “terlalu banyak informasi dan teks dijejalkan tanpa padding sehingga sulit dibaca”
  Mau dilakukan kena kritik, tidak dilakukan juga kena kritik
- Saya penasaran apakah ada yang tahu latar belakang kenapa itu ditampilkan sebagai “not supported”
- Itu masalah saya juga, dan hari ini saya akan mencoba flag itu
- “not supported” terasa seperti kedengkian terhadap orang-orang yang mengkritik pilihan desain “modern”
Saya pembuat Lepton, tema populer untuk Firefox
Dari sudut pandang saya, Anda bisa melihat bagaimana berbagai keputusan diambil dan bagaimana keputusan Mozilla yang kurang memuaskan diperbaiki
Jadi ini bisa menjelaskan bagaimana perbaikannya dilakukan dan mengapa tema itu menjadi populer
Tulisan ini adalah bagian dari sebuah seri
- https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
- Saya penasaran di mana Lepton bisa ditemukan
  Di bagian tema pada toko add-on, tidak ada apa pun dengan nama itu
  Mungkin Lepton adalah UI Firefox lama sehingga hanya tersisa di rilis lama
  Saya sudah membaca tulisannya, tetapi mungkin ada yang terlewat
- Biasanya saya tidak banyak mengustomisasi UI dan cenderung mencoba membiasakan diri dengan bawaan
  Karena gesekannya lebih kecil, dan saya suka bisa beradaptasi dengan pengaturan default begitu selesai memasang
  Namun kustomisasi UI Firefox menjadi pengecualian karena mudah diatur dan kualitasnya juga bagus
  Kesan bahwa ini dipelihara juga merupakan keunggulan penting
  Saya tidak tahu bahwa Anda sudah menulis sepanjang ini, dan karena terlihat menarik serta terdokumentasi dengan baik, saya berencana membacanya
- Yang terutama menarik adalah bahwa telemetri digunakan untuk membenarkan penghapusan item antarmuka
  Secara pribadi, bilah alamat terasa sangat besar, sampai-sampai meski memasukkan 10 tombol pun sepertinya masih ada ruang tersisa
  Jadi sulit bagi saya membayangkan alasan untuk menghapus item, selain keinginan menghapus semuanya sampai tidak ada lagi yang bisa dihapus
  Karena Anda tampaknya paham UI/UX, saya punya pertanyaan: saya punya teori bahwa ikon hitam-putih lebih buruk daripada ikon berwarna, dan saya penasaran apakah ada riset atau konsensus terkait hal itu
- Proses pemasangannya sangat mudah
  Namun saya menyarankan agar langkah-langkahnya disusun sederhana terlebih dahulu, dan bagian lanjutan dipindahkan sepenuhnya ke bawah
```
1. Jalankan skrip dari command line OS  
2. Buka `about:support` lalu klik hapus cache startup  
```
UX browser yang lebih baik, kalau boleh dibilang tegas, dimulai dari tab vertikal
Tab horizontal menjadi sulit dikelola atau dilacak begitu membuka 6–8 tab saja
Pada tab bertingkat vertikal, tautan yang dibuka sebagai tab baru otomatis menjadi tab anak, dan struktur serta konteksnya jauh lebih mudah disimpulkan dibanding tab horizontal
Jika ditambah warna per situs, grup tab juga lebih terlihat, dan pohon tab bisa di-bookmark untuk menyimpan status progres pekerjaan riset atau dokumentasi
Beberapa file CSS dan screenshot ada di sini: https://gist.github.com/aclarknexient/88673880d373864eee1927...
Saya juga perlu menambahkan screenshot tab bertingkat dan berwarna, jadi akan saya masukkan setelah komentar ini diposting
- Saya suka tab vertikal, dan itu sangat bermanfaat untuk cara saya menjelajah yang berpindah-pindah di antara beberapa pekerjaan jangka panjang
  Tab lebih cocok untuk kegunaan seperti ini dibanding bookmark, karena pada 2024 pun pengelola bookmark di semua browser masih belum matang, sehingga pengaturan bookmark buruk sekali
  Saya tidak terlalu tertarik pada tab bertingkat, tetapi fitur yang memungkinkan mengganti grup tab yang ditampilkan di sidebar tab dengan sekali klik—seperti “panes” di ekstensi Firefox Sidebery atau “spaces” di Arc—sangat kuat
  Apalagi jika panel/space itu dikaitkan dengan profil browser
  Misalnya, satu jendela browser bisa dialihkan untuk penjelajahan umum, belanja, kuliah online, atau pengembangan perangkat lunak, dan jika perlu panel/space tertentu juga bisa dilepas sementara menjadi jendela baru
- Saya mengakui ini soal selera, tetapi saya sangat percaya pada kebalikannya
  Memang benar bahwa jika membuka lebih dari 6–8 tab di bilah tab horizontal, pengelolaan dan pelacakannya menjadi sulit
  Selama 6 bulan terakhir saya memakai Arc, dan di bilah tab vertikal pun, kalau ada 6–8 tab terbuka, pengelolaan dan pelacakannya tetap sama sulitnya
  Ujung-ujungnya saya menutup semuanya setiap 4 jam dan mulai dari awal lagi
  Ada dua argumen dari kedua sisi yang lebih saya pahami
  Pertama, jika menghitung jumlah piksel yang dipakai bilah tab dalam mode horizontal dan vertikal, saya belum pernah melihat bilah tab vertikal praktis yang memakai piksel sama banyak atau lebih sedikit daripada yang horizontal
  Kedua, karena monitor hampir selalu memiliki lebih banyak piksel horizontal daripada vertikal, ada juga argumen bahwa bilah tab vertikal memanfaatkan rasio aspek monitor dengan lebih baik
  Ini terasa benar pada 16:9 atau lebih lebar, tetapi pada 16:10 yang umum di MacBook, secara pribadi terasa kurang cocok
- Melihat screenshot FF89 yang “kontroversial”, salah satu perubahan terbesar tampaknya adalah desain ulang tab dengan padding lebih besar
  Namun karena saya menyembunyikan bilah tab atas dan memakai Tree Style Tab yang cocok sekali dengan Firefox, saya bahkan tidak menyadari perubahan itu
  Saya tidak terlalu menyukai Firefox itu sendiri, tetapi keuntungan UX dari pohon tab mengalahkan detail-detail kecil yang sedikit lebih baik di Chrome/Safari, jadi saya tidak perlu banyak berpikir
  Namun untuk pekerjaan frontend saya memakai Chrome karena developer tools-nya
- Saya tidak tahu apakah membalas komentar sendiri melanggar etiket HN, atau justru cara yang baik untuk menyusun informasi :)
  Di bagian lanjutan halaman opsi Tree Style Tab ada area stylesheet pengguna yang dimuat ulang secara real time
  Ini sangat bagus untuk menguji pilihan font tanpa me-restart browser
  Saya mengubahnya agar memakai font kondensasi SF Pro dari Apple
  Iosevka Mono, yang biasanya saya pakai hampir di semua tempat, terasa kurang pas untuk judul tab
  CSS-nya seperti berikut:
```
: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;  
}  
```
  Saya menambahkan screenshot hasil CSS ini ke tautan yang sama seperti komentar sebelumnya: https://gist.github.com/aclarknexient/88673880d373864eee1927...
- Di laptop, tab vertikal mulai terasa kurang bagus
  Hack sidebar auto-hide di Firefox rusak dan saya malas memperbaikinya, jadi sekarang muncul ruang kosong abu-abu beberapa inci, padahal tab yang terbuka juga tidak sampai 100
  Biasanya saya hanya membuka sekitar 5–10 tab
  Yang lebih menyebalkan, banyak situs web sekarang menentukan mobile/desktop bukan dari user agent, melainkan dari ukuran viewport browser
  Karena saya sudah kehilangan lebar horizontal 1 inci akibat tree-style tab, hampir tidak ada lagi ruang untuk mengecilkan jendela sebelum situs mengira saya memakai iPad
  Jadi pada dasarnya saya harus memakai browser dalam layar penuh; kalau tidak, muncul banyak menu hamburger dengan wrapping teks yang berantakan dan navigasi menjadi lebih buruk
  Kebanyakan akhirnya saya harus mematikan sidebar sepenuhnya, sehingga setiap kali berpindah tab perlu beberapa klik tambahan
Tulisan ini sepertinya mencoba meyakinkan bahwa pembuat tema membuat tema Firefox yang secara objektif lebih baik berdasarkan aturan UX, tetapi sebagian besar perubahannya terlihat seperti selera pribadi
Jelas temanya dibuat dan dipelihara dengan baik, tetapi secara pribadi saya tidak menganggapnya terlalu menarik secara visual, dan beberapa bagian tampak lebih rumit
Tiap orang punya preferensi berbeda, dan Firefox memilih satu desain tetapi juga mendukung perubahan seperti ini, jadi itu sendiri bagus
Namun agak lucu bahwa penulisnya tampak berusaha membuktikan bahwa preferensinya benar secara empiris
- UI jelas soal selera, jadi distribusinya dibuat dalam tiga bentuk
  Namun membingungkan jika tidak ada indikator apakah tab sedang dimuat saat dalam keadaan mute, atau jika tidak ada pemisah tab
Saya berhenti menjadikannya browser utama sejak Firefox merusak tab
Sesekali saya membukanya untuk pengujian, lalu kalau tabnya masih terlihat seperti tombol, saya mencatat dalam hati untuk mencobanya lagi kira-kira setengah tahun kemudian
Tema terang terasa sangat menghina karena berupa tombol putih di atas abu-abu terang
Pengaturan tema sistem Windows juga tidak diikuti dengan benar
Di Windows, aplikasi bisa tetap memakai tema terang sementara warna diterapkan pada taskbar, Start menu, dan title bar; Edge memahami ini, dan Chrome, meski tidak, setidaknya punya kontras yang cukup
Firefox benar-benar meleset
- Saya memakai Firefox sebagai browser sekunder, tetapi setiap kali dinyalakan, ia lebih dulu mengganggu dan menyela untuk memberi tahu perubahan dan fitur baru seperti Pocket, VPN, dan semacamnya yang ditambahkan sejak terakhir kali
  Tolong berhenti, biarkan saya mulai browsing seperti tujuan saya datang
  Saya berharap mereka tidak meniru dark pattern Microsoft yang menyodorkan Office 365 dan Game Pass di sela-sela pembaruan
  Iklan fitur seperti itu sebaiknya ditujukan kepada orang yang belum memasang Firefox; saya sudah menjadi “pelanggan”, jadi jangan ganggu saya
  Karena itu saya kebanyakan memakai Chrome
  Mungkin lebih inferior dan bisa memata-matai saya, tetapi setidaknya tidak menghalangi jalan saya
- Pasang Sidebery[1] dan sembunyikan tab bawaan[2]
  Inilah jalannya :)
  [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
  [2] https://superuser.com/a/1424494
Saya penasaran apakah ada orang lain yang sama sekali tidak terganggu oleh tab yang “terlihat seperti tombol”
Kadang rasanya hanya saya saja
Saya tidak tahu apakah itu benar-benar mengganggu bagi pengguna baru
- Saya memakai Firefox setiap hari, tetapi bahkan tidak tahu bahwa ini dianggap sebagai “masalah”
  Sebelum melihat komentar-komentar ini, saya tidak pernah memikirkannya sekali pun, dan karena merasa tab bar yang sekarang sepenuhnya layak dipakai, sepertinya saya tidak akan memikirkannya lagi
- Fakta bahwa tab terlihat seperti tombol sendiri tidak terlalu mengganggu
  Justru itu alternatif umum untuk bentuk tab, dan setahu saya kontrol tab di Windows 95 juga punya mode yang membuat tab terlihat seperti tombol
  Sepertinya dulu juga dipakai di taskbar, dan sejak era 90-an mIRC memakainya untuk berpindah kanal/jendela
  Namun tampilan “tombol tab” yang spesifik ini secara pribadi tidak saya sukai
  Bentuknya seperti pil lonjong sehingga tampak sulit ditelan, dan saya sudah terbiasa dengan tampilan yang seperti tab asli, jadi tidak merasa ada alasan untuk mengubahnya
  Untungnya Firefox bisa dikustomisasi tampilannya, jadi saya mengubahnya lewat userChrome.css agar lebih sesuai selera
- Ini tidak memengaruhi penggunaan Firefox
  Hanya saja ia membuang-buang piksel dengan memasukkan celah yang tidak punya alasan untuk ada
  Pada titik ini, saya sudah terbiasa dengan keputusan UI yang tidak masuk akal sampai-sampai tinggal menerima apa pun yang diberikan organisasi
  Hampir tidak ada yang tampak peduli pada konsistensi atau kemudahan ditemukan
- Ini mengganggu karena cukup berbeda dari hal-hal lain yang punya tab, misalnya bukan hanya browser tetapi juga file manager atau editor
  Saya tidak mengerti kenapa semantiknya harus dilempar semuanya ke luar jendela
  Terlihat seperti tombol, tetapi tidak berperilaku seperti tombol
- Saya bahkan tidak pernah menyadarinya, dan setelah ditunjukkan pun tidak menjadi masalah
  Bagi saya, orang-orang yang menganggapnya masalah terlihat cukup seperti sedang mencari-cari kesalahan
Karena semua orang menuliskan keluhannya masing-masing, saya tuliskan juga keluhan saya
Jika pohon folder bookmark besar, proses mencari lokasi untuk menambahkan bookmark baru di popup kecil UI “Add Bookmark” itu mengerikan
Sidebar bookmark bisa mencari berdasarkan nama, tetapi tidak bisa menemukan di mana bookmark itu berada
Add-on pencarian bookmark seperti Bookmark search plus 2 menyelesaikan masalah ini, tetapi seharusnya itu tidak perlu
Sunting: Saya baru tahu klik kanan -> Show in Folder, dan itu bagus
Namun ini bukan UI terbaik, dan add-on yang disebutkan tadi masih jauh lebih intuitif
Tidak bisa memiliki beberapa sidebar sekaligus
Jadi Tree Style Tabs untuk menangani tab vertikal dan folder/pencarian bookmark tidak bisa dibuka bersamaan
Tidak masuk akal
Sebenarnya itu saja semuanya, dan sebagian besar berkaitan dengan penanganan bookmark
Saya tidak tahu apakah sisa UI-nya memang baik-baik saja, atau saya sudah terbiasa sampai tidak melihat kekurangannya, tetapi saya cukup nyaman memakai Firefox
Saya tidak merasa perlu banyak mengeluhkan desain ulang gaya seperti orang lain
- Entah kenapa, di semua browser bookmark sangat kurang mendapat perhatian
  Kalau mengambil browser dari 20 tahun lalu pun, pengelolaan bookmark hampir sama saja, atau dalam beberapa kasus malah sedikit lebih baik
  Sepertinya peningkatan bookmark tidak seksi, jadi tidak ada yang peduli
- Saya bertanya-tanya apakah Anda masih punya muscle memory untuk pintasan Ctrl+Shift+B yang dulu membuka panel samping besar
  Sekarang itu hanya menampilkan bilah horizontal sempit
  Karena itu saya juga jelas kesal dengan desain ulang ini, tetapi saya menemukan Ctrl+Shift+O sebagai pintasan “pengelolaan bookmark”
  Itu membuka jendela popup yang lebih besar berisi bookmark, dan sejauh ini terlihat hampir senyaman panel samping lama
  Pencarian bookmark juga bisa dilakukan, dan jika klik kanan lalu memilih “show in folder” di menu konteks, ia juga menampilkan posisinya dalam struktur hierarki
  Namun semua bookmark saya ada di “other bookmarks”, jadi sepertinya tidak akan sering saya pakai
Keluhan terbesar soal “perubahan UI Firefox yang tidak perlu” adalah penghapusan browser.urlbar.clickSelectsAll 4 tahun lalu
Seperti yang bisa diduga, Mozilla tidak peduli
Kalau membaca laporan bug-nya, sulit dijelaskan selain sebagai sikap bermusuhan terhadap pengguna: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
Tidak ada field teks di UI mana pun yang berperilaku seperti ini
Saya tidak mengerti mengapa Mozilla merilis “fitur” ini, dan sekaligus menghapus opsi untuk mematikannya
Tidak masalah kalau sebagian pengguna menyukainya, tapi jangan merampas opsi sialan saya lalu memaksakannya
- Nyatanya, logika Mozilla adalah bahwa semua browser besar lain berperilaku seperti itu
  Kalau dicek di Chrome, memang perilakunya seperti Firefox
  Dari sisi sikap bermusuhan terhadap pengguna, logikanya adalah orang-orang yang tidak suka perilaku baru ini tidak menyalakan telemetri, jadi mereka tidak berhak menikmati fitur yang mereka inginkan
  Ini cukup ironis mengingat keunggulan utama Firefox adalah model yang berorientasi pada privasi
- Sepenuhnya setuju
  Sudah 4 tahun berlalu, tapi saya masih tersandung hal ini setiap hari
  Ironisnya, cara saya biasanya gagal justru adalah kasus yang katanya ingin dibantu oleh perubahan ini
  Karena ingin memilih seluruh URL, secara naluriah saya mengklik dua kali; klik pertama memilih semuanya, lalu klik kedua menyempitkan pilihan menjadi satu kata
  Setelah sempat bingung, saya mulai mengklik lagi, dan sekarang untuk memilih seluruh URL saya harus mengklik tiga kali lagi
  Ini luar biasa menjengkelkan
  Penjelasan di tracker tampaknya kurang lebih “suatu hari nanti di masa depan kami mungkin melakukan sesuatu yang lain yang akan membenarkan ini”
  Empat tahun kemudian, hal seperti itu masih tidak terlihat
- Setelah fitur ini dihapus dari Firefox, saya pindah ke Vivaldi
  Vivaldi masih memungkinkan perilaku ini dipilih
  Saya penasaran apakah ada browser Unix lain yang memungkinkan mematikan pilih semua saat diklik
  Secara umum saya puas dengan Vivaldi, tapi akan bagus kalau ada lebih banyak pilihan
- Ini masih rusak
  Karena fitur “Paste and Go” tidak bekerja dengan benar
  Secara akal sehat, “Paste and Go” seharusnya sama dengan menjalankan “Paste”, yang menyisipkan teks clipboard dengan benar di posisi kursor, lalu “pergi ke alamat di bilah alamat”
  Namun jika URL yang dipilih otomatis dibatalkan lalu kursor diletakkan di dalamnya dan memakai “paste and go”, Firefox mengabaikan URL yang ada dan langsung mencoba membuka teks dari clipboard
  Ini juga bisa menjadi risiko keamanan karena dapat menipu pengguna agar mengunjungi URL yang tidak mereka maksudkan
  Kalau tidak mau memperbaikinya, seharusnya namanya diganti sesuai perilaku sebenarnya menjadi “Clear, Paste, and Go”
- Ada yang mengatakan “Mozilla tidak peduli”, tapi opsi internal tetaplah opsi internal, dan kecuali untuk kasus seperti kontrak dukungan perusahaan besar, browser mana pun tidak akan terlalu peduli
  Jika Anda harus masuk ke about:config untuk hal yang bukan terkait pengembangan atau manajemen perangkat mobile, sulit berharap itu akan terus bekerja setelah pembaruan
  Semua opsi adalah kode yang harus dipelihara
  Dugaan saya, saat menulis ulang kode yang memakai opsi tersebut, mereka memilih jalan yang lebih cepat dan murah: tidak mengimplementasikan ulang fitur yang memang tidak didukung secara resmi
Mimpi buruk UI/UX Firefox yang sebenarnya adalah sisa-sisa legacy
Rasanya setiap fungsi dasar browser terbuka dalam tampilan yang berbeda-beda
Pengaturan ada di tab browser, riwayat ada di sidebar
Tapi itu hanya untuk Ctrl+H; pengelolaan riwayat membuka jendela terpisah dengan Ctrl+Shift+H
Bookmark dan unduhan juga ada di jendela itu, jendela Library yang seperti ditarik dari era Firefox 3/4
Unduhan juga punya popup kecil, tapi Ctrl+J dan pengelolaan unduhan membuka jendela itu
Untuk bookmark, Ctrl+Shift+O membuka jendela itu, tetapi Ctrl+B membuka sidebar
Profil praktis tidak punya fitur yang layak dipakai pengguna, seperti lelucon, dan ada antarmuka yang tampak legacy tersembunyi di about:profiles
Kata sandi terbuka di tab browser, tetapi tampilannya mandiri dan tidak benar-benar cocok dengan yang lain
Satu-satunya yang terasa kohesif hanyalah pengaturan dan add-on sama-sama berada di tab browser dan saling memiliki tautan
Sisanya adalah kekacauan campuran tab browser, jendela, sidebar, pop-out, dan UI yang berbeda-beda
Sudah cukup lama berantakan seperti ini, dan karena tidak ada visi tunggal atau upaya nyata untuk merapikannya, sepertinya akan tetap begitu
Firefox View yang baru ditambahkan juga tampak seperti satu hal lagi yang menumpuk UI lain
Di sana juga ada riwayat, sehingga ada kira-kira tiga cara untuk melihat riwayat, dan setidaknya salah satunya terlalu banyak
Mungkin saja itu upaya memindahkan fungsi jendela Library ke tab View, tetapi untuk saat ini hanya menambah kebingungan
Memang ini sampai batas tertentu dilebih-lebihkan
Browser lain belakangan juga menyukai sidebar dan punya popup serta menu
Namun yang terutama mencolok adalah kontras antara jendela Library yang tampak legacy dan muncul di sana-sini, dengan fitur seperti pengaturan/add-on/kata sandi yang terbuka di tab browser
Pada akhirnya sulit menebak bentuk apa yang akan muncul saat membuka fungsi browser; pada awalnya jelas begitu, dan bahkan setelah terbiasa pun masih tersisa kesan “ya, semuanya terbuka semaunya sendiri”
Bisa beradaptasi, tetapi tetap saja berantakan
- Saya rasa tidak apa-apa kalau suatu fitur punya popover sekaligus jendela
  Namun harus diimplementasikan dengan cerdas
  Misalnya di Safari, unduhan pada dasarnya berupa popover, tetapi popover itu bisa “dilepas” menjadi jendela
  Ini mendukung kedua kasus penggunaan sekaligus menjaga konsistensi
  Firefox cukup membutuhkan pola pikir seperti ini
Hal terburuk dari UI Proton yang jarang dibicarakan orang adalah bahwa jika Anda tidak memakai monitor modern 1080p atau lebih, itu secara objektif merupakan kemunduran besar
Laptop saya adalah ThinkPad X220 lama, jadi perubahan itu membuang ruang layar secara tidak bermakna dan benar-benar memengaruhi efisiensi kerja
Ini bagian dari tren rekayasa perangkat lunak yang bermusuhan terhadap pengguna, yang merugikan orang-orang yang tidak mampu membeli perangkat keras lebih baru atau tidak ingin memakainya karena alasan apa pun
Dalam kasus ini, bukan karena semuanya dijadikan aplikasi Electron atau React yang gemuk, melainkan Mozilla mengubah UI menjadi lebih buruk tanpa alasan hanya untuk menciptakan kesan dangkal bahwa mereka masih peduli pada Firefox
Proton terlalu buruk untuk cara saya memakai browser, jadi saya menggunakan userChrome yang sudah saya kustomisasi

Cara Membuat UI Default Firefox yang Lebih Baik

Kontroversi UI setelah Firefox v89 dan cakupan proyek

Kriteria untuk menilai UI/UX

Intuitivitas

Efisiensi

Fleksibilitas

Tiga hal yang dianggap bermasalah di Proton UI

Masalah tab yang tampak seperti tombol

Keseimbangan antara kebiasaan dan perubahan

Pengenalan tab dilihat dari psikologi Gestalt

Tab berbentuk tombol yang dikembalikan oleh Safari

Menghapus ruang kosong dan ikon yang berlebihan

Ruang kosong dan visibilitas konten

Efisiensi klik dilihat dari Fitts’s Law

Masalah ketika perbedaan Compact UI hampir menghilang

UI hanya teks dan aksesibilitas

Perancangan ulang tab pada Lepton Theme

Menampilkan status tab secara konsisten

Perbandingan status terpilih pada Photon, Proton, dan Lepton

Status gabungan seperti mute, PIP, dan tab pinned

Pemanfaatan ruang sesuai lebar tab

Bentuk distribusi dan selera

Penyesuaian ikon dan padding

Panel dan menu konteks

Perbandingan menu Edge, Chrome, dan Lepton

Menu konteks dan grup pintasan

Penerapan lebih banyak ikon

Dukungan OS, tema, dan warna

Tema default sistem

Ruang untuk tombol bilah judul

Penyempurnaan tema Proton

Interaksi dan animasi

Interaksi yang membantu

Perancangan animasi

Pemulihan ilustrasi

Kesimpulan dan batasan

Bacaan terkait

1 komentar

Komentar Hacker News