Buttons and CTA
ออกแบบปุ่มให้รู้ว่ากดได้ แยกปุ่มหลัก/รอง และเขียนข้อความบนปุ่มให้ชัด
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
Buttons and CTA คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนเริ่มต้น
ใช้เมื่อไหร่
หน้าจอมีหลายปุ่ม ผู้ใช้ไม่รู้ว่าควรกดอันไหนก่อน
อ่านแล้วทำอะไรต่อ
ปุ่ม 'ส่งคำขอ' เป็น primary สีเด่น ส่วน 'ยกเลิก' เป็น secondary แบบเส้นขอบ ผู้ใช้เห็นปุ่มที่ควรกดทันทีโดยไม่ต้องอ่านสองรอบ
เห็นภาพ: ทริคนี้เป็นยังไง
ทั้ง 'ตกลง' 'ยืนยัน' และ 'ยกเลิก' ใช้สีทึบเด่นเท่ากันหมด สายตาไม่รู้จะไปปุ่มไหนก่อน และคำว่า 'ตกลง' ก็ไม่บอกว่ากดแล้วจะเกิดอะไรขึ้น ผู้ใช้ต้องอ่านฟอร์มซ้ำเพื่อเดาว่าปุ่มไหนคือปุ่มที่ควรกด
มีปุ่มหลัก 'ส่งคำขอ' สีเด่นเพียงปุ่มเดียว ส่วน 'ยกเลิก' เป็นปุ่มรองแบบเส้นขอบที่เบากว่า สายตาเห็นปุ่มที่ควรกดทันที และข้อความบนปุ่มเป็นกริยาบอกผลลัพธ์ที่จะเกิด ('ส่งคำขอ' แทน 'ตกลง') ผู้ใช้รู้ทันทีว่ากดแล้วได้อะไร
ใช้ตอนไหน?
- หน้าจอมีหลายปุ่ม ผู้ใช้ไม่รู้ว่าควรกดอันไหนก่อน
- ผู้ใช้ลังเลเพราะข้อความบนปุ่มกำกวม เช่น 'ตกลง' ที่ไม่บอกว่าจะเกิดอะไร
- ต้องแยกการกระทำอันตราย (เช่น ลบ) ออกจากการกระทำปกติ
ความหมาย
CTA (Call-to-Action) คือปุ่มหรือลิงก์ที่ชวนให้ผู้ใช้ลงมือทำสิ่งที่เราต้องการ เช่น บันทึก ส่ง หรือยืนยัน การออกแบบปุ่มที่ดีต้องดูออกทันทีว่ากดได้ มีปุ่มหลัก (primary) เด่นชัดเพียงปุ่มเดียว และมีปุ่มรอง (secondary) สำหรับทางเลือกที่สำคัญน้อยกว่า
ลำดับชั้นของปุ่ม
ให้มีปุ่มหลักเด่นสุดหนึ่งปุ่มต่อหนึ่งงาน ปุ่มรองดีไซน์เบากว่า และเขียนข้อความเป็นกริยาบอกผลลัพธ์ที่จะเกิด ไม่ใช่คำกลางๆ
Primary → สีตัด ทึบ เด่นสุด (1 ปุ่ม/งาน)
Secondary → เส้นขอบหรือสีจาง
Tertiary → เป็นลิงก์ข้อความ
ข้อความ: 'บันทึกคำขอ' ดีกว่า 'ตกลง'ตัวอย่างการใช้
ฟอร์มส่งคำขอ
ปุ่ม 'ส่งคำขอ' เป็น primary สีเด่น ส่วน 'ยกเลิก' เป็น secondary แบบเส้นขอบ ผู้ใช้เห็นปุ่มที่ควรกดทันทีโดยไม่ต้องอ่านสองรอบ