Cách tạo UI Firefox mặc định tốt hơn

(github.com/black7375)

1 điểm bởi GN⁺ 2024-02-21 | 1 bình luận | Chia sẻ qua WhatsApp

Proton UI của Firefox v89, sau khi ra mắt năm 2021, đã gây tranh cãi quanh tab, khoảng đệm và biểu tượng; Firefox-UI-Fix là một theme bổ sung khắc phục các điểm này và cũng được áp dụng cho theme mặc định của Waterfox và Floorp
Các quyết định thiết kế không dựa vào A/B testing mà dựa trên các lý thuyết và ví dụ UX như Jakob’s Law, tâm lý học Gestalt, Fitts’s Law và nghiên cứu của Nielsen Norman Group
Tab trông giống nút bấm, padding rộng và menu thiên về văn bản có thể làm giảm khả năng nhận biết trạng thái được chọn, hiệu quả nhấp chuột, khả năng hiển thị nội dung trên màn hình nhỏ và khả năng tiếp cận
Lepton Theme thể hiện trạng thái tab một cách nhất quán trong khoảng 36px~240px, đồng thời điều chỉnh nút đóng, biểu tượng, padding, màu theme và không gian thanh tiêu đề theo từng OS
Mục tiêu không phải là phủ nhận Proton UI mà là cải thiện trong khi vẫn tôn trọng Proton UI; do giới hạn của CSS, vẫn còn những khu vực khó triển khai, như hành vi của page action button

Tranh cãi về UI sau Firefox v89 và phạm vi dự án

Tài liệu này chủ yếu bàn về UI dựa trên Firefox v89, với tiền đề rằng sau đó đã có một số cải tiến
Sau khi Firefox v89 được phát hành vào năm 2021, tranh cãi quanh Proton UI đã bùng lên mạnh mẽ trên Reddit và Hacker News
Kho Firefox-UI-Fix nhanh chóng trở nên phổ biến khi khắc phục nhiều vấn đề của Proton UI, và Waterfox cùng Floorp cũng dùng theme này làm mặc định
Mozilla đã quyết định chấm dứt hỗ trợ Windows 7 và Windows 8; Firefox v115 là phiên bản cuối cùng hỗ trợ Windows đời cũ
- Firefox v115 từng được dự kiến cung cấp đến tháng 9 năm 2024
- Cả Mozilla lẫn dự án đều phải dọn dẹp mã và tính năng liên quan đến Windows đời cũ, và tài liệu này cũng đề cập đến UI của Windows đời cũ

Tiêu chí đánh giá UI/UX

Các tiêu chí thiết kế được tóm lược thành ba nhóm lớn: tính trực quan, hiệu quả và tính linh hoạt
Do không có dữ liệu hay môi trường cần thiết cho A/B testing, việc đánh giá được thực hiện theo cách suy diễn bằng cách dự đoán hành vi người dùng và sử dụng nhiều lý thuyết khác nhau
Tính trực quan
- Simplicity: giảm gánh nặng nhận thức bằng cách loại bỏ hoặc đơn giản hóa các yếu tố không cần thiết
- Visibility: giúp thao tác dễ dàng bằng cách làm cho các chức năng cốt lõi hiển thị rõ
- Accustomably: giảm lượng kiến thức cần học để người dùng có thể nhanh chóng thích nghi
- Consistency: giảm ngoại lệ để dễ ghi nhớ
- Predictability: giảm bất an bằng cách khiến người dùng cảm thấy họ có thể kiểm soát
- Affordance: cung cấp gợi ý về cách thao tác
Hiệu quả
- Clearly: các phần phân biệt phải được nhận biết rõ ràng
- Proximal: phải đủ gần để có thể di chuyển nhanh
- Bulky: kích thước lớn giúp dễ nhận biết hoặc dễ di chuyển tới
- Snappy: phải phản hồi mượt mà, không giật ngắt quãng
Tính linh hoạt
- Accessibility: bao quát phạm vi rộng bất kể tuổi tác, tình trạng khuyết tật, v.v.
- Functional: hỗ trợ nhiều chức năng để đáp ứng nhu cầu
- Contextual: tồn tại một cách tự nhiên trong từng ngữ cảnh
- Harmonious: hòa hợp tự nhiên với từng yếu tố
- Pleasure: hướng tới sự thỏa mãn vì niềm vui hoặc tính sáng tạo
- Compatibility: cân nhắc API phiên bản thấp, lộ trình phiên bản cao hơn, upstream, OS, RTL, v.v.

Ba vấn đề được nhìn thấy trong Proton UI

Ấn tượng đầu tiên về Firefox v89 Developer Edition là gọn gàng, nhưng khi sử dụng thực tế lại bị cho là khá bất tiện
Các vấn đề cốt lõi được thu gọn thành ba điểm
- Tab: tab trông giống nút bấm
- Padding: khoảng đệm quá lớn
- Icons: khó đọc nếu chỉ dựa vào biểu tượng, hoặc việc loại bỏ biểu tượng lại tạo ra vấn đề khác

Vấn đề của tab trông giống nút bấm

Cân bằng giữa sự quen thuộc và thay đổi
- Theo Jakob’s Law, người dùng kỳ vọng ứng dụng mới cũng hoạt động giống UX mà họ đã biết
- UI tab mới của Firefox đi ngược kỳ vọng này, nên trông như một dạng khó thích nghi
- Tuy nhiên, nếu ngăn cản thay đổi UI chỉ vì chưa quen, điều đó có thể cản trở sự phát triển và chỉ khiến sản phẩm dừng ở mức chạy theo xu hướng
- Có thể trở thành người theo sau nhanh, nhưng cần thận trọng để không cản trở đổi mới
Nhận thức về tab nhìn từ tâm lý học Gestalt
- Tâm lý học Gestalt được dùng để giải thích vì sao tab tạo cảm giác như một nhóm khác
- Law of Proximity: tab nằm tách khỏi thanh công cụ nên tạo cảm giác như một nhóm khác
- Law of Similarity: tab có màu khác với thanh công cụ nên trông như một nhóm khác
Tab dạng nút mà Safari đã quay lại
- Apple đã công bố trình duyệt Safari mới của macOS 12 Monterey tại WWDC
- Khi bất bình của người dùng tăng lên, Apple đưa ra một phương án thỏa hiệp cho tab trông giống nút bấm trong Beta 3
  - macOS Monterey Beta 3: Apple Redesigns Safari Tab Interface Following Complaints
  - macOS Monterey beta 3 brings redesigned Safari tab interface to address complaints
