Directional Cues: เคล็ดลับการออกแบบที่ให้ผู้เข้าชมดำเนินการ

เผยแพร่แล้ว: 2017-02-17

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

ดังนั้นหน้า Landing Page หลังการคลิกของคุณก็พร้อมที่จะเผยแพร่แล้วใช่ไหม ไม่ค่อย.

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

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

เช่นเดียวกับเลย์เอาต์ F-Pattern และ Z-Pattern การใช้ตัวชี้นำทิศทาง (aka ตัวชี้นำภาพ) สามารถโน้มน้าวผู้เยี่ยมชมของคุณเพื่อนำทางหน้าของคุณด้วยความตั้งใจ ส่วนประกอบการออกแบบหน้า Landing Page หลังการคลิกทั้งสามนี้ใช้หลักจิตวิทยาในการโน้มน้าวการกระทำของผู้ใช้และช่วยบังคับให้พวกเขาดำเนินการ

มาดูกันดีกว่าว่ามันทำงานอย่างไร

ตัวชี้ทิศทางคืออะไร?

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

ตัวชี้นำทิศทางมีสองประเภทพื้นฐาน: ตัวชี้ทิศทางโดยนัยและตัวชี้ทิศทางที่ชัดเจน

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

จิตวิทยาเบื้องหลังการชี้นำภาพ

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

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

คลิกเพื่อทวีต

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

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

ตัวชี้นำทิศทางโดยนัยบนหน้า Landing Page หลังการคลิก

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

พื้นที่สีขาว

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

นี่คือหน้า Landing Page หลังการคลิกจาก Percolate ที่ใช้พื้นที่สีขาวจำนวนมากล้อมรอบพาดหัว หัวเรื่องย่อย และแบบฟอร์มการจับลูกค้าเป้าหมาย:

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

ความคมชัดของสี

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

เพื่อแสดงให้เห็น Marketo เสนอคู่มือการตลาดโซเชียลมีเดียบนหน้า Landing Page หลังการคลิก แต่ CTA หายไปเนื่องจากไม่มีคอนทราสต์ของสี:

ภาพนี้แสดงให้นักการตลาดเห็นว่า Marketo ล้มเหลวในการใช้ตัวชี้นำทิศทางเพื่อชักชวนให้ผู้เยี่ยมชมหน้า Landing Page คลิกทำ Conversion อย่างไร

แต่ในหน้า Landing Page หลังการคลิกของ Codify Academy ปุ่ม CTA จะกระโดดออกจากหน้าเนื่องจากสีแดงตัดกับสีอื่นๆ ทั้งหมด:

ภาพนี้แสดงให้นักการตลาดเห็นว่า Codify Academy ใช้สีบอกทิศทางที่ตัดกันอย่างไรเพื่อโน้มน้าวให้ผู้เข้าชมทำ Conversion

การห่อหุ้ม

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

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

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

ทิศทางที่ชัดเจนในหน้า Landing Page หลังการคลิก

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

จ้องตา

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

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

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

หลักฐานทางสังคม (เช่น ข้อความรับรอง) ยังสามารถใช้ประโยชน์จากการจ้องตาดังที่เห็นในหน้าของ When I Work:

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

ชี้หรือทำท่าทาง

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

การวางตำแหน่งวัตถุ

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

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

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

ลูกศร

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

Loud Rumor ใช้ลูกศรที่หยุดนิ่งและวาดด้วยมือในรูปแบบการเลือกรับสองขั้นตอนเพื่อส่งผลต่อการคลิกปุ่ม CTA:

ภาพนี้แสดงให้นักการตลาดทราบถึงวิธีการใช้ลูกศรเป็นแนวทางเพื่อให้ผู้เข้าชมคลิกปุ่ม CTA ของหน้า Landing Page หลังการคลิก

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

ภาพนี้แสดงให้นักการตลาดทราบว่า Constant Contact ใช้ลูกศรบอกทิศทางเพื่อชักชวนผู้เข้าชมให้เลื่อนดูครึ่งหน้าล่าง

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

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

เส้น

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

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

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

โน้มน้าวผู้เข้าชมให้แปลงด้วยสัญญาณบอกทิศทาง

ลองมาอ่านกันที่หน้า Landing Page หลังการคลิกเกือบสมบูรณ์แบบที่เราสรุปไว้ตอนต้น

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

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