การออกแบบสถานะว่าง (empty state) ที่ช่วยให้การตั้งค่าในแอปเสร็จสมบูรณ์

ทำไมสถานะว่างถึงกำหนดความสำเร็จของการตั้งค่าได้

หน้าว่างไม่ใช่สิ่งที่เป็นกลาง มันสร้างช่วงหยุดชะงักที่ผู้คนเริ่มเดาทางว่าควรทำอะไร ต่อว่าพวกเขาพลาดขั้นตอนไหน หรือผลิตภัณฑ์ทำงานหรือเปล่า ในช่วงการตั้งค่า เวลาหยุดชะงักนั้นมีค่า มันเปลี่ยนจาก “ฉันกำลังเริ่มต้น” เป็น “ฉันจะกลับมาทีหลัง”

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

สถานะว่างที่ดีมีหน้าที่เดียว: พาผู้ใช้ไปสู่การกระทำถัดไปที่สำเร็จด้วยการคิดน้อยที่สุดเท่าที่จะเป็นไปได้ คำว่า “สำเร็จ” สำคัญ ขั้นตอนถัดไปควรสร้างผลลัพธ์ที่เป็นของจริง (โปรเจกต์แรก การเชื่อมต่อแหล่งข้อมูล การสร้างไอเท็มชิ้นแรก) ไม่ใช่ฟอร์มตันหรือทัวร์ผลิตภัณฑ์ที่คลุมเครือ

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

เมื่อสถานะว่างทำงานได้ถูกต้อง มันจะตอบคำถามสามข้อได้อย่างรวดเร็ว:

• หน้านี้คืออะไร?
• ทำไมถึงว่าง?
• ฉันควรทำอะไรต่อไป?

ตัวอย่าง: ใน Koder.ai ผู้ใช้ใหม่เปิด workspace เปล่าและยังไม่มีแอปเลย สถานะว่างที่ชัดเจนจะบอกตรง ๆ ว่ายังไม่มีอะไรถูกสร้าง แนะนำการกระทำถัดไปที่ชัดเจนเช่น “Create your first app” และเพิ่มบรรทัดยืนยันความปลอดภัยสั้น ๆ (เช่น สามารถส่งออกซอร์สโค้ดและมี snapshots ได้เมื่อเริ่มแล้ว) เป้าหมายคือเปลี่ยนจาก “ไม่มีอะไรเลย” เป็น “ฉันไปถึงผลลัพธ์การทำงานครั้งแรกได้”

ผู้ใช้คิดอะไรเมื่อเจอหน้าว่าง

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

คนส่วนใหญ่มักถามคำถามเดียวกันในใจ:

• หน้านี้มีไว้ทำอะไร?
• ฉันควรทำอย่างไรเป็นอันดับแรก?
• จะเกิดอะไรหลังฉันทำ?
• ฉันจะทำพังไหม?
• ฉันเปลี่ยนหรือยกเลิกได้ไหมทีหลัง?

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

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

สถานะว่างสำหรับการตั้งค่าต่างจากสถานะข้อผิดพลาดและการโหลด การโหลดบอกว่า “รอ มีบางอย่างกำลังเกิดขึ้น” ข้อผิดพลาดบอกว่า “มีบางอย่างล้มเหลว นี่คือสาเหตุ” การตั้งค่าบอกว่า “ตรงนี้ยังไม่มีอะไรและนั่นเป็นเรื่องปกติ นี่คือวิธีเริ่ม”

ตัวอย่างที่ชัดเจน: ถ้าใครสักคนเปิด workspace ใหม่ใน Koder.ai แล้วเห็นหน้า Projects ว่าง พวกเขาไม่ได้คิดเรื่องฟีเจอร์ แต่จะคิดว่า “ฉันเริ่มจาก prompt ดีกว่า นำเข้าโค้ด หรือเลือกเทมเพลต และมันจะพังไหม?” สถานะว่างของคุณควรตอบคำถามนั้นโดยไม่ต้องส่งพวกเขาไปดูเอกสาร

โครงสร้างง่าย ๆ ที่ได้ผล: อธิบาย แนะนำ และให้ความมั่นใจ