- Phương án thỏa hiệp cũng thất bại, và cuối cùng Apple đã hoàn toàn quay lại thiết kế tab cổ điển
  - 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
- Điều đó không có nghĩa Apple luôn đúng, nhưng xét việc họ đã phải đi đến mức khó có thể đảo ngược nhiều lần, button-like tab là điểm có thể bị phê phán

Loại bỏ khoảng trắng và biểu tượng dư thừa

Khoảng trắng và khả năng hiển thị nội dung
- Trình duyệt web là trình xem nội dung web, nên không được cản trở việc hiển thị nội dung
- Proton UI chịu bất lợi về mặt hiển thị nội dung do có nhiều padding
- Trên các thiết bị màn hình nhỏ như laptop 13 inch, vấn đề này rất nghiêm trọng
Hiệu quả nhấp chuột nhìn từ Fitts’s Law
- Fitts’s Law cho rằng thời gian cần thiết để di chuyển nhanh đến vùng mục tiêu phụ thuộc vào tỷ lệ giữa khoảng cách tới mục tiêu và chiều rộng mục tiêu
- Công thức cốt lõi là MT = a + b · ID = a + b · log₂(2D/W)
- MT là thời gian trung bình để hoàn tất di chuyển, a và b là các hằng số tùy theo lựa chọn thiết bị nhập, còn ID là chỉ số độ khó
- D là khoảng cách từ điểm bắt đầu đến tâm mục tiêu, W là chiều rộng mục tiêu đo theo trục di chuyển
- Nếu bỏ qua hằng số và log, tỷ lệ 2D/W là quan trọng
- Trước hết cần giảm khoảng cách và tối đa hóa chiều rộng, nhưng không để khoảng cách tăng lên
- Cũng cần ngăn padding trở nên quá lớn do lấp đầy không gian còn lại
- Photon(v88) được đánh giá là UI dễ nhấn hơn ở biểu tượng Amazon và menu
  - Biểu tượng Amazon có W lớn hơn
  - Menu có W nhỏ hơn một chút nhưng D nhỏ hơn nhiều
- Nếu biểu tượng trông nhỏ hơn vùng nhấp thực tế thì sẽ gây bất lợi, nên tốt hơn là lấp đầy vùng padding để biểu tượng trông lớn hơn
Vấn đề khác biệt của Compact UI gần như biến mất
- Mozilla đã deprecated compact UI
- Compact UI, Normal UI, Touch UI của v89 chỉ khác đôi chút về chiều cao thanh tab và thanh công cụ, nên gần như không còn khác biệt có ý nghĩa
UI chỉ có văn bản và khả năng tiếp cận
- Sau khi xem Content design considerations for the new Firefox của Mozilla, tác giả nghi ngờ liệu việc loại bỏ biểu tượng có phải lựa chọn tốt hay không
- Nghiên cứu về biểu tượng của Nielsen Norman Group tổng kết rằng dạng chỉ có văn bản cho kết quả tệ nhất
- UI mới của Chrome ra mắt năm 2023 cũng bao gồm biểu tượng

Thiết kế lại tab của Lepton Theme

Hiển thị nhất quán trạng thái tab
- Thiết kế tab không chỉ là vấn đề hình dạng, mà còn phải xử lý nhiều trạng thái
- Tab có thể có các trạng thái sau
  - 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, v.v.
- Các trạng thái này phải được thể hiện nhất quán trong phạm vi 36px~240px
So sánh trạng thái được chọn của Photon, Proton và Lepton
- Photon và Lepton dễ nhận biết vì tab được chọn được nối với thanh công cụ
- Lepton làm ngắn chỉ báo container của tab nền để giảm quá tải thị giác
- Proton khó phân biệt tab nào đang được chọn giữa màu nền được nhấn mạnh và thanh phía trên
- Thanh phía trên là chỉ báo tab container, nhưng tạo cảm giác giống tab được chọn của UI cũ Photon
- So sánh các trạng thái Selected, Multiple selected, Hovered, General có thể tóm tắt như sau
  - Photon nhận biết Selected bằng kết nối với thanh công cụ, và phân biệt Multiple selected với Hovered bằng màu của đường ngữ cảnh phía trên
  - Proton khiến Selected và Multiple selected trông gần như giống nhau
  - Lepton phân biệt trạng thái bằng kết nối với thanh công cụ và các màu nền khác nhau
Các trạng thái kết hợp như tắt tiếng, PIP, tab ghim
- Có khác biệt lớn giữa các trình duyệt trong tổ hợp Muted, Hover, PIP
  - Photon không phân biệt được Muted và Muted + Hover, và vị trí Muted thay đổi lớn khi có chỉ báo PIP
  - Proton English chỉ hiển thị Muted bằng văn bản, và chỉ biết được PIP khi ở trạng thái hover
  - Proton Korean thay đổi UI tùy theo ngôn ngữ hiển thị, Muted che favicon và không có được chỉ báo PIP
  - Lepton hiển thị toàn bộ thông tin, giữ vị trí Muted và PIP ổn định, đồng thời đưa ra tín hiệu rằng có thể điều khiển khi hover
- Với các tổ hợp phức tạp hơn, Proton gần như khó sử dụng trong môi trường tiếng Hàn
- Lepton xử lý trạng thái kết hợp theo cách sau
  - Luôn biểu thị toàn bộ thông tin
  - Nếu không có favicon, tăng kích thước Muted để thay thế
  - Ngay cả ở trạng thái Pinned, luôn giữ vị trí giống nhau
  - Khi vị trí chồng lên nhau như Container và Titlechanged, kết hợp để hiển thị
