Cara Membuat UI Dasar Firefox yang Lebih Baik

Cara Membuat UI Dasar Firefox yang Lebih Baik

• Sejak Firefox versi 89, ada polemik mengenai UI, dan repositori ini menjadi populer sebagai respons terhadapnya.
• Browser Waterfox dan Floorp juga menetapkan tema ini sebagai default.
• Pada 2023, Mozilla memutuskan untuk menghentikan dukungan untuk Windows 7 dan Windows 8. v115 menjadi versi dukungan terakhir dan masih dapat digunakan hingga September 2024.

Prinsip

• Mereka menggunakan 3 prinsip besar dan 16 prinsip kecil untuk desain UI/UX.
• Karena tidak dapat melakukan A/B testing, prediksi perilaku pengguna sangat penting.
• Mempertimbangkan intuitivitas, kesederhanaan, visibilitas, adaptabilitas, konsistensi, prediktabilitas, keteraturan penggunaan, efisiensi, kejelasan, kedekatan, ukuran, responsivitas, fleksibilitas, aksesibilitas, fungsionalitas, kontekstualitas, harmoni, kegembiraan, dan kompatibilitas.

Masalah

• Menyoroti masalah antara Firefox v88 Photon UI dan v89 Proton UI.
• Masalah utama termasuk tab yang terlihat seperti tombol, padding yang terlalu besar, dan ikon yang sulit dibaca saat berdiri sendiri.

Masalah tab (adaptabilitas, keteraturan penggunaan)

• Menganalisis masalah desain tab dengan mempertimbangkan aspek adaptabilitas dan keteraturan penggunaan.
• Menyebutkan contoh Apple Safari dan menjelaskan perubahan desain tab berdasarkan keluhan pengguna.

Ruang yang terlalu banyak (visibilitas, kedekatan, ukuran, konteks)

• Menjelaskan mengapa terlalu banyak ruang menjadi masalah dengan mempertimbangkan visibilitas, kedekatan, ukuran, dan konteks.
• Menjelaskan cara merancang UI yang mudah diklik menggunakan Hukum Fitts.
• Menganalisis permasalahan melalui perbandingan jarak UI dengan Google Chrome.

Bantuan ikon (kejelasan, aksesibilitas)

• Menjelaskan pentingnya ikon dengan mempertimbangkan kejelasan dan aksesibilitas.
• Menekankan pentingnya ikon melalui contoh penyegaran desain Chrome tahun 2023.

Redesain tab

• Menjelaskan berbagai pilihan desain untuk status tab dan menggarisbawahi kesalahan umum pada Proton UI.
• Merancang perilaku yang cerdas dan efisien sesuai dengan lebar tab.

Distribusi

• Meski ada standar pribadi tentang UI yang baik, sebagian merupakan masalah "selera".
• Membandingkan tab Lepton, Photon, dan Proton, lalu memilih contoh yang sesuai untuk masing-masing konsep.

Penambahan ikon dan penyesuaian padding

• Menyelesaikan keluhan sebelumnya dengan menambahkan ikon dan menyesuaikan padding.
• Menekankan keunggulan desain ikon Lepton dengan membandingkan ikon menu Edge, Chrome, dan Lepton.

Tema

• Menyediakan UI yang beradaptasi dengan berbagai OS dan pengaturan.
• Mengikuti desain dari Windows 7 hingga macOS untuk berbagai OS.

Interaksi

• Merancang interaksi yang membantu pengguna memahami apa yang sedang terjadi dan interaksi yang menyenangkan bagi pengguna.

Kesimpulan

• Tema ini mewarisi karakteristik terbaik tema sebelumnya dengan mempertimbangkan konvensi, psikologi, dan hasil penelitian.
• Mendukung penyesuaian berdasarkan OS, mode gelap, tema kustom pengguna, dan interaksi sesuai konteks.

Opini GN⁺

• Hal paling penting dari artikel ini adalah analisis mendalam mengenai prinsip desain dan cara menyelesaikan masalah untuk meningkatkan pengalaman pengguna.
• Bagi pengguna Firefox, tema ini bisa menjadi alternatif praktis yang mampu memberikan pengalaman browsing yang lebih baik.
• Bagi mereka yang tertarik pada desain UI/UX, ini adalah materi yang memberi wawasan untuk memahami latar belakang keputusan desain dan dampaknya.

[GN⁺]

Komentar Hacker News

