สิ่งที่ต้องดูในรีวิวการออกแบบเบื้องต้นของคุณ

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

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

การทบทวนการออกแบบเบื้องต้น

การออกแบบหน้า Landing Page หลังการคลิกใช้การประสานงานของทีมงานครีเอทีฟโฆษณาทั้งหมด นักออกแบบ UX, นักเขียนคำโฆษณา, ผู้จัดการโครงการ และนักพัฒนา ล้วนมีส่วนในกระบวนการนี้ (เรียนรู้ว่าโซลูชันการทำงานร่วมกันของ Instapage สามารถเร่งกระบวนการนั้นได้อย่างไร)

บ่อยครั้ง ก่อนที่โครงร่างโครงร่างที่มีความเที่ยงตรงต่ำจะถูกดึงออกมา ทีมออกแบบจะตอบคำถามเหล่านี้เกี่ยวกับทุกองค์ประกอบของหน้า

1. ทำไมเราถึงทำเช่นนี้ / เรากำลังพยายามแก้ปัญหาอะไร?

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

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

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

อย่าลืม: ไม่ควรออกแบบสิ่งใดในหน้า Landing Page หลังการคลิกโดยไม่มีจุดประสงค์ ทุกองค์ประกอบมีส่วนทำให้เกิดอัตราการแปลง

2. เราทำเพื่อใคร?

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

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

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

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

3. เราจะรู้ได้อย่างไรว่าเราประสบความสำเร็จ?

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

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

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

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

องค์ประกอบที่ต้องประเมินในการทบทวนการออกแบบเบื้องต้น

Claudio Guglieri ดีไซเนอร์ของ Microsoft กล่าวว่า "ดูแลทุกองค์ประกอบราวกับว่าสามารถนำเสนอในการประกวดการออกแบบได้ “ถ้าคุณใส่ใจทุกองค์ประกอบ ทั้งหมดจะเป็นมากกว่าผลรวมของส่วนประกอบ”

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

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

เค้าโครง

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

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

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

• กลุ่มที่ไม่ใช่แบบดั้งเดิมประเมินเวลาที่ใช้ในการอ่านบทความสูงเกินไป และบางครั้งก็แสดงความไม่พอใจกับการจัดวางในลักษณะขมวดคิ้ว

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

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

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

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

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

• ขนาด: ยิ่งมีขนาดใหญ่เท่าใดก็จะยิ่งให้ความสนใจมากขึ้นเท่านั้น

• ตำแหน่ง: ผู้คนใช้หน้าจากบนลงล่าง ซ้ายไปขวา ดังนั้นองค์ประกอบที่ด้านซ้ายบนจะถูกดูบ่อยกว่าองค์ประกอบที่ด้านล่างขวา

• สี: สีที่ตัดกันส่วนที่เหลือของหน้าจะดึงดูดความสนใจ

• ความหนาแน่น: การ เพิ่มองค์ประกอบหลายอย่างลงในพื้นที่ขนาดเล็กจะเพิ่มปริมาณความสนใจที่พื้นที่นั้นดึงดูด

• ค่า: วัตถุที่เข้มกว่าจะมองเห็นได้ชัดเจนกว่าวัตถุที่สว่างกว่า คำที่เป็นตัวหนาจะดึงดูดความสนใจมากกว่าเช่น

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

พิมพ์

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

แบบอักษรของหน้า Landing Page หลังคลิกสอดคล้องกับแบบอักษรของเว็บไซต์

ความสอดคล้องของแบรนด์เป็นผู้มีอิทธิพลอย่างมากต่อการตัดสินใจซื้อ หากผู้เข้าชมที่ภักดีไม่ทราบว่าหน้า Landing Page หลังคลิกเป็นของธุรกิจของคุณ พวกเขาอาจไม่เชื่อว่าเป็นหน้า Landing Page อยู่ในแบรนด์ด้วยแบบอักษรจาก Adobe Typekit และ Google Fonts

ฟอนต์ของคุณอ่านได้ทุกขนาด

ผู้เชี่ยวชาญด้านการใช้งาน D Bnonn Tennant แนะนำ 16px เพราะมันใกล้เคียงกับสิ่งที่เราเห็นในหนังสือ (หน้าจอด้านซ้าย หน้าหนังสือด้านขวา):

ใช้ข้อความซานเซอริฟในสำเนาเนื้อหา เนื่องจากการศึกษาพบว่า serif นั้นอ่านยากกว่าในขนาดที่เล็กกว่าทางออนไลน์ วิธีที่ดีในการทำให้อ่านง่ายคือทำให้แน่ใจว่าฟอนต์ของคุณผ่านการทดสอบ "il1" ได้:

คุณเก็บแบบอักษรที่แตกต่างกันให้น้อยที่สุด

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

ใช้แบบอักษรที่แตกต่างกันไม่เกินสองแบบในหน้า Landing Page หลังการคลิก มิฉะนั้น คุณอาจเสี่ยงที่จะลดอำนาจของแบรนด์ ทำให้หน้าของคุณดูไม่เป็นระเบียบ และทำให้อ่านยาก

