Web sitemiz neden bir işletim sistemi gibi görünüyor?

(posthog.com)

1 puan yazan GN⁺ 2025-09-12 | Henüz yorum yok. | WhatsApp'ta paylaş

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

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ı

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

İş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

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

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

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ı

Ş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