Tận dụng không gian theo chiều rộng tab
- Lepton điều chỉnh hành vi theo chiều rộng tab
- Khi đủ rộng, hiển thị tất cả nút đóng như Proton
- Khi tab lấp đầy đến mức thiếu chiều rộng, ẩn nút đóng của tab nền
- Giảm kích thước nút đóng để giảm nhấp nhầm, nhưng vẫn có thể đóng khi hover lên tab nền
- Tiêu đề tab trông hiệu quả hơn nhờ điều chỉnh padding và gradient
- Tiết kiệm không gian để văn bản New hiển thị ở tab cuối cùng
- Chỉ điều chỉnh khi thiếu chiều rộng để từ wiki hiển thị rõ ràng
- Lepton hiển thị nhiều nội dung web hơn, còn Photon và Lepton có đường phân tách tab
Hình thức phân phối và sở thích
- Tiêu chí của UI tốt khác nhau tùy người và ở một mức độ nào đó là vấn đề sở thích
- Cung cấp ba khái niệm tab
  - Tab Lepton thông thường phù hợp với Proton
  - Tab Photon có đường ngữ cảnh vuông góc
  - Tab Proton gốc
- Theme này đặc biệt được biết đến nhờ hỗ trợ UI tab Photon

Điều chỉnh biểu tượng và padding

Panel và menu ngữ cảnh
- Giảm các bất mãn hiện có bằng cách thêm biểu tượng và điều chỉnh padding
- Vấn đề unbalanced strokes đã được contributor @zapSNH sửa, giúp có một bộ biểu tượng nhất quán và dễ nhận biết trên toàn trình duyệt
So sánh menu Edge, Chrome và Lepton
- Edge có các menu thiếu biểu tượng mà không có lý do đặc biệt, và các biểu tượng nhìn tổng thể quá giống nhau nên khó lướt qua
- Một số ẩn dụ biểu tượng của Edge như New InPrivate window được cho là gây khó hiểu
- Chrome có phong cách biểu tượng không hiện đại, góc cạnh so với UI bo tròn, và biểu tượng trông quá nhỏ so với cỡ chữ
- Lepton cung cấp một bộ biểu tượng nhất quán, kích thước phù hợp và phong cách hiện đại
- Chỉ dùng biểu tượng tô đặc cho các biểu tượng quan trọng để tăng khả năng lướt qua, đồng thời dùng các ẩn dụ giúp phân biệt ngoại hình
Menu ngữ cảnh và nhóm phím tắt
- Edge không rõ vì sao Add all tabs to favorites lại không có biểu tượng
- Chrome hoàn toàn không có biểu tượng trong menu ngữ cảnh
- Lepton bố trí biểu tượng sao cho có thể phân biệt rõ ràng
- Trong menu ngữ cảnh của trang web, chỉ Firefox đặt nhóm phím tắt ở phía trên, tạo hiệu ứng truy cập nhanh giống pie menu
Áp dụng thêm nhiều biểu tượng
- Thêm biểu tượng vào global menu và nhiều panel khác nhau
- Khi thư mục thư viện bookmark mở ra, biểu tượng menu cũng phản hồi
- Kích thước menu và panel được giảm xuống, vị trí bắt đầu văn bản được căn chỉnh
- Thêm biểu tượng phù hợp với nhiều trường hợp layout

Hỗ trợ OS, theme và màu sắc

Theme mặc định của hệ thống
- Lepton điều chỉnh UI cho phù hợp với từng OS và thiết lập khác nhau
  - Windows 7: bám sát thiết kế cửa sổ Aero
  - Windows 8.1: làm cho thanh tiêu đề hài hòa như Windows 7
  - Windows 10 Light: theo màu của Legacy Edge trên Windows 10
  - Windows 10 Dark: áp dụng cùng tiêu chí
  - Windows 10 Dark + Accent titlebar: nếu bật thiết lập màu nhấn cho thanh tiêu đề thì sẽ theo màu này
  - MacOS Light/Dark: theo màu của Mac
- Người dùng Windows 11 có thể dùng tùy chọn userChrome.compatibility.os.win11 để sử dụng màu Windows 11 tương tự Edge
- Cũng hoạt động trên Linux, đồng thời sửa các vấn đề về màu sắc và vấn đề nút thanh tiêu đề không native
Không gian cho nút thanh tiêu đề
- Với các trường hợp như Tabs on bottom hoặc One Liner, cần chừa không gian cho các nút thanh tiêu đề bên trong toolbar
- Giá trị và vị trí khác nhau tùy OS
  - Win7, Win8: 105px, bên phải
  - Win10: 138px, bên phải
  - Mac: 72px, bên trái
  - Linux: 84px và có thể thay đổi tùy theme hệ thống
- Ở chế độ toàn màn hình, dùng UI native nên phải xử lý là 0px
- Có thể ở cả bên trái lẫn bên phải, và có thể có ba nút hoặc không
Bổ sung cho theme Proton
- Sửa các vấn đề về khả năng truy cập do độ tương phản màu của chính theme Proton chưa đủ
- Cải thiện độ tương phản màu và bóng viền của các theme đi kèm
- Áp dụng cả cho những phần chưa được theme Proton áp dụng để giao diện đồng nhất hơn
- Áp dụng dark mode cho cả những phần chưa có dark mode
- Đảm bảo màu sắc vẫn được áp dụng tốt khi dùng theme tùy chỉnh thay vì theme mặc định
- Với bảng và danh sách, thêm màu nền khác cho các hàng chẵn để dễ đọc hơn
- Với trình phát âm thanh, áp dụng viền bo tròn theo thiết kế Proton
- Với trình phát video, làm cho nội dung dễ nhìn hơn và chỉnh sửa icon cho đẹp hơn

Tương tác và animation

