ทำไมเว็บไซต์ของเราถึงดูเหมือนระบบปฏิบัติการ

• เว็บไซต์ เทคโนโลยีขนาดใหญ่ จำนวนมากมักเจอ ปัญหาแท็บล้น เมื่อต้องเปิดหลายหน้าพร้อมกันเพื่ออ้างอิง
• PostHog.com เองก็เผชิญ ปัญหาคล้ายกัน และได้นำ UI สไตล์ระบบปฏิบัติการ มาใช้เพื่อแก้ปัญหานี้
• โครงสร้างใหม่นี้รองรับฟังก์ชันการโต้ตอบหลากหลาย เช่น มัลติทาสกิง, การจัดหน้าต่างแบบ snap, คีย์ลัด
• มีการนำแนวคิดทางเทคนิคมาใช้ เช่น ลำดับชั้นการมองเห็นและการแยกคอนเทนต์, การจัดการคอนเทนต์ด้วย JSON, และฐานข้อมูลลูกค้า
• แม้ช่วงแรกจะรู้สึกแปลกใหม่ แต่ทั้งประสบการณ์การพัฒนาและการใช้งานดีขึ้นในทางบวก พร้อมได้ความยืดหยุ่นและการขยายระบบที่มากขึ้น

---

จุดตั้งต้นของปัญหา: แท็บล้นในเว็บไซต์เทคนิค

• ในเว็บไซต์เทคนิคขนาดใหญ่หลายแห่ง เมื่อพยายามอ้างอิงหลายหน้าพร้อมกัน ก็มักจะใช้ CMD + คลิก เพื่อเปิดแท็บใหม่จำนวนมาก
• ด้วย favicon ที่เหมือนกันและดีไซน์ที่คล้ายกัน จึงแยกแต่ละแท็บได้ยาก
• PostHog.com ก็เริ่มเจอ ปัญหาเดียวกัน เมื่อบริการเติบโตขึ้น และเมื่อมีการรองรับผลิตภัณฑ์แบบเสียเงินมากขึ้นรวมถึงจำนวนหน้าเพิ่มขึ้น ปัญหาการแยกความต่างก็ยิ่งรุนแรงขึ้น

การสำรวจทางเลือกและนวัตกรรมด้าน UI

• เกิดคำถามกับ อินเทอร์เฟซที่เน้นการเลื่อน ของเว็บไซต์การตลาดและเอกสารแบบเดิม ๆ รวมถึง footer ขนาดใหญ่และพื้นที่ว่างที่มากเกินไป
• ตระหนักว่าจำเป็นต้องมี วิธีบริโภคคอนเทนต์ ที่ดีกว่าการบังคับให้เลื่อนแบบไร้ความหมาย
• เพื่อแก้ปัญหานี้ PostHog.com เวอร์ชันใหม่จึงถูกออกแบบให้รองรับ มัลติทาสกิง, การเปิดอ่านหลายบทความพร้อมกัน และการเคลื่อนย้ายบนหน้าจอได้อย่างอิสระ

เว็บไซต์ที่ทำงานเหมือนระบบปฏิบัติการ

• UI ใหม่นี้มีฟังก์ชันอย่าง การจัดหน้าต่างแบบ snap, คีย์ลัด, แอปบุ๊กมาร์ก
• มอบประสบการณ์คล้ายระบบปฏิบัติการภายในเบราว์เซอร์ ที่ให้ทำหลายงานพร้อมกันได้
• ตัวอย่างเช่น สามารถเปิดดูจดหมายข่าวสำหรับวิศวกร, ดูวิดีโอเดโม และเล่นเกม (โหมด Hedgehog) ไปพร้อมกันได้

การปรับตัวช่วงแรกและเสียงตอบรับจากผู้ใช้