สถานะว่างที่ดีไม่ควรรู้สึกว่าง มันควรทำหน้าที่เหมือนป้ายบอกทาง: “นี่คือสิ่งนี้ และนี่คือคลิกถัดไป”

โครงสร้างที่ใช้ได้กับเส้นทางการตั้งค่าส่วนใหญ่มีสามส่วน:

• อธิบายความหมาย: ประโยคสั้น ๆ ที่บอกว่าพื้นที่นี้ใช้ทำอะไร
• ชี้ขั้นตอนถัดไป: การกระทำหลักหนึ่งอย่างที่ตรงกับการเคลื่อนไหวถัดไปที่พบบ่อยที่สุด
• ให้ความมั่นใจ: บรรทัดสั้น ๆ ที่ลดความเสี่ยงหรือความพยายามที่ผู้ใช้รับรู้

เก็บคำอธิบายให้กระชับ ถ้าต้องใช้ย่อหน้าเพื่ออธิบายหน้าคุณกำลังขอให้ผู้ใช้คิดมากเกินไป ตั้งเป้า 1–2 ประโยคสั้น ๆ ด้วยคำง่าย ๆ เช่น “Add your first project” หรือ “Create your first workspace.”

จากนั้นทำให้ขั้นตอนถัดไปชัดเจนด้วยปุ่มหลักเพียงปุ่มเดียว ถ้าคุณแสดงปุ่มสามปุ่มที่มีความสำคัญเท่ากัน คุณกำลังขอให้ผู้ใช้เลือกเส้นทางก่อนจะเข้าใจหน้า ถ้าต้องมีทางเลือก (import, template, skip) ให้ทำให้มองเห็นตามสายตาว่าเป็นตัวเลือกรองจากปุ่มหลัก

ใช้บรรทัดยืนยันความปลอดภัยเพื่อลดความกลัวทั่วไป: กลัวทำผิด เสียเวลา หรือไม่เก่งเชิงเทคนิค เบาะแสสั้น ๆ ว่าจะเกิดอะไรขึ้นต่อและแก้ไขได้ไหมช่วยได้มากกว่าการอธิบายยาว ๆ

ตัวอย่างข้อความสำหรับหน้า “Projects” สำหรับผู้ใช้ครั้งแรก:

Title: Start your first project

Explanation: Projects hold your app setup and releases.

Primary action: Create project

Reassurance: Takes about 2 minutes. You can rename it anytime.

ถ้าผลิตภัณฑ์ของคุณรองรับหลายวิธีเริ่มต้น (เช่น สร้างจากแชท นำเข้า หรือเทมเพลต เหมือนเครื่องมืออย่าง Koder.ai) ให้เก็บ “Create” เป็นค่าเริ่มต้นและวาง “Import” และ “Use a template” เป็นตัวเลือกรองด้านล่าง

รูปแบบข้อความที่ลดความสับสน

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

สูตรหัวข้อสั้น ๆ ที่ใช้ได้คือ ผลลัพธ์ + วัตถุ ตั้งชื่อผลลัพธ์และสิ่งที่พวกเขาจะสร้าง ไม่ใช่ชื่อฟีเจอร์ภายในของคุณ

• ดี: “Add your first customer” หรือ “Create your first project”
• อ่อน: “Customers” หรือ “Project module”

สำหรับเนื้อหาบทความ ใช้ มันคืออะไร + ทำไมมันสำคัญ ใน 1–2 ประโยค:

"Customers are the people you sell to. Add one now so you can send an invoice and track payments."

ปุ่มเรียกให้ทำงานควรเริ่มด้วยกริยาที่ชัดและตามด้วยคำนามเฉพาะ หลีกเลี่ยงปุ่มกำกวมอย่าง “Get started” เมื่อมีหลายเส้นทาง

• "Create a project"
• "Import contacts"
• "Choose a template"
• "Connect a payment account"
• "Invite a teammate"

เพิ่ม microcopy ใกล้ตัวเลือกที่ดูเสี่ยง ข้อความยืนยันสั้น ๆ มักได้ผลมากกว่าการอธิบายยาว ๆ:

• "You can change this later."
• "This takes about 2 minutes."
• "You can delete this anytime."

ถ้าผลิตภัณฑ์ของคุณสร้างผลลัพธ์ให้ผู้ใช้ (เช่น Koder.ai) ให้ตั้งความคาดหวังเพื่อให้คนรู้ว่าพวกเขาไม่ได้ผูกมัดกับเวอร์ชันสุดท้าย: "We'll create a first draft. You can review and edit before deploying."

รูปแบบเลย์เอาต์ที่ทำให้การกระทำถัดไปชัดเจน

สถานะว่างที่ดีควรอ่านเหมือนป้ายบอกทาง ไม่ใช่โปสเตอร์ เลย์เอาต์ต้องมีลำดับชัดเจนเพื่อให้คนมองครั้งเดียวแล้วเข้าใจและลงมือ

ใช้ลำดับสำคัญง่าย ๆ ตามการสแกนของสายตา: หัวข้อ ประโยคสั้น ๆ ปุ่ม CTA หลัก แล้วตัวเลือกรองที่เงียบกว่า (import, template, skip)

วางปุ่มหลักไว้ใกล้ข้อความ ถ้าผู้ใช้ต้องอ่าน เลื่อน แล้วตัดสินใจ บ่อยครั้งพวกเขาจะหยุด หนึ่งรูปแบบที่ใช้ได้ดีคือบล็อกแน่น (headline + body + CTA) โดยมีช่องว่างมากขึ้นระหว่างบล็อกนั้นกับองค์ประกอบอื่น ๆ (การนำทาง ฟุตเทอร์ แผงด้านข้าง)

ไอคอนและภาพประกอบเล็ก ๆ ช่วยให้สแกนได้ แต่ก็ต่อเมื่อมีความหมาย ไอคอนโฟลเดอร์ข้าง "No projects yet" มีประโยชน์ มาสคอตสุ่ม ๆ มักไม่ช่วย หากใช้ภาพประกอบให้เล็กและวางด้านบนหัวข้อเพื่อไม่แย่งปุ่มหลัก

หนึ่งในรูปแบบที่แข็งแกร่งคือการแสดงตัวอย่างความสำเร็จเล็ก ๆ: การ์ดตัวอย่าง แถวตัวอย่างในตาราง หรือไทล์ตัวอย่างจาง ๆ ในเครื่องมืออย่าง Koder.ai หน้าว่าง "Apps" อาจแสดงไทล์ตัวอย่างหนึ่งใบ (ชื่อ สถานะ อัปเดตล่าสุด) เพื่อให้ผู้ใช้เข้าใจทันทีว่าจะสร้างอะไร

เลือกเส้นทางที่ถูกต้อง: สร้าง นำเข้า หรือเริ่มจากเทมเพลต

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

สร้างเป็นหลัก: เมื่อการเริ่มจากศูนย์คือสิ่งจำเป็น

นำเสนอ "Create" เป็นหลักเมื่อชัยชนะแรกจริง ๆ มาจากการสร้างสิ่งใหม่: โปรเจกต์ workspace หน้าหรือเรคคอร์ดแรก เทคนิคนี้ใช้ได้ดีเมื่อลูกค้าสามารถทำให้เสร็จเร็วและการกระทำย้อนกลับได้

ถ้าการสร้างใช้เวลานาน ให้แบ่งเป็นก้าวเล็ก ๆ (เช่น "Create a draft") เพื่อให้พวกเขาก้าวไปข้างหน้าโดยไม่รู้สึกติดล็อก

นำเข้าเป็นหลัก: เมื่อผู้ใช้มีข้อมูลแล้ว

นำเสนอ "Import" เมื่อผู้ใช้ใหม่ส่วนใหญ่มีระบบ ไฟล์ หรือบัญชีเดิม สถานะว่างควรบอกว่าอะไรที่รองรับการนำเข้าและพวกเขาจะได้อะไรหลังนำเข้า (เช่น ฟิลด์ถูกจับคู่และสร้างรายการ)

