Cách tạo giao diện người dùng mặc định của Firefox tốt hơn

Cách cải thiện giao diện người dùng mặc định của Firefox

• Từ phiên bản 89 của Firefox trở đi, đã có nhiều tranh cãi về giao diện người dùng, và dự án này đã trở nên nổi tiếng như một phản ứng.
• Trình duyệt Waterfox và Floorp cũng đặt chủ đề này làm mặc định.
• Tính đến năm 2023, Mozilla đã quyết định ngừng hỗ trợ Windows 7 và Windows 8. Firefox 115 là phiên bản hỗ trợ cuối cùng và vẫn có thể dùng đến tháng 9 năm 2024.

Nguyên tắc

• Có 3 nguyên tắc lớn và 16 tiêu chí nhỏ về thiết kế UI/UX.
• Vì không thể thực hiện A/B testing nên việc dự đoán hành vi người dùng là quan trọng.
• Họ xem xét trực giác, sự đơn giản, khả năng hiển thị, tính thích ứng, tính nhất quán, khả năng dự đoán, khả năng điều khiển, hiệu quả, tính rõ ràng, tính gần gũi, kích thước, tính phản hồi, tính linh hoạt, khả năng tiếp cận, tính năng, tính ngữ cảnh, sự hài hòa, sự thú vị và tính tương thích.

Vấn đề

• Nêu ra các vấn đề giữa Photon UI của Firefox v88 và Proton UI của v89.
• Các vấn đề chính gồm tab trông giống như nút bấm, padding quá lớn, và biểu tượng khó đọc khi chỉ có một mình.

Vấn đề tab (tính thích ứng, khả năng thao tác)

• Phân tích các vấn đề thiết kế tab dựa trên tính thích ứng và khả năng thao tác.
• Dựa trên ví dụ của Safari của Apple, bài viết đưa ra trường hợp thay đổi thiết kế tab theo phản hồi phàn nàn của người dùng.

Vấn đề không gian quá nhiều (khả năng hiển thị, tính gần gũi, kích thước, tính ngữ cảnh)

• Giải thích vì sao việc có quá nhiều khoảng trống lại là vấn đề khi xem xét khả năng hiển thị, tính gần gũi, kích thước và tính ngữ cảnh.
• Giải thích cách thiết kế UI dễ bấm hơn bằng Định luật của Fitts.
• Phân tích các điểm còn hạn chế qua việc so sánh khoảng cách UI giữa Google Chrome và Firefox.

Sự hỗ trợ của biểu tượng (tính rõ ràng, khả năng tiếp cận)

• Giải thích tầm quan trọng của biểu tượng dưới góc độ tính rõ ràng và khả năng tiếp cận.
• Nhấn mạnh vai trò của biểu tượng qua trường hợp làm mới thiết kế Chrome năm 2023.

Thiết kế lại tab

• Mô tả các lựa chọn thiết kế khác nhau cho trạng thái của tab và chỉ ra sai lầm phổ biến trong Proton UI.
• Thiết kế hành vi thông minh và hiệu quả dựa trên độ rộng của tab.

Phân bố

• Dù có tiêu chuẩn cá nhân cho một UI tốt, nhưng ở mức độ nào đó vẫn là câu chuyện sở thích.
• So sánh tab của Lepton, Photon và Proton để chọn ví dụ phù hợp với từng khái niệm.

Thêm biểu tượng và điều chỉnh padding

• Giải quyết các phàn nàn trước đây bằng cách thêm biểu tượng và điều chỉnh padding.
• Nhấn mạnh chất lượng thiết kế biểu tượng của Lepton bằng cách so sánh biểu tượng menu của Edge, Chrome và Lepton.

Chủ đề

• Cung cấp UI thích ứng cho nhiều hệ điều hành và thiết lập khác nhau.
• Theo phong cách thiết kế của các hệ điều hành từ Windows 7 đến macOS.

Tương tác

• Thiết kế tương tác giúp người dùng hiểu rõ những gì đang diễn ra và làm cho việc tương tác trở nên thú vị.

Kết luận

• Chủ đề này kế thừa các điểm mạnh nhất của giao diện trước đó, đồng thời tính tới tập quán, tâm lý học và kết quả nghiên cứu.
• Hỗ trợ linh hoạt theo hệ điều hành, chế độ tối, chủ đề tùy chỉnh và tương tác theo tình huống.

Ý kiến của GN⁺

• Điều quan trọng nhất của bài viết là phân tích sâu về nguyên tắc thiết kế và cách giải quyết vấn đề để cải thiện trải nghiệm người dùng.
• Đối với người dùng Firefox, chủ đề này có thể là một lựa chọn thay thế thực tế để có trải nghiệm duyệt web tốt hơn.
• Đối với những người quan tâm đến thiết kế UI/UX, đây là tài liệu đầy hiểu biết giúp hiểu bối cảnh đằng sau quyết định thiết kế và tác động của chúng.

[GN⁺]

Ý kiến Hacker News