บรรทัดข้อความของคุณมีความยาวที่สมดุล

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

การกระโดดขึ้นบรรทัดใหม่ทำให้ผู้อ่านรู้สึกกระปรี้กระเปร่า แต่พลังงานนั้นจะหมดไปยิ่งสายยาวขึ้น ด้วยเหตุนี้ ทีมงานที่ปรึกษาด้านการใช้งาน Baymard Institute จึงแนะนำความยาวบรรทัดระหว่าง 50-75 อักขระ

ระยะห่างบรรทัดของคุณช่วยให้อ่านง่าย

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

Matthew Butterick ผู้ออกแบบฟอนต์อ้างว่า เพื่อให้อ่านง่ายที่สุด ระยะห่างระหว่างแต่ละบรรทัดควรเป็นเปอร์เซ็นต์ของขนาดฟอนต์ — 120%-140% เป็นที่แน่นอน

ข้อความรองรับรูปแบบการอ่านบนเว็บ

ในหน้าที่มีข้อความจำนวนมาก ผู้อ่านมักจะประมวลผลหน้าในรูปแบบที่คล้ายกับ "F" ในหน้าเว็บที่มีรูปภาพ รูปแบบนั้นจะดูเหมือน "Z" มากกว่า

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

หัวข้อข่าว หัวเรื่องย่อย หัวข้อย่อย และตัวหนา ล้วนดึงดูดสายตาของผู้เยี่ยมชมผ่านหน้าจอขณะที่พวกเขาสแกนหน้า

คุณไม่ทำลายระยะขอบซ้าย

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

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

มิฉะนั้น คุณจะสร้างหน้า Landing Page หลังคลิก
ล้นหลาม
ยากสำหรับผู้เยี่ยมชมของคุณ
อ่าน.

สี

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

โทนสีเสริม

โครงร่างเสริมถูกสร้างขึ้นโดยการเลือกสีตรงข้ามกันบนวงล้อสี ฝ่ายค้านนั้นสร้างความแตกต่างระหว่างองค์ประกอบภายในโครงการนี้

โทนสีที่คล้ายคลึงกัน

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

โทนสีเดียว

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

โทนสีของคุณสะท้อนถึงแบรนด์ของคุณหรือไม่?

เมื่อดูไดอะแกรมเหล่านั้น คุณอาจสงสัยว่าจะเลือกสีพื้นฐาน การเน้นเสียง และสีพื้นหลังอย่างไร คำตอบ? เริ่มต้นด้วยสีของแบรนด์ของคุณ

• ใช้สีในโลโก้ของคุณเป็นจุดเริ่มต้นในการสร้างชุดสีที่ตอกย้ำความสม่ำเสมอของแบรนด์

• จากนั้น สร้างสีพื้นฐานโดยกำหนดว่าโลโก้ของคุณแสดงบนอะไร

• สุดท้าย เลือกพื้นหลังและสีเฉพาะจุด (สีของปุ่ม CTA) ที่ตัดกันเพื่อดึงดูดความสนใจสูงสุด

เรียนรู้เพิ่มเติมว่าคุณได้เลือกสีที่ถูกต้องหรือไม่ที่นี่

เมนูนำทาง ส่วนท้าย

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

ตอนนี้มองลงไปที่ด้านล่าง มีการร่างส่วนท้ายที่มีไซต์ลิงก์จำนวนมากหรือไม่ ถ้าเป็นเช่นนั้น ให้นำออก

อัตรา Conversion ของหน้า Landing Page หลังการคลิกควรเป็น 1:1 ซึ่งหมายความว่าควรมีองค์ประกอบที่คลิกได้เพียงรายการเดียวในหน้า Landing Page หลังคลิก นั่นคือปุ่ม CTA การศึกษาสนับสนุนแนวคิดที่ว่าลิงก์ขาออกลดอัตราการแปลง ดังนั้นให้ผู้เยี่ยมชมของคุณจดจ่ออยู่กับการยกเว้นพวกเขา

รูปภาพ

สื่อสามารถโน้มน้าวใจที่มีประสิทธิภาพในหน้า Landing Page หลังการคลิกของคุณเมื่อใช้อย่างถูกวิธี ภาพบางภาพที่คุณควรพิจารณานำเสนอ:

• รูปภาพสินค้า ที่ทำให้ผู้เยี่ยมชมของคุณทราบว่าข้อเสนอของคุณมีหน้าตาเป็นอย่างไร หรือทำงานอย่างไร

• อินโฟกราฟิก ที่ถ่ายทอดข้อมูลด้วยวิธีที่ย่อยง่ายด้วยสายตา กราฟและแผนภูมิเหมาะสำหรับการช่วยให้ผู้คนเปรียบเทียบชุดข้อมูล

• ภาพฮีโร่ ที่ช่วยให้ผู้มาเยือนจินตนาการว่าชีวิตของพวกเขาจะดีขึ้นด้วยข้อเสนอของคุณ

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

• ป้ายความปลอดภัย ที่แจ้งให้ผู้เยี่ยมชมทราบว่าพวกเขาปลอดภัยบนเพจของคุณ