Tương tác hỗ trợ người dùng
- Khi hover, nếu con trỏ chuột hoặc phần tử thay đổi, nó cung cấp gợi ý rằng có hành động nào đó đang được thực hiện
- Với các phần tử có tính chất khác các thao tác khác và trông nhỏ, như lệnh phóng to/thu nhỏ trong panel, việc đổi con trỏ chuột sẽ hữu ích
- Khi rê chuột lên một trường và viền xuất hiện, người dùng sẽ trực giác nhận ra có thể bấm vào đó
- Văn bản của mục đang hoạt động dùng màu nhấn
- Mục đã bị xóa được làm cho icon chuyển sang thang xám và tiêu đề bị gạch ngang như thể đã bị vô hiệu hóa, nhưng khi hover sẽ hiển thị tiêu đề không gạch ngang
Thiết kế animation
- Animation giúp UI mượt và tự nhiên hơn, nhưng đôi khi khiến thao tác có cảm giác chậm
- Tiêu chí thiết kế như sau
  - Theo easing curve của Photon, tăng tốc nhanh ở đầu và giảm tốc nhẹ nhàng ở cuối
  - Rút ngắn thời lượng animation bắt đầu để tạo cảm giác phản hồi nhanh
  - Kéo dài thời lượng animation kết thúc để tạo cảm giác mượt
  - Đối tượng lớn có thời lượng dài hơn đối tượng nhỏ
  - Thời lượng bên trong các đối tượng lồng nhau cũng cần dài hơn
- Áp dụng cùng nguyên tắc cho màu nền, xoay mũi tên, tab dạng container, âm thanh và tab ghim, sidebar
- Cũng áp dụng cùng nguyên tắc cho các tính năng tùy chọn không phải mặc định
  - Autohide Back Button
  - Autohide Page Action
  - Autohide Tab Bar
Khôi phục illustration
- Cho rằng các illustration thân thiện của Photon đã giúp giảm cảm giác bối rối trong các tình huống lỗi
- Theme này khôi phục các illustration đó
- Ví dụ áp dụng gồm các màn hình Welcome back, DNS error, Session restore, Search result

Kết luận và giới hạn

Theme này cân nhắc đến quy ước, tâm lý học, kết quả nghiên cứu và kế thừa ưu điểm của các theme trước
Hỗ trợ OS, dark mode, theme tùy chỉnh và các tương tác theo ngữ cảnh
Do giới hạn của CSS, cũng có những thứ không thể triển khai, chẳng hạn như page action button behavior
Mục tiêu là “🦊 I respect proton UI and aim to improve it.”

1 bình luận

GN⁺ 2024-02-21

Ý kiến trên Hacker News

Điều bất tiện nhất ở UI mới là mọi thành phần đều trở nên quá lớn
Nếu là màn hình điện thoại bấm bằng ngón tay thì còn hiểu được, nhưng trên kích thước desktop thông thường thì rất lãng phí không gian
Việc tăng padding như bài viết nói cũng là một nguyên nhân, nhưng việc loại bỏ tùy chọn compact UI density cũng góp phần lớn
Có thể bật lại bằng cách vào about:config, bật browser.compactmode.show, rồi vào menu > Công cụ khác > Tùy chỉnh thanh công cụ > “density” ở phía dưới
Tùy chọn này bị gắn nhãn “not supported”, nhưng đã ở trạng thái đó suốt nhiều năm
- Tôi lại thích giao diện có padding rộng rãi hơn nhiều
  Khi có đủ padding, nhiễu thị giác và sự rối rắm giảm đi, các thành phần có không gian để “thở”
  Có thể không có lợi ích thực dụng cụ thể nào, nhưng chỉ nhìn thôi cũng thấy bớt bất an hơn
- Một bên có những người nói “đừng lãng phí không gian bằng padding”, còn mỗi khi nhắc đến KDE lại có những người nói “nhồi quá nhiều thông tin và văn bản mà không có padding nên khó đọc”
  Làm cũng bị chê, không làm cũng bị chê
- Tôi thắc mắc không biết có ai biết bối cảnh vì sao nó hiển thị là “not supported” không
- Đó đúng là vấn đề của tôi; hôm nay tôi sẽ thử dùng flag đó
- “not supported” trông giống như một kiểu cay cú nhắm vào những người đã phê phán lựa chọn thiết kế “hiện đại” đó
Tôi là tác giả của Lepton, một theme phổ biến cho Firefox
Bạn có thể thấy từ góc nhìn của tôi tôi đã đưa ra nhiều quyết định như thế nào, và đã cải thiện các quyết định đáng tiếc của Mozilla ra sao
Vì vậy có thể giải thích được tôi đã cải thiện thế nào và vì sao nó trở nên phổ biến
Bài viết này là một phần của loạt bài
- https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
- Tôi thắc mắc có thể tìm Lepton ở đâu
  Trong phần theme của kho tiện ích bổ sung, tìm tên đó không ra gì cả
  Có lẽ Lepton là UI Firefox cũ nên chỉ còn trong các bản phát hành cũ chăng
  Tôi đã đọc bài viết, nhưng có thể đã bỏ sót điều gì đó
- Thường thì tôi không tùy biến UI nhiều, mà chỉ cố làm quen với mặc định
  Vì ít ma sát hơn, và tôi thích việc có thể thích nghi với thiết lập mặc định ngay sau khi cài đặt
  Nhưng việc tùy biến UI của Firefox lại là ngoại lệ vì dễ thiết lập và chất lượng cũng tốt
  Cảm giác nó được bảo trì cũng là một ưu điểm quan trọng
  Tôi không biết là bạn đã viết dài đến vậy; trông thú vị và cũng được tài liệu hóa tốt, nên tôi sẽ đọc thử
- Điều đặc biệt thú vị là telemetry được dùng để biện minh cho việc loại bỏ các mục giao diện
  Cá nhân tôi thấy thanh địa chỉ cực kỳ lớn, đến mức nhét 10 nút vào vẫn còn thừa chỗ
  Vì vậy ngoài mong muốn xóa hết mọi thứ cho đến khi không còn gì có thể xóa nữa, tôi khó hình dung lý do gì để nhất thiết phải bỏ bớt các mục
  Có vẻ bạn rất rành UI/UX nên tôi muốn hỏi: tôi có một giả thuyết rằng biểu tượng đen trắng tệ hơn biểu tượng có màu; không biết có nghiên cứu hay sự đồng thuận nào liên quan không
- Quá trình cài đặt rất dễ
  Tuy nhiên tôi khuyên nên chỉ tóm tắt các bước cơ bản trước, rồi đưa hẳn phần nâng cao xuống bên dưới