วิธีปฏิบัติที่ดีคือเลือก CTA หลักตามบริบท ถ้าผู้ใช้มาจากเนื้อหาการย้ายข้อมูล ให้เน้น Import ถ้าพวกเขาคลิกปุ่มสร้างโครงการเปล่า ให้เน้น Create ถ้าการตั้งค่าซับซ้อน ให้เน้น Template

เทมเพลตเป็นหลัก: เมื่อความเร็วสำคัญกว่าการควบคุม

นำเสนอเทมเพลตเมื่อผลิตภัณฑ์ของคุณมีจุดเริ่มต้นที่พบบ่อยและผู้ใช้ต้องการปรับไม่ใช่ออกแบบ ตั้งชื่อเทมเพลตด้วยผลลัพธ์ ("Sales pipeline", "Weekly planner") ไม่ใช่ฟีเจอร์

ตัวเลือก "Try with sample data" ที่ปลอดภัยช่วยลดความกลัว ชัดเจนว่าสามารถลบทิ้งได้ สำหรับบิวเดอร์ที่เริ่มจากแชทอย่าง Koder.ai โปรเจกต์ตัวอย่างช่วยให้เห็นรูปแบบของแอปที่ใช้งานได้ก่อนผู้ใช้เขียน prompt ของตัวเอง

ขั้นตอน: ออกแบบสถานะว่างเพื่อให้การตั้งค่าสำเร็จ

หน้าว่างไม่เป็นกลาง สถานะที่ดีที่สุดทำให้การกระทำถัดไปที่สำเร็จดูชัดเจน ปลอดภัย และรวดเร็ว

วิธี 5 ขั้นตอนที่ใช้ซ้ำได้

1. เลือกหนึ่งเหตุการณ์ตั้งค่าที่จะผลักดัน เลือกการกระทำเดียวที่พิสูจน์ว่าผู้ใช้ได้คุณค่า (สร้างโปรเจกต์แรก เพิ่มเพื่อนร่วมทีมคนแรก เชื่อมแหล่งข้อมูลแรก) เมื่อพยายามรองรับสามเป้าหมายพร้อมกัน ผู้ใช้จะหยุดชะงัก

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

3. เขียนองค์ประกอบหลักตามลำดับนี้:

   • Headline: พื้นที่นี้ใช้ทำอะไร (คำง่าย ๆ ไม่มีสโลแกน)
   • Body: จะเกิดอะไรหลังการกระทำ (1 ประโยค)
   • Primary CTA: กริยาที่ตรงกับเหตุการณ์ตั้งค่า
   • หนึ่งทางเลือกสำรอง: นำเข้า ข้อมูลตัวอย่าง หรือเทมเพลต (ชัดเจนว่าเป็นรอง)

4. เพิ่มความมั่นใจและทางออก ตอบความกังวลเงียบ ๆ: "ฉันจะทำของเสียไหม?" บรรทัดสั้น ๆ อย่าง "You can edit this later" และวิธีที่ชัดเจนในการยกเลิก แก้ไข หรือลบ ช่วยลดการลังเล

5. ทดสอบกับ 3 คน แล้วติดตามการสำเร็จ ดูว่าพวกเขาหยุดที่ไหนและคลิกอะไรเป็นอันดับแรก หลังปล่อยใช้งาน ติดตามการดูหน้าว่าง การคลิก CTA หลัก และอัตราการสำเร็จของเป้าหมาย

ตัวอย่าง: ถ้าใครสักคนเปิด CRM ใหม่และเห็นแท็บ "Contacts" ว่าง ชัยชนะที่เร็วสุดคือ "Add your first contact." เก็บแค่ชื่อ + อีเมล เสนอ "Import CSV" เป็นทางเลือกสำรอง และให้ความมั่นใจว่าสามารถอัปเดตฟิลด์ได้ทีหลัง

ข้อผิดพลาดทั่วไปที่ทำให้ผู้ใช้ติดค้าง

ส่วนใหญ่สถานะว่างที่ทำให้ผู้ใช้ติดค้างล้มเหลวเพราะทำให้การกระทำถัดไปดูเสี่ยงหรือไม่ชัดเจน