• ป้ายรับรอง ที่เน้นรางวัลที่ธุรกิจของคุณได้รับ

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

การออกแบบแบบฟอร์ม

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

ในระหว่างการตรวจสอบการออกแบบเบื้องต้น โปรดศึกษาแนวทางปฏิบัติที่ดีที่สุดของ Nielsen Norman Group สำหรับการออกแบบแบบฟอร์มเมื่อประเมินของคุณเอง:

มันร้องขอเฉพาะข้อมูลที่คุณต้องการจริงๆ หรือไม่?

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

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

ฟิลด์ของคุณแสดงในรูปแบบคอลัมน์เดียวหรือไม่?

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

ฟิลด์และป้ายกำกับที่คล้ายกันจัดกลุ่มเข้าด้วยกันหรือไม่

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

คุณสามารถรวมหรือเปลี่ยนฟิลด์แบบฟอร์มเพื่อลดแรงเสียดทานได้หรือไม่?

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

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

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

การออกแบบปุ่ม

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

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

ปุ่มของคุณคล้ายกับปุ่มหรือไม่?

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

คล้ายกันแค่ไหน? ขึ้นอยู่กับผู้ชมของคุณ

ปุ่ม Skeomorphic

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

เอฟเฟกต์สามมิติ เช่น การแรเงา ทำให้ปุ่มดูเหมือนกดได้ สิ่งเหล่านี้เป็นสิ่งที่เราคุ้นเคยมาตั้งแต่ยุคแรกๆ ของอินเทอร์เน็ต:

ดังนั้น หากเมื่อสร้างลักษณะผู้ซื้อของคุณ คุณพบว่าผู้ชมของคุณไม่ได้ใช้เวลาออนไลน์มากนัก ปุ่มประเภทนี้อาจเป็นปุ่มที่คุณรวมไว้ในหน้า Landing Page หลังการคลิกของคุณ นี่คือสิ่งที่เก๋ไก๋มาก:

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

ปุ่มแบน

การออกแบบเรียบเป็นเทคนิคที่ไม่หมุนรอบการสร้างวัตถุใหม่ในโลกดิจิทัล เป็นแนวทางที่เรียบง่ายกว่า

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

นี่คือปุ่มแบนบนหน้าบีบ:

การวิจัยพบว่าเทคนิคนี้อาจทำให้ผู้ใช้อินเทอร์เน็ตสับสนและหงุดหงิดใจได้ โดยไม่รวมตัวบ่งชี้ความสามารถในการคลิก เช่น เอฟเฟกต์ 3 มิติ Kate Meyer อธิบายว่า:

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

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

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

ด้วยเหตุนี้ ผู้ออกแบบหน้า Landing Page ภายหลังการคลิกจำนวนมากจึงสร้างปุ่มที่สร้างสมดุลระหว่างลักษณะเรียบและสันหลัง

แฟลต 2.0

เครื่องชั่งนั้นเรียกว่าการออกแบบ "แบน 2.0" "กึ่งแบน" หรือ "เกือบแบน" นี่คือปุ่มกึ่งแบน:

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

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

ปุ่มของคุณดึงดูดความสนใจหรือไม่?

ในการดึงความสนใจไปที่ปุ่ม CTA ของคุณ ให้เติมด้วยสีที่ใช้เท่าที่จำเป็น (หรือไม่ใช้เลย) บนหน้า Landing Page หลังการคลิก จากกรณีศึกษานี้ ครั้งหนึ่งเคยคิดว่าสีแดงมีประสิทธิภาพเหนือกว่าสีเขียว:

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

หากคุณกำลังสร้างแบบแผนการออกแบบโดยใช้ทฤษฎีสี ปุ่ม CTA ของคุณจะเป็นสี “เน้น” ของคุณ จะสังเกตเห็นได้ชัดเจนที่สุดเมื่อตัดกับเฉดสีที่อยู่ฝั่งตรงข้ามของวงล้อสี (ดู "สี" ด้านบน)

ปุ่มของคุณใหญ่พอไหม

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

การศึกษาโดย MIT แสดงให้เห็นว่าทัชแพดเฉลี่ยอยู่ระหว่าง 10 ถึง 14 มม. ซึ่งทำให้ 10x10 มม. เป็นขนาดปุ่มขั้นต่ำที่ดี:

ข้อมูลใด ๆ ที่มีขนาดเล็กกว่านั้นและคุณจะเพิ่มโอกาสในการเกิดข้อผิดพลาดของผู้ใช้:

บันทึกคอนเวอร์ชั่นด้วยการทบทวนการออกแบบเบื้องต้น

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

เชื่อมต่อโฆษณาทั้งหมดของคุณกับหน้า Landing Page หลังการคลิกในแบบของคุณเสมอเพื่อลดต้นทุนต่อการได้มาซึ่งลูกค้า เริ่มสร้างหน้าโพสต์คลิกโดยเฉพาะของคุณโดยสมัครใช้งานตัวอย่าง Instapage Enterprise วันนี้