हमारी वेबसाइट ऑपरेटिंग सिस्टम जैसी क्यों दिखती है
(posthog.com)- कई बड़ी टेक वेबसाइटों पर एक साथ कई पेज देखने की कोशिश करने पर टैब बाढ़ की समस्या पैदा हो जाती है
- PostHog.com ने भी ऐसी ही समस्या झेली, और इसे हल करने के लिए ऑपरेटिंग सिस्टम शैली का UI अपनाया
- नई संरचना में multitasking, window snapping, keyboard shortcuts जैसी कई इंटरैक्शन सुविधाएँ दी गई हैं
- विज़ुअल hierarchy और content separation, JSON-आधारित content management, customer database जैसी तकनीकी नवाचारों को लागू किया गया
- शुरुआत में यह थोड़ा अपरिचित लगा, लेकिन डेवलपमेंट और उपयोग का अनुभव सकारात्मक रूप से बदला और लचीलापन व विस्तार-क्षमता मिली
समस्या: टेक वेबसाइटों में टैब बाढ़
- कई बड़े तकनीकी वेबसाइटों पर एक साथ कई पेज देखने के लिए
CMD+ क्लिक करके कई नए टैब खोलने पड़ते हैं - एक जैसे favicon और मिलते-जुलते डिज़ाइन की वजह से हर टैब में फर्क करना मुश्किल हो जाता है
- PostHog.com ने भी सेवा के बढ़ने के साथ यही समस्या झेलनी शुरू की, और अधिक paid products के support व पेजों की संख्या बढ़ने से पहचान की समस्या और गंभीर हो गई
विकल्पों की तलाश और UI नवाचार
- मौजूदा marketing और documentation साइटों के scroll-केंद्रित interface, बड़े footer और जरूरत से ज्यादा खाली जगह पर सवाल उठे
- बिना मतलब scroll करवाने के बजाय बेहतर content consumption तरीके की जरूरत महसूस हुई
- इसे हल करने के लिए नए PostHog.com को इस तरह डिज़ाइन किया गया कि multitasking, कई लेखों को एक साथ देखना और स्क्रीन के भीतर स्वतंत्र रूप से घूमना संभव हो
ऑपरेटिंग सिस्टम की तरह काम करने वाली साइट
- नया UI window snapping, keyboard shortcuts, bookmark app जैसी सुविधाएँ लागू करता है
- ब्राउज़र के भीतर एक ऑपरेटिंग सिस्टम जैसा अनुभव देता है, जहाँ कई काम एक साथ किए जा सकते हैं
- उदाहरण के लिए, engineers के लिए newsletter पढ़ना, demo video देखना और game (Hedgehog mode) चलाना एक साथ संभव है
शुरुआती अनुकूलन और उपयोगकर्ता प्रतिक्रिया
- ऑपरेटिंग सिस्टम शैली का interface शुरुआत में कुछ लोगों को थोड़ा अपरिचित लग सकता है
- पारंपरिक ब्राउज़र पैटर्न से हटने पर दिमाग को शुरुआती असहजता हुई, लेकिन बार-बार इस्तेमाल के बाद यह स्वाभाविक लगा और सकारात्मक रूप से देखा जाने लगा
- अंदरूनी सहकर्मियों ने भी इस नए अनुभव पर सकारात्मक प्रतिक्रिया दी, और यह उस स्तर तक पहुँच गया जहाँ पुराने तरीके पर लौटना मुश्किल लगता है
निर्माण प्रक्रिया और तकनीकी हाइलाइट्स
- Eli Kinsey के साथ Typescript और Tailwind के आधार पर UI को डिज़ाइन और डेवलप करते हुए साइट बनाई गई
- 5 साल के content को scalable तरीके से व्यवस्थित करने की प्रक्रिया में कई तकनीकी approaches तलाशे गए
प्रमुख तकनीकी बिंदु
-
विज़ुअल hierarchy और content separation
- सभी product pages को JSON file-आधारित तरीके से render किया जाता है
- JSON सीधे page layout, content flow, feature-दर-feature competitor comparison, और अलग-अलग theme (light/dark mode) screenshots को नियंत्रित करता है
- लंबे समय में इस संरचना को PostHog app के साथ साझा repository में ले जाकर single source of truth बनाने की योजना है
-
theme और color skinning
- light और dark mode को बनाए रखते हुए primary, secondary और tertiary colors जैसी कई themes को संतुलित रूप से लागू करने के तरीकों पर काम किया गया
- इस अनुभव को बाद में अलग लेख में साझा करने की योजना है
-
reference customer database
- कोड के भीतर एक single customer record परिभाषित किया गया है, जिसमें product-दर-product usage status, customer quotes, और SVG logos (light/dark mode support सहित) की जानकारी रखी जाती है
- इससे हर पेज पर अलग-अलग products से जुड़े quotes, नाम, फोटो और company logos को अपने-आप लाया जा सकता है, जिससे लचीलापन मिलता है
डेवलपमेंट तरीका और prototyping
- Typescript और Tailwind के साथ UI बनाते हुए साइट डिज़ाइन और डेवलपमेंट को एक साथ आगे बढ़ाया गया
- नए ideas निकालने और features बढ़ाने में आसानी के लिए production environment के भीतर prototyping का तरीका चुना गया
- जरूरत पड़ने पर Balsamiq जैसे बाहरी mockup tools का भी इस्तेमाल कर concepts को ठोस रूप दिया गया
निष्कर्ष और आगे के सुधार
- अभी यह शुरुआती MVP चरण में है, और आगे भी कई सुधारों की जरूरत है
- उम्मीद है कि उपयोगकर्ता PostHog.com के नए UX का आनंद लेंगे और साइट को explore करते हुए मज़ा महसूस करेंगे
- साइट कैसे काम करती है, इस पर तकनीकी दस्तावेज़ अलग से उपलब्ध कराया गया है
1 टिप्पणियां
Hacker News की राय
यह बाकी पारंपरिक डिज़ाइनों की तुलना में इतना असामान्य रूप से आकर्षक क्यों लगता है, इसका जवाब शायद कोई मनोवैज्ञानिक, cognitive scientist, या neuroscientist दे सके; मुझे लगता है कि software industry में हम जो जल्दबाज़ी में blog posts लिखते हैं, उनसे कहीं अधिक गहन अध्ययन की ज़रूरत है
व्यक्तिगत रूप से मैं अनुभव के आधार पर एक बात कह सकता हूँ: मैंने बड़ी SaaS products के लिए websites और strategy बनाने वाली कंपनी में काम किया है, और मैं ऐसे sites के लक्ष्य audience (engineering director या VP) में भी आता हूँ
संभावित ग्राहक के नज़रिए से देखें तो, जो जानकारी चाहिए उसे खोजने की रफ्तार और सुविधा अब तक देखी चीज़ों से साफ़ तौर पर बेहतर है
उदाहरण के लिए, मैं तुरंत देख सका कि 7 categories के तहत 34 products हैं, और 5 popular products, 4 new products भी फ़ौरन दिख जाते हैं
अगर product आज़माना हो: Docs > Product OS > Integration > Install and configure > Install PostHog
अगर engineering culture जाननी हो: Company > Handbook > Engineering > Internal Processes > Bug prioritization
pricing देखने के लिए: Pricing calculator > product चुनें > usage सेट करें, add-ons चुनें
यह सारी interaction कुछ ही सेकंड में हो जाती है, और जो overview page पहले से खुला है और नया pricing page, उनके बीच पूरे website reload के बिना तुरंत स्विच किया जा सकता है; अलग tab खोलने या scroll करने की ज़रूरत नहीं
इसलिए मुझे लगता है कि यहाँ सिर्फ़ aesthetics से आगे कुछ मूलभूत बात है; शायद निष्कर्ष यह भी हो सकता है कि आज की UI/UX philosophy उलटे users के लिए कम अनुकूल हो गई है
मुझे याद है Cory और Eli (frontend engineers) website design पर इस सवाल के साथ चर्चा कर रहे थे: ‘सभी websites लंबी, scrolling pages जैसी क्यों हो गई हैं, और क्या यह हमारे business के लिए सही है?’
हमारे पास कई products और बहुत व्यापक content है (10 से ज़्यादा products, handbook, jobs, newsletter आदि), इसलिए हमने निष्कर्ष निकाला कि single-product company के लिए ठीक रहने वाला flat structure हमारे लिए उपयुक्त नहीं है
ज़्यादातर websites 3 सेकंड के भीतर अपनी सारी बात बता देना चाहती हैं, लेकिन हमारी company इतनी बहुआयामी है कि उसे 3-second intro में समेटा नहीं जा सकता, इसलिए हमने जानबूझकर ऐसा structure बनाया जिससे लोग website explore करें और content को गहराई से समझें
इसकी वजह से कुछ visitors जल्दी चले जाएँगे, लेकिन जो रुकेंगे वे (कभी-कभी!) इस UX को सच में बहुत पसंद करते हैं
यह project खुद भी मज़ेदार था, और हमने इसे इसलिए आज़माया क्योंकि इससे कुछ अलग तरीके से standout किया जा सकता था
यह पारंपरिक outbound sales की तुलना में कहीं ज़्यादा cool और cost-effective है
startup metrics के हिसाब से हम 3 महीने के CAC payback period पर चल रहे हैं
लेकिन इस strategy के सही काम करने के लिए यह ज़रूरी है कि आप चीज़ों को "वास्तव में" गहराई से कवर करें, तभी लोग उसे याद रखते हैं
HN पर ऐसा नज़रिया देखने की उम्मीद नहीं थी
आम तौर पर HN पर यह धारणा हावी रहती है कि JavaScript का ज़्यादा इस्तेमाल मतलब खराब design, unusable, और कम portable
यह उदाहरण तो एक तरह से JavaScript की extreme version जैसा है
ज़रूरी जानकारी को तेज़ी और आसानी से ढूँढ़ पाना, सच में ऐसा लगता है जैसे web फिर से पुराने menu-centric design की तरफ लौट आया हो
आजकल के latest UI सादगी और “pleasant experience” की बात करते हैं, लेकिन अच्छे menu bar की efficiency की बराबरी करना मुश्किल है
इस interface से मिलने वाली सहजता को सामान्यीकृत करने में सावधानी रखनी चाहिए
CLI या command palette की तुलना में यह UI भारी और cognitively tiring लगता है
अगर मेरी याददाश्त सही है, तो इस company ने सारा content एक ही CMS में रखा है, और खास तौर पर discussion/help forum को main site में integrate किया है
अतीत में ऐसे ही project पर काम करने के अनुभव से कहूँ तो, front page का सारा content ऐसा लगता है मानो एक ही organization ने ownership लेकर control किया हो; departments के बीच turf war या बेतरतीब subdomain links के निशान नहीं दिखते
मुझे लगता है कि ऐसी site तभी बन सकती है जब backend में content integration system (CMS) हो
और organizational level पर decentralization की तरफ जाने वाली प्रवृत्ति (जहाँ हर VP अपना-अपना इलाका संभालता है) का मज़बूती से विरोध करना पड़ता है, तभी ऐसा CMS structure संभव है
PostHog.com कहता है कि वह third-party cookies के बिना सिर्फ़ एक internal cookie इस्तेमाल करता है,
कानूनी रूप से, अगर वह cookie site की core functionality के लिए आवश्यक नहीं है, तो opt-out का विकल्प देना चाहिए
और अगर वह core functionality के लिए ज़रूरी है, तो banner की ही ज़रूरत नहीं है
अगर वे सच में cookie को सिर्फ़ essential functionality के लिए इस्तेमाल करते हैं, तो ऐसा मज़ाकिया cookie banner visitor privacy का सम्मान करने का दिखावा करते हुए उलटे बेवजह चिढ़ पैदा करता है
इससे भी बुरी बात यह है कि EU laws सिर्फ़ निरर्थक और परेशान करने वाले regulation जैसे लगने लगते हैं, और नतीजतन वे sites जो सच में users को track करती हैं, उन्हें मानो और बुरा लाभ मिल जाता है
यह सच में बेहूदा है
cookie banner की ज़रूरत का मानदंड शायद इससे भी सरल है
अगर cookie tracking के लिए इस्तेमाल नहीं हो रही, तो banner की ज़रूरत नहीं होनी चाहिए
जैसे sort order याद रखने वाली cookie tracking purpose की नहीं होती, इसलिए उसके लिए banner नहीं होना चाहिए
आखिर मुद्दा “cookie” नहीं बल्कि “tracking” है
जिज्ञासा है कि कौन-सा देश सभी cookies पर cookie banner अनिवार्य करता है
EU में तो यह सिर्फ़ tracking cookies के लिए अनिवार्य है, और PostHog उस cookie का purpose स्पष्ट नहीं करता
मैंने भी खुद कभी बिना cookie के सिर्फ़ “ज़रूरी है न” सोचकर डाल दिया था
हर site पर cookie banner होना चाहिए, यह धारणा शायद banner से भी ज़्यादा नुकसानदेह हो सकती है
वहाँ login system है, इसलिए संभव है कि internal cookie में login info (JWT आदि) हो
इस स्थिति में cookie core functionality के लिए होगी, और banner की ज़रूरत नहीं
यानी यह कानूनी रूप से आवश्यक नहीं है, लेकिन शायद उन्होंने यह सोचकर लगा दिया कि कहीं कोई पूछ न ले, “cookie banner क्यों नहीं है?”
अंततः यह वास्तविक कानूनी बाध्यता नहीं, बल्कि प्रचलन/धारणा के हिसाब से की गई चीज़ लगती है
2025 आ गया, फिर भी लोग cookies को खुद देखकर reject क्यों करना चाहते हैं, यह समझ नहीं आता
मेरा तो मानना है कि browser को यह काम अपने-आप कर देना चाहिए
https://posthog.com/404 page Blue Screen of Death की parody है
पहले मैं हमेशा सोचता था कि 'Multi-Document Interface (MDI)' एक anti-pattern है
जब एकदम सही window manager पहले से मौजूद है, तो हर app को अपना built-in window management tool क्यों चाहिए?
हाँ, mobile पर OS-level window manager नहीं होता, इसलिए वह एक अपवाद है
कुछ apps (जैसे image editors) में application के भीतर कई windows की ज़रूरत होती है
लेकिन लगभग सभी general-purpose MDI implementations (Win32, Qt) इतने minimal होते हैं कि निराशा होती है
Krita में मैं कई windows खोलना चाहता हूँ, लेकिन Qt का MDI तो Windows 95 से भी कमज़ोर लगता है
Gimp जैसे apps की तुलना में मुझे उल्टा एक ही window के भीतर सब कुछ होना ज़्यादा पसंद है
जब दो-तीन apps एक साथ खुले हों, तो windows ढूँढ़ना hide-and-seek जैसा हो जाता है
toolbar का अलग window के रूप में खुलना मुझे सच में नापसंद है
Mac लंबे समय तक इस्तेमाल करने के नाते मुझे MDI ऐसा workaround लगता है जो इसलिए बना क्योंकि OS में application-level window management पर्याप्त नहीं था
पुराने Photoshop में Mac पर windows और palettes को आज़ादी से रखा जा सकता था, फिर CS4 के आसपास MDI-type UI आया और सब अचानक बहुत बंद-बंद सा लगने लगा, इसलिए मैं उसे हमेशा बंद कर देता था
कम-से-कम Mac पर तो यह बहुत अजनबी और घुटनभरा लगता है
Unix के ज़्यादातर commands का output format अपनी-अपनी शैली में होता है (columns, tables, lists, files, TTY आदि)
UNIX abstraction अंततः “text” केंद्रित संरचना है
लेकिन ecosystem बहुत समृद्ध होने की वजह से हर tool की अलग-अलग ज़रूरतें हैं
अगर text के ऊपर कोई और उपयुक्त abstraction संभव होता, तो वह अब तक आ चुका होता, लेकिन अंत में सब text pipelines ही हैं
OS के window managers शायद एक screen पर बहुत सारी छोटी windows को कुशलता से संभालने में उतने अच्छे नहीं हैं
इसके उलट, art software या CAD software के custom window management tools में अक्सर छोटे title bars होते हैं ताकि space बचाया जा सके
मुझे यह लगभग एकदम perfect और प्रेरणादायक project लगता है
अगर इसमें असली OS desktop की तरह खाली जगह को drag करने पर एक rectangle box बनता और उसे move किया जा सकता, तो और अच्छा होता,
मैंने उसे संभव बनाने वाला code snippet खुद बना लिया है, इसलिए उसे console में paste करके आज़माएँ तो सपना पूरा हो जाएगा
(code: mouse drag से screen पर selection rect दिखाने वाला JS, और result console में output)
idea भी शानदार है, implementation भी, लेकिन सच कहूँ तो मैं यह नहीं चाहता
मुझे नया UI/UX फिर से सीखना पड़ेगा, और फिर window के अंदर window भी व्यवस्थित करनी पड़ेगी
मेरे हिसाब से website को fancy interface नहीं, बस text blocks होना काफ़ी है
पूरी तरह सहमत
मैंने पहले ही अपना OS इस तरह set up कर रखा है कि वह window management बेहतरीन तरीके से कर ले
अगर इस page के सारे content को एक ही block of text में बदलना पड़े, तो कल्पना कीजिए वह कितना बेतहाशा लंबा हो जाएगा
इसे कैसे व्यक्त करूँ, समझना मुश्किल है, लेकिन यह सच में शानदार काम है
कई साल web development में बिताने के दौरान मैं हमेशा खराब UI से परेशान रहा हूँ, और यह website सच में बेहतरीन है
सिर्फ़ ‘Windows जैसी दिखती है’ इतना ही नहीं, बल्कि जो feel यह देती है, वह browser-based desktop simulator sites में अब तक की सबसे अच्छी लगी
बस एक कमी लगी: background पर right-click करने पर आने वाले context menu में “Refresh” option होता, तो browser desktop वाली feeling पूरी हो जाती (असल में उसे काम करने की ज़रूरत नहीं, सिर्फ़ माहौल के लिए काफ़ी था)
संक्षेप में: शानदार काम, शानदार site
देखने में cool है, लेकिन performance बहुत धीमी है
कुछ windows खोलकर उन्हें move करें तो lag साफ़ महसूस होता है
अगर ऐसा multi-window webpage बनाना है, तो performance भी अच्छी होनी चाहिए
पहले SEO की वजह से ऐसा structure कभी इस्तेमाल नहीं किया जाता था
अब लगता है SEO की अहमियत भी पहले जैसी नहीं रही
Firefox में मुझे भी धीमापन महसूस हुआ
Edge browser में खोला तो smooth चला
यह जानने की उत्सुकता है कि performance issue किस environment में हो रहा है
पहली window तक सब ठीक चलता है, दूसरी से थोड़ा रुक-रुक कर, और उसके बाद फिर full speed पर
शायद browser कुछ functions के इस्तेमाल को पहचानकर optimization routines थोड़ी देर से लागू करता हो
पहले SEO का मतलब web page को एक ‘document’ की तरह देखना था, लेकिन अब लगता है लोग web को game में बदलना चाहते हैं
game जैसी websites की ranking करना भी शायद मुश्किल होगा
यह website इतनी नई और अलग लगी कि मुझे सच में बहुत पसंद आई
एक जैसे stacked sections templates वाले SaaS marketing sites के स्वर्ग में यह साफ़ अलग दिखती है
लेकिन वास्तव में कोई भी इसे ऊपर बताए गए तरीके से इस्तेमाल नहीं करेगा
मुझे नहीं लगता कोई व्यक्ति site-specific window management सीखने के लिए इतनी देर तक रुकेगा
मुझे तो UX काफ़ी intuitive लगा
और यह मज़ेदार भी है
आम तौर पर मैं ऐसी product sites तुरंत बंद कर देता हूँ, लेकिन इस बार मैं 5–10 मिनट से ज़्यादा समय तक घूम-घूमकर सब कुछ देखता रहा
मुझे भी यही अजीब लेकिन दिलचस्प लगा
लेकिन HN के ज़्यादातर comments शायद इससे कुछ खास खुश नहीं हैं
मेरी प्रतिक्रिया भी लगभग ऐसी ही थी
प्रभावशाली, मज़ेदार, और company philosophy को अच्छे से दिखाने वाला लगा
असल उपयोग में यह व्यावहारिक नहीं है, लेकिन मुझे नहीं लगता कि वही सबसे महत्वपूर्ण बात है
PostHog के साथ काम करते हुए analytics की मात्रा मेरे ethical standards से मेल नहीं खाती थी, इसलिए असहजता हुई, लेकिन तकनीकी रूप से यह सच में बहुत अच्छी तरह बना है
landing page product पर लागू की गई engineering और quality level को अच्छी तरह दिखाता है
यह एक नया और आनंददायक landing page था, और “cookie banner” वाला मज़ाक भी हँसी ला देता है