• Vấn đề chính của giao diện người dùng mới là mọi thứ đều quá lớn. Điều này có thể phù hợp với màn hình điện thoại, nhưng trên màn hình desktop thông thường thì lại lãng phí không gian. Điều này một phần đến từ việc tăng padding như bài viết đã đề cập, nhưng một phần cũng do loại bỏ tùy chọn mật độ UI "compact". Tuy nhiên, có thể khôi phục lại bằng cách đặt browser.compactmode.show trong about:config. Tùy chọn này hiện được đánh dấu là "không được hỗ trợ", nhưng đã duy trì như vậy suốt nhiều năm.
• Với tư cách là tác giả theme Lepton nổi tiếng của Firefox, từ góc nhìn về cách mình cải thiện các quyết định kém hơn của Mozilla và cách nó trở nên phổ biến, tôi có thể thấy một loạt quyết định của mình. Đây là một phần của loạt bài.
• Tôi tin rằng cải thiện UX của trình duyệt bắt đầu từ việc có tab theo chiều dọc. Với tab ngang, khi mở 6~8 tab thì quản lý và theo dõi trở nên khó khăn. Khi dùng tab dọc và xếp chồng, các liên kết mở trong tab mới sẽ tự động trở thành tab con. Điều này giúp nắm bắt cấu trúc và ngữ cảnh dễ hơn so với tab ngang. Việc gán màu cho các site khác nhau sẽ giúp thấy rõ các nhóm tab hơn. Ngoài ra, có thể đánh dấu "cây" tab để lưu lại tiến độ nghiên cứu hoặc làm việc tài liệu. Các file CSS và một số ảnh chụp màn hình có tại đây.
• Bài viết này có vẻ cố thuyết phục rằng một nhà phát triển theme đã xuất phát từ nguyên tắc UX và tạo ra một theme Firefox tốt hơn một cách khách quan, nhưng hầu hết thay đổi đều mang tính sở thích cá nhân. Nó rõ ràng được làm tốt và được duy trì tốt, nhưng cá nhân tôi thấy không thực sự hấp dẫn về mặt thị giác và phần nào còn rườm rà hơn. Mỗi người một gu khác nhau, Firefox đã chọn một thiết kế, nhưng đã cho phép hỗ trợ các thay đổi như vậy. Đó là điều tốt. Tuy nhiên, việc tác giả cố chứng minh rằng gu của mình là đúng theo kinh nghiệm thì có vẻ hơi ngây thơ.
• Từ khi Firefox làm hỏng tab, tôi đã từ bỏ việc dùng nó làm trình duyệt mặc định. Thỉnh thoảng tôi mở ra để thử nghiệm, rồi lại tự nhắc mình sẽ thử lại sau nửa năm nữa. Đặc biệt với theme sáng, nền xám nhạt với nút trắng khiến tình hình còn tệ hơn. Nó thậm chí còn không tôn trọng cài đặt theme hệ thống của Windows. Tôi có thể hiểu Edge, còn Chrome thì không, nhưng ít nhất Chrome có đủ độ tương phản. Firefox thì bỏ sót hoàn toàn.
• Có cả người không hề bận tâm chuyện tab là "nút". Có nhất thiết việc đó có khó chịu thật với người dùng mới không? Thỉnh thoảng tôi nghĩ có lẽ chỉ mình tôi như vậy.
• Ai cũng đăng mọi phàn nàn riêng của mình, nên đây là của tôi:
  • Khi có một cây bookmark lớn với nhiều thư mục, việc thêm bookmark mới trong popup nhỏ của UI "bookmark" là một trải nghiệm tồi tệ.
  • Sidebar bookmark có thể tìm theo tên, nhưng không thể tìm ra bookmark nằm ở đâu. Tính năng bổ sung Bookmark Search Plus 2 giải quyết chuyện này, nhưng về nguyên tắc thì không nên cần thiết.
  • Không thể có nhiều sidebar cùng lúc. Vì vậy không thể mở cùng lúc Tree Style Tabs để xử lý tab dọc với cả thư mục bookmark và tìm kiếm. Vô cùng vô lý.
  • Đó là tất cả. Hầu hết đều liên quan đến bookmark! Tôi không chắc phần còn lại của UI có ổn hay vì đã quen quá nên không còn thấy gì bất tiện nữa. Nhưng nói chung tôi hài lòng với Firefox. Không có nhu cầu bức thiết như người khác để than phiền về việc đổi mới giao diện.
• Bất mãn lớn nhất về thay đổi giao diện Firefox không cần thiết của tôi là việc Mozilla đã xóa browser.urlbar.clickSelectsAll cách đây 4 năm. Dự đoán trước rằng Mozilla không quan tâm. Đọc lại bug report thì điều này có thể chỉ được mô tả là hành vi thù địch với người dùng. Không trường văn bản nào khác hoạt động theo cách này. Tôi không thể hiểu được vì sao Mozilla lại phát hành "tính năng" này và lại bỏ luôn tùy chọn tắt nó.
• Cơn ác mộng thực sự của UI/UX Firefox là di sản cũ. Mọi tính năng mặc định đều mở trong một view riêng. Cài đặt mở trong tab trình duyệt, lịch sử mở trong sidebar, nhưng để quản lý lịch sử thì lại mở trong cửa sổ riêng. Bookmark, download cũng mở trong tab đó. Download có popup nhỏ, nhưng quản lý download lại mở trong cửa sổ đó. Ctrl+Shift+O bookmark mở cửa sổ đó, còn Ctrl+B mở sidebar. Profile? Chưa có tính năng profile thân thiện, trông như giao diện cũ ẩn nấp trong about:profiles. Password? Nó mở trong tab trình duyệt và có vẻ khác hẳn so với mọi thứ khác.
• Điểm tệ nhất của giao diện Proton mà không ai nhắc đến là trên màn hình 1080p (hoặc cao hơn) hiện đại thì đây chắc chắn là nâng cấp đáng kể. Nhưng laptop của tôi là ThinkPad X220 cũ, nên những thay đổi đó ảnh hưởng trực tiếp năng suất của tôi vì lãng phí không gian màn hình vô nghĩa. Trong trường hợp này, đó không phải là chuyện biến mọi thứ thành các ứng dụng Electron hay React phình to như thường thấy, mà giống như sự thay đổi bề ngoài vô lý để tạo cảm giác Mozilla vẫn quan tâm tới Firefox.