Web sitemiz neden bir işletim sistemi gibi görünüyor?
(posthog.com)- Birçok büyük teknoloji web sitesinde, aynı anda birden fazla sayfaya bakmaya çalışınca sekme patlaması sorunu ortaya çıkıyor
- PostHog.com da benzer bir sorun yaşadı ve bunu çözmek için işletim sistemi tarzı bir arayüz benimsedi
- Yeni yapıda çoklu görev, pencere kenetleme, klavye kısayolları gibi çeşitli etkileşim özellikleri sunuluyor
- Görsel hiyerarşi ile içerik ayrımı, JSON tabanlı içerik yönetimi ve müşteri veritabanı gibi teknik yenilikler uygulandı
- Başta alışılmadık gelse de geliştirme ve kullanım deneyimi olumlu yönde değişti; esneklik ve ölçeklenebilirlik sağlandı
Sorun: teknik web sitelerinde sekme patlaması
- Birçok büyük teknik web sitesinde aynı anda birden fazla sayfaya başvurmak gerektiğinde
CMD+ tıklama ile bir sürü yeni sekme açılıyor - Aynı favicon ve benzer tasarımlar yüzünden sekmeleri birbirinden ayırt etmek zorlaşıyor
- PostHog.com da hizmet büyüdükçe aynı sorunu yaşamaya başladı; daha fazla ücretli ürün desteği ve artan sayfa sayısı, ayırt edilebilirlik sorununu daha da kötüleştirdi
Alternatif arayışı ve arayüz yeniliği
- Mevcut pazarlama ve dokümantasyon sitelerinin kaydırma odaklı arayüzü, büyük altbilgileri ve aşırı boşluk kullanımı sorgulandı
- Anlamsız kaydırmaya zorlamak yerine daha iyi bir içerik tüketim yöntemi gerektiği fark edildi
- Bunu çözmek için yeni PostHog.com, çoklu görev, birden fazla yazıyı aynı anda görüntüleme ve ekran içinde serbestçe dolaşma imkanı sağlayacak şekilde tasarlandı
İşletim sistemi gibi çalışan bir site
- Yeni arayüz, pencere kenetleme, klavye kısayolları, yer imi uygulamaları gibi özellikleri hayata geçiriyor
- Tarayıcı içinde bir işletim sistemi gibi, birden fazla işi aynı anda yapma deneyimi sunuyor
- Örneğin mühendis odaklı bültene bakmak, demo videosu izlemek ve oyun oynamak (Hedgehog modu) aynı anda mümkün
İlk uyum süreci ve kullanıcı tepkisi
- İşletim sistemi tarzı arayüz, başlangıçta biraz yabancı gelebiliyor
- Geleneksel tarayıcı kalıplarının dışına çıktığı için ilk anda zihinsel bir direnç yaratabiliyor; ancak tekrar tekrar kullanıldığında alışılıyor ve olumlu algılanmaya başlıyor
- Şirket içindeki ekip arkadaşları da bu yeni deneyime olumlu geri bildirim verdi ve eski yönteme dönmek zor hale geldi
İnşa süreci ve teknik öne çıkanlar
- Eli Kinsey ile birlikte Typescript ve Tailwind tabanlı bir arayüz tasarlanıp geliştirildi ve site inşa edildi
- 5 yıllık içeriğin ölçeklenebilir biçimde düzenlenmesi için yöntem geliştirilirken çeşitli teknik yaklaşımlar denendi
Başlıca teknik noktalar
-
Görsel hiyerarşi ve içerik ayrımı
- Tüm ürün sayfaları JSON dosyası tabanlı olarak render ediliyor
- JSON; sayfa düzenini, içerik akışını, özellik bazlı rakip karşılaştırmalarını ve farklı temalara ait ekran görüntülerini (aydınlık/karanlık mod) doğrudan kontrol ediyor
- Uzun vadede bu yapının PostHog uygulamasıyla paylaşılan bir depoya taşınarak tek bir bilgi kaynağı haline getirilmesi planlanıyor
-
Tema ve renk kaplaması
- Aydınlık ve karanlık modu korurken; ana, ikincil ve üçüncül renkler gibi farklı tema öğelerini uyum içinde uygulamanın yolları üzerinde çalışıldı
- Bu konudaki deneyim daha sonra ayrı bir yazıda paylaşılacak
-
Referans müşteri veritabanı
- Kod içinde tekil müşteri kayıtları tanımlanarak ürün bazlı kullanım durumu, müşteri alıntıları ve SVG logoları (aydınlık/karanlık mod desteğiyle) saklanıyor
- Böylece her sayfa için farklı ürünlerle ilişkili alıntılar, isimler, fotoğraflar ve şirket logoları otomatik olarak çağrılabiliyor; bu da esneklik sağlıyor
Geliştirme yaklaşımı ve prototipleme
- Arayüz, Typescript ve Tailwind ile uygulanırken site tasarımı ve geliştirme eş zamanlı yürütüldü
- Yeni fikir üretmeyi ve özellik genişletmeyi kolaylaştırmak için üretim ortamında prototipleme yaklaşımı seçildi
- Gerektiğinde Balsamiq gibi dış mockup araçları da kullanılarak konsept somutlaştırıldı
Sonuç ve gelecekteki iyileştirme yönü
- Şu anda hâlâ erken bir MVP aşamasında ve ileride yapılması gereken çok sayıda iyileştirme var
- Kullanıcıların PostHog.com'un yeni UX'inden keyif alması, siteyi gezerken aynı zamanda eğlenmesi umuluyor
- Sitenin nasıl çalıştığına dair teknik dokümantasyon ayrıca sunuluyor
1 yorum
Hacker News görüşleri
Bunun neden mevcut tasarımlarla kıyaslandığında alışılmadık derecede çekici geldiğini muhtemelen bir psikolog, bilişsel bilimci ya da sinirbilimci açıklayabilir; şu an yazılım sektöründe alelacele yazdığımız blog yazılarından daha derin bir araştırmaya ihtiyaç olduğunu düşünüyorum
Kişisel olarak deneyimden söyleyebileceğim bir şey var: Büyük SaaS ürünleri için web siteleri ve stratejileri hazırlayan bir şirkette çalıştım ve bu tür sitelerin hedef kitlesiyim (mühendislik direktörü ya da VP)
Potansiyel müşteri açısından, istenen bilgiyi bulma hızı ve kolaylığı şimdiye kadar gördüklerimden belirgin şekilde daha iyi
Örneğin 7 kategori altında 34 ürün olduğunu hemen görebildim; en popüler 5 ürün ve 4 yeni ürün de anında görünüyordu
Ürünü denemek istersem: Docs > Product OS > Integration > Install and configure > Install PostHog
Mühendislik kültürünü merak edersem: Company > Handbook > Engineering > Internal Processes > Bug prioritization
Fiyatı görmek istersem: Pricing calculator > ürün seç > kullanım miktarını ayarla, ek özellikleri seç
Tüm bu etkileşimler birkaç saniye içinde oluyor ve zaten açık olan genel bakış sayfası ile yeni açılan fiyat sayfası arasında tüm site yeniden yüklenmeden anında geçiş yapabiliyorum; yeni sekmede açmaya ya da scroll yapmaya gerek yok
Bu yüzden bunun sadece estetikten ibaret olmadığını, burada daha temel bir şey olduğunu düşünüyorum; belki de bugünün UI/UX felsefesi aslında kullanıcıya daha az dostça hale gelmiştir
Cory ve Eli'nin (frontend mühendisi) web sitesi tasarımı üzerine, “Neden tüm web siteleri uzun ve bol scroll'lu sayfalardan oluşuyor, bu bizim işimize uygun mu?” konusu etrafında tartıştığını hatırlıyorum
Çok sayıda ürün ve geniş içerik sunduğumuz için (10'dan fazla ürün, handbook, kariyer, bülten vb.), tek ürünlü şirketlere uygun düz yapının bize uygun olmadığı sonucuna vardık
Çoğu web sitesi her şeyini 3 saniye içinde anlatmaya çalışıyor ama şirketimiz 3 saniyelik bir tanıtıma sığmayacak kadar çok yönlü; bu yüzden insanların siteyi keşfetmesini ve içeriği daha derin anlamasını özellikle teşvik eden bir yapı kurduk
Bu yüzden bazı ziyaretçiler hızla çıkacaktır ama kalanlar (bazen!) bu UX'i gerçekten seviyor
Bu projenin kendisi de eğlenceliydi ve özel bir şekilde öne çıkabileceğimizi düşündüğümüz için denedik
Geleneksel dış satıştan çok daha havalı ve maliyet açısından verimli
Startup metriği olarak 3 aylık CAC geri ödeme süresiyle çalışıyoruz
Ama bunun işe yaraması için, insanlarda iz bırakacak kadar "gerçekten" derine inmek gerektiği varsayımı var
HN'de böyle bir görüş göreceğimi hiç düşünmezdim
Normalde HN'de JavaScript'i fazla kullanmak kötü tasarım, kullanılamazlık ve taşınabilirlik sorunları olarak görülür
Bu örnek ise tabiri caizse JavaScript'in maksimuma vurulmuş hali
Gerekli bilgiyi hızlı ve kolay bulabilmek, gerçekten web'in eski menü merkezli tasarımına geri dönmüş gibi hissettiriyor
Güncel UI'lar sadelik ve “keyifli deneyim” vadediyor ama iyi kurgulanmış bir menü çubuğunun verimliliğine yetişmeleri zor
Bu arayüzde hissedilen rahatlığı genelleme konusunda dikkatli olmak gerekir
CLI ya da komut paletine kıyasla bu UI bana daha yük bindiren ve bilişsel olarak yorucu geliyor
Yanlış hatırlamıyorsam bu şirket tüm içeriği aynı CMS'e koymuştu; özellikle tartışma/yardım forumunu ana siteye entegre etmişti
Geçmişte benzer bir proje yapmış biri olarak, ana sayfadaki tüm içeriğin tek bir organizasyon tarafından sahiplenilip kontrol edildiği hissi var; bölümler arası alan kapma savaşı ya da etrafa saçılmış alt alan adı linkleri görünmüyor
Bence böyle bir site ancak backend'de içerik entegrasyon sistemi (CMS) varsa yapılabilir
Ve organizasyon düzeyinde merkezsizleşmeye (her VP'nin kendi alanını sahiplenmesine) doğru kayma eğilimine güçlü biçimde direnmek gerekir ki böyle bir CMS yapısı mümkün olsun
PostHog.com'un üçüncü taraf cookie kullanmadan yalnızca tek bir birinci taraf cookie kullandığı söyleniyor ama
hukuken o cookie sitenin temel işlevi için gerekli değilse bir opt-out seçeneği sunmaları gerekir
Eğer temel işleve gerekliyse zaten banner'a ihtiyaç yok
Cookie'yi gerçekten yalnızca gerekli işlev için kullanıyorlarsa, böyle şakacı cookie banner'ları ziyaretçi gizliliğine saygı gösteriyormuş gibi yaparken aslında gereksiz yere sinir bozucu oluyor
Daha kötüsü, AB hukukunu pratikte anlamı olmayan can sıkıcı bir düzenleme gibi gösterip, kullanıcıyı gerçekten izleyen sitelere daha kötü sonuçlar doğuran bir meşruiyet sağlıyor
Gerçekten saçma
Cookie banner'ı gerekliliği daha basit bir kurala bağlı gibi görünüyor
Cookie takip amacıyla kullanılmıyorsa banner gerekmiyor
Örneğin sıralama tercihini hatırlayan bir cookie gibi takip amacı taşımayan şeylerde banner gerekmemeli diye düşünüyorum
Sonuçta mesele "cookie" değil, "takip"
Hangi ülkenin tüm cookie'ler için cookie banner zorunlu tuttuğunu merak ediyorum
AB bunu yalnızca takip amaçlı cookie'ler için zorunlu kıldı ve PostHog amacını belirtmiyor
Ben de bizzat cookie olmasa bile “gerekli deniyor ya” diye eklediğim oldu
Her sitede cookie banner'ı olması gerektiği algısı, pratikte banner'ın kendisinden daha zararlı olabilir
Bir giriş sistemi olduğuna göre, birinci taraf cookie içinde giriş bilgisi (JWT vb.) olma ihtimali yüksek
Bu durumda cookie temel işlev için gerekli olduğundan banner gerekmez
Yani bunun hukuken zorunlu değil de, banner olmazsa biri “Neden cookie banner'ınız yok?” diye sorar korkusuyla konmuş olduğunu tahmin edebiliriz
Sonuçta gerçek bir yasal zorunluluktan çok, teamül ve algı düzeyinde bir ihtiyaç
2025 olmuşken neden insanlar hâlâ cookie'yi gözle görüp reddetmek istiyor merak ediyorum
Bunu tarayıcı otomatik yapamaz mı diye düşünüyorum
https://posthog.com/404 sayfası Blue Screen of Death parodisi
Eskiden beri 'çoklu belge arayüzü (MDI)'nin bir anti-pattern olduğunu düşünürüm
Zaten mükemmel bir pencere yöneticisi varken neden her uygulamanın kendi gömülü pencere yönetim aracına ihtiyacı olsun?
Tabii mobilde bu tür işletim sistemi düzeyinde pencere yöneticileri olmadığı için orası istisna
Bazı uygulamaların (ör. görsel düzenleyiciler) uygulama içinde birden fazla pencereye ihtiyacı var
Ama neredeyse tüm genel amaçlı MDI uygulamaları (Win32, Qt) o kadar minimalist ki hayal kırıklığı yaratıyor
Krita'da birden çok pencere açmak istiyorum ama Qt'nin MDI'ı Windows 95'ten bile geride
Gimp gibi uygulamalarla kıyaslayınca ben aslında her şeyin tek pencere içinde toplandığı yapıyı tercih ediyorum
Aynı anda iki üç uygulama açılınca pencere bulmak resmen saklambaç oluyor
Araç çubuklarının ayrı pencere olarak çıkmasından gerçekten hoşlanmıyorum
Uzun süre Mac kullanan biri olarak MDI bana, işletim sisteminin uygulama düzeyinde pencere yönetim yeteneklerinin yetersizliğinden doğmuş bir geçici çözüm gibi geliyor
Eski Photoshop sürümlerinde Mac'te pencere ve paletler serbestçe duruyordu; sonra CS4 civarında MDI tipi geldi ve bir anda boğucu hale geldiği için hep kapatıyordum
Özellikle Mac'te çok yabancı ve bunaltıcı hissettiriyor
Unix'teki çoğu komutun kendi çıktı biçimi vardır (sütun, tablo, liste, dosya, TTY vb.)
UNIX soyutlaması sonuçta "metin" merkezlidir
Ama ekosistem çok zengin olduğu için her aracın farklı ihtiyaçları var
Metnin ötesinde uygun bir soyutlama mümkün olsaydı muhtemelen şimdiye kadar ortaya çıkardı ama sonuçta her şey yine metin boru hattına dönüyor
İşletim sistemlerinin pencere yöneticileri, tek ekranda çok sayıda küçük pencere olduğunda bunları verimli yönetmekte pek iyi değil gibi
Buna karşılık sanat yazılımlarının ya da CAD yazılımlarının özel pencere yönetim araçları, küçük başlık çubuklarıyla alanı verimli kullanacak şekilde optimize edilmiş olabiliyor
Bence neredeyse kusursuz ve ilham verici bir proje
Gerçek bir işletim sistemi masaüstündeki gibi boş bir alanı sürükleyince dikdörtgen bir seçim kutusu oluşup hareket edebilse daha da iyi olurdu,
bunu mümkün kılan kod snippet'ini kendim yazdım; konsola yapıştırıp denerseniz hayal gerçek oluyor
(kod: fareyle sürükleyerek ekranda seçim dikdörtgeni gösteren JS, sonucu konsola yazdırıyor)
Fikir de uygulama da harika ama dürüst olmak gerekirse istemem
Yeni bir UI/UX öğrenmek gerekiyor ve sonra pencere içinde pencere düzenlemek zorunda kalıyorsun
Web sitelerinin gösterişli arayüzlerden çok düz metin blokları olması bence yeterli
Kesinlikle katılıyorum
Ben zaten işletim sistemimi pencere yönetimini mükemmel yapacak şekilde ayarladım
Bu sayfadaki tüm içeriği tek bir metin bloğu haline getirmeniz gerekse ne kadar aşırı uzun olacağını hayal etmekte fayda var
Nasıl ifade edeceğimi bilmiyorum ama gerçekten harika bir iş
Yıllardır web geliştirme içindeyim ve kötü UI'lara hep çok kızardım; bu site ise gerçekten müthiş
Sadece ‘Windows'a benziyor’ meselesi de değil; gerçekten kullanım hissi olarak şimdiye kadar denediğim tarayıcı tabanlı masaüstü simülatörü siteler arasında en iyisiydi
Tek eksiği, arka plana sağ tıklayınca çıkan bağlam menüsünde bir "Yenile" seçeneği olması olurdu; çalışmasına gerek yok ama his olarak masaüstü duygusunu tamamlardı
Kısacası: harika iş, harika site
Görsel olarak havalı ama performans fazla yavaş
Birkaç pencere açıp oynatınca insanı yoruyor
Böyle çok pencereli web sayfaları yapacaksan performansın da iyi olması gerekir
Eskiden SEO yüzünden böyle bir yapı asla kullanılmazdı
Şimdi ise SEO'nun önemi de eskiye göre azalıyor gibi
Firefox'ta yavaşlık yaşadım
Edge ile açınca akıcı çalıştı
Performans sorununu hangi ortamda yaşadığını merak ediyorum
İlk pencereye kadar iyi gidiyor ama ikinci pencereden itibaren biraz takılıyor, sonrasında ise tam hız çalışıyor
Muhtemelen tarayıcı bazı fonksiyonların kullanıldığını fark ettiğinde optimizasyonu biraz gecikmeli uyguladığı için böyledir
Eskinin SEO'su web sayfasını bir ‘belge’ olarak görüyordu ama artık herkes web'i oyuna çevirmeye çalışıyor gibi
Oyun tarzı web sitelerini sıralamak da zor olmalı
Bu web sitesi o kadar taze hissettiriyor ki gerçekten hoşuma gitti
Aynı bölüm yığınlarından oluşan SaaS pazarlama sitesi kalabalığında öne çıkıyor
Ama insanların gerçekten yukarıda tarif edildiği gibi kullanacağını sanmıyorum
Kimse siteye özel pencere yönetimini öğrenip kullanacak kadar uzun süre kalmaz bence
Bana ise UX oldukça sezgisel geldi
Üstelik eğlenceli de
Normalde böyle ürün sitelerini hemen kapatırım ama bu sefer 5-10 dakikadan fazla dolaşıp neler var diye iyice baktım
Ben de benzer şekilde ilginç buldum
Ama HN yorumlarının çoğu biraz memnuniyetsiz görünüyor
Benim tepkim de buna yakındı
Etkileyici, eğlenceli ve şirketin felsefesini iyi yansıtıyor
Gerçek kullanım için çok pratik olmayabilir ama bunun o kadar önemli bir sorun olduğunu düşünmüyorum
PostHog ile çalışırken analiz hacmi etik standartlarıma uymadığı için rahatsız olmuştum ama teknik olarak gerçekten çok iyi yapılmış
Landing page, ürünün kendisinde uygulanan teknik yetkinliği ve kaliteyi iyi gösteriyor
Yaratıcı ve keyifli bir landing page olmuş, "cookie banner" şakası da güldürdü