```
1. Chạy script từ dòng lệnh của OS  
2. Vào `about:support` và nhấp xóa cache khởi động  
```
UX trình duyệt tốt hơn, nói mạnh thì, bắt đầu từ tab dọc
Tab ngang chỉ cần mở 6–8 cái là đã khó quản lý hoặc theo dõi
Với tab lồng nhau theo chiều dọc, các liên kết mở trong tab mới sẽ tự động trở thành tab con, và cấu trúc cùng ngữ cảnh đó có thể được suy luận dễ hơn nhiều so với tab ngang
Nếu thêm màu theo từng trang web vào đây thì các nhóm tab cũng dễ nhìn hơn, và có thể bookmark cây tab để lưu trạng thái tiến độ của các công việc nghiên cứu hay viết tài liệu
Một số file CSS và ảnh chụp màn hình ở đây: https://gist.github.com/aclarknexient/88673880d373864eee1927...
Cũng cần thêm ảnh chụp màn hình các tab lồng nhau có màu, nên tôi sẽ thêm sau khi đăng bình luận
- Tôi thích tab dọc, và nó là lợi thế lớn đối với cách duyệt web của tôi khi phải chuyển qua lại giữa nhiều công việc dài hạn
  Tab phù hợp với mục đích này hơn bookmark, vì ngay cả trong năm 2024, trình quản lý bookmark của mọi trình duyệt vẫn còn non nớt nên việc sắp xếp bookmark rất tệ
  Tôi không bị hấp dẫn nhiều bởi tab lồng nhau, nhưng tính năng đổi nhóm tab hiển thị trong sidebar tab chỉ bằng một cú nhấp, như “panes” của tiện ích Sidebery trên Firefox hay “spaces” của Arc, thì rất mạnh
  Đặc biệt sẽ còn tốt hơn nếu liên kết các panel/space với hồ sơ trình duyệt
  Ví dụ, có thể chuyển một cửa sổ trình duyệt duy nhất giữa duyệt web thông thường, mua sắm, bài giảng đại học trực tuyến và phát triển phần mềm; khi cần cũng có thể tạm thời tách một panel/space cụ thể ra thành cửa sổ mới
- Tôi thừa nhận đây là khác biệt về sở thích, nhưng tôi tin mạnh mẽ điều hoàn toàn ngược lại
  Đúng là nếu mở hơn 6–8 tab trên thanh tab ngang thì khó quản lý và theo dõi
  Tôi đã dùng Arc trong 6 tháng qua, và trên thanh tab dọc, nếu mở 6–8 tab thì việc quản lý và theo dõi cũng khó y như vậy
  Cuối cùng cứ mỗi 4 giờ tôi lại đóng hết và bắt đầu lại
  Hai lập luận ở cả hai phía mà tôi thấy dễ đồng cảm hơn là:
  Thứ nhất, nếu đếm số pixel mà thanh tab chiếm theo chiều ngang và chiều dọc, tôi chưa từng thấy một thanh tab dọc thực dụng nào dùng số pixel bằng hoặc ít hơn thanh tab ngang
  Thứ hai, màn hình gần như luôn có nhiều pixel ngang hơn pixel dọc, nên cũng có lập luận rằng thanh tab dọc tận dụng tỷ lệ khung hình của màn hình tốt hơn
  Điều này có vẻ đúng với 16:9 trở lên, nhưng với 16:10 thường gặp trên MacBook thì cá nhân tôi thấy ít đúng hơn
- Nhìn ảnh chụp màn hình FF89 từng gây “tranh cãi”, có vẻ một trong những thay đổi lớn nhất là thiết kế lại tab với nhiều padding hơn
  Nhưng vì tôi ẩn thanh tab phía trên và dùng Tree Style Tab vốn rất hợp với Firefox, nên thậm chí tôi còn không nhận ra thay đổi đó
  Tôi không đặc biệt thích bản thân Firefox, nhưng lợi ích UX của cây tab vượt trội hơn những chi tiết nhỏ mà Chrome/Safari làm tốt hơn một chút, nên tôi không phải đắn đo
  Tuy nhiên, vì công cụ dành cho nhà phát triển, tôi dùng Chrome cho công việc frontend
- Tôi không biết việc trả lời vào chính bình luận của mình có vi phạm phép lịch sự trên HN không, hay là cách cấu trúc thông tin tốt :)
  Trong phần nâng cao của trang tùy chọn Tree Style Tab có một khu vực stylesheet người dùng được tải lại theo thời gian thực
  Rất tiện để thử lựa chọn phông chữ mà không cần khởi động lại trình duyệt
  Tôi đã đổi sang dùng phông chữ cô đọng SF Pro của Apple
  Iosevka Mono, phông tôi thường dùng hầu như ở mọi nơi, lại có gì đó không hợp với tiêu đề tab
  CSS như sau:
```
: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;  
}  
```
  Tôi đã thêm ảnh chụp màn hình kết quả CSS này vào cùng liên kết với bình luận trước: https://gist.github.com/aclarknexient/88673880d373864eee1927...
- Trên laptop, tab dọc bắt đầu trở nên không ổn
  Cách hack sidebar tự ẩn trên Firefox đã bị hỏng và tôi lười sửa, nên giờ dù không mở tới 100 tab, vẫn có một khoảng trống xám rộng vài inch
  Thường tôi chỉ mở khoảng 5–10 tab
  Điều khó chịu hơn là ngày nay nhiều website xác định mobile/desktop không phải bằng user agent mà bằng kích thước viewport của trình duyệt
  Vì đã mất 1 inch chiều ngang do tab kiểu cây, nên gần như không còn nhiều bề rộng để thu nhỏ trước khi trang web tưởng nhầm đó là iPad
  Vì vậy thực tế phải dùng trình duyệt toàn màn hình; nếu không, sẽ xuất hiện đầy các menu hamburger với xuống dòng văn bản lộn xộn, khiến việc điều hướng tệ hơn
  Phần lớn thời gian tôi phải tắt hẳn sidebar, nên mỗi lần đổi tab lại phải nhấp thêm vài lần
