คู่มือการออกแบบปุ่ม: วิธีออกแบบปุ่มที่แปลง

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

แม้ว่าปุ่มจะเป็นเรื่องธรรมดามากในการออกแบบเว็บและดูเหมือนง่าย แต่ไม่ควรมองข้ามความสำคัญของปุ่มเหล่านี้ เป็นองค์ประกอบสำคัญของไซต์ที่ทำหน้าที่สำคัญมาก

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

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

หัวข้อนั้นกดปุ่มของคุณหรือไม่? แล้วอ่านต่อ

ก่อนที่เราจะเริ่มต้น คำศัพท์สั้นๆ เกี่ยวกับการทดสอบ A/B

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

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

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

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

วิธีออกแบบปุ่มที่ผู้ใช้คลิกจริงๆ

หลังจากข้อแม้นี้ ตอนนี้เราหันไปสร้างปุ่มที่ทำงานได้ดีเพื่อให้คำกระตุ้นการตัดสินใจที่ดีขึ้นและเพิ่มอัตรา Conversion สนุก!

ออกแบบให้เหมาะสมกับแบรนด์หรือไซต์ของคุณ

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

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

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

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

ทำให้ปุ่มดูเหมือนปุ่ม

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

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

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

ที่มา: Wikipedia ใช้โดยได้รับอนุญาตจาก Microsoft

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

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

ภาพโดย Ienjoyeverytime / shutterstock.com

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

การออกแบบที่สำคัญอีกประการหนึ่งคือเงาและไฮไลท์ เงาหล่นได้กลายเป็นสัญลักษณ์สากลเพื่อแสดงว่าองค์ประกอบต่างๆ สามารถคลิกได้หรือแตะได้ ดีไซน์เรียบๆ ก็ยังใช้เป็นสัญญาณสำหรับการทำงาน

ที่มา: Material.io

ให้ฉลากที่ชัดเจน

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

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

ภาพโดย Prixel Creative / shutterstock.com

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

หลักเกณฑ์บางประการสำหรับฉลากที่ชัดเจนมีดังนี้

• เป็นคำอธิบายและเฉพาะเจาะจง
• ใช้กริยาการกระทำ เช่น Sign Me Up , Submit Form , Create Account
• ระบุที่อยู่ผู้ใช้โดยตรง
• สร้างความรู้สึกเร่งด่วนด้วยคำพูดอย่าง Now หรือ Today
• ให้เรียบง่ายและชัดเจน

ฉลากมีความสำคัญเป็นพิเศษเมื่อพูดถึง CTA การเปลี่ยนคำเพียงไม่กี่คำสามารถส่งผลอย่างมากต่อประสิทธิภาพของปุ่ม ตัวอย่างเช่น Unbounce พบว่าอัตราการคลิกผ่านเพิ่มขึ้น 90 เปอร์เซ็นต์โดยเพียงแค่เปลี่ยนสำเนาปุ่มจาก "เริ่มการทดลองใช้ฟรี 30 วันของคุณ" เป็น "เริ่มการทดลองใช้ฟรี 30 วันของฉัน"

ใช่ นั่นอาจเป็นพลังของคำเดียว

วางปุ่มที่ผู้ใช้สามารถค้นหาได้

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

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

ที่มา: Netflix

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

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

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

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

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

ใส่ใจกับขนาดและระยะห่าง

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

ที่มา: Apple

ขั้นตอนแรกคือต้องแน่ใจว่าปุ่มของคุณมีขนาดใหญ่เพียงพอ ปลายนิ้วคนโดยเฉลี่ยมีขนาดใหญ่ 8-10 มม. ด้วยเหตุนี้ Apple แนะนำให้สร้างองค์ประกอบที่จะใช้โดยการสัมผัสอย่างน้อย 44px x 44px (ใช้จุดแทนพิกเซลสำหรับการแสดงเรตินา) คำแนะนำจากผู้ผลิตรายอื่นยังหมุนรอบเครื่องหมาย 10 มม. แน่นอนว่าขนาดสามารถลดลงได้เล็กน้อยสำหรับการออกแบบเว็บที่มุ่งเป้าไปที่การใช้งานเดสก์ท็อป

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

ให้ข้อเสนอแนะ

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

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

ที่มา: Material.io

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

ใช้คอนทราสต์ให้เป็นประโยชน์

ปุ่มทั้งหมดไม่ได้ถูกสร้างขึ้นเท่ากัน แม้ว่าหน้า Landing Page อาจมีลิงก์หลายลิงก์ให้คลิก แต่ควรมีลิงก์เดียวที่สำคัญจริงๆ

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

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

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

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

ที่มา: Prezi

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

คุณกำลังเหล่ทดสอบ #CTA ของคุณหรือไม่? เป็นวิธีที่ดีที่สุดที่จะบอกว่าคำกระตุ้นการตัดสินใจของคุณโดดเด่นหรือไม่ http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTERD2

– Design Pickle (@designpickle) 25 กรกฎาคม 2558

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

ที่มา: Quicksprout

สรุป

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

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

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

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

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

ภาพขนาดย่อของบทความโดย BerryCat / shutterstock.com