04 ส.ค. 2568·2 นาที
การออกแบบสถานะว่าง (empty state) ที่ช่วยให้การตั้งค่าในแอปเสร็จสมบูรณ์
รูปแบบการออกแบบสถานะว่างที่ลดความสับสนและชี้ขั้นตอนถัดไปให้ผู้ใช้ตั้งค่าเสร็จได้จริง พร้อมตัวอย่างข้อความ เลย์เอาต์ และเช็คลิสต์ที่นำไปใช้ได้ทันที
รูปแบบการออกแบบสถานะว่างที่ลดความสับสนและชี้ขั้นตอนถัดไปให้ผู้ใช้ตั้งค่าเสร็จได้จริง พร้อมตัวอย่างข้อความ เลย์เอาต์ และเช็คลิสต์ที่นำไปใช้ได้ทันที
text\nYour workspace is empty.\nCreate your first app in 5 minutes. Start with a template or describe what you want in plain English.\n\n[Create your first app]\nSecondary: Import existing code | Browse templates\nNote: You can export the source code anytime.\n\n\nหลังจากผู้ก่อตั้งคลิก Create your first app หน้าจอถัดไปถามคำถามง่าย ๆ หนึ่งข้อ: "What are you building?" พร้อมช่องกรอกเดียวและตัวอย่าง prompt สองตัวอย่าง (เช่น "CRM for a small agency" หรือ "Landing page with signup") ทำให้เส้นทางแคบ: ฟิลด์ชัดเจนหนึ่งช่อง ปุ่มชัดเจนหนึ่งปุ่ม\n\nหน้าที่สองอาจเป็นการทบทวนแผนแบบเร็ว (ฟีเจอร์ หน้าต่าง ๆ ข้อมูล) ตามด้วยขั้นตอนการสร้างและพรีวิวที่ทำงานได้ ชัยชนะครั้งแรกคือเมื่อผู้ใช้ทำอะไรจริงในพรีวิว เช่น เพิ่มเรคคอร์ดหรือทดสอบการลงชื่อสมัคร\n\nเมื่อมีข้อมูลแล้ว ผู้ใช้ที่กลับมาไม่ควรเห็นสถานะว่างเดิมอีก หน้าจอ Projects สามารถเปลี่ยนเป็นมุมมอง "recent apps" พร้อมปุ่มด่วนหนึ่งปุ่มโดดเด่น (เช่น New app) และการกระทำรองเล็ก ๆ (เช่น Snapshots หรือ Deploy) ตามพฤติกรรมครั้งก่อน\n\nเพื่อรู้ว่าสถานะว่างของคุณทำงานหรือไม่ ให้ติดตามตัวเลขสักสองสามอย่าง:\n\n- เวลาไปสู่ชัยชนะครั้งแรก (จากการเข้าชมครั้งแรกถึงพรีวิวที่ทำงานได้)\n- อัตราการหลุดระหว่างหน้าว่างกับขั้นตอนการสร้างแรก\n- อัตราการคลิก CTA (หลักเทียบกับรอง)\n- การใช้งานซ้ำภายใน 7 วัน\n- การร้องเรียนฝ่ายสนับสนุนหรือการคลิกโกรธบนพื้นที่หน้าว่าง\n\n## ขั้นตอนต่อไป: ปรับปรุงเส้นทางหนึ่ง แล้วขยายแบบแผน\n\nเลือกเส้นทางการตั้งค่าหนึ่งเส้นทางที่จะปรับปรุงสัปดาห์นี้ เลือกอันที่มีการหลุดมากที่สุด หรืออันที่ผู้ใช้ใหม่เจอก่อน เขียนใหม่สถานะว่างให้ตอบสามคำถามนี้อย่างเร็ว: นี่คืออะไร ทำไมต้องทำตอนนี้ และคลิกต่อไปคืออะไร\n\nเก็บการเปลี่ยนแปลงให้เล็ก คุณไม่ได้ออกแบบ onboarding ใหม่ทั้งหมด คุณแค่ทำให้การกระทำสำเร็จครั้งแรกชัดเจนขึ้น\n\nแผนสั้น ๆ หนึ่งสัปดาห์:\n\n- เบสไลน์: บันทึกอัตราการสำเร็จสำหรับขั้นตอนการตั้งค้าที่เลือก (และเวลาที่ใช้) เป็นเวลา 3–7 วัน\n- เขียนใหม่: ปรับหัวข้อ หนึ่งประโยคคำแนะนำ และป้ายปุ่มหลัก\n- ลดความเสี่ยง: เพิ่มบรรทัดยืนยันความปลอดภัยหนึ่งบรรทัด (จะเกิดอะไรขึ้นต่อ แก้ไขได้ไหม ใช้เวลานานเท่าไร)\n- ทดสอบ: ปล่อยให้กลุ่มเล็กของผู้ใช้ใหม่เท่านั้น แล้วเปรียบเทียบการสำเร็จและตั๋วสนับสนุน\n- ติดตั้ง: ถ้าชนะ ให้ทำเป็นแม่แบบที่ทีมอื่นคัดลอกได้\n\nเมื่อได้ชัยชนะหนึ่งครั้ง ให้ทำมาตรฐาน สร้างแบบแผนภายในสั้น ๆ สำหรับสถานะว่าง: ระยะช่องว่าง สไตล์หัวข้อ กฎไอคอนหรือภาพประกอบ และเลย์เอาต์ CTA ที่สม่ำเสมอ เมื่อทีมทำตามโครงสร้างเดียวกัน ผู้ใช้จะเรียนรู้ครั้งเดียวและทำงานได้เร็วขึ้นทุกที่\n\nถ้าคุณกำลังสร้างแอปใหม่และต้องการต้นแบบการตั้งค่าอย่างรวดเร็ว Koder.ai (koder.ai) สามารถช่วยร่างเส้นทางใน Planning Mode และสร้างเวอร์ชันแรกให้ทดสอบ แล้วทำซ้ำตามจุดที่คนติดขัดจริง ๆ\nสถานะว่างคือสิ่งที่ผู้ใช้เห็นเมื่อยังไม่มีเนื้อหาใด ๆ ให้แสดง เพราะยังไม่ได้สร้าง นำเข้า หรือเชื่อมต่ออะไรไว้ ควรอธิบายว่าหน้านี้มีไว้เพื่ออะไรและชี้ไปยังการกระทำถัดไปที่สำเร็จได้จริง แทนการปล่อยให้ผู้ใช้เดาทาง
หน้ากำลังโหลดจะสื่อว่า “รอก่อน มีอะไรกำลังเกิดขึ้น” ขณะที่หน้าข้อผิดพลาดจะบอกว่า “มีบางอย่างผิดพลาด นี่คือสาเหตุ” ส่วนสถานะว่างสำหรับการตั้งค่าจะสื่อว่า “ตรงนี้ยังไม่มีอะไรและนั่นเป็นเรื่องปกติ” แล้วแนะนำให้ผู้ใช้สร้าง นำเข้า หรือเริ่มจากเทมเพลตเพื่อไปสู่ผลลัพธ์แรกที่จับต้องได้
มุ่งตอบสามเรื่องอย่างรวดเร็ว: หน้านี้คืออะไร ทำไมมันถึงว่าง และควรทำอะไรต่อ หากผู้ใช้ไม่เข้าใจภายในไม่กี่วินาที พวกเขามักจะหยุดลังเล คิดว่าทำผิด หรือออกจากแอป
โครงสร้างเรียบง่าย: อธิบายสั้น ๆ ว่าพื้นที่นี้ใช้ทำอะไร มีปุ่มการกระทำหลักที่ชัดเจนหนึ่งอย่าง และบรรทัดยืนยันความปลอดภัยสั้น ๆ ที่ลดความกังวล ใช้ข้อความสั้น ๆ เพื่อไม่ให้ผู้ใช้ต้องอ่านย่อหน้าเดียวก่อนตัดสินใจ
โดยปกติให้มีปุ่มหลักหนึ่งปุ่มที่ตรงกับก้าวถัดไปมากที่สุด และทำให้ทางเลือกอื่นทั้งหมดดูรอง หากแสดงปุ่มสำคัญหลายอันที่มีน้ำหนักเท่ากัน ผู้ใช้มักจะหยุดชะงักไม่รู้จะเลือกทางไหน
ให้เน้น “Create” เมื่อการเริ่มจากศูนย์คือเส้นทางสู่ผลลัพธ์ที่มองเห็นได้เร็วสุด เช่น โปรเจกต์หรือเรคคอร์ดแรก ให้เน้น “Import” เมื่อลูกค้าส่วนใหญ่มีข้อมูลต้นทาง และเน้น “Template” เมื่อต้องการความเร็วและจุดเริ่มต้นที่พิสูจน์แล้ว
ตั้งหัวข้อเป็นผลลัพธ์ + วัตถุ เช่น “Create your first project” แทนคำป้ายฟีเจอร์อย่าง “Projects” ในเนื้อหาระบุสั้น ๆ ว่าจะเกิดอะไรหลังคลิกเพื่อให้ผู้ใช้ทำนายผลได้ ตัวอย่างปุ่มให้เริ่มด้วยกริยาและคำนามเฉพาะ เช่น “Create a project”, “Import contacts”.
วางหัวข้อ ข้อความสั้น ๆ และปุ่มหลักเป็นบล็อกแน่น ๆ ให้มีลำดับชัดเจน ตัวเลือกรองวางไว้ใกล้ ๆ แต่เบากว่า อย่ากดปุ่มหลักให้ห่างจนผู้ใช้ต้องเลื่อนหา ไอคอนหรือภาพประกอบใช้ได้ถ้ามีความหมาย แต่ไม่ควรใหญ่จนแย่งความสำคัญจาก CTA
เพิ่มบรรทัดยืนยันความปลอดภัยสั้น ๆ ใกล้ปุ่ม เช่น “You can change this later” หรือ “Nothing is published until you confirm.” ในเครื่องมืออย่าง Koder.ai ช่วยได้ถ้าแจ้งว่าการกระทำสามารถย้อนกลับได้ เช่น snapshots/rollback หรือนำออกเป็นซอร์สโค้ดได้เมื่อเริ่มแล้ว
ติดตามว่าผู้ใช้เปิดหน้าว่างบ่อยแค่ไหน คลิก CTA หลักกี่ครั้ง และสำเร็จเป้าหมายที่ตั้งไว้หรือไม่ ดูเวลาจนถึงความสำเร็จครั้งแรก อัตราการหลุดระหว่างหน้าว่างกับขั้นตอนถัดไป เพราะบางครั้งอาจมีคลิกแต่ไม่เกิดผลจริง