Bài viết này có vẻ đang cố thuyết phục rằng tác giả theme đã tạo ra một theme Firefox tốt hơn một cách khách quan dựa trên các quy tắc UX, nhưng phần lớn thay đổi trông giống sở thích cá nhân
Rõ ràng là nó được làm tốt và được bảo trì tốt, nhưng cá nhân tôi thấy nó không hấp dẫn lắm về mặt thị giác, và một số phần còn trông phức tạp hơn
Mỗi người có sở thích khác nhau, và Firefox đã chọn một thiết kế, nhưng cũng hỗ trợ những thay đổi như thế này, nên bản thân điều đó là tốt
Tuy nhiên, việc tác giả có vẻ cố chứng minh rằng sở thích của mình là đúng theo kinh nghiệm thì hơi buồn cười
- UI rõ ràng là vấn đề sở thích, nên tôi đã làm bản phân phối theo ba dạng
  Tuy vậy, việc không có hiển thị cho biết tab đang bị tắt tiếng hay đang tải, hoặc không có đường phân cách tab, thì gây khó hiểu
Tôi đã từ bỏ việc dùng Firefox làm trình duyệt mặc định kể từ khi Firefox làm hỏng các tab
Thỉnh thoảng tôi mở để thử nghiệm, và nếu chúng vẫn trông như nút bấm chứ không phải tab, tôi lại tự ghi nhớ trong đầu rằng khoảng nửa năm nữa hãy thử lại
Giao diện sáng đặc biệt khó chịu: nút trắng trên nền xám nhạt
Firefox cũng không tuân theo đúng thiết lập chủ đề hệ thống của Windows
Trên Windows, người dùng có thể giữ ứng dụng ở chủ đề sáng trong khi áp dụng màu cho thanh tác vụ, menu Start và thanh tiêu đề; Edge hiểu điều này, còn Chrome nếu không hiểu thì ít nhất cũng có đủ độ tương phản
Firefox thì lệch hoàn toàn
- Tôi dùng Firefox làm trình duyệt phụ, nhưng mỗi lần bật lên nó lại cản trở và chen ngang trước tiên để báo cho tôi các thay đổi và tính năng mới được thêm kể từ lần trước, như Pocket hay VPN
  Làm ơn dừng lại, và để tôi bắt đầu việc duyệt web mà tôi đến đây để làm
  Tôi không muốn Firefox bắt chước dark pattern của Microsoft, thứ cứ nhét Office 365 và Game Pass vào giữa các lần cập nhật
  Những quảng cáo tính năng kiểu đó cứ nhắm vào người chưa cài Firefox; còn tôi đã là “khách hàng” rồi, nên đừng làm phiền tôi nữa
  Vì thế tôi chủ yếu dùng Chrome
  Nó có thể tệ hơn và có thể theo dõi tôi, nhưng ít nhất nó không chặn đường tôi