• อินเทอร์เฟซสไตล์ระบบปฏิบัติการ อาจให้ประสบการณ์ที่แปลกใหม่อยู่บ้างในช่วงแรก
• แม้จะขัดกับรูปแบบการใช้เบราว์เซอร์แบบดั้งเดิมจนสมองอาจต่อต้าน แต่เมื่อใช้งานซ้ำก็เริ่มคุ้นเคยและมองในแง่บวกมากขึ้น
• เพื่อนร่วมงานภายในก็ให้ฟีดแบ็กเชิงบวกกับประสบการณ์ใหม่นี้เช่นกัน จนไปถึงจุดที่ยากจะกลับไปใช้วิธีเดิม

กระบวนการสร้างและไฮไลต์ทางเทคนิค

• ทีมได้ออกแบบและพัฒนา UI รวมถึงสร้างเว็บไซต์ร่วมกับ Eli Kinsey โดยใช้ Typescript และ Tailwind
• ระหว่างคิดหาวิธี จัดระเบียบคอนเทนต์ตลอด 5 ปีให้ขยายต่อได้ ก็ได้ทดลองแนวทางเทคนิคหลายรูปแบบ

ประเด็นเทคนิคสำคัญ

• การแยกลำดับชั้นการมองเห็นและคอนเทนต์

  • ทุกหน้าของผลิตภัณฑ์ถูกเรนเดอร์บนพื้นฐานของ ไฟล์ JSON
  • JSON ควบคุมทั้งเลย์เอาต์ของหน้า, การจัดลำดับคอนเทนต์, การเปรียบเทียบกับคู่แข่งในแต่ละฟีเจอร์, และภาพหน้าจอธีมต่าง ๆ (โหมดสว่าง/โหมดมืด) โดยตรง
  • ในระยะยาวมีแผนย้ายโครงสร้างนี้ไปยัง repository ที่ใช้ร่วมกับแอป PostHog เพื่อให้เป็นแหล่งข้อมูลเดียว

• ธีมและการสกินสี

  • มีการคงทั้งโหมดสว่างและโหมดมืดไว้ พร้อมพิจารณาวิธีใช้ธีมหลากหลายอย่างกลมกลืน เช่น สีหลัก/สีรอง/สีลำดับที่สาม
  • ตั้งใจจะแชร์ประสบการณ์ส่วนนี้แยกเป็นบทความอีกชิ้นในภายหลัง

• ฐานข้อมูลลูกค้าอ้างอิง

  • มีการกำหนดระเบียนลูกค้าเดี่ยวไว้ในโค้ด เพื่อเก็บข้อมูลการใช้งานแยกตามผลิตภัณฑ์, คำพูดอ้างอิงจากลูกค้า, และโลโก้ SVG (รองรับโหมดสว่าง/โหมดมืด)
  • ทำให้แต่ละหน้าสามารถดึงคำพูด ชื่อ รูปภาพ และโลโก้บริษัทที่เกี่ยวข้องกับผลิตภัณฑ์ต่างกันได้โดยอัตโนมัติ จึงมีความยืดหยุ่นมากขึ้น

วิธีพัฒนาและการทำต้นแบบ

• สร้าง UI ด้วย Typescript และ Tailwind โดยดำเนิน การออกแบบเว็บไซต์และการพัฒนาไปพร้อมกัน
• เลือกวิธีทำต้นแบบภายในสภาพแวดล้อม production เพื่อให้คิดไอเดียใหม่และขยายฟีเจอร์ได้ง่าย
• เมื่อจำเป็นก็ใช้เครื่องมือทำ mockup ภายนอกอย่าง Balsamiq ควบคู่กันเพื่อทำให้คอนเซปต์ชัดเจนขึ้น

บทสรุปและทิศทางการปรับปรุงในอนาคต

• ปัจจุบันยังอยู่ในช่วงต้นระดับ MVP และยังมีจุดที่ต้องปรับปรุงอีกมาก
• คาดหวังให้ผู้ใช้สนุกกับ UX ใหม่ของ PostHog.com และเพลิดเพลินกับการสำรวจเว็บไซต์ไปพร้อมกัน
• เอกสารเชิงเทคนิคเกี่ยวกับหลักการทำงานของเว็บไซต์จะมีการเผยแพร่แยกต่างหาก