1) ปุ่มแข่งขันกัน

ถ้าคุณโชว์ปุ่มสามปุ่มที่ดูสำคัญเท่ากัน ผู้ใช้จะหยุดชะงัก เลือกปุ่มหลักหนึ่งอันและตัวเลือกรองหนึ่งอัน วางส่วนที่เหลือไว้หลัง "More options" ที่เงียบกว่า

2) ข้อความขายฟีเจอร์แทนผลลัพธ์

"Powerful dashboards, flexible roles, advanced settings" ไม่บอกคนว่าจะทำอะไรตอนนี้ แทนที่ด้วยผลลัพธ์ที่พวกเขาจะได้หลังคลิก

ตัวอย่าง:

• "Add your first customer to start tracking sales (takes 1 minute)"
• "Connect your repo to generate the first build"

3) ขอข้อมูลมากเกินไปก่อนชัยชนะครั้งแรก

ฟอร์มยาวในหน้าว่างทำให้รู้สึกเหมือนต้องผูกมัด ถ้าต้องการข้อมูล ให้รับทีหลัง เริ่มด้วยก้าวเล็กที่สุดที่สร้างสิ่งมองเห็นได้

แทนที่จะขอชื่อ ขนาดบริษัท ตำแหน่ง และเป้าหมายก่อนโหลดอะไรเลย ขอแค่ "Project name" แล้วทำให้ส่วนที่เหลือเป็นทางเลือกหลังจากมีหน้าจอแรก

4) ข้อความกำกวมหรือล้อเล่นที่บดบังสิ่งที่จะเกิดขึ้น

อารมณ์ขันใช้ได้ แต่ไม่ควรใช้เมื่อผู้ใช้ต้องการความชัดเจน "Nothing to see here" เสียช่วงเวลานั้น พูดให้ชัดว่าหลังคลิกจะเกิดอะไรขึ้น และอะไรจะไม่เกิดขึ้น

5) ไม่มีทางเลือกสำรองเมื่อตัวเลือกหลักถูกบล็อก

บางคนไม่สามารถสร้างจากศูนย์ได้ เสนอทางเลือกจริงจัง: นำเข้า เริ่มจากเทมเพลต หรือลองข้อมูลตัวอย่าง ตัวอย่างเช่น ถ้าผู้ใช้ใน Koder.ai ยังไม่มีไอเดีย ให้มี "Start from a sample app" เพื่อพาเขาไปยังหน้าทำงานได้โดยไม่ต้องเขียนสเปกครบถ้วน

เช็คลิสต์ด่วนก่อนปล่อยใช้งาน

ผู้ใช้ใหม่ควรเข้าใจหน้านั้นว่าเป็นอะไร ทำไมมันสำคัญ และทำอะไรต่อในประมาณห้าวินาที

• ปุ่ม CTA หลักชัดเจนและเฉพาะเจาะจง. ใช้กริยาบวกวัตถุ เช่น "Create your first project" หรือ "Add your first customer" ไม่ใช้ "Continue" หรือ "OK."
• มีเพียงการกระทำเดียวที่ดูเป็นหลัก. ขนาด สี และตำแหน่งควรทำให้ขั้นตอนถัดไปเด่นชัด
• ตัวเลือกรองดูเป็นรอง. ถาเสนอ "Import" หรือ "Use a template" ให้ดูเบากว่าปุ่มหลัก
• หน้าชี้ตัวเองได้เร็ว. หัวข้อสั้น ๆ บวกหนึ่งประโยคสั้น ๆ ควรตอบ: อะไรที่ว่าง และจะเกิดอะไรหลังคลิก
• มีทางลัดสู่ชัยชนะครั้งแรก. เทมเพลต ข้อมูลตัวอย่าง หรือตัวเริ่มต้นแนะนำให้ผู้ใช้เห็นคุณค่าโดยไม่ต้องตั้งค่ามาก