- Chỉ cần cài Sidebery[1] và ẩn tab mặc định[2] là được
  Đây mới là con đường :)
  [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
  [2] https://superuser.com/a/1424494
Tôi tò mò liệu còn ai hoàn toàn không bận tâm chuyện tab “trông như nút bấm” không
Đôi khi tôi có cảm giác chỉ mình mình như vậy
Không biết với người mới dùng thì chuyện đó có thực sự gây khó chịu đến thế không
- Tôi dùng Firefox hằng ngày nhưng thậm chí không biết chuyện này được xem là một “vấn đề”
  Trước khi đọc các bình luận này tôi chưa từng nghĩ đến nó, và thấy thanh tab hiện tại hoàn toàn dùng được như vậy nên chắc cũng sẽ không nghĩ lại
- Bản thân việc tab trông như nút bấm không làm tôi khó chịu lắm
  Đúng hơn, đó là một phương án thay thế khá phổ biến cho dạng tab; tôi nhớ điều khiển tab của Windows 95 cũng có chế độ làm tab trông như nút bấm
  Hình như nó cũng từng được dùng cho thanh tác vụ gốc, và từ thập niên 90 mIRC đã dùng nó để chuyển kênh/cửa sổ
  Tuy nhiên riêng diện mạo của những “nút tab” cụ thể này thì cá nhân tôi không thích
  Chúng trông như những viên thuốc dài, có vẻ khó nuốt, và tôi đã quen với việc chúng trông như tab thông thường nên không thấy có lý do gì để đổi
  May là Firefox cho phép tùy biến giao diện, nên tôi dùng userChrome.css để chỉnh lại cho vừa mắt hơn
- Nó không ảnh hưởng đến việc dùng Firefox của tôi
  Nhưng nó đang lãng phí pixel bằng cách thêm khoảng trống không có lý do tồn tại
  Đến mức này thì tôi đã quen với các quyết định UI vô lý, nên cứ để các tổ chức đưa gì thì dùng nấy
  Có vẻ rất ít nơi còn quan tâm đến tính nhất quán hoặc khả năng dễ khám phá
- Nó khác đủ nhiều so với những thứ có tab khác, chẳng hạn không chỉ trình duyệt mà cả trình quản lý tệp hay trình soạn thảo, nên gây khó chịu
  Tôi không hiểu vì sao lại ném hết ngữ nghĩa ra ngoài cửa sổ
  Nó trông như nút bấm nhưng không hoạt động như nút bấm
- Tôi chưa từng để ý, và sau khi được chỉ ra thì vẫn không thấy đó là vấn đề
  Với tôi, những người thấy đây là vấn đề trông khá giống đang bới lông tìm vết
Vì mọi người đều đang viết ra bất mãn của mình, tôi cũng ghi phần của tôi
Khi cây thư mục bookmark lớn, quá trình tìm nơi để thêm bookmark mới trong popup nhỏ của UI “Add Bookmark” thật kinh khủng
Sidebar bookmark có thể tìm theo tên, nhưng không thể tìm được bookmark đó nằm ở đâu
Các tiện ích tìm kiếm bookmark như Bookmark search plus 2 giải quyết được việc này, nhưng lẽ ra không cần phải có
Chỉnh sửa: tôi đã biết đến chuột phải -> Show in Folder, và tính năng này rất hay
Tuy vậy đó không phải UI tốt nhất, và tiện ích đã nói ở trên vẫn trực quan hơn nhiều
Không thể có nhiều sidebar cùng lúc
Vì vậy không thể mở đồng thời Tree Style Tabs để xử lý tab dọc và thư mục/tìm kiếm bookmark
Thật vô lý
Thực ra gần như chỉ có vậy, và phần lớn là về cách xử lý bookmark
Tôi không biết phần UI còn lại ổn thật, hay chỉ vì đã quen nên không thấy khuyết điểm, nhưng tôi dùng Firefox khá thoải mái
Tôi không cảm thấy cần phàn nàn nhiều về việc thiết kế lại giao diện như những người khác
- Vì lý do không rõ, bookmark trong mọi trình duyệt đều bị bỏ bê thảm hại
  Lấy một trình duyệt từ 20 năm trước ra thì việc quản lý bookmark gần như vẫn giống hệt, hoặc trong vài trường hợp thậm chí còn tốt hơn một chút
  Có vẻ cải tiến bookmark không hấp dẫn nên chẳng ai quan tâm
- Tôi tự hỏi có phải bạn còn giữ muscle memory với phím tắt Ctrl+Shift+B, vốn trước đây mở một panel bên lớn không
  Giờ nó chỉ hiển thị một thanh ngang hẹp
  Tôi cũng vì vậy mà chắc chắn thấy lần thiết kế lại này gây bực mình, nhưng đã phát hiện Ctrl+Shift+O là phím tắt “quản lý bookmark”
  Nó mở một cửa sổ popup lớn hơn chứa bookmark, và đến giờ trông gần như tiện như panel bên cũ
  Cũng có thể tìm kiếm bookmark, và nếu nhấp chuột phải rồi chọn “show in folder” trong menu ngữ cảnh thì nó cũng cho thấy bookmark nằm ở đâu trong cấu trúc phân cấp
  Tuy nhiên bookmark của tôi đều nằm trong “other bookmarks”, nên có lẽ tôi sẽ không dùng nhiều
Phàn nàn lớn nhất về “thay đổi UI Firefox không cần thiết” là việc gỡ bỏ browser.urlbar.clickSelectsAll cách đây 4 năm
Như có thể đoán, Mozilla chẳng bận tâm
Đọc báo cáo lỗi thì ngoài thái độ thù địch với người dùng ra, không còn cách giải thích nào khác: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
Không có ô văn bản nào trong bất kỳ UI nào hoạt động như vậy
Không thể hiểu vì sao Mozilla lại phát hành “tính năng” này, đồng thời còn gỡ cả tùy chọn để tắt nó
Một số người dùng thích thì không sao, nhưng đừng cướp mất cái tùy chọn chết tiệt của tôi rồi ép tôi dùng
- Thực ra lập luận của Mozilla là tất cả các trình duyệt lớn khác đều hoạt động như vậy
  Kiểm tra trên Chrome thì đúng là nó hoạt động giống Firefox
  Về phía thù địch với người dùng, lập luận là những người ghét hành vi mới không bật telemetry, nên không có tư cách được hưởng tính năng họ muốn
  Nghĩ đến việc ưu điểm chính của Firefox là mô hình hướng đến bảo vệ quyền riêng tư thì điều này khá mỉa mai
- Hoàn toàn đồng ý
  Đã 4 năm trôi qua mà ngày nào tôi cũng vấp phải
  Trớ trêu là cách tôi thường thất bại lại chính là trường hợp mà thay đổi này được cho là sẽ giúp
  Muốn chọn toàn bộ URL nên theo bản năng tôi nhấp đúp, cú nhấp đầu tiên chọn toàn bộ, cú nhấp thứ hai thu vùng chọn còn một từ
  Tôi khựng lại một chút rồi bắt đầu nhấp lại, và giờ để chọn toàn bộ URL tôi phải nhấp thêm ba lần nữa
  Chuyện này gây khó chịu đáng kinh ngạc
  Phần giải thích trên tracker có vẻ chỉ là “một ngày nào đó trong tương lai chúng tôi có thể làm thứ gì khác để biện minh cho việc này”
  Bốn năm sau, đến giờ vẫn chưa thấy thứ đó đâu
- Sau khi tính năng này bị gỡ khỏi Firefox, tôi đã chuyển sang Vivaldi
  Vivaldi vẫn cho phép chọn hành vi này
  Tôi tự hỏi liệu có trình duyệt Unix nào khác cho phép tắt chọn toàn bộ khi nhấp hay không
  Nhìn chung tôi hài lòng với Vivaldi, nhưng có thêm lựa chọn thì vẫn tốt hơn
- Nó vẫn còn hỏng
  Vì chức năng “Paste and Go” không hoạt động đúng
  Theo lẽ thường, “Paste and Go” phải tương đương với việc “Paste” chèn chính xác văn bản trong clipboard vào vị trí con trỏ, rồi sau đó thực hiện “đi tới địa chỉ trên thanh địa chỉ”
  Nhưng nếu bỏ chọn URL được tự động chọn và đặt con trỏ vào bên trong nó rồi dùng “paste and go”, Firefox sẽ bỏ qua URL hiện có và cố đi thẳng tới văn bản trong clipboard
  Điều này có thể là rủi ro bảo mật, vì có thể lừa người dùng truy cập một URL họ không định mở
  Nếu không muốn sửa thì nên đổi tên thành “Clear, Paste, and Go” cho đúng với hành vi thực tế
- Bạn nói “Mozilla không bận tâm”, nhưng tùy chọn nội bộ thì chỉ là tùy chọn nội bộ, và trừ các trường hợp như hợp đồng hỗ trợ doanh nghiệp lớn, chẳng trình duyệt nào thật sự bận tâm nhiều
  Nếu phải vào about:config vì việc không liên quan đến phát triển hay quản lý thiết bị di động, thì khó mà kỳ vọng nó vẫn tiếp tục hoạt động sau các bản cập nhật
  Mọi tùy chọn đều là mã cần được bảo trì
  Tôi đoán là khi viết lại phần mã dùng tùy chọn đó, họ đã chọn con đường nhanh hơn và rẻ hơn: không triển khai lại một tính năng vốn cũng không được hỗ trợ chính thức
Cơn ác mộng UI/UX thật sự của Firefox là đống tàn dư legacy
Cảm giác như mỗi chức năng trình duyệt cơ bản lại mở ra bằng một kiểu view khác nhau
Cài đặt là tab trình duyệt, lịch sử là sidebar
Nhưng đó chỉ là khi dùng Ctrl+H; quản lý lịch sử thì Ctrl+Shift+H mở một cửa sổ riêng
Dấu trang và tải xuống cũng nằm trong cửa sổ đó, cửa sổ Library trông như được kéo từ thời Firefox 3/4
Tải xuống cũng có một popup nhỏ, nhưng Ctrl+J và quản lý tải xuống lại mở cửa sổ đó
Với dấu trang, Ctrl+Shift+O mở cửa sổ đó, còn Ctrl+B mở sidebar
Hồ sơ thì gần như là một trò đùa, hầu như không có chức năng nào dùng được cho người dùng, và có một giao diện trông như legacy ẩn trong about:profiles
Mật khẩu mở trong tab trình duyệt, nhưng lại có hình thức riêng, chẳng ăn nhập với thứ gì khác
Thứ còn có chút gắn kết chỉ là Cài đặt và Tiện ích bổ sung đều là tab trình duyệt và có liên kết qua lại
Phần còn lại là một mớ hỗn độn trộn lẫn tab trình duyệt, cửa sổ, sidebar, pop-out và các UI khác nhau
Nó đã lộn xộn như vậy khá lâu rồi, và vì không có một tầm nhìn thống nhất hay nỗ lực thực chất để dọn dẹp, có lẽ sau này vẫn sẽ thế
Firefox View mới được thêm gần đây cũng trông như một thứ nữa chồng thêm một UI khác
Ở đó cũng có lịch sử, nên có khoảng ba cách để xem lịch sử; ít nhất một cách trong số đó là thừa
Có lẽ đó là nỗ lực chuyển các chức năng của cửa sổ Library sang tab View, nhưng ở thời điểm hiện tại nó chỉ làm tăng thêm sự rối rắm
Đúng là có phần phóng đại
Các trình duyệt khác gần đây cũng thích sidebar và có popup, menu
Dù vậy, thứ đặc biệt nổi bật vẫn là sự tương phản giữa cửa sổ Library trông như legacy cứ xuất hiện khắp nơi, với các chức năng mở trong tab trình duyệt như Cài đặt/Tiện ích bổ sung/Mật khẩu
Rốt cuộc, khi mở một chức năng của trình duyệt, rất khó đoán nó sẽ hiện ra dưới dạng nào; ban đầu chắc chắn là vậy, và kể cả khi đã quen vẫn còn cảm giác “mỗi thứ cứ mở một kiểu”
Có thể thích nghi, nhưng nó vẫn là một mớ hỗn độn
- Tôi nghĩ một số chức năng vừa có popover vừa có cửa sổ cũng không sao
  Nhưng phải được triển khai một cách thông minh
  Ví dụ trong Safari, tải xuống mặc định là popover, nhưng có thể “tách” popover đó thành một cửa sổ
  Nó hỗ trợ cả hai trường hợp sử dụng mà vẫn giữ được tính nhất quán
  Firefox rất cần kiểu tư duy như vậy
Điều tệ nhất mà mọi người ít nói đến ở Proton UI là nếu không dùng màn hình 1080p trở lên hiện đại, về mặt khách quan đó là một bước lùi lớn
Laptop của tôi là một chiếc X220 ThinkPad cũ, nên thay đổi đó đã lãng phí vô nghĩa rất nhiều không gian màn hình và ảnh hưởng đến hiệu suất làm việc thực tế
Nó là một phần của xu hướng kỹ thuật phần mềm thù địch với người dùng, gây hại cho những người không đủ khả năng mua phần cứng mới hơn, hoặc vì lý do nào đó không muốn dùng phần cứng mới
Trong trường hợp này, thậm chí không phải là biến mọi thứ thành ứng dụng Electron hay React cồng kềnh, mà chỉ là Mozilla vô cớ làm UI tệ hơn để tạo ấn tượng bề ngoài rằng họ vẫn còn quan tâm đến Firefox
Proton quá tệ đối với cách tôi sử dụng, nên tôi đang dùng userChrome tùy biến

Cách tạo UI Firefox mặc định tốt hơn

Tranh cãi về UI sau Firefox v89 và phạm vi dự án

Tiêu chí đánh giá UI/UX

Tính trực quan

Hiệu quả

Tính linh hoạt

Ba vấn đề được nhìn thấy trong Proton UI

Vấn đề của tab trông giống nút bấm

Cân bằng giữa sự quen thuộc và thay đổi

Nhận thức về tab nhìn từ tâm lý học Gestalt

Tab dạng nút mà Safari đã quay lại

Loại bỏ khoảng trắng và biểu tượng dư thừa

Khoảng trắng và khả năng hiển thị nội dung

Hiệu quả nhấp chuột nhìn từ Fitts’s Law

Vấn đề khác biệt của Compact UI gần như biến mất

UI chỉ có văn bản và khả năng tiếp cận

Thiết kế lại tab của Lepton Theme

Hiển thị nhất quán trạng thái tab

So sánh trạng thái được chọn của Photon, Proton và Lepton

Các trạng thái kết hợp như tắt tiếng, PIP, tab ghim

Tận dụng không gian theo chiều rộng tab

Hình thức phân phối và sở thích

Điều chỉnh biểu tượng và padding

Panel và menu ngữ cảnh

So sánh menu Edge, Chrome và Lepton

Menu ngữ cảnh và nhóm phím tắt

Áp dụng thêm nhiều biểu tượng

Hỗ trợ OS, theme và màu sắc

Theme mặc định của hệ thống

Không gian cho nút thanh tiêu đề

Bổ sung cho theme Proton

Tương tác và animation

Tương tác hỗ trợ người dùng

Thiết kế animation

Khôi phục illustration

Kết luận và giới hạn

Bài viết liên quan

1 bình luận

Ý kiến trên Hacker News