Vì sao website của chúng tôi trông giống một hệ điều hành

(posthog.com)

1 điểm bởi GN⁺ 2025-09-12 | Chưa có bình luận nào. | Chia sẻ qua WhatsApp

Nhiều website công nghệ lớn gặp phải vấn đề bùng nổ tab khi cần tham khảo nhiều trang cùng lúc
PostHog.com cũng gặp vấn đề tương tự và đã áp dụng UI theo phong cách hệ điều hành để giải quyết
Trong cấu trúc mới, trang web cung cấp nhiều tính năng tương tác như đa nhiệm, snap cửa sổ, phím tắt bàn phím
Các đổi mới kỹ thuật như tách biệt phân cấp thị giác và nội dung, quản lý nội dung dựa trên JSON, cơ sở dữ liệu khách hàng đã được áp dụng
Ban đầu hơi lạ lẫm, nhưng trải nghiệm phát triển và sử dụng đã thay đổi theo hướng tích cực, đồng thời đảm bảo được tính linh hoạt và khả năng mở rộng

Vấn đề đặt ra: bùng nổ tab trên các website công nghệ

Trên nhiều website công nghệ quy mô lớn, khi cần tham khảo nhiều trang cùng lúc, người dùng thường phải mở hàng loạt tab mới bằng CMD + nhấp
Do cùng một favicon và thiết kế tương tự nhau, rất khó phân biệt từng tab
PostHog.com cũng bắt đầu gặp vấn đề tương tự khi dịch vụ phát triển, và khi hỗ trợ thêm nhiều sản phẩm trả phí cùng số lượng trang tăng lên, vấn đề suy giảm khả năng phân biệt càng nghiêm trọng hơn

Nhóm đặt câu hỏi về giao diện thiên về cuộn của các website marketing và tài liệu hiện có, cùng footer quá lớn và khoảng trắng quá nhiều
Nhận ra cần có một cách tiêu thụ nội dung tốt hơn thay vì chỉ thúc đẩy cuộn vô nghĩa
Để giải quyết điều này, PostHog.com mới được thiết kế để hỗ trợ đa nhiệm, xem đồng thời nhiều bài viết và di chuyển tự do trong cùng một màn hình

UI mới triển khai các tính năng như snap cửa sổ, phím tắt bàn phím, ứng dụng đánh dấu trang
Mang lại trải nghiệm giống một hệ điều hành trong trình duyệt, nơi có thể thực hiện nhiều tác vụ cùng lúc
Ví dụ, có thể đồng thời xem bản tin dành cho kỹ sư, xem video demo và chạy game (chế độ hedgehog)

Giao diện theo phong cách hệ điều hành có thể mang lại cảm giác hơi lạ lúc ban đầu
Việc rời khỏi các mẫu trình duyệt truyền thống từng khiến não bộ có phản ứng kháng cự, nhưng khi sử dụng lặp lại thì trở nên quen thuộc và được nhìn nhận tích cực
Các đồng nghiệp nội bộ cũng phản hồi tích cực về trải nghiệm mới này, đến mức khó có thể quay lại cách làm cũ

Cùng với Eli Kinsey, nhóm đã thiết kế và phát triển UI, xây dựng website bằng Typescript và Tailwind
Trong quá trình tìm cách sắp xếp có khả năng mở rộng cho 5 năm nội dung, nhóm đã thử nghiệm nhiều hướng tiếp cận kỹ thuật khác nhau

Tách biệt phân cấp thị giác và nội dung
- Tất cả các trang sản phẩm đều được render dựa trên tệp JSON
- JSON trực tiếp điều khiển bố cục trang, cách triển khai nội dung, so sánh đối thủ theo từng tính năng và ảnh chụp màn hình với nhiều chủ đề khác nhau (chế độ sáng/tối)
- Về lâu dài, nhóm dự định chuyển cấu trúc này sang một repository dùng chung với ứng dụng PostHog để trở thành nguồn thông tin duy nhất
Chủ đề và phối màu
- Vẫn duy trì chế độ sáng và tối, đồng thời suy nghĩ về cách áp dụng hài hòa nhiều chủ đề như màu chính, phụ và cấp ba
- Trải nghiệm liên quan đến phần này sẽ được chia sẻ trong một bài viết riêng sau
Cơ sở dữ liệu khách hàng tham chiếu
- Nhóm định nghĩa một bản ghi khách hàng duy nhất trong mã để lưu thông tin như tình trạng sử dụng theo từng sản phẩm, trích dẫn của khách hàng và logo SVG (hỗ trợ chế độ sáng/tối)
- Nhờ đó, trang có thể tự động tải các trích dẫn, tên, ảnh và logo công ty liên quan đến những sản phẩm khác nhau cho từng trang, giúp đảm bảo tính linh hoạt

UI được triển khai bằng Typescript và Tailwind, đồng thời thiết kế và phát triển website được tiến hành song song
Nhóm chọn cách tạo prototype ngay trong môi trường production để dễ nảy sinh ý tưởng mới và mở rộng tính năng
Khi cần, họ cũng kết hợp các công cụ mockup bên ngoài như Balsamiq để cụ thể hóa concept

Hiện tại đây vẫn là giai đoạn MVP ban đầu và còn cần nhiều cải tiến trong thời gian tới
Nhóm hy vọng người dùng sẽ thích thú với UX mới của PostHog.com và cảm thấy vui khi khám phá website
Tài liệu kỹ thuật về cách website hoạt động sẽ được cung cấp riêng