CASE STUDY

Case Study: LivingHub
แพลตฟอร์มค้นหาอสังหาริมทรัพย์

LivingHub เป็นตัวอย่างงานแพลตฟอร์มอสังหาริมทรัพย์ที่ต้องจัดข้อมูลจำนวนมากให้ค้นหาและเปรียบเทียบได้ง่าย โดยเน้นเส้นทางผู้ใช้งานตั้งแต่ค้นหา ไปยังรายละเอียดประกาศ และการตัดสินใจติดต่อ

โจทย์ของผลิตภัณฑ์

ข้อมูลประกาศอสังหาริมทรัพย์มีหลายมิติ เช่น ทำเล ประเภท ราคา และรายละเอียดของแต่ละรายการ การออกแบบจึงต้องให้ผู้ใช้ค้นหาและอ่านข้อมูลได้โดยไม่หลงทาง

แนวทางการออกแบบ

ให้ Search และ Listing เป็นแกนหลักของประสบการณ์ ลดสิ่งรบกวนรอบข้อมูลที่ผู้ใช้ต้องตัดสินใจ และรักษาความชัดเจนบนมือถือ

สิ่งที่งานประเภทนี้ต้องให้ความสำคัญ

โครงสร้างข้อมูลประกาศ, URL ที่แชร์และค้นหาได้, Performance ของหน้ารายการ, Mobile UX และจุดติดต่อที่ชัดเจน

อสังหาริมทรัพย์เป็นงาน Information Architecture ก่อนเป็นงาน Visual

แพลตฟอร์มประกาศอสังหาริมทรัพย์มีข้อมูลหลายมิติ ทั้งประเภททรัพย์ ทำเล ราคา จำนวนห้อง ขนาด พื้นที่ โครงการ และสถานะรายการ หากเริ่มจากหน้าตาสวยก่อนกำหนดโครงสร้างข้อมูล ผู้ใช้จะค้นหายากและทีมหลังบ้านจะจัดการข้อมูลลำบาก LivingHub จึงเริ่มจากการกำหนด Entity และ Field ที่จำเป็น แล้วค่อยออกแบบ Search, Filter, Listing และ Detail Page ให้สอดคล้องกับข้อมูลจริง

หน้ารายการต้องช่วยให้ผู้ใช้เปรียบเทียบข้อมูลสำคัญได้โดยไม่ต้องเปิดทุกรายการ ขณะที่หน้ารายละเอียดต้องให้ข้อมูลเพียงพอต่อการตัดสินใจและมีจุดติดต่อที่เห็นชัด หลักการนี้สำคัญบนมือถือเป็นพิเศษ เพราะพื้นที่หน้าจอน้อยและผู้ใช้มักสลับระหว่างหลายประกาศอย่างรวดเร็ว

Search, Filter และ URL ควรทำงานร่วมกัน

Search Experience ที่ดีไม่ควรเก็บสถานะทั้งหมดไว้ใน JavaScript โดยไม่สะท้อนใน URL เพราะผู้ใช้ควรสามารถแชร์หน้าผลการค้นหาหรือกลับมาที่เงื่อนไขเดิมได้ ในเชิง SEO ต้องแยกให้ชัดว่าหน้า Filter ใดควรถูก index หน้าใดควร Canonical กลับไปยังหน้าหมวดหลัก และหน้าใดเป็นเพียงสถานะชั่วคราวของผู้ใช้ เพื่อป้องกันการสร้าง URL จำนวนมากที่มีเนื้อหาใกล้เคียงกัน

สำหรับหน้าที่มีโอกาสทำ Organic Search เช่น ประเภททรัพย์หรือทำเลหลัก ควรมี Heading และคำอธิบายเฉพาะของหน้า ไม่สร้างเพียงรายการการ์ดที่เปลี่ยนตาม Query เท่านั้น ส่วน Listing Card ควรใช้ข้อมูลที่ช่วยตัดสินใจจริง เช่น ราคา ทำเล ขนาด และคุณสมบัติสำคัญ โดยไม่ใส่ข้อมูลมากจนสแกนสายตายาก

Performance สำคัญเพราะหน้า Listing มี Asset จำนวนมาก

เว็บไซต์อสังหาริมทรัพย์มักมีรูปภาพจำนวนมาก จึงต้องจัดการ Image Size, Lazy Loading และพื้นที่ของรูปให้ชัดเพื่อลด Layout Shift รูปแรกของหน้าหรือรายการที่อยู่เหนือ fold ควรถูกให้ความสำคัญมากกว่ารูปที่ผู้ใช้ยังไม่เห็น การแยกโหลดข้อมูลและ Asset ตามตำแหน่งช่วยให้หน้าเริ่มใช้งานได้เร็วขึ้นโดยไม่ต้องรอทุกอย่างพร้อมพร้อมกัน

องค์ประกอบ interactive เช่น Favorite, Compare หรือ Wallet ควรถูกออกแบบให้มีสถานะที่เข้าใจได้ และหากต้อง Login ควรบอกผู้ใช้ก่อนเกิดการสูญเสียข้อมูลที่เลือกไว้ การทำ Feature เพิ่มจึงต้องมองทั้ง Frontend State, API, Permission และวิธีเก็บข้อมูล ไม่ใช่เฉพาะปุ่มบนหน้าจอ

SEO และ Conversion ต้องต่อกันถึงหน้ารายละเอียด

หน้า Property Detail เป็นหน้าที่มีโอกาสรับทั้ง Organic Traffic และ Referral จึงควรมี Title, Description, Canonical และข้อมูลที่สะท้อนรายการจริง พร้อม Internal Link กลับไปยังหมวดหรือทำเลที่เกี่ยวข้อง หากรายการหมดอายุ ควรกำหนดนโยบายให้ชัดว่าจะเก็บหน้าไว้พร้อมแนะนำรายการใกล้เคียง ทำ redirect หรือคืนสถานะที่เหมาะสม เพื่อลด broken experience ทั้งสำหรับผู้ใช้และ crawler

แนวคิดของ LivingHub สามารถประยุกต์กับ Marketplace และ Catalog ที่มีข้อมูลจำนวนมากได้ หากกำลังวางระบบประเภทนี้ควรเริ่มจาก โครงสร้างเว็บไซต์และ Customer Journey ก่อน แล้วค่อยต่อยอด Technical SEO และ Performance ตามรูปแบบข้อมูลจริงของธุรกิจ

อ่านต่อ / บริการที่เกี่ยวข้อง

เปิดเว็บไซต์จริง ผลงานทั้งหมด บริการเว็บไซต์ คุยโปรเจกต์ลักษณะนี้