• Masalah utama UI baru adalah bahwa semuanya terlalu besar. Mungkin ini cocok untuk layar ponsel, tetapi di layar desktop biasa menjadi pemborosan ruang. Seperti disebutkan dalam artikel, memang ada bagian yang memperbesar padding, tetapi penghapusan opsi kepadatan UI "compact" juga berkontribusi. Namun, opsi ini bisa diaktifkan kembali lewat about:config dengan setelan browser.compactmode.show. Opsi ini ditandai sebagai "unsupported", tapi telah berada dalam keadaan itu selama bertahun-tahun.
• Sebagai penulis tema Firefox populer bernama Lepton, saya dapat melihat sejumlah keputusan yang saya ambil tentang bagaimana memperbaiki keputusan Mozilla yang kurang baik, dan bagaimana hal itu bisa menjadi populer. Tulisan ini adalah bagian dari sebuah seri.
• Saya sangat percaya bahwa perbaikan UX browser dimulai dari tab vertikal. Untuk tab horizontal, ketika 6-8 tab dibuka, pengelolaan dan pelacakan menjadi sulit. Dengan tab vertikal yang ditumpuk, tautan yang dibuka di tab baru otomatis menjadi tab anak. Ini membuat struktur dan konteks lebih mudah dipahami dibanding tab horizontal. Menambahkan warna yang mewakili situs berbeda akan membuat grup tab lebih mudah dilihat. Selain itu, pohon tab dapat dibookmark untuk menyimpan progres saat meneliti atau mengerjakan dokumentasi. File CSS dan beberapa screenshot ada di sini.
• Tulisan ini berangkat dari prinsip UX yang meyakinkan pembaca bahwa pembuat tema ini telah membuat tema Firefox yang secara objektif lebih baik, tetapi kebanyakan perubahannya tampaknya hanya selera pribadi. Jelas dibuat dan dipelihara dengan baik, tetapi secara pribadi saya merasa ini kurang menarik secara visual dan terlihat agak rumit di beberapa bagian. Selera tiap orang berbeda, dan meskipun Firefox telah memilih satu desain, mereka memberi ruang agar perubahan ini bisa didukung. Itu hal yang baik. Namun, upaya penulis membuktikan bahwa seleranya benar secara empiris terasa agak bodoh.
• Sejak Firefox membengkokkan tab, saya berhenti menggunakannya sebagai browser utama. Kadang-kadang saya membukanya untuk keperluan pengujian, tetapi saya tetap menyimpan pengingat di pikiran untuk mencobanya lagi setahun lalu, lagi, lagi lima belas... eh, enam bulan kemudian saat melihat tab alih-alih tombol. Khususnya tema terang terasa lebih memalukan dengan latar abu-abu terang dan tombol putih. Bahkan tidak menghormati pengaturan tema sistem Windows. Untuk Edge bisa dimaklumi, Chrome tidak, tetapi minimal kontrasnya cukup. Firefox benar-benar gagal menangkapnya.
• Ada orang yang sama sekali tidak peduli bahwa tab itu adalah "tombol". Bagi orang yang baru pertama kali memakai, ini benar-benar mengganggu? Kadang-kadang saya merasa hanya saya yang memikirkan hal itu.
• Semua orang menulis keluhan masing-masing, jadi berikut saya tulis keluhan saya:
  • Saat folder bookmark besar dengan pohon yang sangat besar, menambahkan bookmark baru dari popup kecil UI "Tambah bookmark" itu sangat menyebalkan.
  • Sidebar bookmark bisa dicari berdasarkan nama, tetapi tidak bisa menemukan lokasi bookmark tersebut. Fitur Bookmark Search Plus 2 menyelesaikannya, tetapi seharusnya tidak dibutuhkan.
  • Tidak ada banyak sidebar sekaligus. Karena itu, tidak bisa membuka Tree Style Tabs untuk tab vertikal sekaligus folder bookmark dan pencarian secara bersamaan. Sangat tidak masuk akal.
  • Sebenarnya itulah semuanya. Sebagian besar terkait pengelolaan bookmark! Untuk sisa UI, saya tak yakin apakah memang sudah baik, atau saya sudah terlalu terbiasa hingga tidak lagi melihat kejanggalan. Tapi saya cukup puas dengan Firefox. Saya tidak merasa kebutuhan yang sangat kuat untuk mengeluhkan redesain gaya seperti yang dilakukan orang lain.
• Keluhan paling besar pada "perubahan UI Firefox yang tak perlu" adalah penghapusan browser.urlbar.clickSelectsAll empat tahun lalu. Seperti diduga, Mozilla tidak peduli. Kalau membaca laporan bug, ini hanya bisa dijelaskan sebagai perilaku yang memusuhi pengguna. Tidak ada field teks lain yang berperilaku seperti ini. Saya sama sekali tidak mengerti mengapa Mozilla merilis "fitur" ini lalu menghapus opsi untuk mematikannya.
• Kenyataan buruk dari UI/UX Firefox yang sesungguhnya adalah peninggalan warisan lama. Semua fungsi browser dasar dibuka di tampilan berbeda sendiri. Setelan terbuka di tab browser, riwayat di sidebar, tapi untuk mengelola riwayat? dibuka di jendela terpisah. Bookmark dan unduhan pun dibuka di jendela itu. Unduhan memiliki popup kecil, tetapi pengelolaannya tetap di jendela itu. Bookmark — Ctrl+Shift+O membuka jendela itu, sedangkan Ctrl+B membuat sidebar terbuka. Profil? Fitur profil ramah pengguna tidak ada, dan about:profiles terlihat seperti antarmuka lama yang tersembunyi. Kata sandi? Dibuka di tab browser dan tampilannya sama sekali tidak sinkron dengan yang lain.
• Titik terburuk Proton UI yang tak disebutkan siapa pun adalah bahwa jika tidak menggunakan monitor 1080p modern (atau resolusi lebih tinggi), ini secara objektif merupakan peningkatan yang sangat besar. Laptop saya adalah Thinkpad X220 lama, jadi perubahan ini menghabiskan ruang layar secara tidak berarti dan memengaruhi kemampuan saya untuk bekerja secara efektif. Dalam kasus ini, ini bukan seperti membuat semua jadi membesar seperti Electron atau aplikasi React, melainkan perubahan UI tanpa alasan yang dibuat agar Mozilla terlihat seolah-olah masih peduli pada Firefox. Proton begitu menjengkelkan bagi saya sampai saya menjalankan userchrome yang disesuaikan.