Mengapa situs web kami terlihat seperti sistem operasi
(posthog.com)- Banyak situs web teknologi besar mengalami masalah ledakan tab saat perlu merujuk beberapa halaman sekaligus
- PostHog.com juga mengalami masalah serupa dan memperkenalkan UI bergaya sistem operasi untuk mengatasinya
- Dalam struktur baru, tersedia beragam fitur interaksi seperti multitasking, window snapping, dan shortcut keyboard
- Inovasi teknis seperti hierarki visual dan pemisahan konten, pengelolaan konten berbasis JSON, serta basis data pelanggan turut diterapkan
- Awalnya terasa asing, tetapi pengalaman pengembangan dan penggunaan berubah secara positif, sekaligus memperoleh fleksibilitas dan skalabilitas
Kesadaran masalah: ledakan tab di situs web teknis
- Di banyak situs web teknis berskala besar, ketika ingin merujuk beberapa halaman sekaligus, orang cenderung membuka banyak tab baru dengan
CMD+ klik - Karena favicon yang sama dan desain yang mirip, sulit membedakan tiap tab
- PostHog.com juga mulai mengalami masalah yang sama seiring pertumbuhan layanan, dan dengan dukungan lebih banyak produk berbayar serta bertambahnya halaman, masalah sulit dibedakan ini makin parah
Mencari alternatif dan inovasi UI
- Mereka mulai mempertanyakan antarmuka berbasis gulir di situs pemasaran dan dokumentasi tradisional, footer yang besar, serta ruang kosong yang berlebihan
- Alih-alih mendorong gulir yang tidak bermakna, mereka menyadari perlunya cara konsumsi konten yang lebih baik
- Untuk mengatasinya, PostHog.com yang baru dirancang agar memungkinkan multitasking, membuka beberapa artikel sekaligus, dan berpindah dengan leluasa di dalam layar
Situs yang bekerja seperti sistem operasi
- UI baru ini menghadirkan fitur seperti window snapping, shortcut keyboard, dan aplikasi bookmark
- Seperti sistem operasi di dalam browser, pengalaman ini memungkinkan beberapa pekerjaan dilakukan secara bersamaan
- Sebagai contoh, pengguna bisa sekaligus melihat newsletter untuk engineer, menonton video demo, dan menjalankan game (mode hedgehog)
Adaptasi awal dan respons pengguna
- Antarmuka bergaya sistem operasi dapat terasa agak asing pada awalnya
- Karena keluar dari pola browser tradisional, otak bisa saja menolaknya, tetapi dengan pemakaian berulang pengguna menjadi terbiasa dan mulai memandangnya secara positif
- Rekan internal juga memberikan umpan balik positif terhadap pengalaman baru ini, hingga mencapai titik di mana sulit untuk kembali ke cara lama
Proses pembangunan dan sorotan teknis
- Bersama Eli Kinsey, mereka merancang dan mengembangkan UI berbasis Typescript dan Tailwind, lalu membangun situsnya
- Dalam proses memikirkan cara menata konten 5 tahun agar tetap skalabel, mereka mengeksplorasi berbagai pendekatan teknis
Poin teknis utama
-
Hierarki visual dan pemisahan konten
- Semua halaman produk dirender berbasis file JSON
- JSON secara langsung mengendalikan layout halaman, alur konten, perbandingan pesaing per fitur, serta screenshot berbagai tema (mode terang/gelap)
- Dalam jangka panjang, struktur ini direncanakan dipindahkan ke repositori yang dibagikan dengan aplikasi PostHog agar menjadi satu sumber informasi tunggal
-
Tema dan skin warna
- Mereka mempertahankan mode terang dan gelap, sambil memikirkan cara menerapkan beragam tema seperti warna utama, sekunder, dan tersier secara selaras
- Pengalaman terkait hal ini rencananya akan dibagikan dalam tulisan terpisah di kemudian hari
-
Basis data pelanggan referensi
- Dengan mendefinisikan satu record pelanggan di dalam kode, mereka menyimpan informasi seperti status penggunaan per produk, kutipan pelanggan, dan logo SVG (mendukung mode terang/gelap)
- Karena dapat otomatis memuat kutipan, nama, foto, dan logo perusahaan yang terkait dengan produk berbeda di tiap halaman, fleksibilitas pun terjamin
Cara pengembangan dan prototyping
- UI diimplementasikan dengan Typescript dan Tailwind, sambil merancang dan mengembangkan situs secara bersamaan
- Mereka memilih pendekatan prototyping langsung di lingkungan produksi agar ide baru dan perluasan fitur lebih mudah dilakukan
- Sesuai kebutuhan, alat mockup eksternal seperti Balsamiq juga digunakan bersamaan untuk mematangkan konsep
Kesimpulan dan arah perbaikan ke depan
- Saat ini produk tersebut masih berada pada tahap awal MVP, dan masih banyak perbaikan yang diperlukan ke depannya
- Mereka berharap pengguna menikmati UX baru PostHog.com, sekaligus merasakan kesenangan saat menjelajahi situs
- Dokumentasi teknis tentang cara kerja situs akan disediakan secara terpisah
1 komentar
Komentar Hacker News
Mengapa ini terasa sangat menarik dengan cara yang tidak biasa dibandingkan desain-desain yang sudah ada mungkin bisa dijawab oleh psikolog, ilmuwan kognitif, atau ahli saraf; menurut saya dibutuhkan riset yang lebih mendalam daripada tulisan blog yang tergesa-gesa kita buat di industri software saat ini
Secara pribadi ada satu hal yang bisa saya katakan dari pengalaman: saya pernah bekerja di perusahaan yang membuat situs web dan strategi untuk produk SaaS besar, dan saya sendiri adalah target pasar situs seperti ini (direktur engineering atau VP)
Dari sudut pandang calon pelanggan, kecepatan dan kemudahan menelusuri informasi yang diinginkan jelas lebih unggul dibanding apa pun yang pernah saya lihat sejauh ini
Misalnya, saya langsung bisa melihat bahwa ada 34 produk di bawah 7 kategori, dan 5 produk populer serta 4 produk baru langsung terlihat
Kalau ingin mencoba produknya: Docs > Product OS > Integration > Install and configure > Install PostHog
Kalau penasaran dengan budaya engineering: Company > Handbook > Engineering > Internal Processes > Bug prioritization
Untuk mengecek harga: Pricing calculator > pilih produk > atur usage, pilih add-on
Semua interaksi ini terjadi dalam hitungan detik, dan saya bisa langsung berpindah antara halaman ringkasan yang sudah terbuka dan halaman harga yang baru dibuka tanpa reload seluruh situs, tanpa perlu buka tab baru atau scroll
Jadi menurut saya ada sesuatu yang lebih mendasar di sini, bukan sekadar estetika; mungkin kesimpulannya justru filsafat UI/UX saat ini telah menjadi kurang ramah bagi pengguna
Saya ingat Cory dan Eli (frontend engineer) pernah berdiskusi soal desain situs web dengan tema, ‘kenapa semua situs web terdiri dari halaman yang panjang dan harus banyak scroll, apakah itu cocok untuk bisnis kita?’
Karena kami menawarkan beragam produk dan konten yang luas (lebih dari 10 produk, handbook, rekrutmen, newsletter, dll.), kami menyimpulkan bahwa struktur datar yang cocok untuk perusahaan dengan 1 produk tidak cocok untuk kami
Kebanyakan situs web berusaha menyampaikan seluruh isi perusahaan dalam 3 detik, tetapi perusahaan kami terlalu multidimensional untuk dimasukkan ke perkenalan 3 detik, jadi kami sengaja membuat struktur yang mendorong orang menjelajahi situs dan memahami isinya lebih dalam
Karena itu sebagian pengunjung mungkin akan cepat pergi, tetapi yang bertahan (kadang-kadang!) benar-benar menyukai UX ini
Proyek ini sendiri juga menyenangkan, dan kami mencobanya karena bisa menonjol dengan cara yang terasa spesial
Jauh lebih keren dan lebih hemat biaya dibanding sales outbound tradisional
Kami beroperasi dengan metrik startup berupa periode payback CAC 3 bulan
Tapi, agar strategi seperti ini benar-benar berhasil, ada asumsi bahwa Anda harus melakukannya dengan "sangat" mendalam agar tetap diingat orang
Saya tidak menyangka akan melihat pendapat seperti ini di HN
Biasanya di HN pandangan yang dominan adalah kalau terlalu banyak memakai JavaScript maka itu desain yang buruk, tidak usable, dan portabilitasnya rendah
Kasus ini, bisa dibilang, adalah versi JavaScript maksimal
Fakta bahwa informasi yang dibutuhkan bisa ditemukan dengan cepat dan mudah benar-benar terasa seperti web kembali ke desain berbasis menu di masa lalu
UI modern sekarang mengusung kesederhanaan dan “pengalaman yang menyenangkan”, tetapi sulit menandingi efisiensi menu bar yang disusun dengan baik
Saya akan berhati-hati jika ingin menggeneralisasi kenyamanan yang dirasakan dari antarmuka seperti ini
Dibanding CLI atau command palette, UI ini terasa lebih membebani dan melelahkan secara kognitif
Kalau ingatan saya benar, perusahaan ini menaruh semua konten di CMS yang sama, terutama mengintegrasikan forum diskusi/bantuan ke situs utama
Berdasarkan pengalaman saya mengerjakan proyek serupa di masa lalu, semua konten di halaman depan terasa dikendalikan dan dipimpin oleh satu organisasi, tanpa jejak perebutan wilayah antar divisi atau link-link subdomain yang berantakan
Saya rasa situs seperti ini hanya bisa dibuat jika ada sistem integrasi konten (CMS) di backend
Dan secara organisasi juga harus ada perlawanan kuat terhadap kecenderungan menuju desentralisasi (setiap VP mengurus “wilayahnya” sendiri) agar struktur CMS seperti ini bisa terwujud
PostHog.com katanya hanya menggunakan satu cookie internal tanpa cookie pihak ketiga,
tetapi secara hukum kalau cookie itu tidak esensial untuk fungsi inti situs, mereka harus menyediakan opsi opt-out (menolak)
Kalau memang diperlukan untuk fungsi inti, maka banner-nya sendiri tidak diperlukan
Kalau memang mereka hanya memakai cookie untuk fungsi yang esensial, banner cookie bercanda seperti ini justru hanya mengganggu sambil berpura-pura menghormati privasi pengunjung
Yang lebih buruk, ini membuat hukum EU terlihat seperti regulasi menyebalkan yang tidak punya makna substantif, dan akibatnya memberi pembenaran yang lebih buruk bagi situs-situs yang benar-benar memata-matai pengguna
Benar-benar konyol
Sepertinya kriteria perlunya banner cookie lebih sederhana
Kalau cookie tidak dipakai untuk tujuan tracking, maka struktur seperti ini tidak memerlukan banner
Misalnya cookie untuk mengingat urutan sort, yang bukan untuk tracking, menurut saya tidak perlu banner
Intinya, isu utamanya bukan “cookie” melainkan “tracking”
Saya penasaran negara mana yang mewajibkan banner cookie untuk semua cookie
EU hanya mewajibkannya untuk cookie tracking, dan PostHog tidak menyatakan tujuan itu
Saya sendiri juga pernah menaruhnya hanya karena “katanya wajib”, padahal cookie-nya pun tidak ada
Persepsi bahwa semua situs harus punya banner cookie mungkin sebenarnya lebih merugikan daripada banner itu sendiri
Karena ada sistem login, besar kemungkinan cookie internal itu menyimpan info login (JWT, dll.)
Dalam kasus ini, cookie tersebut adalah cookie untuk fungsi inti sehingga tidak perlu banner
Jadi bisa diduga itu bukan kewajiban hukum, tetapi mereka memasangnya karena takut ada orang bertanya, “kenapa tidak ada banner cookie?”
Pada akhirnya ini bukan kebutuhan hukum yang nyata, melainkan kebutuhan karena kebiasaan/persepsi
Sekarang sudah 2025, saya penasaran kenapa orang masih ingin melihat cookie lalu menolaknya secara manual
Bukankah browser saja yang seharusnya menangani itu secara otomatis?
Halaman https://posthog.com/404 adalah parodi Blue Screen of Death
Dulu saya selalu menganggap 'multiple document interface (MDI)' sebagai antipola
Sudah ada window manager yang sempurna, jadi kenapa tiap aplikasi perlu alat manajemen jendela bawaannya sendiri?
Tentu saja di mobile ini pengecualian karena tidak ada window manager level OS seperti itu
Beberapa aplikasi (misalnya editor gambar) memang membutuhkan banyak jendela di dalam aplikasinya
Tetapi hampir semua implementasi MDI umum (Win32, Qt) terlalu minimalis dan mengecewakan
Di Krita saya ingin membuka beberapa jendela, tetapi MDI dari Qt bahkan kalah dari Windows 95
Dibanding aplikasi seperti Gimp, saya justru lebih suka struktur yang semuanya ada di dalam satu jendela
Kalau dua atau tiga aplikasi terbuka sekaligus, mencari jendelanya jadi seperti main petak umpet
Saya benar-benar tidak suka toolbar muncul sebagai jendela terpisah
Sebagai pengguna Mac lama, MDI terasa seperti solusi sementara karena OS-nya kurang punya kemampuan manajemen jendela per aplikasi
Photoshop dulu di Mac memungkinkan jendela dan palet dibuka bebas, lalu sekitar CS4 diperkenalkan tipe MDI dan tiba-tiba terasa menyesakkan, jadi saya selalu mematikannya
Setidaknya di Mac, itu terasa sangat asing dan membatasi
Sebagian besar perintah di Unix punya cara masing-masing untuk format output (kolom, tabel, daftar, file, TTY, dll.)
Abstraksi UNIX pada akhirnya berpusat pada “teks”
Tetapi karena ekosistemnya kaya, tiap tool memiliki kebutuhan yang beragam
Kalau memang ada abstraksi lain yang lebih cocok selain teks, mungkin itu sudah muncul sejak lama, tetapi pada akhirnya semuanya tetap pipeline teks
Window manager di OS tampaknya tidak efisien menangani banyak jendela kecil dalam satu layar
Sebaliknya, alat manajemen jendela kustom di software seni atau CAD sering kali dioptimalkan untuk menghemat ruang dengan title bar kecil
Saya rasa ini proyek yang nyaris sempurna dan sangat menginspirasi
Akan lebih bagus lagi kalau seperti desktop OS sungguhan, Anda bisa drag area kosong lalu muncul kotak persegi yang bisa digerakkan,
saya bahkan sudah membuat sendiri snippet kode yang memungkinkan itu, jadi kalau ditempel ke console dan dicoba, mimpinya jadi nyata
(kode: JS yang menampilkan selection rect di layar lewat drag mouse, dan mencetak hasilnya ke console)
Ide dan implementasinya keren, tetapi sejujurnya saya tidak menginginkannya
Saya harus belajar UI/UX baru, lalu juga harus mengatur jendela di dalam jendela
Menurut saya situs web cukup berupa blok teks saja, tidak perlu antarmuka yang dibuat-buat keren
Sangat setuju
OS saya sudah saya atur agar manajemen jendelanya sempurna
Coba bayangkan kalau semua konten di halaman ini harus dijadikan satu blok teks, panjangnya akan benar-benar luar biasa
Sulit menjelaskannya, tetapi ini benar-benar pekerjaan yang keren
Setelah bertahun-tahun bergelut di pengembangan web dan selalu frustrasi dengan UI yang buruk, situs ini benar-benar unggul
Bukan cuma sekadar “mirip Windows”, tetapi secara pengalaman pakai memang yang terbaik dari semua situs simulator desktop berbasis browser yang pernah saya coba
Satu hal yang sedikit kurang, kalau menu konteks yang muncul saat klik kanan di latar belakang punya item “Refresh”, nuansa desktop browser-nya akan terasa sempurna (tidak perlu benar-benar berfungsi, tapi secara emosional akan lengkap)
Singkatnya: kerja yang keren, situs yang keren
Secara visual ini keren, tetapi performanya terlalu lambat
Coba buka beberapa jendela lalu gerakkan, rasanya bikin frustrasi
Kalau mau membuat halaman web multi-jendela seperti ini, performanya juga harus bagus
Dulu struktur seperti ini tidak akan pernah dipakai karena SEO
Sekarang rasanya pentingnya SEO pun mulai jadi cerita lama
Saya mengalami kelambatan di Firefox
Saat dibuka di Edge, gerakannya jadi mulus
Saya penasaran di lingkungan seperti apa masalah performanya muncul
Sampai jendela pertama semuanya baik-baik saja, lalu mulai agak tersendat dari jendela kedua, dan setelah itu kembali ke kecepatan penuh
Mungkin browser agak terlambat menerapkan rutinitas optimisasi ketika mendeteksi penggunaan fungsi tertentu
Dulu SEO itu web page sebagai ‘dokumen’, tapi sekarang semua orang tampaknya ingin menjadikan web sebagai game
Situs web yang mirip game juga mungkin sulit untuk diberi ranking
Saya sangat suka karena situs web ini begitu segar
Di tengah surga situs marketing SaaS yang memakai template tumpukan section yang sama, ini benar-benar menonjol
Tetapi saya rasa tidak ada orang yang benar-benar akan memakainya seperti yang dijelaskan di atas
Saya tidak yakin ada yang akan bertahan cukup lama untuk mempelajari dan memakai fitur manajemen jendela khusus situs ini
Buat saya justru UX-nya terasa intuitif
Dan juga menyenangkan
Biasanya saya langsung menutup situs produk seperti ini, tetapi kali ini saya malah menghabiskan 5–10 menit lebih untuk melihat-lihat dengan teliti apa saja yang ada
Saya juga merasakan hal yang sama, anehnya
Tetapi kebanyakan komentar HN tampaknya kurang menyukainya
Reaksi saya juga mirip
Mengesankan, menyenangkan, dan terasa sangat mencerminkan filosofi perusahaan
Untuk benar-benar dipakai mungkin memang kurang praktis, tetapi saya rasa itu bukan masalah yang penting
Saat bekerja dengan PostHog, saya merasa tidak nyaman karena volume analitiknya tidak sesuai dengan standar etika saya, tetapi secara teknis mereka benar-benar membangunnya dengan sangat baik
Landing page ini menunjukkan kemampuan teknis dan kualitas yang juga diterapkan pada produknya sendiri
Ini landing page yang segar dan menyenangkan, dan lelucon “banner cookie”-nya juga membuat saya tertawa