ความมั่นใจคือสิ่งที่เปลี่ยนความลังเลเป็นการกระทำ ใส่บรรทัดสั้น ๆ ใกล้ CTA ที่ลดความกลัว เช่น "You can change this later" หรือ "Nothing is published until you confirm." เก็บให้นิ่งและเฉพาะเจาะจง

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

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

ตัวอย่างสมจริง: การตั้งค่าแอปครั้งแรก

ผู้ก่อตั้งเดี่ยวสมัคร Koder.ai และเปิด workspace ใหม่ พวกเขามาที่หน้า Projects ที่ว่างเปล่าโดยไม่รู้ว่า "ดี" คืออะไร

แทนที่จะเป็นตารางว่าง สถานะว่างจะแสดงคำสัญญาสั้น ๆ ขั้นตอนถัดไปที่ชัดเจน และบันทึกความปลอดภัยเล็ก ๆ น้อย ๆ ตัวอย่างหนึ่งของข้อความและ CTA (ประเมินเวลาว่าเป็นค่าประมาณที่ควรตรวจสอบ):

Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.

[Create your first app]
Secondary: Import existing code  |  Browse templates
Note: You can export the source code anytime.

หลังจากผู้ก่อตั้งคลิก Create your first app หน้าจอถัดไปถามคำถามง่าย ๆ หนึ่งข้อ: "What are you building?" พร้อมช่องกรอกเดียวและตัวอย่าง prompt สองตัวอย่าง (เช่น "CRM for a small agency" หรือ "Landing page with signup") ทำให้เส้นทางแคบ: ฟิลด์ชัดเจนหนึ่งช่อง ปุ่มชัดเจนหนึ่งปุ่ม

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

เมื่อมีข้อมูลแล้ว ผู้ใช้ที่กลับมาไม่ควรเห็นสถานะว่างเดิมอีก หน้าจอ Projects สามารถเปลี่ยนเป็นมุมมอง "recent apps" พร้อมปุ่มด่วนหนึ่งปุ่มโดดเด่น (เช่น New app) และการกระทำรองเล็ก ๆ (เช่น Snapshots หรือ Deploy) ตามพฤติกรรมครั้งก่อน

เพื่อรู้ว่าสถานะว่างของคุณทำงานหรือไม่ ให้ติดตามตัวเลขสักสองสามอย่าง:

• เวลาไปสู่ชัยชนะครั้งแรก (จากการเข้าชมครั้งแรกถึงพรีวิวที่ทำงานได้)
• อัตราการหลุดระหว่างหน้าว่างกับขั้นตอนการสร้างแรก
• อัตราการคลิก CTA (หลักเทียบกับรอง)
• การใช้งานซ้ำภายใน 7 วัน
• การร้องเรียนฝ่ายสนับสนุนหรือการคลิกโกรธบนพื้นที่หน้าว่าง

ขั้นตอนต่อไป: ปรับปรุงเส้นทางหนึ่ง แล้วขยายแบบแผน

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

เก็บการเปลี่ยนแปลงให้เล็ก คุณไม่ได้ออกแบบ onboarding ใหม่ทั้งหมด คุณแค่ทำให้การกระทำสำเร็จครั้งแรกชัดเจนขึ้น

แผนสั้น ๆ หนึ่งสัปดาห์:

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

เมื่อได้ชัยชนะหนึ่งครั้ง ให้ทำมาตรฐาน สร้างแบบแผนภายในสั้น ๆ สำหรับสถานะว่าง: ระยะช่องว่าง สไตล์หัวข้อ กฎไอคอนหรือภาพประกอบ และเลย์เอาต์ CTA ที่สม่ำเสมอ เมื่อทีมทำตามโครงสร้างเดียวกัน ผู้ใช้จะเรียนรู้ครั้งเดียวและทำงานได้เร็วขึ้นทุกที่

ถ้าคุณกำลังสร้างแอปใหม่และต้องการต้นแบบการตั้งค่าอย่างรวดเร็ว Koder.ai (koder.ai) สามารถช่วยร่างเส้นทางใน Planning Mode และสร้างเวอร์ชันแรกให้ทดสอบ แล้วทำซ้ำตามจุดที่คนติดขัดจริง ๆ