- 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
Tìm kiếm phương án thay thế và đổi mới UI
- 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
Một website vận hành như hệ điều 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)
Giai đoạn thích nghi ban đầu và phản hồi của người dùng
- 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ũ
Quá trình xây dựng và các điểm nhấn kỹ thuật
- 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
Các điểm kỹ thuật chính
-
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
Cách phát triển và tạo prototype
- 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
Kết luận và hướng cải tiến trong tương lai
- 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
1 bình luận
Ý kiến trên Hacker News
Có lẽ để trả lời vì sao nó lại tạo cảm giác hấp dẫn khác thường so với các thiết kế quen thuộc thì cần đến nhà tâm lý học, nhà khoa học nhận thức hoặc nhà thần kinh học; tôi nghĩ cần nghiên cứu sâu hơn chứ không chỉ là những bài blog viết vội trong ngành phần mềm hiện nay
Cá nhân tôi có thể nói một điều từ trải nghiệm thực tế: tôi từng làm ở một công ty xây dựng website và chiến lược cho các sản phẩm SaaS lớn, và cũng chính là đối tượng mục tiêu của kiểu site này (giám đốc kỹ thuật hoặc VP)
Từ góc nhìn khách hàng tiềm năng, tốc độ và sự thuận tiện khi lần theo thông tin mình muốn rõ ràng vượt trội hơn những gì tôi từng thấy
Ví dụ, tôi có thể lập tức thấy có 34 sản phẩm thuộc 7 danh mục, đồng thời 5 sản phẩm phổ biến và 4 sản phẩm mới hiện ra ngay
Nếu muốn dùng thử sản phẩm: Docs > Product OS > Integration > Install and configure > Install PostHog
Nếu tò mò về văn hóa kỹ thuật: Company > Handbook > Engineering > Internal Processes > Bug prioritization
Nếu muốn xem giá: Pricing calculator > chọn sản phẩm > đặt mức sử dụng, chọn add-on
Tất cả những tương tác này diễn ra chỉ trong vài giây, và tôi có thể chuyển ngay giữa trang tổng quan đã mở sẵn với trang giá mới mở mà không cần reload toàn bộ website; không cần mở tab mới hay cuộn trang
Vì vậy tôi nghĩ ở đây có điều gì đó mang tính bản chất chứ không chỉ là thẩm mỹ; có lẽ cuối cùng ta sẽ đi đến kết luận rằng triết lý UI/UX hiện tại thực ra đang trở nên thiếu thân thiện với người dùng
Tôi nhớ Cory và Eli (frontend engineer) từng tranh luận về thiết kế website theo hướng: “Tại sao mọi website đều là những trang dài phải cuộn rất nhiều, và điều đó có phù hợp với doanh nghiệp của chúng ta không?”
Vì chúng tôi có nhiều sản phẩm và lượng nội dung rất rộng (hơn 10 sản phẩm, handbook, tuyển dụng, newsletter, v.v.), nên kết luận là cấu trúc phẳng phù hợp với công ty chỉ có 1 sản phẩm sẽ không phù hợp ở đây
Phần lớn website cố nhồi toàn bộ bản thân họ vào trong 3 giây đầu, nhưng công ty chúng tôi quá đa diện để gói gọn trong một phần giới thiệu 3 giây, nên chúng tôi cố tình làm cấu trúc khuyến khích mọi người khám phá website và hiểu nội dung sâu hơn
Vì vậy sẽ có một số người rời đi rất nhanh, nhưng những người ở lại thì (đôi khi!) thực sự rất thích UX này
Bản thân dự án này cũng rất vui, và chúng tôi thử nó vì có thể nổi bật theo một cách đặc biệt
Nó ngầu hơn và tiết kiệm chi phí hơn nhiều so với bán hàng outbound truyền thống
Chúng tôi đang vận hành với thời gian hoàn vốn CAC là 3 tháng
Tuy vậy, để chiến lược này thực sự hiệu quả thì tiền đề là phải làm nó “thật” sâu để đọng lại trong trí nhớ của mọi người
Không ngờ lại thấy quan điểm như thế này trên HN
Bình thường ở HN, cứ dùng nhiều JavaScript là bị xem là thiết kế tệ, không dùng được và kém tính portable
Trường hợp này có thể xem như phiên bản đẩy JavaScript lên mức tối đa
Điểm là có thể tìm thông tin cần thiết nhanh và dễ, đúng là có cảm giác web đang quay lại kiểu thiết kế tập trung vào menu như ngày xưa
Các UI hiện đại ngày nay nói nhiều về sự tối giản và “trải nghiệm thú vị”, nhưng khó mà theo kịp hiệu quả của một thanh menu được tổ chức tốt
Nên cẩn thận khi khái quát hóa cảm giác dễ chịu từ kiểu giao diện này
So với CLI hay command palette, UI này lại thấy nặng nề và mệt về mặt nhận thức
Nếu tôi nhớ không nhầm thì công ty này đã đưa toàn bộ nội dung vào cùng một CMS, đặc biệt là tích hợp cả forum thảo luận/hỗ trợ vào site chính
Từ kinh nghiệm từng làm các dự án tương tự, khi mọi nội dung trên trang đầu đều nằm trong tay một tổ chức kiểm soát thống nhất, ta sẽ không còn cảm giác tranh giành địa bàn giữa các bộ phận hay một mớ link subdomain lộn xộn
Tôi nghĩ kiểu site này chỉ có thể làm được khi backend có một hệ thống tích hợp nội dung (CMS)
Và ở cấp độ tổ chức, phải kháng cự rất mạnh xu hướng phân quyền kiểu mỗi VP giữ lãnh địa của mình thì mới duy trì được cấu trúc CMS như vậy
PostHog.com nói rằng họ chỉ dùng một cookie nội bộ, không có third-party cookie,
nhưng về mặt pháp lý, nếu cookie đó không thực sự cần thiết cho chức năng cốt lõi của site thì vẫn phải có tùy chọn opt-out (từ chối)
Còn nếu nó cần cho chức năng cốt lõi thì bản thân banner cũng không cần thiết
Nếu thực sự chỉ dùng cookie cho chức năng thiết yếu, thì những banner cookie kiểu đùa vui như vậy lại chỉ gây khó chịu không cần thiết trong khi giả vờ tôn trọng quyền riêng tư của khách truy cập
Tệ hơn nữa, nó khiến luật của EU trông như chỉ là loại quy định phiền toái chẳng mang ý nghĩa thực chất, và kết quả là lại trao lợi thế tệ hơn cho những site thực sự đang theo dõi người dùng
Thật vô lý
Có vẻ tiêu chí xem có cần banner cookie hay không còn đơn giản hơn thế
Nếu cookie không dùng cho mục đích tracking thì không cần banner
Ví dụ như cookie nhớ thứ tự sắp xếp, vì không phải để tracking nên tôi nghĩ không cần banner
Cuối cùng vấn đề cốt lõi không phải là “cookie” mà là “tracking”
Tôi tò mò không biết nước nào bắt buộc banner cookie cho mọi cookie
EU chỉ bắt buộc với cookie dùng để tracking, còn PostHog không nêu mục đích đó
Bản thân tôi cũng từng tự thêm vì nghĩ “đã bảo là bắt buộc mà” dù thực ra cookie còn chưa cần
Nhận thức rằng mọi site đều phải có banner cookie trên thực tế có khi còn có hại hơn chính cái banner
Vì có hệ thống đăng nhập nên khả năng cao cookie nội bộ có chứa thông tin đăng nhập (JWT hoặc tương tự)
Trong trường hợp đó, đây là cookie phục vụ chức năng cốt lõi nên không cần banner
Nói cách khác, có thể suy ra nó không phải yêu cầu pháp lý, mà chỉ là họ thêm vào vì sợ ai đó hỏi “sao không có banner cookie?”
Cuối cùng đây không phải nghĩa vụ pháp lý thực chất, mà chỉ là nhu cầu mang tính thông lệ/nhận thức
Đã là năm 2025 rồi mà tôi vẫn không hiểu tại sao người ta còn muốn tự nhìn thấy cookie rồi từ chối bằng mắt
Tôi cứ nghĩ trình duyệt nên tự động xử lý chuyện đó
Trang https://posthog.com/404 là bản nhái Blue Screen of Death
Trước giờ tôi luôn nghĩ ‘multi-document interface (MDI)’ là một anti-pattern
Đã có window manager hoàn hảo rồi thì tại sao mỗi app lại cần công cụ quản lý cửa sổ riêng tích hợp bên trong?
Tất nhiên trên mobile thì là ngoại lệ vì không có window manager ở cấp hệ điều hành như vậy
Một số app (ví dụ như trình chỉnh sửa ảnh) đúng là cần nhiều cửa sổ bên trong ứng dụng
Nhưng gần như mọi triển khai MDI phổ thông (Win32, Qt) đều tối giản đến mức gây thất vọng
Trong Krita tôi muốn mở nhiều cửa sổ, nhưng MDI của Qt còn kém hơn cả Windows 95
So với các app như Gimp thì tôi lại thích kiểu mọi thứ nằm trong một cửa sổ hơn
Khi mở cùng lúc hai ba app thì việc tìm cửa sổ như chơi trốn tìm
Tôi thực sự ghét kiểu toolbar tách ra thành các cửa sổ riêng
Với góc nhìn của người dùng Mac lâu năm, MDI giống một giải pháp vá víu nảy sinh vì OS thiếu khả năng quản lý cửa sổ theo cấp ứng dụng
Photoshop ngày xưa trên Mac cho phép thả nổi cửa sổ và palette rất tự do, rồi khoảng thời CS4 họ đưa vào kiểu MDI, và tự nhiên mọi thứ trở nên ngột ngạt nên tôi luôn tắt nó đi
Riêng trên Mac thì nó thật sự lạ lẫm và bí bách
Phần lớn lệnh trong Unix đều có cách định dạng output riêng của chúng (column, table, list, file, TTY, v.v.)
Trừu tượng của UNIX rốt cuộc vẫn là cấu trúc lấy “text” làm trung tâm
Nhưng vì hệ sinh thái quá phong phú nên mỗi tool lại có các yêu cầu khác nhau
Nếu đã có một trừu tượng phù hợp hơn ngoài text thì chắc nó đã xuất hiện từ lâu rồi, nhưng cuối cùng mọi thứ vẫn là pipeline text
Có vẻ các window manager của OS không xử lý hiệu quả khi có nhiều cửa sổ nhỏ trên cùng một màn hình
Trong khi đó, tool quản lý cửa sổ tùy biến trong phần mềm đồ họa hay CAD thường được tối ưu để tiết kiệm không gian bằng các thanh tiêu đề nhỏ
Tôi nghĩ đây là một dự án gần như hoàn hảo và đầy cảm hứng
Sẽ còn hay hơn nữa nếu giống desktop OS thật, tức là kéo ở vùng trống thì hiện ra một khung hình chữ nhật để di chuyển,
và tôi đã tự làm một đoạn code snippet giúp làm được điều đó, cứ dán vào console để trải nghiệm là giấc mơ thành hiện thực
(code: JS hiển thị selection rect trên màn hình khi kéo chuột, in kết quả ra console)
Ý tưởng hay, triển khai cũng ngầu, nhưng thành thật mà nói tôi không muốn nó
Tôi phải học một UI/UX mới, rồi lại còn phải sắp xếp cửa sổ bên trong cửa sổ
Tôi nghĩ website không cần giao diện cầu kỳ, chỉ cần các khối văn bản là đủ
Tôi thực sự đồng cảm
Tôi đã cấu hình hệ điều hành của mình để quản lý cửa sổ một cách hoàn hảo rồi
Hãy thử tưởng tượng nếu phải biến toàn bộ nội dung của trang này thành một khối văn bản duy nhất thì nó sẽ dài kinh khủng thế nào
Khó diễn tả chính xác, nhưng đây thực sự là một công trình rất tuyệt
Sau nhiều năm làm web, tôi luôn bực bội vì UI tệ, còn website này thì thật sự nổi bật
Nó không chỉ đơn giản là “trông giống Windows”, mà cảm giác sử dụng thực tế còn là tốt nhất trong số các site mô phỏng desktop trên trình duyệt mà tôi từng thử
Chỉ có một điều hơi tiếc là nếu menu ngữ cảnh xuất hiện khi nhấp chuột phải vào nền có thêm mục “Làm mới” thì cảm giác desktop trình duyệt sẽ hoàn hảo hơn (không cần thật sự chạy, chỉ cần đủ vibe)
Tóm lại: làm rất tốt, một website rất tuyệt
Nhìn thì đẹp nhưng hiệu năng quá chậm
Mở vài cửa sổ rồi kéo qua kéo lại là thấy khó chịu
Muốn làm kiểu webpage nhiều cửa sổ như vậy thì hiệu năng cũng phải tốt
Ngày xưa vì SEO nên tuyệt đối không ai dùng cấu trúc kiểu này
Bây giờ có cảm giác tầm quan trọng của SEO cũng đang dần thành chuyện cũ
Tôi cũng gặp hiện tượng chậm trên Firefox
Vào bằng Edge thì chạy mượt hơn
Tôi tò mò không biết bạn gặp vấn đề hiệu năng trong môi trường nào
Với tôi thì đến cửa sổ đầu tiên vẫn ổn, từ cửa sổ thứ hai bắt đầu hơi khựng, rồi sau đó lại chạy hết tốc độ
Có lẽ vì khi trình duyệt phát hiện việc dùng một số hàm nhất định thì nó áp dụng routine tối ưu hơi muộn
SEO ngày xưa là web page với tư cách “tài liệu”, còn bây giờ có vẻ ai cũng muốn biến web thành game
Chắc những website kiểu game như vậy cũng khó xếp hạng hơn nhỉ
Tôi rất thích vì website này quá mới lạ
Nó nổi bật giữa thiên đường các site marketing SaaS đều dùng cùng một template xếp chồng các section giống nhau
Nhưng thực tế thì sẽ chẳng ai dùng nó đúng theo cách được mô tả ở trên
Tôi không nghĩ có ai ở lại đủ lâu để học rồi dùng thành thạo hệ thống quản lý cửa sổ dành riêng cho site
Ngược lại tôi lại thấy UX khá trực quan
Hơn nữa còn vui
Thường thì tôi đóng ngay các site sản phẩm kiểu này, nhưng lần này tôi xem hơn 5–10 phút, lục lọi kỹ xem có gì bên trong
Tôi cũng có cảm giác lạ lùng giống vậy
Nhưng có vẻ phần lớn bình luận trên HN không mấy hài lòng
Phản ứng của tôi cũng tương tự
Nó ấn tượng, thú vị và thể hiện tốt triết lý của công ty
Dùng thực tế thì có thể không quá thực dụng, nhưng tôi không nghĩ đó là vấn đề quan trọng
Khi làm việc với PostHog, tôi thấy không thoải mái vì lượng analytics vượt quá chuẩn đạo đức của mình, nhưng về mặt kỹ thuật thì họ làm thật sự rất tốt
Trang landing thể hiện rõ trình độ kỹ thuật và mức độ hoàn thiện của chính sản phẩm
Đây là một landing page mới lạ và vui nhộn, và trò đùa về “banner cookie” cũng khiến tôi bật cười